/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-2kqggoasz4] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-2kqggoasz4] {
    flex: 1;
    /* Bounded viewport height na WSZYSTKICH szerokościach (nie tylko ≥1300px) — inaczej na tablecie
       (821-1300px) main rósł z treścią i cała strona scrollowała zamiast kontenera wiadomości.
       App-shell: topbar sticky, treść scrolluje wewnątrz. dvh uwzględnia mobilny URL bar. */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.content-wrapper[b-2kqggoasz4] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sidebar[b-2kqggoasz4] {
    background: linear-gradient(180deg, #022c32 0%, #1e4c53 100%);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    /* Tu tylko wjazd szuflady (telefon, tablet). Szerokość na szerokim ekranie animuje osobna reguła
       niżej i WYŁĄCZNIE po kliknięciu przełącznika — do 02.10.2026 stało tu też `width` i `margin-left`,
       czyli każde nałożenie zapamiętanego stanu przy wczytaniu strony miało prawo ruszyć animację. */
    transition: transform 0.22s ease;
    /* Cienki, wtopiony scrollbar zamiast grubego systemowego (na ciemnym tle wygladal brzydko).
       Firefox: scrollbar-width/color; WebKit: pseudo-elementy nizej. Thumb = pojawia sie na hover. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
    /* Miejsce na pasek zarezerwowane zawsze (12.10.2026): bez tego rozwinięcie długiej sekcji zwężało menu
       o szerokość paska i najdłuższe nazwy pozycji łamały się na dwie linie. */
    scrollbar-gutter: stable;
}
.sidebar[b-2kqggoasz4]::-webkit-scrollbar {
    width: 6px;
}
.sidebar[b-2kqggoasz4]::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar[b-2kqggoasz4]::-webkit-scrollbar-thumb {
    /* border+background-clip daje wrazenie waskiego paska z odstepem od krawedzi */
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.sidebar:hover[b-2kqggoasz4]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    background-clip: content-box;
}
.sidebar[b-2kqggoasz4]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.42);
    background-clip: content-box;
}

.sidebar-backdrop[b-2kqggoasz4] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    z-index: 90;
}

#blazor-error-ui[b-2kqggoasz4] {
    color-scheme: light only;
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-2kqggoasz4] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ─── Komputer i tablet (>=768px): sidebar inline w TRZECH stanach (04.10.2026).
       Pełne (230 px, z napisami) — bez klasy; PAS IKON — `sidebar-collapsed`; SCHOWANE — `sidebar-hidden`
       (menu poza oknem, wraca ☰ z górnego paska). Stan jest zapamiętany w localStorage, a gdy go nie ma, wybiera
       go skrypt układu po szerokości okna: >=1440 pełne, niżej pas ikon (nie schowane — właściciel 03.10: „na niektórych
       rozdzielczościach nie ma opcji pokazania menu w formie zwiniętej, tylko schowanej”). Do 04.10 próg szuflady
       wynosił 1300 px i tablet w poziomie oraz laptop 1280 miały menu wyłącznie jako szufladę. ─── */
@media (min-width: 768px) {
    .page[b-2kqggoasz4] {
        flex-direction: row;
        min-height: 100vh;
    }
    .sidebar[b-2kqggoasz4] {
        width: 230px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        /* W trakcie zwijania i rozwijania menu jest przez chwilę węższe niż jego układ — nadmiar ma być
           przycięty, a nie przewijany w bok. W stanie spoczynku nic tu nie wystaje. */
        overflow-x: hidden;
    }
    main[b-2kqggoasz4] {
        flex: 1;
        min-width: 0;
        max-width: calc(100vw - 230px);
        overflow-x: hidden;
        height: 100vh;
        overflow-y: auto;
    }

    /* ── Menu zwinięte = pas ikon (02.10.2026) ──────────────────────────────────────────────────
       Do tego dnia zwinięte menu wyjeżdżało poza ekran (`margin-left: -230px`) i żeby zmienić ekran,
       trzeba je było najpierw rozwinąć. Właściciel po porównaniu z BaseLinkerem: „chowa się do ikonek
       jak w Base — lepszy?”. Teraz zostaje pas o szerokości `--sidebar-pas`: same ikony, każda dalej
       prowadzi tam, gdzie pozycja pełnego menu. Wygląd pozycji w pasie — NavMenu.razor.css.
       ⚠ Treść kończy się ZA pasem (100vw − pas), nie na całym oknie: `max-width: 100vw` przy stojącym
       pasie dałoby poziome przewijanie o jego szerokość. */
    .page.sidebar-collapsed .sidebar[b-2kqggoasz4] {
        width: var(--sidebar-pas, 60px);
        /* Pas przewija się kółkiem i klawiaturą; suwak zabrałby mu 1/7 szerokości i zepchnął ikony z osi. */
        scrollbar-width: none;
    }
    .page.sidebar-collapsed .sidebar[b-2kqggoasz4]::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .page.sidebar-collapsed main[b-2kqggoasz4] {
        max-width: calc(100vw - var(--sidebar-pas, 60px));
    }
    /* Lista firm wysuwa się z pasa NAD treść. Menu (position: sticky) jest własną warstwą i stoi w dokumencie
       przed treścią, więc wszystko w treści, co też jest warstwą (animowane wejście ekranu, przyklejone
       nagłówki), rysowało się NA liście — zmierzone zrzutem 02.10.2026: przez listę prześwitywał nagłówek
       pulpitu. Podnosimy menu tylko na czas otwartej listy: nad elementy ekranów (do 320), pod nakładki (od 900). */
    .page.sidebar-collapsed .sidebar:has(.tenant-switcher-wrap[open])[b-2kqggoasz4] {
        z-index: 400;
    }

    /* ── Menu schowane (04.10.2026): zostaje tylko ☰ w górnym pasku. `visibility: hidden` zdejmuje je też z klawiatury
       i z czytnika — samo zerowe `width` zostawiłoby kilkadziesiąt niewidocznych przystanków Tab. ── */
    .page.sidebar-hidden .sidebar[b-2kqggoasz4] {
        width: 0;
        visibility: hidden;
        scrollbar-width: none;
    }
    .page.sidebar-hidden main[b-2kqggoasz4] {
        max-width: 100vw;
    }

    /* Ruch tylko na życzenie: klasę `sidebar-w-ruchu` dokłada przełącznik (MainLayout.razor) na czas
       przejścia. Stan z localStorage przy wczytaniu wchodzi bez niej — strona nie może narysować
       pełnego menu i dopiero je zwinąć. Treść dostaje TEN SAM czas i krzywą, żeby przy rozwijaniu
       po prawej nie zostawał pusty pas (jej `max-width` zmienia się skokiem, szerokość menu płynnie). */
    /* 0,16 s, nie równe 0,2: zmierzone klatka po klatce przejście trwa o jedną–dwie klatki dłużej niż
       zapisane (przy 0,18 s wyszło 187–213 ms), a ma się zmieścić w 200 ms. */
    .page.sidebar-w-ruchu .sidebar[b-2kqggoasz4] {
        transition: width 0.16s ease;
    }
    /* Chowanie: menu znika dopiero po zwężeniu (visibility przeskakuje po czasie przejścia). */
    .page.sidebar-w-ruchu.sidebar-hidden .sidebar[b-2kqggoasz4] {
        transition: width 0.16s ease, visibility 0s linear 0.16s;
    }
    .page.sidebar-w-ruchu main[b-2kqggoasz4] {
        transition: max-width 0.16s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page.sidebar-w-ruchu .sidebar[b-2kqggoasz4],
    .page.sidebar-w-ruchu main[b-2kqggoasz4] {
        transition: none;
    }
}

/* ── Dymek z nazwą pozycji w pasie ikon ─────────────────────────────────────────────────────────
   Jeden element na całe menu; tekst i położenie ustawia skrypt układu przy najechaniu albo wejściu
   klawiaturą. Stoi w układzie, a nie w menu, bo menu przycina wszystko, co wystaje w bok (przewija
   się w pionie), a `position: fixed` wychodzi poza to przycięcie. Tylko dla oka (`aria-hidden`) —
   czytnik bierze nazwę z samej pozycji. Kolory z tokenów menu: ten sam ciemny zielony, biały tekst. */
.menu-dymek[b-2kqggoasz4] {
    position: fixed;
    /* Nad kartą-zaproszeniem oprowadzenia (940), która stoi tuż przy pasie i zasłaniała dymek konta
       (zmierzone zrzutem 02.10.2026); pod przyciemnieniem trasy (960) i pod oknami. */
    z-index: 945;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 280px;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    background: var(--p4);
    color: var(--text-light);
    border: 1px solid color-mix(in srgb, var(--text-light) 16%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--p3) 34%, transparent);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
}
/* `display: flex` wyżej przykryłoby domyślne ukrycie atrybutem — a dymek rodzi się schowany. */
.menu-dymek[hidden][b-2kqggoasz4] {
    display: none;
}
.menu-dymek[b-2kqggoasz4]::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background: inherit;
    border-left: inherit;
    border-bottom: inherit;
    transform: rotate(45deg);
}
.menu-dymek-nazwa[b-2kqggoasz4] {
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Dopisek pod nazwą konta („Profil i ustawienia”) — ciszej niż nazwa, jak w pełnym menu. */
.menu-dymek-opis[b-2kqggoasz4] {
    flex: none;
    font-weight: 400;
    color: color-mix(in srgb, var(--text-light) 62%, transparent);
}
/* Licznik w dymku — ta sama pigułka i te same dwa kolory, co przy pozycji w pełnym menu. */
.menu-dymek-licznik[b-2kqggoasz4] {
    flex: none;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-light) 16%, transparent);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
.menu-dymek-licznik.uwaga[b-2kqggoasz4] {
    background: var(--danger);
}

/* ─── Telefon (<768px): sidebar HIDDEN by default (overlay drawer).
       Optional class `sidebar-open-mobile` shows it with backdrop.
       Default-without-class = sensible state, so JS render timing doesn't matter. ─── */
@media (max-width: 767.98px) {
    .page[b-2kqggoasz4] {
        flex-direction: column;
        /* height (NIE min-height) — .page ograniczone do viewportu, żeby main (flex:1) wypełnił ekran
           i scrollował WEWNĄTRZ (app-shell). Z min-height .page rosło z treścią → cała strona scrollowała,
           a lista wiadomości nie miała własnego scrolla. dvh uwzglednia mobilny URL bar. */
        height: 100vh;
        height: 100dvh;
    }
    .sidebar[b-2kqggoasz4] {
        position: fixed;
        top: 0; left: 0;
        width: 260px;
        height: 100vh;       /* fallback dla starych przeglądarek */
        height: 100dvh;      /* nowoczesne — uwzglednia mobile URL bar */
        z-index: 100;
        transform: translateX(-100%);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    .page.sidebar-open-mobile .sidebar[b-2kqggoasz4] {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    }
    .page.sidebar-open-mobile .sidebar-backdrop[b-2kqggoasz4] {
        display: block;
    }
    main[b-2kqggoasz4] {
        flex: 1;
        min-width: 0;
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* Old toggler (Bootstrap-clone in NavMenu) — hidden, replaced by topbar hamburger */
[b-2kqggoasz4] .navbar-toggler { display: none !important; }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-9lrca5jz97] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    z-index: 2;
}
.navbar-toggler:hover[b-9lrca5jz97] {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}
.navbar-toggler:checked[b-9lrca5jz97] {
    background-color: color-mix(in srgb, var(--global-palette1) 30%, transparent);
    border-color: #009244;
}

.top-row[b-9lrca5jz97] {
    min-height: 3.5rem;
    background: linear-gradient(135deg, #022c32 0%, #1e4c53 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-bottom: 2px solid #009244;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
}

.navbar-brand[b-9lrca5jz97] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
.navbar-brand:hover[b-9lrca5jz97] { color: #c1d11c !important; transform: translateX(2px); }
.brand-icon[b-9lrca5jz97] {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    flex-shrink: 0;
}

.bi[b-9lrca5jz97] {
    display: inline-block;
    position: relative;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.7rem;
    top: -1px;
    background-size: cover;
    flex-shrink: 0;
}

.bi-house-nav-menu[b-9lrca5jz97]       { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); }
.bi-list-nav-menu[b-9lrca5jz97]        { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E"); }
.bi-download-nav-menu[b-9lrca5jz97]    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5'/%3E%3Cpath d='M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z'/%3E%3C/svg%3E"); }
.bi-clock-nav-menu[b-9lrca5jz97]       { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E"); }
.bi-person-add-nav-menu[b-9lrca5jz97]  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zM13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E"); }
.bi-people-nav-menu[b-9lrca5jz97]      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0M6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816M4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4'/%3E%3C/svg%3E"); }
.bi-grid-nav-menu[b-9lrca5jz97]        { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E"); }
.bi-graph-nav-menu[b-9lrca5jz97]       { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z'/%3E%3C/svg%3E"); }
.bi-shield-nav-menu[b-9lrca5jz97]      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 63 63 0 0 1 5.072.56'/%3E%3C/svg%3E"); }
.bi-logout-nav-menu[b-9lrca5jz97]      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0z'/%3E%3Cpath fill-rule='evenodd' d='M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z'/%3E%3C/svg%3E"); }
.bi-person-fill-nav-menu[b-9lrca5jz97] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E"); }

.nav-section-header[b-9lrca5jz97] {
    color: #8b9aab;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.7rem 1rem 0.25rem;
    margin: 0;
}

.nav-item[b-9lrca5jz97] {
    font-size: 0.92rem;
    padding: 0 0.5rem;
}

.nav-item[b-9lrca5jz97]  .nav-link {
    color: #EDF2F7;
    background: none;
    border: none;
    border-radius: 8px;
    height: 2.4rem;
    display: flex;
    align-items: center;
    line-height: 1.2;
    width: 100%;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    padding: 0 0.75rem;
}
.nav-item[b-9lrca5jz97]  .nav-link::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    height: 100%; width: 0;
    background: linear-gradient(90deg, #009244 0%, #c1d11c 100%);
    transition: width 0.3s ease;
    border-radius: 8px 0 0 8px;
}
.nav-item[b-9lrca5jz97]  .nav-link:hover::before { width: 4px; }
.nav-item[b-9lrca5jz97]  a.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--global-palette1) 18%, transparent) 0%, rgba(193,209,28,0.10) 100%);
    color: #c1d11c;
    font-weight: 600;
    border-left: 4px solid #009244;
}
.nav-item[b-9lrca5jz97]  a.active .bi { transform: scale(1.1); }
.nav-item[b-9lrca5jz97]  .nav-link:hover {
    background-color: rgba(255,255,255,0.08);
    color: #ffffff;
}

.nav-item[b-9lrca5jz97]  button.nav-link {
    cursor: pointer;
    text-align: left;
}

.nav-scrollable[b-9lrca5jz97] {
    display: none;
    background: linear-gradient(180deg, #111317 0%, #1e4c53 100%);
    flex: 1;
    overflow-y: auto;
}

.navbar-toggler:checked ~ .nav-scrollable[b-9lrca5jz97] { display: block; }

@media (min-width: 641px) {
    .navbar-toggler[b-9lrca5jz97] { display: none; }
    .nav-scrollable[b-9lrca5jz97] {
        display: flex;
        flex-direction: column;
        height: auto;
        flex: 1;
        overflow-y: auto;
        background: transparent;
    }
}

.user-card[b-9lrca5jz97] {
    margin-top: auto;
    padding: 0.85rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.user-card .user-name[b-9lrca5jz97] { color: #c1d11c; font-weight: 600; }
.user-card .user-role[b-9lrca5jz97] { color: rgba(255,255,255,0.55); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ─── ABCare-specific sidebar elements ─── */
.sidebar-brand[b-9lrca5jz97] {
    min-height: 3.5rem;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(135deg, #022c32 0%, #1e4c53 100%);
    border-bottom: 2px solid #009244;
    flex: none;
}
/* Odnośnik obejmuje znak i nazwę; ma być celem dla palca i dla myszy, więc rozciąga się
   na oba i nie zmienia wyglądu paska. */
.sidebar-brand-link[b-9lrca5jz97] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    padding: 0.15rem 0.25rem;
    margin: -0.15rem -0.25rem;
}
.sidebar-brand-link:hover[b-9lrca5jz97] { background: rgba(255, 255, 255, 0.08); }
.sidebar-brand-link:focus-visible[b-9lrca5jz97] { outline: 2px solid #c1d11c; outline-offset: 2px; }

.sidebar-brand .logo-mark[b-9lrca5jz97] {
    width: 30px;
    height: 30px;
    background: #13211a;
    border-radius: 7px;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    flex: none;
}
.sidebar-brand .logo-mark svg[b-9lrca5jz97] {
    width: 18px;
    height: 18px;
}
.sidebar-brand .brand-text[b-9lrca5jz97] {
    font-family: 'Instrument Serif', serif;
    font-size: 1.35rem;
    color: #fff;
    letter-spacing: -0.01em;
}
.sidebar-brand .brand-text em[b-9lrca5jz97] {
    color: #c1d11c;
    font-style: italic;
}

/* Close (X) button — visible only on mobile/tablet drawer */
.sidebar-close[b-9lrca5jz97] {
    margin-left: auto;
    width: 36px; height: 36px;
    display: none;
    place-items: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}
.sidebar-close:hover[b-9lrca5jz97] { background: rgba(255,255,255,0.08); color: #fff; }
/* „Schowaj menu” — tylko komputer i tablet (reguły wyświetlania w bloku szerokiego ekranu niżej). */
.menu-schowaj[b-9lrca5jz97] {
    display: none;
    place-items: center;
    width: 30px; height: 30px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.menu-schowaj:hover[b-9lrca5jz97] { background: rgba(255, 255, 255, 0.08); color: #fff; }
.menu-schowaj:focus-visible[b-9lrca5jz97] { outline: 2px solid #c1d11c; outline-offset: 1px; }
.menu-schowaj svg[b-9lrca5jz97] {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sidebar-close svg[b-9lrca5jz97] {
    width: 20px; height: 20px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 767.98px) {
    .sidebar-close[b-9lrca5jz97] { display: grid; }
}

.tenant-switcher[b-9lrca5jz97] {
    margin: 0.75rem 1rem 0.5rem;
    padding: 0.55rem 0.7rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12.5px;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}
.tenant-switcher:hover[b-9lrca5jz97] {
    background: rgba(255, 255, 255, 0.10);
}
.tenant-switcher .ts-avatar[b-9lrca5jz97] {
    width: 22px;
    height: 22px;
    background: #c1d11c;
    color: #022c32;
    border-radius: 4px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 10.5px;
    flex: none;
}
.tenant-switcher .ts-name[b-9lrca5jz97] {
    flex: 1;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tenant-switcher .ts-chevron[b-9lrca5jz97] {
    opacity: 0.5;
    font-size: 11px;
}

/* ── Kolory nawigacyjne sekcji (N2b, 18.09.2026) ──────────────────────────────────────────
   Każda sekcja ma własny kolor (`--sekcja`, z tokenów AB — bez nowych hexów): etykieta dostaje kwadrat
   w tym kolorze, ikona sekcji zwijanej jest w tym kolorze, a POZYCJA AKTYWNA bierze tło, tekst i pasek
   z koloru swojej sekcji. „Praca" zostaje limonkowa (dotychczasowy kolor aktywnej pozycji), więc
   najczęstszy ekran nie zmienia wyglądu — reszta przestaje być „wszystko w jednym odcieniu". */
.nav-section[b-9lrca5jz97] {
    padding: 0.75rem 0.65rem 0.25rem;
    --sekcja: var(--global-palette2);
}
.nav-section[data-sekcja="praca"][b-9lrca5jz97]       { --sekcja: var(--global-palette2); }
.nav-section[data-sekcja="poczta"][b-9lrca5jz97]      { --sekcja: color-mix(in srgb, var(--info) 70%, white); }
.nav-section[data-sekcja="obsluga"][b-9lrca5jz97]     { --sekcja: color-mix(in srgb, var(--warn) 80%, white); }
.nav-section[data-sekcja="zarzadzanie"][b-9lrca5jz97] { --sekcja: color-mix(in srgb, var(--global-palette6) 45%, white); }
.nav-section[data-sekcja="raporty"][b-9lrca5jz97]     { --sekcja: color-mix(in srgb, var(--global-palette1) 55%, white); }
.nav-section[data-sekcja="ustawienia"][b-9lrca5jz97],
.nav-section[data-sekcja="dziennik"][b-9lrca5jz97]    { --sekcja: rgba(255, 255, 255, 0.7); }
.nav-section-label[b-9lrca5jz97]::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 2px;
    background: var(--sekcja);
    margin-right: 0.45rem;
    vertical-align: 1px;
}
.nav-section-summary .nav-section-icon[b-9lrca5jz97] { color: var(--sekcja); }
.nav-section-label[b-9lrca5jz97] {
    padding: 0.25rem 0.7rem 0.5rem;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
}

/* ⚠ Nazwa pozycji ZAWSZE w jednej linii (12.10.2026). Właściciel przysłał zrzut: „Dotrzymywanie terminów”
   złamane na dwie linie — działo się to, gdy menu dostało pasek przewijania (rozwinięte „Ustawienia”), bo pasek
   zabierał 8 px z szerokości, na którą najdłuższe nazwy były skrojone co do piksela. Dlatego: zakaz łamania tutaj,
   miejsce na pasek zarezerwowane na stałe (`scrollbar-gutter` przy `.sidebar` w MainLayout.razor.css), a odstępy
   po bokach o kilka pikseli mniejsze. Wielokropek niżej to tylko bezpiecznik dla nazwy dłuższej niż dzisiejsze —
   plik kroków 32 pilnuje, że żadna nazwa nie jest ucięta. */
.nav-section[b-9lrca5jz97]  .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.5rem;
    margin: 1px 0;
    height: 2.2rem;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.18s;
}
.nav-section[b-9lrca5jz97]  .nav-link > span:not(.nav-licznik):not(.bi) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-section[b-9lrca5jz97]  .nav-link::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    height: 100%; width: 0;
    background: linear-gradient(90deg, #009244 0%, #c1d11c 100%);
    transition: width 0.25s;
    border-radius: 6px 0 0 6px;
}
.nav-section[b-9lrca5jz97]  .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}
.nav-section[b-9lrca5jz97]  .nav-link:hover::before {
    width: 3px;
}
.nav-section[b-9lrca5jz97]  .nav-link.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--sekcja) 20%, transparent) 0%, color-mix(in srgb, var(--sekcja) 6%, transparent) 100%);
    color: var(--sekcja);
    font-weight: 500;
}
.nav-section[b-9lrca5jz97]  .nav-link.active::before {
    width: 4px;
    background: var(--sekcja);
}
.nav-section[b-9lrca5jz97]  .nav-link.active .nav-link-icon { color: var(--sekcja); }

/* ─── Inline SVG icons w nav-link (zamiast bi-* classes z hardcoded ikona) ─── */
.nav-section[b-9lrca5jz97]  .nav-link-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}

/* ─── Collapsible nav section (HTML <details>) ─── */
.nav-collapsible[b-9lrca5jz97] {
    padding: 0;
    margin: 0.5rem 0.65rem;
}
.nav-collapsible[open][b-9lrca5jz97] { padding-bottom: 0.5rem; }
.nav-section-summary[b-9lrca5jz97] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    list-style: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}
.nav-section-summary[b-9lrca5jz97]::-webkit-details-marker { display: none; }
.nav-section-summary:hover[b-9lrca5jz97] {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.04);
}
.nav-section-icon[b-9lrca5jz97] {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.nav-section-chev[b-9lrca5jz97] {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    margin-left: auto;
    transition: transform 0.2s;
}
.nav-collapsible[open] .nav-section-chev[b-9lrca5jz97] {
    transform: rotate(180deg);
}
.nav-section-body[b-9lrca5jz97] {
    padding-top: 0.25rem;
}

.nav-account[b-9lrca5jz97] {
    margin-top: auto;
    padding: 0.75rem 0.65rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    /* Sticky bottom — bez tego na mobile gdy menu jest dluzsze niż viewport,
       nav-account schowane na dole listy i user musi scrollowac. Sticky przykleja
       avatar+logout zawsze widoczne nad scroll content. */
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg,
                                color-mix(in srgb, var(--p4) 0%, transparent) 0%,
                                var(--p4) 35%,
                                var(--p4) 100%);
    backdrop-filter: blur(4px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.nav-account[b-9lrca5jz97]  .nav-user {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    min-width: 0;
    transition: background 0.15s;
}
.nav-account[b-9lrca5jz97]  .nav-user:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}
.nav-account .user-avatar[b-9lrca5jz97] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff8a4c, #c4392f);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 11px;
    flex: none;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.1);
}
.nav-account .user-line[b-9lrca5jz97] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.nav-account .user-name[b-9lrca5jz97] {
    font-size: 12.5px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-account .user-line small[b-9lrca5jz97] {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 1px;
}
.abc-theme-toggle[b-9lrca5jz97] {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    flex: none;
    font-size: 16px;
    line-height: 1;
}
.abc-theme-toggle:hover[b-9lrca5jz97] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.abc-theme-toggle .abc-theme-label[b-9lrca5jz97] { display: none; }  /* tylko ikona w sidebar */
.abc-theme-toggle .abc-theme-icon-light[b-9lrca5jz97],
.abc-theme-toggle .abc-theme-icon-dark[b-9lrca5jz97] {
    line-height: 1;
}

.logout-form[b-9lrca5jz97] {
    margin: 0;
}
.logout-btn[b-9lrca5jz97] {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    flex: none;
}
.logout-btn:hover[b-9lrca5jz97] {
    background: rgba(196, 57, 47, 0.18);
    color: #ff8a8a;
}
.logout-btn .bi[b-9lrca5jz97] {
    margin: 0;
}

/* ─── Tenant dropdown (HTML <details>) ─── */
.tenant-switcher-wrap[b-9lrca5jz97] {
    margin: 0.75rem 1rem 0.5rem;
    position: relative;
}
.tenant-switcher-wrap[open] > summary .ts-chevron[b-9lrca5jz97] { transform: rotate(180deg); }
.tenant-switcher-wrap > summary[b-9lrca5jz97] {
    list-style: none;
    cursor: pointer;
}
.tenant-switcher-wrap > summary[b-9lrca5jz97]::-webkit-details-marker { display: none; }
.tenant-switcher-wrap > .tenant-switcher[b-9lrca5jz97] {
    margin: 0;
    width: 100%;
}
.tenant-switcher-wrap > .tenant-switcher .ts-chevron[b-9lrca5jz97] {
    transition: transform 0.2s;
    display: inline-block;
}
.tenant-switcher.tenant-static[b-9lrca5jz97] {
    cursor: default;
}
.tenant-switcher.tenant-static:hover[b-9lrca5jz97] {
    background: rgba(255, 255, 255, 0.06);
}

/* __support panel obsługi context card — kompaktowy info-block + CTA do /support/tenants.
   Zastępuje sytuacyjny .tenant-switcher dla supportu (długie nazwy klientów łamały się
   w pojedynczym horizontal chip). */
.support-context-card[b-9lrca5jz97] {
    margin: 0.75rem 1rem 0.5rem;
    padding: 0.65rem 0.8rem 0.7rem;
    background: linear-gradient(180deg, rgba(193, 209, 28, 0.10), rgba(193, 209, 28, 0.03));
    border: 1px solid rgba(193, 209, 28, 0.30);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.support-context-card .scc-label[b-9lrca5jz97] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #c1d11c;
    opacity: 0.85;
}
.support-context-card .scc-tenant[b-9lrca5jz97] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.support-context-card .scc-tenant-avatar[b-9lrca5jz97] {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: #c1d11c;
    color: #022c32;
    font-weight: 700;
    font-size: 10.5px;
    display: grid;
    place-items: center;
}
.support-context-card .scc-tenant-name[b-9lrca5jz97] {
    flex: 1;
    min-width: 0;
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.support-context-card .scc-cta[b-9lrca5jz97] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.6rem;
    border-radius: 5px;
    background: rgba(193, 209, 28, 0.14);
    border: 1px solid rgba(193, 209, 28, 0.35);
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
}
.support-context-card .scc-cta:hover[b-9lrca5jz97] {
    background: rgba(193, 209, 28, 0.25);
    border-color: rgba(193, 209, 28, 0.55);
    text-decoration: none;
}
.support-context-card .scc-cta svg[b-9lrca5jz97] {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex: none;
}
.support-context-card .scc-cta span[b-9lrca5jz97] {
    flex: 1;
}
.support-context-card .scc-cta strong[b-9lrca5jz97] {
    color: #c1d11c;
    font-weight: 600;
}
.support-context-card .scc-cta .scc-arrow[b-9lrca5jz97] {
    opacity: 0.7;
}

.tenant-dropdown[b-9lrca5jz97] {
    margin-top: 0.35rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tenant-dropdown-form[b-9lrca5jz97] { margin: 0; }
.tenant-dropdown-item[b-9lrca5jz97] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12.5px;
    cursor: pointer;
    text-align: left;
    transition: all 0.12s;
}
.tenant-dropdown-item:hover[b-9lrca5jz97] {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.tenant-dropdown-item.active[b-9lrca5jz97] {
    background: linear-gradient(90deg, color-mix(in srgb, var(--global-palette1) 22%, transparent) 0%, rgba(193, 209, 28, 0.06) 100%);
    color: #c1d11c;
    font-weight: 500;
}
.tenant-dropdown-item .td-avatar[b-9lrca5jz97] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: #c1d11c;
    color: #022c32;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 9px;
    flex: none;
}
.tenant-dropdown-item .td-name[b-9lrca5jz97] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tenant-dropdown-item .td-check[b-9lrca5jz97] {
    color: #c1d11c;
    font-size: 13px;
}

/* Liczniki nieprzeczytanych przy pozycjach "Poczta" i "Zgłoszenia".
   Liczbe podaje serwer - przy wejsciu i po kazdej zmianie w skrzynce firmy (NavMenu.razor, OnInboxChanged);
   przegladarka poprawia ja tylko na chwile, zanim serwer odpowie (abc-realtime.js). */
/* Liczniki przy pozycjach jako pigułki (N2b): neutralna = nieprzeczytane, `uwaga` = po terminie (czerwień). */
.nav-licznik[b-9lrca5jz97] {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
    flex: none;
    font-variant-numeric: tabular-nums;
}
.nav-licznik-uwaga[b-9lrca5jz97] {
    background: var(--danger);
    color: var(--text-light);
}
/* Dwie pigułki przy jednej pozycji („Zgłoszenia”: po terminie + nieprzeczytane, 11.10.2026). Do prawej krawędzi
   dosuwa się pierwsza (margines `auto` z reguły wyżej); druga staje tuż za nią. Bez tej reguły obie miałyby
   margines `auto` i wolne miejsce podzieliłoby się między nie — czerwona wylądowałaby w połowie pozycji.
   Kolejność: czerwona, potem neutralna — przy prawej krawędzi stoi wtedy jedna kolumna liczb nieprzeczytanych
   („Zgłoszenia” nad „Pocztą”), a „po terminie” dochodzi obok. */
.nav-licznik-uwaga + .nav-licznik-nowe[b-9lrca5jz97] {
    margin-left: 0.3rem;
}

/* ⚠ MENU BOCZNE TO NAJCZĘŚCIEJ DOTYKANA RZECZ W CAŁEJ APLIKACJI — a jego pozycje miały
   2,4 rem, czyli 38,4 px: o półtora piksela pod regułą domu. Zmierzone przyrządem Q
   (21.09.2026, 390×844): „nav-link 242×31" wracało jako pierwszy przykład celu poniżej
   czterdziestu na KAŻDYM z sześciu ekranów. Piksel i pół nie brzmi jak usterka, dopóki
   nie policzy się, ile razy dziennie ktoś celuje w tę listę palcem.
   Na myszy zostaje jak było: tam gęstość menu jest zaletą. */
@media (pointer: coarse) {
    /* ⚠ DWA SELEKTORY, bo pozycje menu mają dwa rodzice: `.nav-item` (sekcja główna)
       i `.nav-section` (podsekcje). Pierwsza wersja tej reguły (01:06) poprawiła tylko
       pierwszy z nich — a mierzone „nav-link 242×31" brało wysokość z drugiego,
       więc przyrząd po wydaniu pokazał dokładnie tę samą liczbę co przed nim.
       Poprawka, której nie widać w pomiarze, nie jest poprawką. */
    /* ⚠ PIKSELE, NIE `rem` — i to jest trzecia poprawka tego samego miejsca. `html` ma
       `font-size: 14px`, wiec 2,6 rem to 36,4 px, nie 41,6. Przyrzad po wydaniu 23
       pokazal „nav-link 242x36": poprawka zadzialala i dalej nie dowiozla progu.
       Gdzie celem jest KONKRETNA liczba pikseli pod palec, jednostka wzgledna wprowadza
       w blad tego, kto ja czyta. */
    .nav-item[b-9lrca5jz97]  .nav-link,
    .nav-section[b-9lrca5jz97]  .nav-link { height: auto; min-height: 40px; }
    .nav-section-label[b-9lrca5jz97] { min-height: 1.6rem; }
    /* Odnośnik „pomiń nawigację" i krzyżyk zamykający szufladę — też palcem. */
    .sidebar-close[b-9lrca5jz97] { min-height: 40px; min-width: 40px; }
    /* Naglowki sekcji menu SA klikalne (rozwijaja sekcje) — wiec sa celem dotykowym
       tak samo jak pozycje pod nimi, a mialy 30 px. */
    .nav-section-summary[b-9lrca5jz97] { min-height: 40px; box-sizing: border-box; }
    /* Wylogowanie na dole szuflady — 32 px to najmniejszy cel w calym menu, a akcja
       jest nieodwracalna w tym sensie, ze trzeba logowac sie od nowa. */
    .logout-btn[b-9lrca5jz97] { min-height: 40px; min-width: 40px; }
}

/* Pozycja podmenu (K3b: „W serwisie” pod „Zgłoszeniami”) — w pełnym menu wcięta i o ton cichsza, żeby czytała się
   jako część pozycji wyżej. W pasie ikon wcięcia nie ma (reguły pasa niżej są mocniejsze) — tam to zwykła ikona. */
.nav-section[b-9lrca5jz97]  .nav-link.nav-link-pod {
    padding-left: 1.75rem;
    font-size: 12.5px;
}
.nav-section[b-9lrca5jz97]  .nav-link.nav-link-pod .nav-link-icon { width: 16px; height: 16px; }

/* Plakietka tylko dla pasa ikon: liczby, które w pełnym menu stoją w nawiasie w napisie („Niezawodność (3)”).
   W pełnym menu i w szufladzie jej nie ma — napis już tę liczbę niesie. */
.nav-licznik-pas[b-9lrca5jz97] { display: none; }

/* ══ PAS IKON — menu zwinięte na szerokim ekranie (02.10.2026) ══════════════════════════════════════
   Właściciel po porównaniu z BaseLinkerem: „samo menu u nas się chowa całe, może pomysł, że chowa się
   do ikonek jak w Base, lepszy?”. Zwinięte menu zostaje więc jako pas o szerokości `--sidebar-pas`
   (app.css): to samo menu — ten sam gradient, te same ikony, ten sam kolor sekcji na pozycji bieżącej —
   tylko bez napisów. Szerokość pasa i przejście ustawia MainLayout.razor.css; tutaj jest wygląd pozycji.

   Trzy zasady, których pilnuje MenuZwinieteJestPasemIkonTests:
   • napis pozycji jest PRZYCIĘTY do piksela, a nie usunięty (`display: none` zabrałoby nazwę czytnikowi
     ekranu i klawiaturze); nazwę dla oka pokazuje dymek z układu (#menu-dymek);
   • licznik zostaje jako plakietka w rogu ikony, w swoim kolorze;
   • wszystko stoi w bloku szerokiego ekranu — telefon i tablet mają szufladę jak dotąd.

   Sekcje zwijane (Raporty, Ustawienia, Poczta e-mail, Niezawodność) zachowują się w pasie tak samo jak
   w pełnym menu: nagłówek jest ikoną ze strzałką i rozwija pozycje sekcji w miejscu. Stan zwinięcia
   jest JEDEN dla obu widoków — „zawsze rozwinięte” dawałoby pas z blisko 50 ikonami, z których
   kilkanaście wygląda tak samo (trzy kalendarze, trzy metki, dwie tarcze). */
@media (min-width: 768px) {
    /* ── Przyciski „Schowaj menu” (04.10.2026): w pełnym menu w wierszu znaku ABCare, w pasie przy koncie na dole.
       Chowają menu do samego ☰; ☰ pokazuje je z powrotem w poprzednim kształcie. ── */
    .page:not(.sidebar-collapsed) .menu-schowaj-pelne[b-9lrca5jz97] {
        display: grid;
        margin-left: auto;
    }
    .page.sidebar-collapsed .menu-schowaj-pas[b-9lrca5jz97] {
        display: grid;
        width: 40px;
        height: 28px;
        margin: 0 auto;
    }

    /* ── Rozwijanie: układ pełnego menu stoi od pierwszej klatki, a rosnący pas tylko go odsłania.
       Bez tego napisy dwuwyrazowe („Dotrzymywanie terminów”) łamią się na pół na czas przejścia i przeskakują. */
    .page.sidebar-w-ruchu:not(.sidebar-collapsed) .sidebar-brand[b-9lrca5jz97],
    .page.sidebar-w-ruchu:not(.sidebar-collapsed) .nav-section[b-9lrca5jz97],
    .page.sidebar-w-ruchu:not(.sidebar-collapsed) .nav-account[b-9lrca5jz97] { min-width: 214px; }
    .page.sidebar-w-ruchu:not(.sidebar-collapsed) .nav-collapsible[b-9lrca5jz97] { min-width: 196px; }
    .page.sidebar-w-ruchu:not(.sidebar-collapsed) .tenant-switcher[b-9lrca5jz97],
    .page.sidebar-w-ruchu:not(.sidebar-collapsed) .tenant-switcher-wrap[b-9lrca5jz97],
    .page.sidebar-w-ruchu:not(.sidebar-collapsed) .support-context-card[b-9lrca5jz97] { min-width: 186px; }
    /* Pozycje mają własne `transition: all` (podświetlenie pod myszą). Przy przełączeniu menu animowałoby ono
       także ich odstępy: ikony zjeżdżały o 10,5 px już po tym, jak układ stanął (zmierzone klatka po klatce,
       02.10.2026) — także przy „ogranicz ruch”. Na czas przełączenia wyłączone. */
    .page.sidebar-w-ruchu .nav-section[b-9lrca5jz97]  .nav-link { transition: none; }

    /* ── Znak ABCare: sam znak, wyśrodkowany. Nazwę odnośnika niesie aria-label. ── */
    .page.sidebar-collapsed .sidebar-brand[b-9lrca5jz97] {
        width: var(--sidebar-pas, 60px);
        padding: 0;
        justify-content: center;
    }
    .page.sidebar-collapsed .sidebar-brand-link[b-9lrca5jz97] { gap: 0; }
    .page.sidebar-collapsed .sidebar-brand .brand-text[b-9lrca5jz97] { display: none; }

    /* ── Przełącznik firmy: sam znak firmy. Kliknięcie robi to, co w pełnym menu — przy kilku firmach
       otwiera listę, która w pasie wysuwa się OBOK niego (niżej), bo w 60 px się nie zmieści. ── */
    /* ⚠ Margines boczny POLICZONY, nie `auto`: w trakcie zwijania menu jest jeszcze szerokie, a `auto`
       środkowałoby znak firmy w tej chwilowej szerokości — zjeżdżałby ze środka do lewej, podczas gdy
       reszta pasa stoi już na miejscu. */
    .page.sidebar-collapsed .tenant-switcher-wrap[b-9lrca5jz97] {
        width: 40px;
        margin: 0.6rem calc((var(--sidebar-pas, 60px) - 40px) / 2) 0.3rem;
    }
    .page.sidebar-collapsed .tenant-switcher[b-9lrca5jz97] {
        position: relative;
        /* Menu jest kolumną flex, która się przewija — bez tego pole kurczy się do samego znaku (28 px). */
        flex: none;
        width: 40px;
        height: 40px;
        margin: 0.6rem calc((var(--sidebar-pas, 60px) - 40px) / 2) 0.3rem;
        padding: 0;
        gap: 0;
        justify-content: center;
    }
    .page.sidebar-collapsed .tenant-switcher-wrap > .tenant-switcher[b-9lrca5jz97] { margin: 0; }
    .page.sidebar-collapsed .tenant-switcher .ts-avatar[b-9lrca5jz97] {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        font-size: 11px;
    }
    .page.sidebar-collapsed .tenant-switcher .ts-name[b-9lrca5jz97] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .page.sidebar-collapsed .tenant-switcher .ts-chevron[b-9lrca5jz97] { display: none; }
    /* Lista firm obok pasa. `position: fixed` wychodzi poza przycięcie menu; położenie i wysokość
       dopasowuje do znaku firmy skrypt układu (gdy pas jest przewinięty), a te wartości są stanem
       wyjściowym dla pasa nieprzewiniętego — lista nie miga w złym miejscu, zanim skrypt ją ustawi. */
    .page.sidebar-collapsed .tenant-dropdown[b-9lrca5jz97] {
        position: fixed;
        left: calc(var(--sidebar-pas, 60px) + 6px);
        top: calc(3.5rem + 0.6rem);
        /* Tylko porządek WEWNĄTRZ menu (nad przyklejonym kontem, z-index 2). Nad treść ekranu wynosi listę
           samo menu — MainLayout.razor.css podnosi je na czas otwartej listy. */
        z-index: 5;
        width: 240px;
        max-height: calc(100vh - 3.5rem - 1.6rem);
        overflow-y: auto;
        margin: 0;
        background: var(--p4);
        border-color: color-mix(in srgb, var(--text-light) 16%, transparent);
        box-shadow: 0 10px 28px color-mix(in srgb, var(--p3) 38%, transparent);
    }

    /* ── Karta sesji wsparcia: znak firmy, w której obsługa pracuje, i pod nim wejście do listy firm.
       Limonkowa ramka zostaje — to ona mówi „jesteś w panelu obsługi”. ── */
    .page.sidebar-collapsed .support-context-card[b-9lrca5jz97] {
        width: 44px;
        margin: 0.6rem calc((var(--sidebar-pas, 60px) - 44px) / 2) 0.3rem;
        padding: 6px 0;
        gap: 5px;
        align-items: center;
    }
    .page.sidebar-collapsed .support-context-card .scc-label[b-9lrca5jz97] { display: none; }
    .page.sidebar-collapsed .support-context-card .scc-tenant[b-9lrca5jz97] {
        position: relative;
        justify-content: center;
        gap: 0;
    }
    .page.sidebar-collapsed .support-context-card .scc-tenant-name[b-9lrca5jz97],
    .page.sidebar-collapsed .support-context-card .scc-cta span[b-9lrca5jz97] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        flex: none;
    }
    .page.sidebar-collapsed .support-context-card .scc-cta[b-9lrca5jz97] {
        position: relative;
        width: 32px;
        height: 28px;
        padding: 0;
        gap: 0;
        justify-content: center;
    }
    .page.sidebar-collapsed .support-context-card .scc-cta .scc-arrow[b-9lrca5jz97] { display: none; }

    /* ── Sekcje: kreska w kolorze sekcji zamiast napisu. Napis zostaje dla czytnika (wypchnięty
       wcięciem poza kreskę, nie usunięty). ── */
    .page.sidebar-collapsed .nav-section[b-9lrca5jz97] {
        width: var(--sidebar-pas, 60px);
        padding: 0.4rem 0 0.15rem;
    }
    .page.sidebar-collapsed .nav-section-label[b-9lrca5jz97] {
        width: 22px;
        height: 1px;
        min-height: 0;
        margin: 0.15rem auto 0.45rem;
        padding: 0;
        overflow: hidden;
        white-space: nowrap;
        text-indent: 200%;
        background: color-mix(in srgb, var(--sekcja) 55%, transparent);
    }
    .page.sidebar-collapsed .nav-section-label[b-9lrca5jz97]::before { display: none; }
    /* „Panel obsługi” w nagłówku sekcji wsparcia jest odnośnikiem — w kresce byłby niewidocznym
       przystankiem klawiatury. Tę samą trasę ma pozycja „Wszystko naraz” tuż pod nim. */
    .page.sidebar-collapsed .nav-section-label a[b-9lrca5jz97] { visibility: hidden; }

    /* ── Pozycja: ikona w polu 40×36, wyśrodkowana. ── */
    .page.sidebar-collapsed .nav-section[b-9lrca5jz97]  .nav-link {
        width: 40px;
        height: 36px;
        margin: 2px auto;
        padding: 0;
        gap: 0;
        justify-content: center;
    }
    /* ⚠ Przycięty, NIE `display: none` — to jest nazwa pozycji dla czytnika ekranu. */
    .page.sidebar-collapsed .nav-section[b-9lrca5jz97]  .nav-link > span:not(.nav-licznik):not(.bi) {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .page.sidebar-collapsed .nav-section[b-9lrca5jz97]  .nav-link .bi { margin: 0; }
    .page.sidebar-collapsed .nav-section[b-9lrca5jz97]  .nav-link:hover {
        background: color-mix(in srgb, var(--text-light) 8%, transparent);
    }
    /* Pozycja bieżąca: to samo, co w pełnym menu — tło i pasek z koloru sekcji, ikona w kolorze sekcji.
       Tło pełne zamiast gasnącego w prawo: na 40 px gradient zgasłby, zanim zdążył coś zaznaczyć. */
    .page.sidebar-collapsed .nav-section[b-9lrca5jz97]  .nav-link.active {
        background: color-mix(in srgb, var(--sekcja) 20%, transparent);
    }
    .page.sidebar-collapsed .nav-section[b-9lrca5jz97]  .nav-link.active::before { width: 3px; }

    /* ── Licznik: plakietka w rogu ikony. Kolor „po terminie” (czerwień) zostaje z reguły ogólnej. ── */
    .page.sidebar-collapsed .nav-section[b-9lrca5jz97]  .nav-link .nav-licznik {
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 15px;
        height: 15px;
        margin: 0;
        padding: 0 3px;
        font-size: 9.5px;
        line-height: 15px;
        text-align: center;
        box-shadow: 0 0 0 1.5px var(--p4);
    }
    /* Zwykły licznik w pełnym menu jest półprzezroczysty; na ikonie prześwitywałyby przez niego jej kreski.
       Ten sam odcień, tylko kryjący. */
    .page.sidebar-collapsed .nav-section[b-9lrca5jz97]  .nav-link .nav-licznik:not(.nav-licznik-uwaga) {
        background: color-mix(in srgb, var(--text-light) 24%, var(--p5));
    }
    .page.sidebar-collapsed .nav-section[b-9lrca5jz97]  .nav-link .nav-licznik-pas { display: block; }
    /* Dwie plakietki przy jednej ikonie („Zgłoszenia”: po terminie + nieprzeczytane). Obie zostają widoczne —
       w pasie niczego, w co się patrzy, nie chowamy (MenuZwinieteJestPasemIkonTests) — tylko druga schodzi
       w DOLNY róg, żeby nie przykryć czerwonej: jedna nad drugą mieszczą się przy każdej szerokości liczby
       (obok siebie dwie „99+” zachodziłyby na siebie). Gdy czerwonej nie ma, nieprzeczytane stoją w górnym rogu
       jak każdy inny licznik. Dymek pozycji bierze pierwszą widoczną pigułkę, czyli pilniejszą. */
    .page.sidebar-collapsed .nav-section[b-9lrca5jz97]  .nav-link .nav-licznik-uwaga + .nav-licznik-nowe {
        top: auto;
        bottom: 2px;
    }
    /* Duże liczby: skrypt układu dopisuje `data-pas="99+"`, a pełna liczba zostaje w treści (dla czytnika
       i dla pełnego menu). */
    .page.sidebar-collapsed .nav-section[b-9lrca5jz97]  .nav-link .nav-licznik[data-pas] { font-size: 0; }
    .page.sidebar-collapsed .nav-section[b-9lrca5jz97]  .nav-link .nav-licznik[data-pas]::after {
        content: attr(data-pas);
        font-size: 9px;
    }

    /* ── Sekcje zwijane: nagłówek = ikona sekcji ze strzałką; rozwinięta sekcja dostaje ciemniejsze tło,
       żeby było widać, które ikony do niej należą. ── */
    .page.sidebar-collapsed .nav-collapsible[b-9lrca5jz97] {
        width: calc(var(--sidebar-pas, 60px) - 8px);
        margin: 0.3rem 4px;
        padding: 0;
        border-radius: 10px;
    }
    .page.sidebar-collapsed .nav-collapsible[open][b-9lrca5jz97] {
        padding-bottom: 3px;
        background: color-mix(in srgb, var(--p3) 24%, transparent);
    }
    .page.sidebar-collapsed .nav-section-summary[b-9lrca5jz97] {
        position: relative;
        width: 40px;
        height: 34px;
        margin: 0 auto;
        padding: 0 9px 0 0;
        gap: 0;
        justify-content: center;
    }
    .page.sidebar-collapsed .nav-section-summary > span[b-9lrca5jz97] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .page.sidebar-collapsed .nav-section-summary .nav-section-icon[b-9lrca5jz97] {
        width: 16px;
        height: 16px;
    }
    .page.sidebar-collapsed .nav-section-summary .nav-section-chev[b-9lrca5jz97] {
        position: absolute;
        right: 5px;
        top: 50%;
        width: 9px;
        height: 9px;
        margin: -4.5px 0 0;
        opacity: 0.75;
    }
    .page.sidebar-collapsed .nav-section-body[b-9lrca5jz97] { padding-top: 0; }
    /* Zwinięta sekcja, w której jest bieżący ekran, zaznacza swój nagłówek — inaczej w pasie nie byłoby
       po czym poznać, gdzie się jest. */
    .page.sidebar-collapsed .nav-collapsible:not([open]):has(.nav-link.active) > .nav-section-summary[b-9lrca5jz97] {
        background: color-mix(in srgb, var(--sekcja) 18%, transparent);
        color: var(--sekcja);
    }

    /* ── Konto: znak osoby (profil) i pod nim wylogowanie. Oba robią to, co w pełnym menu. ── */
    .page.sidebar-collapsed .nav-account[b-9lrca5jz97] {
        width: var(--sidebar-pas, 60px);
        flex-direction: column;
        gap: 2px;
        padding: 0.5rem 0 0.6rem;
    }
    .page.sidebar-collapsed .nav-account[b-9lrca5jz97]  .nav-user {
        position: relative;
        flex: none;
        width: 40px;
        height: 40px;
        padding: 0;
        gap: 0;
        justify-content: center;
    }
    .page.sidebar-collapsed .nav-account .user-line[b-9lrca5jz97] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        flex: none;
    }
}
/* /Components/Layout/OknoLayout.razor.rz.scp.css */
/* Osobne okno przeglądarki: cała wysokość okna dla treści, przewija się strona (nie karta w karcie). */
.okno-uklad[b-dp2o5new1l] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--cream);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Ukryte stany — pokazane warunkowo gdy modal ma odpowiednią klasę. */
.abc-reconnect-first-attempt-visible[b-ebu9s7um9j],
.abc-reconnect-retrying-visible[b-ebu9s7um9j],
.abc-reconnect-failed-visible[b-ebu9s7um9j],
.abc-reconnect-paused-visible[b-ebu9s7um9j],
.abc-reconnect-resume-failed-visible[b-ebu9s7um9j],
.abc-reconnect-show-while-trying[b-ebu9s7um9j] {
    display: none;
}

#components-reconnect-modal[b-ebu9s7um9j] {
    /* Domyślnie schowany — pokazuje się tylko gdy ma klasę state. */
    display: none;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    max-width: 360px;
    min-width: 280px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    pointer-events: auto;
}

@media (max-width: 480px) {
    #components-reconnect-modal[b-ebu9s7um9j] {
        left: 0.75rem;
        right: 0.75rem;
        max-width: none;
    }
}

#components-reconnect-modal.components-reconnect-show[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-retrying[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-failed[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-paused[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-resume-failed[b-ebu9s7um9j] {
    display: block;
    animation: abc-reconnect-slide-in-b-ebu9s7um9j 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Per-state visibility */
#components-reconnect-modal.components-reconnect-show .abc-reconnect-first-attempt-visible[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-show .abc-reconnect-show-while-trying[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-retrying .abc-reconnect-retrying-visible[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-retrying .abc-reconnect-show-while-trying[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-failed .abc-reconnect-failed-visible[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-paused .abc-reconnect-paused-visible[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-resume-failed .abc-reconnect-resume-failed-visible[b-ebu9s7um9j] {
    display: inline-block;
}

.abc-reconnect-card[b-ebu9s7um9j] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--global-palette1, #009244);
}

#components-reconnect-modal.components-reconnect-failed .abc-reconnect-card[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-resume-failed .abc-reconnect-card[b-ebu9s7um9j] {
    border-left-color: #dc3545;
}

.abc-reconnect-row[b-ebu9s7um9j] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.abc-reconnect-spinner[b-ebu9s7um9j] {
    width: 18px;
    height: 18px;
    border: 2px solid #d0d6cf;
    border-top-color: var(--global-palette1, #009244);
    border-radius: 50%;
    animation: abc-reconnect-spin-b-ebu9s7um9j 0.9s linear infinite;
    flex-shrink: 0;
    margin-top: 2px;
}

#components-reconnect-modal.components-reconnect-failed .abc-reconnect-spinner[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-resume-failed .abc-reconnect-spinner[b-ebu9s7um9j] {
    border: 2px solid #f4d0d3;
    border-top-color: #dc3545;
    animation: none;
}

.abc-reconnect-text[b-ebu9s7um9j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.abc-reconnect-text strong[b-ebu9s7um9j] {
    font-size: 13.5px;
    color: var(--global-palette3, #111317);
    font-weight: 600;
    line-height: 1.3;
}

.abc-reconnect-hint[b-ebu9s7um9j] {
    font-size: 11.5px;
    color: var(--text-soft, #6b6b66);
    line-height: 1.35;
}

.abc-reconnect-actions[b-ebu9s7um9j] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.7rem;
    flex-wrap: wrap;
}

.abc-reconnect-btn[b-ebu9s7um9j] {
    border: 0;
    background: var(--global-palette1, #009244);
    color: white;
    padding: 0.4rem 0.85rem;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.abc-reconnect-btn:hover[b-ebu9s7um9j] { filter: brightness(0.95); }
.abc-reconnect-btn:active[b-ebu9s7um9j] { filter: brightness(0.88); }

.abc-reconnect-btn-ghost[b-ebu9s7um9j] {
    background: transparent;
    color: var(--text-soft, #4a6a6e);
    border: 1px solid var(--line, #e0e0d8);
}

@keyframes abc-reconnect-slide-in-b-ebu9s7um9j {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes abc-reconnect-spin-b-ebu9s7um9j {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Board/BoardPage.razor.rz.scp.css */
.board-content[b-hygwa6x821] {
    max-width: none;
}

.board-head[b-hygwa6x821] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

/* Prawa strona nagłówka: wybór okna + licznik ukrytych + przełącznik rodzaju tablicy.
   flex-wrap, bo na wąskim ekranie te trzy elementy nie mieszczą się w jednej linii. */
.board-head-right[b-hygwa6x821] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem 0.7rem;
    flex: 1 1 auto;
    min-width: 0;
}

.board-okno[b-hygwa6x821] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 12.5px;
    color: var(--text-soft);
    white-space: nowrap;
}

.board-okno select[b-hygwa6x821] {
    height: 30px;
    padding: 0 0.5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--text);
    font-size: 12.5px;
}

/* Licznik ukrytych kart. Ciche chowanie zadań jest najczęstszą skargą na tę funkcję
   w konkurencyjnych produktach — dlatego liczba jest widoczna zawsze, gdy coś wypadło. */
.board-ukryte[b-hygwa6x821] {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 0.65rem;
    border-radius: 999px;
    background: var(--cream-2);
    border: 1px solid var(--line);
    color: var(--text-soft);
    font-size: 12px;
    white-space: nowrap;
}

/* ── Segmented control (Zgłoszenia / Zadania) ── */
.seg[b-hygwa6x821] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    flex: 0 0 auto;
}

.seg-btn[b-hygwa6x821] {
    /* ⚠ Bez tej linii przycisk brał tło DOMYŚLNE PRZEGLĄDARKI (buttonface, ok. #f0f0f0) — stała
       barwa, której motyw ciemny nie podmienia. W jasnym uchodziło to na sucho, w ciemnym dawało
       jasnoszarą pigułkę z jasnoszarym napisem: zmierzone 2,00 : 1. Nieaktywna zakładka
       przełącznika Zgłoszenia/Zadania była przez to nieczytelna. */
    background: transparent;
    height: 30px;
    padding: 0 0.95rem;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-soft);
    white-space: nowrap;
    transition: color 0.14s, background 0.14s, box-shadow 0.14s;
}

.seg-btn:hover[b-hygwa6x821] {
    color: var(--text);
}

.seg-on[b-hygwa6x821] {
    background: var(--paper);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
}

/* ── Filtry tablicy ──
   Klasy .filter-bar / .f-sort / .f-chip są globalne (app.css) — te same, co na liście zadań.
   Tutaj tylko drobne dopasowania. min-width:0 na polach wyboru, bo element flex domyślnie nie
   kurczy się poniżej swojej treści i na wąskim ekranie etykieta łamałaby się na pojedyncze słowa. */
.board-filtry[b-hygwa6x821] {
    margin-bottom: 0.9rem;
}

.board-filtry .f-sort[b-hygwa6x821] {
    min-width: 0;
    white-space: nowrap;
}

.board-filtry .f-sort-select[b-hygwa6x821] {
    max-width: 100%;
}

.board-empty[b-hygwa6x821] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-faint);
    font-size: 14px;
}

/* Karty tablicy (ticket + zadanie) wyekstrahowane do współdzielonych komponentów
   TicketBoardCard / TaskBoardCard — style .bcard* żyją tam (scoped razem z kartą,
   żeby działały też w Skrzynce i Zadaniach). */
/* /Components/Pages/Chat/ChatPage.razor.rz.scp.css */
.chat-shell[b-0bdv1kcinw] {
    display: grid;
    grid-template-columns: 288px 1fr;
    height: calc(100vh - var(--topbar-h, 3.5rem));
    height: calc(100dvh - var(--topbar-h, 3.5rem));
    overflow: hidden;
    position: relative;
}

/* ─── Szyna ─── */
.chat-rail[b-0bdv1kcinw] {
    border-right: 1px solid var(--line);
    background: var(--paper);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.rail-head[b-0bdv1kcinw] {
    padding: 1rem 1.1rem 0.75rem;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 0.5rem;
}
.rail-title[b-0bdv1kcinw] { flex: 1; min-width: 0; }
.rail-title h1[b-0bdv1kcinw] {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
}
.rail-title h1 em[b-0bdv1kcinw] { font-style: italic; color: var(--p1); }

/* Zamknięcie szuflady — na szerokim ekranie nie ma czego zamykać, więc nie istnieje. */
.rail-zamknij[b-0bdv1kcinw] { display: none; }

/* ─── Szukanie osoby / kanału ─── */
.rail-szukaj[b-0bdv1kcinw] {
    display: flex; align-items: center; gap: 0.45rem;
    margin: 0.6rem 0.7rem 0.2rem;
    padding: 0 0.6rem;
    height: 32px;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: border-color 0.14s, box-shadow 0.14s;
}
.rail-szukaj:focus-within[b-0bdv1kcinw] { border-color: var(--p1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--global-palette1) 9%, transparent); }
.rail-szukaj svg[b-0bdv1kcinw] { width: 14px; height: 14px; stroke: var(--line-faint); fill: none; stroke-width: 2; flex: none; }
.rail-szukaj input[b-0bdv1kcinw] {
    flex: 1; min-width: 0; border: none; background: none; outline: none;
    font: inherit; font-size: 12.5px; color: var(--text);
}
.rail-szukaj input[b-0bdv1kcinw]::placeholder { color: var(--text-faint); }
.rail-szukaj input[b-0bdv1kcinw]::-webkit-search-cancel-button { display: none; }
.rail-szukaj-x[b-0bdv1kcinw] {
    border: none; background: none; cursor: pointer; color: var(--text-faint);
    font-size: 16px; line-height: 1; padding: 0 2px; flex: none;
}
.rail-szukaj-x:hover[b-0bdv1kcinw] { color: var(--text); }

.rail-scroll[b-0bdv1kcinw] { flex: 1; overflow-y: auto; padding: 0.5rem 0.5rem 1.5rem; }
.rail-section[b-0bdv1kcinw] { margin-top: 0.5rem; }
.rail-section-head[b-0bdv1kcinw] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 0.6rem 0.3rem;
}
.rail-section-head .label[b-0bdv1kcinw] {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--text-soft);
}
.rail-section-head .add[b-0bdv1kcinw] {
    width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px;
    color: var(--text-faint); background: none; border: none; cursor: pointer; transition: all 0.12s;
}
.rail-section-head .add:hover[b-0bdv1kcinw] { background: var(--cream-2); color: var(--p1); }
.rail-section-head .add svg[b-0bdv1kcinw] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.rail-empty[b-0bdv1kcinw] { font-size: 12px; color: var(--text-faint); padding: 0.3rem 0.6rem 0.5rem; line-height: 1.5; }

.rail-item[b-0bdv1kcinw] {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.42rem 0.6rem; margin: 1px 0;
    border-radius: var(--radius-sm);
    cursor: pointer; position: relative;
    color: var(--text-soft);
    transition: background 0.12s, color 0.12s;
}
.rail-item:hover[b-0bdv1kcinw] { background: var(--cream-2); }
.rail-item.active[b-0bdv1kcinw] { background: color-mix(in srgb, var(--p1) 9%, var(--cream-2)); color: var(--text); }
.rail-item.active[b-0bdv1kcinw]::before {
    content: ''; position: absolute; left: -0.5rem; top: 6px; bottom: 6px; width: 3px;
    background: var(--p1); border-radius: 0 3px 3px 0;
}
.rail-item .hash[b-0bdv1kcinw] { font-family: 'Geist Mono', monospace; color: var(--text-faint); font-size: 14px; width: 16px; text-align: center; flex: none; display: inline-grid; place-items: center; }
.rail-item.active .hash[b-0bdv1kcinw] { color: var(--p1); }
.rail-item .nm[b-0bdv1kcinw] { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item.unread[b-0bdv1kcinw] { color: var(--text); }
.rail-item.unread .nm[b-0bdv1kcinw] { font-weight: 600; }
.rail-badge[b-0bdv1kcinw] {
    font-family: 'Geist Mono', monospace; font-size: 10.5px; font-weight: 600;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: grid; place-items: center; border-radius: 999px;
    background: var(--p1); color: #fff; flex: none;
}
/* Kanał wyciszony: liczba stoi, ale nie woła — bez koloru akcentu; znaczek przy nazwie mówi dlaczego. */
.rail-badge.rail-badge-cichy[b-0bdv1kcinw] {
    background: var(--cream-2); color: var(--text-faint); border: 1px solid var(--line); font-weight: 500;
}
.rail-wyciszony[b-0bdv1kcinw] { flex: none; display: inline-grid; place-items: center; color: var(--text-faint); }
.ikona-wyciszenia[b-0bdv1kcinw] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail-wyciszony .ikona-wyciszenia[b-0bdv1kcinw] { width: 13px; height: 13px; }
.rail-item.wyciszony .nm[b-0bdv1kcinw] { color: var(--text-soft); }
/* „Odczytaj wszystko” w nagłówku listy: cichy przycisk tekstowy — akcja porządkowa, nie główna. */
.rail-odczytaj[b-0bdv1kcinw] {
    flex: none; font: inherit; font-size: 12px; font-weight: 500;
    padding: 0.25rem 0.55rem; border-radius: 6px;
    border: 1px solid var(--line); background: var(--paper); color: var(--text-soft); cursor: pointer;
}
.rail-odczytaj:hover[b-0bdv1kcinw] { background: var(--cream-2); color: var(--text); }
.rail-odczytaj:focus-visible[b-0bdv1kcinw] { outline: 2px solid var(--p1); outline-offset: 2px; }
.rail-tag[b-0bdv1kcinw] {
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--text-soft); background: var(--cream-2); border: 1px solid var(--line);
    border-radius: 4px; padding: 1px 4px; flex: none;
}
.rail-item.browse[b-0bdv1kcinw] { color: var(--text-faint); }
.rail-item.browse:hover .rail-join[b-0bdv1kcinw] { opacity: 1; }
.rail-join[b-0bdv1kcinw] {
    margin-left: auto; font-size: 11px; font-weight: 600; color: var(--p1);
    background: none; border: none; cursor: pointer; opacity: 0.7; transition: opacity 0.12s; flex: none;
}
.rail-join:hover[b-0bdv1kcinw] { text-decoration: underline; }

/* ⚠ `.ikona-pinezka` i `.ikona-klodka` przeniesione do `app.css` (globalnie) — patrz komentarz
   w `ChatPage.razor` przy ikonach. Tutaj zostawał wymiar, którego nieostylowana ikona nigdy nie
   dostawała, bo wstawiana była z pominięciem kompilatora Razora. Reguła globalna działa
   niezależnie od tego, kto i jak ją kiedyś wstawi. */
.akcja-ikona[b-0bdv1kcinw] { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ─── Główna kolumna ─── */
.chat-main[b-0bdv1kcinw] { display: flex; flex-direction: column; overflow: hidden; background: var(--cream); min-width: 0; }

.chat-blank[b-0bdv1kcinw] {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 2rem; gap: 0.3rem;
}
/* Kolumna o czytelnej mierze zamiast zdania rozciągniętego na 1170 px. Szerokość ekranu zjadają
   rzędy kanałów, które się zawijają — nie napis. */
.chat-blank-in[b-0bdv1kcinw] { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; max-width: 640px; width: 100%; }
/* ⚠ Wymiar podany WPROST — ikona bez własnego rozmiaru rozdyma się do kontenera. Ta sama
   blizna, co czarna plama 834×446 px w panelu przypiętych (12.08.2026, IkonyCzatuTests). */
.chat-blank > svg[b-0bdv1kcinw],
.chat-blank-in > svg[b-0bdv1kcinw] { width: 44px; height: 44px; stroke: var(--line-strong); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 0.5rem; }
.chat-blank-title[b-0bdv1kcinw] { font-family: 'Instrument Serif', serif; font-size: 1.5rem; color: var(--text); }
.chat-blank-sub[b-0bdv1kcinw] { font-size: 13px; color: var(--text-soft); max-width: 430px; line-height: 1.55; }

.chat-blank-akcje[b-0bdv1kcinw] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.15rem; }

/* ⚠ PRÓG 900 px, nie 768 px jak globalne .desktop-only / .mobile-only. Szyna z kanałami chowa
   się poza ekran dokładnie na 900 px (reguła niżej w tym pliku), a globalny przełącznik łamie
   się na 768 px. Pasmo 769–900 px zostawałoby więc bez szyny I bez przycisku, który ją otwiera —
   czyli bez jakiegokolwiek dojścia do listy kanałów. Dwa progi na jedną rzecz to nie jest
   szczegół stylu, tylko dziura w nawigacji. */
.blank-szyna[b-0bdv1kcinw] { display: none; }

.chat-blank-lista[b-0bdv1kcinw] { margin-top: 1.5rem; width: 100%; }
.chat-blank-etykieta[b-0bdv1kcinw] {
    font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-soft); margin-bottom: 0.5rem;
}
.chat-blank-chipy[b-0bdv1kcinw] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.blank-chip[b-0bdv1kcinw] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    max-width: 100%; padding: 0.32rem 0.7rem;
    background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px;
    color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer;
    transition: all 0.15s;
}
.blank-chip:hover[b-0bdv1kcinw] { border-color: var(--p1); color: var(--p1); }
.blank-chip:focus-visible[b-0bdv1kcinw] { outline: 2px solid var(--p1); outline-offset: 2px; }
.blank-chip-hash[b-0bdv1kcinw] { font-family: 'Geist Mono', monospace; color: var(--text-faint); }
.blank-chip:hover .blank-chip-hash[b-0bdv1kcinw] { color: var(--p1); }
/* Kanał, do którego się jeszcze nie należy, ma napisane WPROST, co zrobi kliknięcie — inaczej
   wygląda identycznie jak własny kanał i nie wiadomo, że dołącza. */
.blank-chip-akcja[b-0bdv1kcinw] { font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--p1); }
.blank-chip.dolacz[b-0bdv1kcinw] { border-style: dashed; }

.chat-header[b-0bdv1kcinw] {
    height: 3.4rem; flex: none; padding: 0 0.9rem 0 1.25rem;
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--paper); border-bottom: 1px solid var(--line);
}
.h-menu[b-0bdv1kcinw] { display: none; }
.h-title[b-0bdv1kcinw] { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.h-hash[b-0bdv1kcinw] { font-family: 'Geist Mono', monospace; color: var(--text-faint); font-size: 1.1rem; }
.h-name[b-0bdv1kcinw] { font-family: 'Instrument Serif', serif; font-size: 1.4rem; line-height: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-topic[b-0bdv1kcinw] {
    font-size: 12.5px; color: var(--text-soft);
    padding-left: 0.75rem; border-left: 1px solid var(--line);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.h-right[b-0bdv1kcinw] { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; flex: none; }
.h-online[b-0bdv1kcinw] { font-size: 11.5px; color: var(--text-soft); margin-right: 0.35rem; white-space: nowrap; }
.h-ikona[b-0bdv1kcinw] {
    width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: 7px; border: 1px solid transparent; background: none;
    color: var(--text-soft); cursor: pointer; transition: all 0.13s;
}
.h-ikona:hover[b-0bdv1kcinw] { background: var(--cream-2); color: var(--text); }
.h-ikona.wl[b-0bdv1kcinw] { background: color-mix(in srgb, var(--p1) 12%, var(--paper)); border-color: color-mix(in srgb, var(--p1) 30%, transparent); color: var(--p1); }
.h-ikona svg[b-0bdv1kcinw] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ─── Panele nad strumieniem (szukanie / przypięte / pliki) ─── */
.czat-panel[b-0bdv1kcinw] {
    flex: none; max-height: 40%; overflow-y: auto;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 14px -12px rgba(0,0,0,0.35);
}
.czat-panel-head[b-0bdv1kcinw] {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: var(--paper); z-index: 1;
}
.czat-panel-head .spacer[b-0bdv1kcinw] { flex: 1; }
.czat-panel-head strong[b-0bdv1kcinw] { font-size: 12.5px; }
.czat-panel-ikona[b-0bdv1kcinw] { width: 14px; height: 14px; stroke: var(--text-soft); fill: none; stroke-width: 2; flex: none; }
.czat-panel-licznik[b-0bdv1kcinw] { font-size: 11px; color: var(--text-soft); }
.czat-panel-pole[b-0bdv1kcinw] {
    flex: 1; min-width: 0; height: 30px; padding: 0 0.6rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--cream-2); font: inherit; font-size: 12.5px; color: var(--text);
}
.czat-panel-pole:focus[b-0bdv1kcinw] { outline: none; border-color: var(--p1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--global-palette1) 9%, transparent); }
.czat-panel-lista[b-0bdv1kcinw] { display: flex; flex-direction: column; padding: 0.35rem 0.6rem 0.6rem; }
.czat-trafienie[b-0bdv1kcinw] {
    display: flex; align-items: baseline; gap: 0.55rem; width: 100%; text-align: left;
    padding: 0.45rem 0.65rem; border: none; background: none; cursor: pointer;
    border-radius: var(--radius-sm); font: inherit; transition: background 0.12s;
}
.czat-trafienie:hover[b-0bdv1kcinw] { background: var(--cream-2); }
.czat-trafienie-kto[b-0bdv1kcinw] { font-size: 12px; font-weight: 600; color: var(--text); flex: none; }
.czat-trafienie-tekst[b-0bdv1kcinw] { font-size: 12.5px; color: var(--text-soft); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.czat-trafienie-kiedy[b-0bdv1kcinw] { font-size: 10.5px; color: var(--text-soft); flex: none; }

/* Zaznaczenie trafienia w fragmencie. Fragment przychodzi z serwisu jako gotowe, odkażone
   znaczniki (całość zakodowana, w środku wyłącznie <mark>) — patrz `Wartownik`.
   ⚠ Domyślny <mark> przeglądarki jest jaskrawożółty i w tym oknie wygląda jak usterka. */
.czat-trafienie-tekst mark[b-0bdv1kcinw] {
    background: color-mix(in srgb, var(--p1) 20%, transparent);
    color: var(--text);
    font-weight: 600;
    border-radius: 3px;
    padding: 0 1px;
}

/* Pozycja panelu przypiętych: skok do wiadomości + odpięcie. Dwa osobne przyciski obok siebie,
   bo przycisk w przycisku to nieprawidłowe znaczniki — kliknięcie w jeden trafiałoby w drugi. */
.czat-przypieta-rzad[b-0bdv1kcinw] { display: flex; align-items: center; gap: 0.15rem; }
.czat-przypieta-rzad .czat-trafienie[b-0bdv1kcinw] { flex: 1; min-width: 0; }
.czat-odepnij[b-0bdv1kcinw] {
    flex: none; width: 28px; height: 28px; display: grid; place-items: center;
    border: 1px solid transparent; border-radius: 7px; background: none;
    color: var(--text-faint); cursor: pointer; transition: all 0.13s;
}
.czat-odepnij:hover[b-0bdv1kcinw] { background: var(--danger-bg, #fdecec); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.czat-odepnij:disabled[b-0bdv1kcinw] { opacity: 0.45; cursor: not-allowed; }
/* Przekreślona pinezka — „zdejmij", nie „przypnij jeszcze raz". */
.czat-odepnij .ikona-pinezka[b-0bdv1kcinw] { width: 14px; height: 14px; }

/* ─── Strumień ─── */
.stream[b-0bdv1kcinw] { flex: 1; overflow-y: auto; padding: 1rem 1.5rem 0.75rem; }
.stream-info[b-0bdv1kcinw] { font-size: 12.5px; color: var(--text-faint); text-align: center; padding: 1.5rem 1rem; }
.stream-starsze[b-0bdv1kcinw] { display: flex; justify-content: center; padding: 0.2rem 0 0.8rem; }

/* Pasek „jesteś w środku historii". Stoi POD ostatnią wiadomością okna, bo to tam rozmowa
   się urywa — i tam człowiek szuka wyjaśnienia, dlaczego nic dalej nie ma. */
.stream-nowsze[b-0bdv1kcinw] { display: flex; justify-content: center; padding: 0.8rem 0 0.2rem; }
.stream-poczatek[b-0bdv1kcinw] {
    text-align: center; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--text-soft); padding: 0.2rem 0 1rem;
}

.czat-dzien[b-0bdv1kcinw] { display: flex; align-items: center; gap: 0.75rem; margin: 1.1rem 0 0.7rem; }
.czat-dzien[b-0bdv1kcinw]::before, .czat-dzien[b-0bdv1kcinw]::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.czat-dzien span[b-0bdv1kcinw] {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--text-soft); background: var(--cream); padding: 0 0.2rem; flex: none;
}

/* Jedna wiadomość. Cudze po lewej z awatarem, moje po prawej bez.
   ⚠ Awatar równany do GÓRY, nie do dołu. Przy równaniu do dołu lądował pod dymkiem, obok
   godziny i reakcji — czyli daleko od nazwiska, do którego należy. */
.czat-w[b-0bdv1kcinw] { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 2px; }
.czat-w.pierwsza[b-0bdv1kcinw] { margin-top: 0.85rem; }
.czat-w.moja[b-0bdv1kcinw] { flex-direction: row-reverse; }

/* Lekkie zejście w dół — żeby środek awatara trafiał w linię nazwiska, a nie nad nią. */
.czat-ava[b-0bdv1kcinw] { flex: none; width: 30px; height: 30px; font-size: 11px; border: none; box-shadow: none; margin-top: 1px; }
.czat-w.cudza:not(.pierwsza) .czat-ava[b-0bdv1kcinw] { margin-top: 0; }
/* Miejsce po awatarze zostaje puste przy kolejnych wiadomościach tej samej osoby —
   inaczej dymki skakałyby w lewo i w prawo w obrębie jednej wypowiedzi. */
.czat-ava.pusty[b-0bdv1kcinw] { background: transparent !important; }

/* Awatar jest PRZYCISKIEM (otwiera rozmowę prywatną z autorem), więc trzeba zdjąć z niego
   wszystko, co przeglądarka dokłada przyciskom: własną czcionkę, obramowanie i wypełnienie.
   Bez `font: inherit` inicjały jadą systemowym krojem i wyraźnie odstają od reszty rozmowy. */
.czat-ava-btn[b-0bdv1kcinw] {
    padding: 0;
    font: inherit;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
}
.czat-ava-btn:hover[b-0bdv1kcinw] { transform: scale(1.08); box-shadow: 0 0 0 2px color-mix(in srgb, var(--p1) 35%, transparent); }
.czat-ava-btn:focus-visible[b-0bdv1kcinw] { outline: 2px solid var(--p1); outline-offset: 2px; }
.czat-ava-btn:disabled[b-0bdv1kcinw] { cursor: default; transform: none; }

/* Wzmianka w treści. ⚠ To NIE jest wstawiony HTML — widok dzieli tekst na kawałki i sam stawia
   ten znacznik (patrz `WzmiankiWTresci`). Wyróżniona jest tylko wzmianka, która naprawdę
   wysyła powiadomienie. */
.czat-wzmianka[b-0bdv1kcinw] {
    color: var(--p1);
    font-weight: 600;
    background: color-mix(in srgb, var(--p1) 10%, transparent);
    border-radius: 4px;
    padding: 0 2px;
}
/* Wzmianka O MNIE jest mocniejsza — w rozmowie kilkunastu osób to jedyna rzecz, której
   naprawdę szuka się wzrokiem po powrocie do kanału. */
.czat-wzmianka.moja[b-0bdv1kcinw] {
    background: color-mix(in srgb, var(--p1) 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p1) 35%, transparent);
}

.czat-kolumna[b-0bdv1kcinw] { display: flex; flex-direction: column; min-width: 0; max-width: min(680px, 76%); position: relative; }
.czat-w.moja .czat-kolumna[b-0bdv1kcinw] { align-items: flex-end; }

.czat-autor[b-0bdv1kcinw] { font-size: 11.5px; font-weight: 600; color: var(--text-soft); margin: 0 0 3px 0.7rem; }

.czat-dymek[b-0bdv1kcinw] {
    position: relative;
    padding: 0.5rem 0.8rem;
    border-radius: 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}
.czat-w.cudza.pierwsza .czat-dymek[b-0bdv1kcinw] { border-bottom-left-radius: 4px; }
.czat-w.moja .czat-dymek[b-0bdv1kcinw] {
    background: color-mix(in srgb, var(--p1) 12%, var(--paper));
    border-color: color-mix(in srgb, var(--p1) 26%, var(--line));
}
.czat-w.moja.pierwsza .czat-dymek[b-0bdv1kcinw] { border-bottom-right-radius: 4px; }
.czat-dymek.usunieta[b-0bdv1kcinw] { background: var(--cream-2); border-style: dashed; box-shadow: none; }
.czat-dymek.przypieta[b-0bdv1kcinw] { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }

.czat-pinezka[b-0bdv1kcinw] {
    position: absolute; top: -7px; right: -7px;
    width: 20px; height: 20px; display: grid; place-items: center;
    border-radius: 999px; background: var(--paper);
    border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
    color: var(--warn);
}
.czat-pinezka .ikona-pinezka[b-0bdv1kcinw] { width: 11px; height: 11px; }

.czat-tekst[b-0bdv1kcinw] { font-size: 13.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.czat-tekst-usunieta[b-0bdv1kcinw] { color: var(--text-faint); font-style: italic; }

/* ─── Formatowanie w treści wiadomości ───────────────────────────────────────
   ⚠ To NIE jest wklejony HTML. Widok dostaje z `FormatWiadomosci` zwykły tekst plus flagi
   i sam stawia te znaczniki, więc każda reguła stąd dostaje atrybut zakresu i naprawdę działa.
   ⚠ Bloki dziedziczą rozmiar i kolor po `.czat-tekst` — wypowiedź złożona z listy i akapitu
   ma być jedną wypowiedzią, a nie dwoma krojami obok siebie. */
.czat-ozdoba.gruby[b-0bdv1kcinw] { font-weight: 700; }
.czat-ozdoba.pochyly[b-0bdv1kcinw] { font-style: italic; }
.czat-ozdoba.skreslony[b-0bdv1kcinw] { text-decoration: line-through; text-decoration-color: var(--line-faint); }

/* Odnośnik. Adres jest sprawdzony po stronie serwera (tylko http/https/mailto) — patrz
   `FormatWiadomosci.AdresBezpieczny`. */
.czat-odnosnik[b-0bdv1kcinw] { color: var(--p1); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.czat-odnosnik:hover[b-0bdv1kcinw] { text-decoration-thickness: 2px; }

/* Kod w linii. ⚠ Globalny `code` w app.css jest różowy (#d63384) — w dymku wygląda jak błąd. */
.czat-kod[b-0bdv1kcinw] {
    font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
    font-size: 0.88em; color: var(--text);
    background: color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: 4px; padding: 1px 4px; overflow-wrap: anywhere;
}

.czat-blok-kodu[b-0bdv1kcinw] {
    margin: 0.3rem 0; padding: 0.45rem 0.6rem;
    background: color-mix(in srgb, var(--text) 7%, transparent);
    border: 1px solid var(--line); border-radius: 8px;
    font-size: 12.5px; line-height: 1.45;
    overflow-x: auto;                     /* długa linia kodu ma się przewijać, nie rozpychać dymka */
    white-space: pre;
}
.czat-blok-kodu code[b-0bdv1kcinw] {
    font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
    color: var(--text); background: none; padding: 0; font-size: inherit;
}

/* Cytat w treści. ⚠ To NIE jest `.czat-cytat` — tamto jest cytatem odpowiedzi (klikalnym
   skrótem cudzej wypowiedzi), a to jest kawałek tekstu, który człowiek sam oznaczył. */
.czat-cytowanie[b-0bdv1kcinw] {
    margin: 0.25rem 0; padding: 0.1rem 0 0.1rem 0.6rem;
    border-left: 3px solid color-mix(in srgb, var(--p1) 45%, var(--line));
    color: var(--text-soft); font-size: 13.5px; line-height: 1.5;
    white-space: pre-wrap; overflow-wrap: anywhere;
}

.czat-lista[b-0bdv1kcinw] { margin: 0.25rem 0; padding-left: 1.35rem; font-size: 13.5px; line-height: 1.5; }
.czat-lista li[b-0bdv1kcinw] { margin: 1px 0; overflow-wrap: anywhere; }
.czat-lista li[b-0bdv1kcinw]::marker { color: var(--text-faint); }

.czat-cytat[b-0bdv1kcinw] {
    /* ⚠ `min-width: 0` i `max-width: 100%` NIE są ozdobą. Bez nich cytat odpowiedzi rozpychał się
       do szerokości cytowanego zdania: na telefonie (390 px) treść miała 336 px w przycisku
       szerokim na 292 px i wyjeżdżała 54 px poza dymek, wprost poza krawędź ekranu. Wielokropek
       nie ratował, bo `text-overflow` działa dopiero wtedy, gdy element MA ograniczoną szerokość
       — a ten rósł razem z tekstem. Ta sama pułapka co przy elementach siatki. */
    min-width: 0; max-width: 100%;
    display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
    margin: 0 0 0.4rem; padding: 0.3rem 0.5rem;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border-left: 3px solid var(--p1); border-radius: 0 6px 6px 0;
    border-top: none; border-right: none; border-bottom: none;
    cursor: pointer; font: inherit;
}
.czat-cytat:hover[b-0bdv1kcinw] { background: color-mix(in srgb, var(--text) 9%, transparent); }
.czat-cytat.usuniety[b-0bdv1kcinw] { border-left-color: var(--line-strong); }
.czat-cytat-autor[b-0bdv1kcinw] { font-size: 11px; font-weight: 600; color: var(--p1);
    min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.czat-cytat.usuniety .czat-cytat-autor[b-0bdv1kcinw] { color: var(--text-faint); }
.czat-cytat-tresc[b-0bdv1kcinw] { font-size: 12px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    /* patrz komentarz przy `.czat-cytat` — to dziecko musi WOLNO się skurczyć, inaczej
       jednowierszowy tekst bez spacji do złamania wypycha rodzica poza ekran */
    min-width: 0; max-width: 100%; }

/* Godzina, znacznik poprawki i reakcje w JEDNYM wierszu. Wcześniej były to dwa wiersze pod
   dymkiem: przy krótkim zdaniu stopka i reakcje zajmowały razem więcej pionu niż sama treść. */
.czat-stopka[b-0bdv1kcinw] { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 2px 0.3rem 0; }
.czat-w.moja .czat-stopka[b-0bdv1kcinw] { justify-content: flex-end; }
.czat-godzina[b-0bdv1kcinw] { font-size: 10px; color: var(--text-soft); }
.czat-poprawiona[b-0bdv1kcinw] { font-size: 10px; color: var(--text-soft); font-style: italic; }

.czat-reakcje[b-0bdv1kcinw] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.czat-w.moja .czat-reakcje[b-0bdv1kcinw] { justify-content: flex-end; }

/* Akcje wjeżdżają nad dymkiem dopiero pod kursorem — stale widoczne zaśmiecałyby rozmowę. */
.czat-akcje[b-0bdv1kcinw] {
    position: absolute; top: -14px;
    display: flex; align-items: center; gap: 1px;
    padding: 2px; border-radius: 8px;
    background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    opacity: 0; pointer-events: none; transition: opacity 0.12s;
    z-index: 2;
}
.czat-w.cudza .czat-akcje[b-0bdv1kcinw] { left: 0.5rem; }
.czat-w.moja .czat-akcje[b-0bdv1kcinw] { right: 0.5rem; }
.czat-w:hover .czat-akcje[b-0bdv1kcinw],
.czat-w:focus-within .czat-akcje[b-0bdv1kcinw] { opacity: 1; pointer-events: auto; }

/* Podświetlenie po skoku z panelu przypiętych / z cytatu. */
@keyframes czatWskazanie-b-0bdv1kcinw {
    0%   { background: color-mix(in srgb, var(--p1) 22%, transparent); }
    100% { background: transparent; }
}
.czat-wskazana[b-0bdv1kcinw] { animation: czatWskazanie-b-0bdv1kcinw 2.2s ease-out; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
    .czat-wskazana[b-0bdv1kcinw] { animation: none; outline: 2px solid var(--p1); outline-offset: 3px; border-radius: 12px; }
}

/* ─── Wybierak wzmianek (po „@") ───
   Stoi NAD kompozytorem, tak samo jak wybierak emotek. Panel pod polem zasłaniałby przycisk
   wysyłania na telefonie, a to jedyny przycisk, którego w kompozytorze nie wolno zasłonić. */
.wzmianki-panel[b-0bdv1kcinw] {
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.4rem;
    overflow: hidden;
    max-height: 232px;
    overflow-y: auto;
}
.wzmianki-hint[b-0bdv1kcinw] {
    padding: 0.3rem 0.7rem;
    font-size: 10.5px;
    color: var(--text-soft);
    background: var(--cream-2);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
}
.wzmianki-poz[b-0bdv1kcinw] {
    display: flex; align-items: center; gap: 0.55rem; width: 100%;
    padding: 0.4rem 0.7rem;
    background: none; border: none; cursor: pointer; text-align: left;
    font: inherit;
}
.wzmianki-poz:hover[b-0bdv1kcinw] { background: var(--cream-2); }
/* Wybór klawiaturą MUSI wyglądać inaczej niż najechanie kursorem — inaczej przy myszy nad listą
   nie da się poznać, którą pozycję wstawi Enter. */
.wzmianki-poz.wybrana[b-0bdv1kcinw] { background: color-mix(in srgb, var(--p1) 12%, var(--cream-2)); }
.wzmianki-ava[b-0bdv1kcinw] { width: 22px; height: 22px; font-size: 9.5px; flex: none; }
.wzmianki-nazwa[b-0bdv1kcinw] { font-size: 13px; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wzmianki-login[b-0bdv1kcinw] { font-size: 11.5px; color: var(--text-soft); flex: none; }

/* ─── Wybierak emotek ───
   Stoi NAD kompozytorem, w tym samym opakowaniu — panel wypychający pole w dół przesuwałby
   rozmowę pod palcem przy każdym otwarciu. */
.emoji-panel[b-0bdv1kcinw] {
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.4rem;
    overflow: hidden;
}
.emoji-zakladki[b-0bdv1kcinw] {
    display: flex; align-items: center; gap: 0.15rem;
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--line);
    background: var(--cream-2);
}
.emoji-zakladki .spacer[b-0bdv1kcinw] { flex: 1; }
.emoji-zakladka[b-0bdv1kcinw] {
    height: 24px; padding: 0 0.6rem; border-radius: 999px;
    font-size: 11.5px; font-weight: 500; color: var(--text-soft);
    background: none; border: none; cursor: pointer; transition: all 0.13s; white-space: nowrap;
}
.emoji-zakladka:hover[b-0bdv1kcinw] { color: var(--text); background: var(--paper); }
.emoji-zakladka.wl[b-0bdv1kcinw] { background: var(--paper); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.emoji-zamknij[b-0bdv1kcinw] {
    width: 24px; height: 24px; display: grid; place-items: center; flex: none;
    border: none; background: none; color: var(--text-faint); cursor: pointer;
    font-size: 16px; line-height: 1; border-radius: 6px;
}
.emoji-zamknij:hover[b-0bdv1kcinw] { background: var(--paper); color: var(--text); }
.emoji-siatka[b-0bdv1kcinw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 2px;
    padding: 0.4rem;
    max-height: 168px;
    overflow-y: auto;
}
.emoji-znak[b-0bdv1kcinw] {
    height: 32px; display: grid; place-items: center;
    font-size: 18px; line-height: 1;
    background: none; border: none; border-radius: 7px; cursor: pointer;
    transition: background 0.12s, transform 0.12s;
}
.emoji-znak:hover[b-0bdv1kcinw] { background: var(--cream-2); transform: scale(1.15); }
.emoji-znak:focus-visible[b-0bdv1kcinw] { outline: 2px solid var(--p1); outline-offset: 1px; }

/* ─── Kompozytor ─── */
.composer-wrap[b-0bdv1kcinw] { flex: none; padding: 0.4rem 1.5rem 1rem; }
/* „Ania pisze…” — linia w dolnym odstępie pola. Wysokość zdjęta ujemnym marginesem: element stoi zawsze,
   a jego pojawienie się nie przesuwa ani pola, ani rozmowy. Miary w rem, bo odstęp pola też jest w rem
   (strona ma mniejszą czcionkę bazową niż 16 px — stałe 15 px wystawało pod pole o 1 px). */
.czat-pisza[b-0bdv1kcinw] {
    height: 0.85rem; margin: 0.05rem 0 -0.9rem; padding: 0 0.3rem;
    font-size: 11px; line-height: 0.85rem; color: var(--text-soft); font-style: italic;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.composer[b-0bdv1kcinw] {
    border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
    background: var(--paper); box-shadow: var(--shadow-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.composer:focus-within[b-0bdv1kcinw] { border-color: var(--p1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--global-palette1) 10%, transparent); }
.composer textarea[b-0bdv1kcinw] {
    width: 100%; border: none; background: none; resize: none;
    font-family: inherit; font-size: 13.5px; color: var(--text);
    padding: 0.7rem 0.85rem 0.3rem; min-height: 2.4rem; max-height: 12rem;
}
.composer textarea:focus[b-0bdv1kcinw] { outline: none; }
.composer textarea[b-0bdv1kcinw]::placeholder { color: var(--text-faint); }
/* ─── Pasek formatowania ──────────────────────────────────────────────────────
   Osobny rząd NAD dolnym paskiem: dziewięć przycisków dołożonych do rzędu z wysyłaniem
   zepchnęłoby przycisk „Wyślij" poza kompozytor przy pierwszym zwężeniu okna.
   Na telefonie pasek jest schowany — patrz reguła w @media niżej. */
.composer-format[b-0bdv1kcinw] {
    display: flex; align-items: center; gap: 1px; flex-wrap: wrap;
    padding: 0.15rem 0.5rem 0; border-top: 1px solid var(--line);
    margin: 0.25rem 0.15rem 0;
}
.fmt-btn[b-0bdv1kcinw] {
    width: 27px; height: 27px; display: grid; place-items: center; flex: none;
    border: 1px solid transparent; border-radius: 6px; background: none;
    color: var(--text-soft); cursor: pointer; font: inherit; transition: all 0.12s;
}
.fmt-btn:hover[b-0bdv1kcinw] { background: var(--cream-2); color: var(--text); }
.fmt-btn:focus-visible[b-0bdv1kcinw] { outline: 2px solid var(--p1); outline-offset: 1px; }
.fmt-btn:disabled[b-0bdv1kcinw] { opacity: 0.4; cursor: not-allowed; }
.fmt-btn:disabled:hover[b-0bdv1kcinw] { background: none; color: var(--text-soft); }

/* Litery na przyciskach B/I/S pokazują WPROST, co przycisk zrobi — ikona „pogrubienia"
   musiałaby to dopiero zasugerować. */
.fmt-znak[b-0bdv1kcinw] { font-size: 12.5px; line-height: 1; font-weight: 600; }
.fmt-znak.gruby[b-0bdv1kcinw] { font-weight: 800; }
.fmt-znak.pochyly[b-0bdv1kcinw] { font-style: italic; font-family: 'Instrument Serif', serif; font-size: 14px; }
.fmt-znak.skreslony[b-0bdv1kcinw] { text-decoration: line-through; }

.fmt-kreska[b-0bdv1kcinw] { width: 1px; height: 15px; background: var(--line); margin: 0 0.25rem; flex: none; }

.ikona-format[b-0bdv1kcinw] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.composer-bar[b-0bdv1kcinw] { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.5rem 0.45rem; }
.composer-bar .spacer[b-0bdv1kcinw] { flex: 1; }
/* Otwarty wybierak emotek widać po przycisku — inaczej po przewinięciu panelu poza ekran
   nie wiadomo, czy jest otwarty, czy zniknął. */
.composer-bar .btn.wl[b-0bdv1kcinw] { background: color-mix(in srgb, var(--p1) 12%, var(--paper)); color: var(--p1); }
.composer-bar .hint[b-0bdv1kcinw] { font-size: 10.5px; color: var(--text-soft); }
.composer-bar .hint kbd[b-0bdv1kcinw] { font-family: 'Geist Mono', monospace; color: var(--text); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 3px; padding: 0 4px; font-size: 10px; }
.send-btn[b-0bdv1kcinw] { height: 30px; padding: 0 0.9rem; }

/* ─── Okno: nowy kanał ─── */
.chat-create[b-0bdv1kcinw] { max-width: 460px; width: 100%; display: flex; flex-direction: column; }
.chat-create-head[b-0bdv1kcinw] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; background: var(--cream); border-bottom: 1px solid var(--line);
}
.chat-create-title[b-0bdv1kcinw] { margin: 0; font-family: 'Instrument Serif', serif; font-size: 1.4rem; font-weight: 400; line-height: 1; color: var(--text); }
.chat-create-head .modal-close[b-0bdv1kcinw] {
    width: 30px; height: 30px; border-radius: 8px; background: transparent; color: var(--text-soft);
    display: grid; place-items: center; border: none; cursor: pointer; transition: all 0.14s;
}
.chat-create-head .modal-close:hover[b-0bdv1kcinw] { background: var(--danger-bg); color: var(--danger); }
.chat-create-head .modal-close svg[b-0bdv1kcinw] { width: 18px; height: 18px; }
.chat-create-body[b-0bdv1kcinw] { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.25rem; }
.chat-create-label[b-0bdv1kcinw] { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft); margin: 0.5rem 0 0.1rem; }
.chat-create-label:first-child[b-0bdv1kcinw] { margin-top: 0; }
.chat-create-err[b-0bdv1kcinw] { align-self: flex-start; margin-top: 0.5rem; }
.chat-create-foot[b-0bdv1kcinw] { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.25rem; border-top: 1px solid var(--line); }
.chat-create-foot .spacer[b-0bdv1kcinw] { flex: 1; }
.chat-create-podpowiedz[b-0bdv1kcinw] { font-size: 11.5px; color: var(--text-soft); line-height: 1.5; margin-top: 0.2rem; }

/* ─── Awatar DM w szynie / nagłówku ─── */
.rail-item.rail-dm .dm-ava[b-0bdv1kcinw] { width: 22px; height: 22px; font-size: 9px; flex: none; border: none; box-shadow: none; }
.rail-item.rail-dm .nm[b-0bdv1kcinw] { margin-left: 0; }
.rail-item.rail-dm.active[b-0bdv1kcinw]::before { top: 4px; bottom: 4px; }
.h-title .h-dm-ava[b-0bdv1kcinw] { width: 26px; height: 26px; font-size: 10px; border: none; box-shadow: none; margin-right: 0.1rem; }

/* ─── Przełącznik widoczności kanału ─── */
.seg[b-0bdv1kcinw] { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--cream-2); border: 1px solid var(--line); border-radius: 999px; align-self: flex-start; }
.seg-btn[b-0bdv1kcinw] { height: 28px; padding: 0 0.85rem; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--text-soft); background: none; border: none; cursor: pointer; transition: all 0.14s; }
.seg-btn:hover[b-0bdv1kcinw] { color: var(--text); }
.seg-on[b-0bdv1kcinw] { background: var(--paper); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }

/* ─── Wybór osób (DM / członkowie prywatnego) ─── */
.member-picker[b-0bdv1kcinw] { display: flex; flex-direction: column; gap: 1px; max-height: 180px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.25rem; margin-top: 0.15rem; }
.member-picker.tall[b-0bdv1kcinw] { max-height: 320px; }
.member-row[b-0bdv1kcinw] { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); cursor: pointer; width: 100%; text-align: left; background: none; border: none; font: inherit; color: var(--text); transition: background 0.12s; }
.member-row:hover[b-0bdv1kcinw] { background: var(--cream-2); }
.member-row input[type=checkbox][b-0bdv1kcinw] { accent-color: var(--p1); width: 15px; height: 15px; }
.member-ava[b-0bdv1kcinw] { width: 26px; height: 26px; font-size: 10px; border: none; box-shadow: none; flex: none; }
.member-name[b-0bdv1kcinw] { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Zasłona pod szufladą — istnieje tylko na wąskim ekranie. */
.rail-zaslona[b-0bdv1kcinw] { display: none; }

/* ─── Wąski ekran ─────────────────────────────────────────────────────────
   ⚠ Szyna jest SZUFLADĄ, nie połową ekranu. Wcześniej stała na stałe z
   `max-height: 40vh` — czyli na telefonie prawie połowa widoku szła na listę
   kanałów, a na rozmowę zostawał pasek. Teraz domyślnie jest schowana i
   wjeżdża po dotknięciu hamburgera; wejście w kanał ją zamyka.            */
@media (max-width: 900px) {
    .chat-shell[b-0bdv1kcinw] { grid-template-columns: 1fr; }

    .chat-rail[b-0bdv1kcinw] {
        position: absolute; inset: 0 auto 0 0; z-index: 40;
        width: min(320px, 86vw);
        transform: translateX(-101%);
        transition: transform 0.22s ease;
        box-shadow: 12px 0 28px -18px rgba(0,0,0,0.5);
    }
    .chat-shell.rail-on .chat-rail[b-0bdv1kcinw] { transform: translateX(0); }

    .rail-zaslona[b-0bdv1kcinw] {
        display: block; position: absolute; inset: 0; z-index: 30;
        background: rgba(0,0,0,0.34);
        opacity: 0; pointer-events: none; transition: opacity 0.22s;
    }
    .chat-shell.rail-on .rail-zaslona[b-0bdv1kcinw] { opacity: 1; pointer-events: auto; }

    /* Szyna zjechała z ekranu — od TEGO progu (nie od 768 px) pusty ekran musi mieć własny
       przycisk otwierający listę kanałów. To jedyne dojście do niej w tym stanie: nagłówka
       rozmowy z „hamburgerem" tu nie ma, bo nie ma wybranej rozmowy. */
    .blank-szyna[b-0bdv1kcinw] { display: inline-flex; }

    .rail-zamknij[b-0bdv1kcinw] {
        display: grid; place-items: center; width: 30px; height: 30px; flex: none;
        border: none; background: none; color: var(--text-soft); cursor: pointer; border-radius: 7px;
    }
    .rail-zamknij:hover[b-0bdv1kcinw] { background: var(--cream-2); }
    .rail-zamknij svg[b-0bdv1kcinw] { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

    .h-menu[b-0bdv1kcinw] {
        display: grid; place-items: center; width: 32px; height: 32px; flex: none;
        border: none; background: none; color: var(--text-soft); cursor: pointer; border-radius: 7px;
        margin-left: -0.35rem;
    }
    .h-menu:hover[b-0bdv1kcinw] { background: var(--cream-2); }
    .h-menu svg[b-0bdv1kcinw] { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

    .chat-header[b-0bdv1kcinw] { padding: 0 0.6rem; gap: 0.4rem; }
    .h-name[b-0bdv1kcinw] { font-size: 1.15rem; }
    .h-topic[b-0bdv1kcinw], .h-online[b-0bdv1kcinw] { display: none; }

    .stream[b-0bdv1kcinw] { padding: 0.75rem 0.8rem 0.5rem; }
    .composer-wrap[b-0bdv1kcinw] { padding: 0.35rem 0.8rem 0.8rem; }
    .czat-pisza[b-0bdv1kcinw] { height: 0.75rem; margin: 0 0 -0.75rem; font-size: 10px; line-height: 0.75rem; }
    .czat-kolumna[b-0bdv1kcinw] { max-width: 86%; }
    .czat-panel[b-0bdv1kcinw] { max-height: 55%; }
    .czat-panel-head[b-0bdv1kcinw] { padding: 0.55rem 0.8rem; }

    /* Tablet (769–900 px): najechanie kursorem bywa, ale bywa też dotyk — akcje stoją
       pod dymkiem na stałe. Telefon ma osobną regułę niżej. */
    .czat-akcje[b-0bdv1kcinw] { position: static; opacity: 1; pointer-events: auto; margin-top: 4px; box-shadow: none; background: transparent; border: none; padding: 0; }
    .czat-w.moja .czat-akcje[b-0bdv1kcinw] { justify-content: flex-end; }
}

/* ─── Telefon (≤768 px): akcje pod PRZYTRZYMANIEM ─────────────────────────
   Do 12.08.2026 stały tu na stałe — sześć przycisków pod każdą wypowiedzią, czyli przy
   krótkich zdaniach więcej przycisków niż treści. Teraz odsłania je przytrzymanie palca
   (liczy je `abc-czat.js`, bo zdarzenie `contextmenu` na dotyku jest globalnie zdławione),
   a dotknięcie gdziekolwiek indziej je chowa.

   ⚠ Reguła najechania (`:hover`) MUSI zostać tu przebita jawnie: na dotyku hover potrafi
   „przykleić się" do ostatnio dotkniętego elementu i akcje zostawałyby na ekranie na stałe. */
@media (max-width: 768px) {
    .czat-akcje[b-0bdv1kcinw],
    .czat-w:hover .czat-akcje[b-0bdv1kcinw],
    .czat-w:focus-within .czat-akcje[b-0bdv1kcinw] {
        position: static;
        opacity: 0;
        pointer-events: none;
        height: 0;
        margin: 0;
        overflow: hidden;
        box-shadow: none;
        background: transparent;
        border: none;
        padding: 0;
    }

    .czat-w.akcje-na-wierzchu .czat-akcje[b-0bdv1kcinw] {
        opacity: 1;
        pointer-events: auto;
        height: auto;
        margin-top: 4px;
        overflow: visible;
        flex-wrap: wrap;
    }
    .czat-w.moja.akcje-na-wierzchu .czat-akcje[b-0bdv1kcinw] { justify-content: flex-end; }

    /* Odsłonięta wiadomość ma być widać, którą się trzyma. */
    .czat-w.akcje-na-wierzchu .czat-dymek[b-0bdv1kcinw] {
        border-color: color-mix(in srgb, var(--p1) 45%, var(--line));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--global-palette1) 8%, transparent);
    }

    /* Bez tego przytrzymanie otwiera systemowe „Kopiuj/Udostępnij" NAD naszymi akcjami.
       Zaznaczanie tekstu zostaje włączone — z rozmowy trzeba móc skopiować numer zamówienia. */
    .czat-dymek[b-0bdv1kcinw] { -webkit-touch-callout: none; }

    /* Przyciski akcji rosną — 24 px to cel dla kursora, nie dla palca. */
    .czat-w.akcje-na-wierzchu .msg-akcja[b-0bdv1kcinw] { min-width: 34px; height: 34px; }
    .emoji-siatka[b-0bdv1kcinw] { max-height: 132px; }

    /* ⚠ PASEK FORMATOWANIA JEST TU SCHOWANY. Dziewięć przycisków na stałe pod polem zabiera
       na telefonie tyle pionu, co dwie wypowiedzi — a formatuje się co którąś wiadomość,
       nie każdą. Odsłania go przycisk „Aa” z dolnego rzędu (klasa mobile-only).

       ⚠ Rząd przewija się W BOK, nie łamie na dwie linie: łamanie dawałoby kompozytor,
       który rośnie i maleje przy każdym otwarciu paska, przesuwając rozmowę pod palcem. */
    .composer-format[b-0bdv1kcinw] { display: none; }
    .composer-format.otwarty[b-0bdv1kcinw] {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 0.15rem;
    }
    .composer-format.otwarty[b-0bdv1kcinw]::-webkit-scrollbar { display: none; }

    /* Cel dla palca, nie dla kursora — tak samo jak przyciski akcji wyżej. */
    .fmt-btn[b-0bdv1kcinw] { width: 34px; height: 34px; }
    .ikona-format[b-0bdv1kcinw] { width: 16px; height: 16px; }
}

/* ── Cele dotykowe czatu ──────────────────────────────────────────────────────
   Zmierzone 18.08.2026: 59 celów poniżej progu na tablecie i telefonie. Ekran czatu
   doszedł do przeglądu dopiero tej nocy (kanał otwiera się kliknięciem w wiersz, nie
   odnośnikiem, więc sonda nie umiała się do niego dostać).

   ⚠ Plakietka reakcji (`.msg-reakcja`) rośnie do 32 px, nie 44: reakcji bywa przy
   wiadomości kilkanaście obok siebie i przy 44 px pasek zająłby dwa wiersze na telefonie.
   32 px to kompromis między palcem a czytelnością wątku — świadomy, nie przeoczony. */
@media (pointer: coarse) {
    .h-ikona[b-0bdv1kcinw] {
        min-width: 40px;
        min-height: 40px;
    }
    .czat-ava[b-0bdv1kcinw] {
        width: 40px;
        height: 40px;
    }
    .msg-reakcja[b-0bdv1kcinw] {
        min-height: 32px;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
/* /Components/Pages/Clients/BillingPage.razor.rz.scp.css */
/* Do rozliczenia → rejestracja faktury. Scoped CSS. */

.bl-toolbar[b-a0dmd6lwq8] {
    display: flex;
    align-items: flex-end;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.bl-field[b-a0dmd6lwq8] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.bl-field label[b-a0dmd6lwq8] { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-soft); }
.bl-field select[b-a0dmd6lwq8] { min-width: 14rem; }
.bl-spacer[b-a0dmd6lwq8] { flex: 1; }

/* ── Filtry ──
   Okres na górze i osobno, bo to on jest pierwszym pytaniem przy fakturowaniu; wybieraki pod nim
   w jednej siatce, żeby przy wąskim oknie zawijały się równo, a nie schodkami. */

.bl-filtry[b-a0dmd6lwq8] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.bl-zakresy[b-a0dmd6lwq8] { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.bl-pola[b-a0dmd6lwq8] {
    display: grid;
    /* `minmax(0, …)` — bez zera jako minimum element siatki nie da się zwęzić poniżej zawartości
       i długa nazwa kontrahenta w wybieraku rozpycha cały rząd. */
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: 0.6rem;
    align-items: end;
}

/* Wybieraki w siatce mają swój rozmiar od kolumny, nie od najdłuższej opcji. */
.bl-pola .bl-field select[b-a0dmd6lwq8],
.bl-pola .bl-field input[b-a0dmd6lwq8] { min-width: 0; width: 100%; }

/* Szukanie dostaje więcej miejsca niż wybieraki — wpisuje się w nie zdanie, nie wybiera pozycję. */
.bl-field-szukaj[b-a0dmd6lwq8] { grid-column: span 2; }

.bl-podpis[b-a0dmd6lwq8] { font-size: 11.5px; color: var(--text-soft); }

.bl-podsumowanie[b-a0dmd6lwq8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--text-soft);
}

.bl-nota[b-a0dmd6lwq8] {
    margin: 0 0 0.8rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--p1);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--text-soft);
}

.bl-total[b-a0dmd6lwq8] { text-align: right; }
.bl-total-h[b-a0dmd6lwq8] { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.bl-total-l[b-a0dmd6lwq8] { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft); }

/* ── Grupy kontrahentów ── */

.bl-group[b-a0dmd6lwq8] { margin-bottom: 0.9rem; }

.bl-group-head[b-a0dmd6lwq8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.bl-check[b-a0dmd6lwq8] { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 13.5px; }

/* Prawa strona nagłówka grupy: suma i przycisk „Pokaż wpisy" trzymają się razem.
   Bez tego `justify-content: space-between` rozrzuciłoby trzy elementy po całej szerokości
   i suma wylądowałaby na środku, z dala od kontrahenta, którego dotyczy. */
.bl-group-akcje[b-a0dmd6lwq8] { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.bl-group-sum[b-a0dmd6lwq8] { font-size: 12.5px; color: var(--text-soft); white-space: nowrap; }

.bl-table[b-a0dmd6lwq8] { font-size: 12.5px; }
.bl-row.picked[b-a0dmd6lwq8] { background: var(--cream); }
/* ⚠ `flex: 1` I `min-width: 0` RAZEM — jedno bez drugiego nie działa. Na telefonie komórka
   tabeli staje się układem elastycznym; bez `flex: 1` ten element kurczy się do najdłuższego
   słowa, a bez `min-width: 0` nie da się go zwęzić poniżej zawartości i wypycha wiersz. */
.bl-work[b-a0dmd6lwq8] { flex: 1; min-width: 0; }

.bl-engagement[b-a0dmd6lwq8] { font-size: 11px; color: var(--text-soft); margin-left: 0.4rem; }

/* ⚠ Na telefonie nazwa zlecenia dostaje WŁASNĄ linijkę. Wpisana w tę samą co opis pracy,
   zaczyna się przy prawej krawędzi i łamie po jednym słowie — a jest informacją drugorzędną,
   więc pod spodem i od lewej czyta się ją lepiej niż w resztce miejsca. */
@media (max-width: 768px) {
    .bl-engagement[b-a0dmd6lwq8] { display: block; margin-left: 0; text-align: right; }
}

/* ── Pasek zaznaczenia ── */

.bl-selection[b-a0dmd6lwq8] {
    position: sticky;
    bottom: 0.8rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: 0.7rem 0.9rem;
    background: var(--paper);
    border: 1px solid var(--line-strong, var(--line));
    border-left: 3px solid var(--p1);
    border-radius: 10px;
    box-shadow: var(--shadow-md, var(--shadow-sm));
    font-size: 13px;
}

.bl-selection .mono[b-a0dmd6lwq8] { font-variant-numeric: tabular-nums; }

/* ── Faktury ── */

.bl-invoices-head[b-a0dmd6lwq8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}

.bl-section-title[b-a0dmd6lwq8] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-soft);
    margin: 0;
}

/* ⚠ Faktura wskazana adresem (`/billing?client=…&invoice=…`) — wejście z osi czasu kontrahenta.
   Bez wyróżnienia człowiek ląduje na liście faktur i nie wie, która z nich była tą klikniętą;
   skok bez wskazania nie jest odpowiedzią. Ton ten sam, co pasek zaznaczenia niżej: kreska
   z lewej w kolorze wiodącym i cieplejsze tło.

   Tło idzie na `td`, a nie na `tr`: na telefonie `.data-table.responsive` przerabia wiersz na
   układ kartowy i tło z `tr` bywa wtedy przykryte tłem komórek. */
.bl-invoice-row.wskazana > td[b-a0dmd6lwq8] { background: var(--cream); }
.bl-invoice-row.wskazana > td:first-child[b-a0dmd6lwq8] { box-shadow: inset 3px 0 0 var(--p1); }

.bl-summary[b-a0dmd6lwq8] {
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--p1);
    border-radius: 6px;
    font-size: 12.5px;
}

@media (max-width: 760px) {
    .bl-field select[b-a0dmd6lwq8] { min-width: 0; width: 100%; }
    .bl-field[b-a0dmd6lwq8] { width: 100%; }
    /* Na telefonie każde pole bierze całą szerokość — dwie kolumny to tam dwa ścieśnięte wybieraki. */
    .bl-pola[b-a0dmd6lwq8] { grid-template-columns: 1fr; }
    .bl-field-szukaj[b-a0dmd6lwq8] { grid-column: auto; }
}
/* /Components/Pages/Clients/ClientCardPage.razor.rz.scp.css */
/* Karta kontrahenta — układ dwukolumnowy (fakty/osoby/reguły | oś czasu poczty).
   Scoped CSS: działa wyłącznie w tym komponencie. */

.client-card-grid[b-albimi99e9] {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* Grid items domyślnie mają min-width: auto — bez tego długi temat rozpycha kolumnę
   i ellipsis nigdy się nie odpala. */
.client-card-grid > *[b-albimi99e9] {
    min-width: 0;
}

@media (max-width: 900px) {
    .client-card-grid[b-albimi99e9] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.section-title[b-albimi99e9] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-soft);
    margin: 0 0 0.7rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.fact-list[b-albimi99e9] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 0.8rem;
    margin: 0;
    font-size: 12.5px;
}

.fact-list dt[b-albimi99e9] {
    color: var(--text-faint);
}

.fact-list dd[b-albimi99e9] {
    margin: 0;
    text-align: right;
}

.plain-list[b-albimi99e9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.plain-list li[b-albimi99e9] {
    min-width: 0;
}

.person-name[b-albimi99e9] {
    display: block;
    font-size: 13px;
    font-weight: 500;
}

.person-meta[b-albimi99e9] {
    display: block;
    font-size: 11px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rule-row[b-albimi99e9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 12.5px;
}

/* Wykonana praca — ostatnie wpisy czasu */
.work-row[b-albimi99e9] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 12px;
    min-width: 0;
}

.work-time[b-albimi99e9] { font-weight: 600; white-space: nowrap; min-width: 3.6rem; }

.work-what[b-albimi99e9] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-date[b-albimi99e9] { color: var(--text-faint); white-space: nowrap; }

/* Faktury kontrahenta */
.invoice-row[b-albimi99e9] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 12px;
    min-width: 0;
}

.invoice-number[b-albimi99e9] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-amount[b-albimi99e9] { font-weight: 600; white-space: nowrap; }
.invoice-date[b-albimi99e9] { color: var(--text-faint); white-space: nowrap; }

/* ⚠ Ta reguła dotyczy WYŁĄCZNIE wiersza reguły pocztowej, który ma dokładnie JEDNO dziecko
   `.mono` — adres albo domenę. Do 07.09.2026 tę samą klasę `rule-row` nosił wiersz wydatku,
   a on ma dwoje takich dzieci (datę i kwotę); oba dostawały stąd `flex: 1`, więc data, opis
   i kwota dzieliły szerokość panelu po równo — po 73 px z 283 px. Wiersz wydatku ma teraz
   własną klasę `.expense-row` niżej i tu już nie wchodzi. */
.rule-row > .mono[b-albimi99e9] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rule-add[b-albimi99e9] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

.rule-add input[b-albimi99e9] {
    flex: 1;
    min-width: 0;
}

/* ── Wydatki kontrahenta ──────────────────────────────────────────────────────────────────
   Trzy elementy w wierszu, a tylko jeden z nich ma prawo się kurczyć: opis. Data i kwota
   zajmują tyle, ile naprawdę zajmują — kwota, którą się komuś wystawia, nie może zostać
   ucięta przez wielokropek, bo `214,50 P…` czyta się jak kwota w nieznanej walucie. */
.expense-row[b-albimi99e9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 12.5px;
}

.expense-date[b-albimi99e9] {
    flex: 0 0 auto;
    color: var(--text-soft);
    font-size: 11.5px;
    white-space: nowrap;
}

/* Opis bierze CAŁE pozostałe miejsce. `min-width: 0` zostaje, bo bez niego element flexa nie
   zejdzie poniżej najdłuższego wyrazu — ale tu ma zejść dopiero wtedy, gdy naprawdę zabraknie
   miejsca, a nie dlatego, że sąsiad bez powodu wziął sobie jedną trzecią panelu. */
.expense-what[b-albimi99e9] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}

.expense-amount[b-albimi99e9] {
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Formularz dopisywania. Pola mają szerokości wynikające z tego, co w nich stoi:
   data i kwota są krótkie i stałe, opis zjada resztę i to on zawija wiersz na wąskim ekranie. */
.expense-add[b-albimi99e9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

.expense-add-date[b-albimi99e9] {
    flex: 0 0 auto;
    width: 9.5rem;
}

.expense-add-what[b-albimi99e9] {
    flex: 1 1 11rem;
    min-width: 11rem;
}

.expense-add-amount[b-albimi99e9] {
    flex: 0 0 auto;
    width: 7.5rem;
}

.preview-box[b-albimi99e9] {
    margin-top: 0.6rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--p1);
    border-radius: 6px;
    font-size: 12.5px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* ── Cztery kafle nad kartą ──────────────────────────────────────────────────
   Sam UKŁAD kolumn; wygląd kafelka (.kpi, .kpi-label, .kpi-value, .kpi-sub, .tone-*)
   mieszka w app.css i ma tam zostać — te same kafle stoją na pulpicie i w raportach,
   a styl zakresowy działałby wyłącznie na tym ekranie. */
.kpi-strip[b-albimi99e9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* Kafel „Do rozliczenia" PROWADZI do rozliczeń, więc jest odnośnikiem, a nie ramką
   z liczbą. Tutaj tylko to, czego <a> nie dziedziczy — reszta wyglądu z .kpi. */
a.kpi[b-albimi99e9] {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.kpi:hover .kpi-sub[b-albimi99e9],
a.kpi:focus-visible .kpi-sub[b-albimi99e9] { color: var(--p1); }

@media (max-width: 1100px) {
    .kpi-strip[b-albimi99e9] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
}

@media (max-width: 520px) {
    .kpi-strip[b-albimi99e9] { grid-template-columns: minmax(0, 1fr); }
}

/* ── Wspólna oś czasu (poczta + praca + faktury) ── */

.tl-head[b-albimi99e9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

.tl-head .section-title[b-albimi99e9] { margin: 0; }
.tl-filters[b-albimi99e9] { display: flex; gap: 0.3rem; flex-wrap: wrap; }

/* Nagłówek dnia. ⚠ Zastąpił datę powtarzaną w KAŻDYM wierszu — przy dwudziestu pięciu
   pozycjach ten sam napis stał na stronie dwadzieścia parę razy i nie rozróżniał niczego. */
.feed-day[b-albimi99e9] {
    padding: 0.85rem 0 0.35rem;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    font-weight: 600;
}

.feed > .feed-day:first-child[b-albimi99e9] { padding-top: 0; }

.feed-list[b-albimi99e9] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feed-item[b-albimi99e9] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: start;
    padding: 0.6rem 0;
    position: relative;
}

/* Nić łącząca zdarzenia w jeden ciąg. Biegnie od dołu ikony do następnego wiersza,
   więc ostatnie zdarzenie dnia jej nie dostaje — nie ma z czym łączyć. */
.feed-item[b-albimi99e9]::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 2.5rem;
    bottom: -0.6rem;
    width: 2px;
    background: var(--line);
}

.feed-item:last-child[b-albimi99e9]::before { display: none; }

.feed-icon[b-albimi99e9] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #fff;
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow-sm);
}

.feed-icon svg[b-albimi99e9] {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Kolor niesie rodzaj zdarzenia szybciej niż napis — dlatego zastąpił szarą plakietkę
   z małym tekstem. Barwy z palety, nie z palca: poczta ma swój kolor kanału, praca
   firmową zieleń, faktura ciemną zieleń nagłówków, poprawka barwę ostrzeżenia. */
.fi-mail[b-albimi99e9] { background: linear-gradient(135deg, color-mix(in srgb, var(--ch-email) 75%, white), var(--ch-email)); }
.fi-time[b-albimi99e9] { background: linear-gradient(135deg, color-mix(in srgb, var(--p1) 78%, white), var(--p1)); }
.fi-invoice[b-albimi99e9] { background: linear-gradient(135deg, var(--p5), var(--p4)); }
.fi-correction[b-albimi99e9] { background: linear-gradient(135deg, color-mix(in srgb, var(--warn) 80%, white), var(--warn)); }

.feed-body[b-albimi99e9] { min-width: 0; }

.feed-line1[b-albimi99e9] { margin-bottom: 2px; }

/* Inline, nie block — tytuł bywa odnośnikiem, a wiersz ma się łamać jak zdanie. */
.mail-subject[b-albimi99e9] {
    font-size: 13px;
    font-weight: 500;
}

.feed-line2[b-albimi99e9] {
    font-size: 11.5px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Prawa kolumna: kwota faktury albo długość pracy. Ta liczba jest powodem, dla którego
   ktoś w ogóle otwiera kartę — wcześniej stała doklejona za kropką w linijce meta. */
.feed-right[b-albimi99e9] {
    text-align: right;
    white-space: nowrap;
    padding-top: 1px;
}

.feed-amt[b-albimi99e9] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.feed-amt.kwota[b-albimi99e9] { color: var(--p1); }

.feed-time[b-albimi99e9] {
    display: block;
    font-size: 11px;
    color: var(--text-soft);
    margin-top: 2px;
}

/* Nagrobek — wątek istnieje, ale użytkownik nie ma dostępu do jego skrzynki.
   Celowo widoczny (nie ukrywamy wiersza), celowo pozbawiony treści. */
.feed-item.tombstone .mail-locked[b-albimi99e9] {
    font-size: 12.5px;
    color: var(--text-faint);
    font-style: italic;
}

.feed-item.tombstone[b-albimi99e9] { opacity: 0.75; }

/* Na wąskim ekranie kwota schodzi pod treść — trzecia kolumna zjadała tam tytuł. */
@media (max-width: 560px) {
    .feed-item[b-albimi99e9] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .feed-right[b-albimi99e9] {
        grid-column: 2;
        text-align: left;
    }
}
/* /Components/Pages/Clients/KartaDnia.razor.rz.scp.css */
/* Karta jednego dnia — wariant telefonowy. Scoped CSS: klasy żyją tylko w tym komponencie. */

.day-card[b-vsek36e2en] {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    overflow: hidden;
    margin-bottom: 0.6rem;
}

.day-card.dzis[b-vsek36e2en] { border-color: var(--p1); }
.day-card.wskazany[b-vsek36e2en] { box-shadow: inset 3px 0 0 var(--p1); }

/* Góra karty: dzień i suma, pod nimi miara dnia. Jedno tło i jedna kreska oddzielająca od wpisów. */
.dc-top[b-vsek36e2en] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
}

.dc-head[b-vsek36e2en] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 12.5px;
}

.dc-day[b-vsek36e2en] { font-weight: 600; min-width: 0; }

/* Suma dnia — liczba, którą widać pierwszą: większa, krojem liczb, przy prawej krawędzi. */
.dc-sum[b-vsek36e2en] {
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* W kroju liczb spacja ma szerokość cyfry — bez zwężenia „9 h 30 min" rozjeżdża się na boki. */
.dc-sum[b-vsek36e2en], .dc-time[b-vsek36e2en] { word-spacing: -0.3em; }

/* ── Miara dnia: pasek sumy na tle osi tygodnia, kreska 8 h, część ponad ───────────────────── */
.dc-miara[b-vsek36e2en] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.dc-pasek[b-vsek36e2en] {
    position: relative;
    display: flex;
    height: 8px;
    border-radius: 4px;
    background: var(--cream-2);
    box-shadow: inset 0 0 0 1px var(--line);
    overflow: hidden;
}

.dc-pasek-do8[b-vsek36e2en] { background: var(--p1); }
.dc-pasek-ponad[b-vsek36e2en] { background: var(--warn); }

.dc-pasek-8[b-vsek36e2en] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--text);
}

.dc-podpis[b-vsek36e2en] { font-size: 11.5px; color: var(--text-soft); }
/* Odstęp przed kropką-łącznikiem: Blazor wycina spacje między znacznikami, więc bez tego
   wychodziło „4 wpisy· +1 h 30 min". */
.dc-ponad[b-vsek36e2en] { margin-left: 0.25rem; color: var(--warn-mocny); font-weight: 500; }
.dc-run[b-vsek36e2en] { margin-left: 0.25rem; color: var(--p1); }
.dc-miara .dc-podpis > .dc-run:first-child[b-vsek36e2en] { margin-left: 0; }

/* ⚠ Cały wiersz jest celem dotykowym i ma co najmniej 44 px wysokości — przegląd interfejsu
   naliczył kiedyś 28 za małych celów na tablecie i 16 na telefonie. */
.dc-entry[b-vsek36e2en], .dc-add[b-vsek36e2en] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: none;
    border-bottom: 1px solid var(--line);
    background: transparent;
    /* Kolor napisu JAWNIE z motywu — przycisk bierze domyślnie systemowy czarny, nieczytelny
       na ciemnej karcie. */
    color: var(--text);
    text-align: left;
    font-size: 12.5px;
    cursor: pointer;
}

.dc-entry:focus-visible[b-vsek36e2en], .dc-add:focus-visible[b-vsek36e2en] { outline: 2px solid var(--p1); outline-offset: -2px; }

.dc-entry.locked[b-vsek36e2en] {
    background: repeating-linear-gradient(45deg,
        var(--cream), var(--cream) 4px, transparent 4px, transparent 8px);
}

.dc-body[b-vsek36e2en] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dc-who[b-vsek36e2en] { font-weight: 500; }
.dc-what[b-vsek36e2en] { color: var(--text-soft); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-author[b-vsek36e2en], .dc-locked[b-vsek36e2en] { margin-left: 0.25rem; color: var(--text-soft); }
.dc-time[b-vsek36e2en] { font-variant-numeric: tabular-nums; white-space: nowrap; }

.bdot[b-vsek36e2en] { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.bdot.bill[b-vsek36e2en] { background: var(--p1); }
.bdot.nobill[b-vsek36e2en] { background: var(--line-strong); }

.dc-add[b-vsek36e2en] {
    justify-content: center;
    border-bottom: none;
    color: var(--p1);
    font-weight: 600;
}
/* /Components/Pages/Clients/PanelWpisuCzasu.razor.rz.scp.css */
/* Panel wpisu czasu. Scoped CSS — klasy żyją tylko w tym komponencie; szkielet okna
   (.modal-overlay / .modal-dialog / .modal-header / .modal-body / .modal-footer) jest wspólny
   i stoi w app.css, więc go tu NIE powtarzamy. */

.panel-czasu[b-61rovwmwel] { max-width: 620px; }

.pc-tryb[b-61rovwmwel] { color: var(--text-soft); font-weight: 400; }

.pc-meta[b-61rovwmwel] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0 0 0.8rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: var(--cream);
    font-size: 11.5px;
    color: var(--text-soft);
}

.pc-blokada[b-61rovwmwel] {
    margin: 0 0 0.8rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border-left: 3px solid var(--warn);
    background: var(--warn-bg);
    color: var(--warn-mocny);
    font-size: 12.5px;
}

.pc-blokada a[b-61rovwmwel] { color: inherit; }

.pc-form[b-61rovwmwel] { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.pc-field[b-61rovwmwel] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1 1 12rem; }
.pc-grow[b-61rovwmwel] { flex: 1 1 100%; }

.pc-field label[b-61rovwmwel], .pc-label[b-61rovwmwel] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
}

.pc-field select[b-61rovwmwel], .pc-field input[b-61rovwmwel], .pc-field textarea[b-61rovwmwel] { width: 100%; }

/* ⚠ Podpowiedź nie schodzi poniżej 12 px i nie używa najsłabszego szarego — inaczej powód,
   dla którego pole jest wyłączone, byłby najmniej czytelną rzeczą na ekranie. */
.pc-hint[b-61rovwmwel] { font-size: 12px; color: var(--text-soft); }
.pc-hint-uwaga[b-61rovwmwel] { color: var(--p1); }

/* Para godzin i minut ZOSTAJE parą także na telefonie — dwa pola obok siebie mieszczą się bez
   problemu, a rozciągnięte na całą szerokość wyglądałyby jak dwa osobne pytania. */
.pc-time-pair[b-61rovwmwel] { display: flex; align-items: center; gap: 0.35rem; }
.pc-unit[b-61rovwmwel] { display: inline-flex; align-items: baseline; gap: 0.25rem; flex: 1; }
.pc-unit input[b-61rovwmwel] { text-align: right; font-variant-numeric: tabular-nums; }
.pc-unit-label[b-61rovwmwel] { font-size: 11.5px; color: var(--text-soft); }

@media (max-width: 760px) {
    .panel-czasu[b-61rovwmwel] { max-width: 100%; }
    .pc-field[b-61rovwmwel] { flex: 1 1 100%; }
}
/* /Components/Pages/Clients/PasmoDnia.razor.rz.scp.css */
/* Pasmo jednego dnia. Scoped CSS — te klasy żyją wyłącznie w tym komponencie.
   Kolory WYŁĄCZNIE przez zmienne: wpisany na sztywno szary nie idzie za motywem ciemnym. */

th.col-day[b-moyi2guhlp] {
    text-align: left;
    vertical-align: middle;
    /* ⚠ Lewy odstęp MUSI zmieścić kreskę „dzień wskazany adresem" (3 px): do 02.10.2026 było tu
       0.2rem i kreska nachodziła na pierwszą literę nazwy dnia. */
    padding: 0.6rem 0.7rem 0.6rem 0.75rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    font-weight: 500;
    background: var(--paper);
    position: sticky;
    left: 0;
    z-index: 3;
}

th.col-day.wskazany[b-moyi2guhlp] { box-shadow: inset 3px 0 0 var(--p1); }

.d-name[b-moyi2guhlp] { display: block; font-size: 13px; font-weight: 600; }
.d-date[b-moyi2guhlp] { display: block; font-size: 11.5px; color: var(--text-soft); font-weight: 400; }

/* ── Suma dnia: liczba, którą widać pierwszą ─────────────────────────────────────────────────
   Krój liczb (.mono) i cyfry tabelaryczne, żeby siedem sum stało w równej kolumnie i dało się je
   przebiec wzrokiem z góry na dół. */
td.col-sum[b-moyi2guhlp] {
    padding: 0.6rem 1rem 0.6rem 0.2rem;
    border-bottom: 1px solid var(--line);
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

.d-sum[b-moyi2guhlp] {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    /* W kroju liczb spacja ma szerokość cyfry — bez tego „9 h 30 min" rozjeżdża się na boki. */
    word-spacing: -0.3em;
    color: var(--text);
}

/* To, co wyszło ponad pełny dzień — tym samym kolorem, co tło pasma za kreską „8 h". */
.d-ponad[b-moyi2guhlp] {
    display: block;
    margin-top: 0.1rem;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--warn-mocny);
}

.d-run[b-moyi2guhlp] { display: block; margin-top: 0.1rem; font-size: 11px; color: var(--p1); }

tr.dzis th.col-day[b-moyi2guhlp], tr.dzis td.col-sum[b-moyi2guhlp], tr.dzis td.band[b-moyi2guhlp] { background: var(--cream); }

td.band[b-moyi2guhlp] {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    width: 100%;
}

/* ── Pasmo ───────────────────────────────────────────────────────────────────────────────────
   Podziałka godzinowa jest TŁEM, nie danymi — czytnik dostaje treść z nazwy dostępnej przycisku.
   `--krok` (procent szerokości na jedną godzinę) i `--osiem` (gdzie na osi stoi 8 godzin) wylicza
   komponent i wstawia w atrybut style, bo tylko on zna długość osi całego tygodnia.

   ⚠ Pasmo NIE MA wewnętrznego odstępu ani ramki po bokach, które przesuwałyby zawartość: procenty
   tła, kreski „8 h" i szerokości zapełnionej części muszą liczyć się od TEJ SAMEJ krawędzi, co
   podziałka w nagłówku tabeli. Obrys rysuje cień wewnętrzny, który nie zabiera miejsca. */
.band-inner[b-moyi2guhlp] {
    --seg-h: 32px;
    --seg-min: 34px;
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: calc(var(--seg-h) + 6px);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--line);
    background-color: var(--cream-2);
    background-image: repeating-linear-gradient(
        to right,
        var(--line-strong) 0, var(--line-strong) 1px,
        transparent 1px, transparent var(--krok, 12.5%));
    overflow: hidden;
}

/* Część dnia PONAD 8 godzin: inny odcień i kreska u dołu, od kreski „8 h" do końca pasków tego
   dnia. Leży NAD segmentami (jest półprzezroczysta i nie łapie kliknięć), więc zabarwia dokładnie
   ten kawałek wpisów, który za kreskę wyszedł.
   ⚠ Zabarwiony jest kawałek DNIA, nie cała oś za ósmą godziną: pierwsza wersja malowała wszystko
   na prawo od kreski, także w pustych dniach, i pół tabeli robiło się beżowe bez żadnej treści. */
.band-ponad[b-moyi2guhlp] {
    position: absolute;
    top: 3px;
    bottom: 3px;
    border-radius: 0 6px 6px 0;
    background: color-mix(in srgb, var(--warn) 24%, transparent);
    box-shadow: inset 0 -3px 0 var(--warn);
    pointer-events: none;
    z-index: 2;
}

/* Kreska „8 h" — pełny dzień. Ta sama pozycja, co podpis „8 h" na podziałce nad siatką; stoi
   w każdym wierszu, także pustym, żeby było widać, ile do pełnego dnia brakuje. */
.band-inner.os-ponad[b-moyi2guhlp]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--osiem, 100%) - 1px);
    width: 2px;
    background: var(--warn-mocny);
    opacity: 0.75;
    pointer-events: none;
    z-index: 2;
}

.band-fill[b-moyi2guhlp] {
    display: flex;
    align-items: stretch;
    gap: 2px;
    flex: 0 1 0%;
    /* Zapełniona część nie zwęzi się poniżej tego, co potrzebne, żeby w każdy wpis dało się trafić:
       tyle najmniejszych szerokości, ile jest wpisów (`--ile` wstawia komponent), plus odstępy.
       ⚠ Liczone WPROST, nie przez `min-content`: to drugie bierze szerokość nieskróconych napisów
       w segmentach i rozpycha całą tabelę poza kartę (zmierzone 02.10.2026: +258 px). */
    min-width: calc(var(--ile, 1) * (var(--seg-min) + 2px) + 1px);
    padding: 3px 0 3px 3px;
}

.seg[b-moyi2guhlp], .seg-add[b-moyi2guhlp] {
    min-width: var(--seg-min);
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    /* ⚠ Kolor napisu JAWNIE z motywu: przycisk bierze domyślnie kolor systemowy (czarny), a ten na
       ciemnej karcie motywu ciemnego jest nieczytelny (zmierzone na zrzucie 02.10.2026). */
    color: var(--text);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

/* ── Segment = jeden wpis ────────────────────────────────────────────────────────────────────
   ⚠ Zawartość segmentu jest ZAWIJANA, a segment ma stałą wysokość i ucina to, co spadło do
   drugiego wiersza. Dzięki temu każdy kawałek (inicjały, czas, osoba i czynność) albo mieści się
   CAŁY, albo go nie ma — nigdy nie jest ucięty w połowie. Zmierzone 02.10.2026: wąski wpis
   pokazywał „0:" zamiast „0:15", czyli gorzej niż nic. Kolejność = ważność: inicjały, czas, reszta.
   Informacja schowana z braku miejsca zostaje w nazwie dostępnej przycisku i w panelu wpisu —
   nie w dymku `title`, którego na dotyku nie ma. */
.seg[b-moyi2guhlp] {
    /* ⚠ Szerokość segmentu NIE zależy od jego zawartości — wyznacza ją wyłącznie czas wpisu.
       Bez tego napisy w segmencie (niezawijane) dyktują najmniejszą szerokość całej tabeli. */
    contain: inline-size;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: center;
    column-gap: 0.35rem;
    row-gap: var(--seg-h);
    height: var(--seg-h);
    padding: calc((var(--seg-h) - 22px) / 2) 0.4rem 0;
    overflow: hidden;
}

/* ⚠ Wysokość wiersza TYLKO dla napisów: kółko z inicjałami ma własny rozmiar i reguła na „każde
   dziecko" zrobiłaby z niego owal. */
.seg > *[b-moyi2guhlp] { flex: none; }
.seg-time[b-moyi2guhlp], .seg-rest[b-moyi2guhlp] { height: 20px; line-height: 20px; }

.seg:hover[b-moyi2guhlp], .seg-add:hover[b-moyi2guhlp] { border-color: var(--p1); }
/* Obrys fokusu do ŚRODKA: pasmo przycina to, co wystaje, więc obrys na zewnątrz byłby ucięty. */
.seg:focus-visible[b-moyi2guhlp], .seg-add:focus-visible[b-moyi2guhlp] { outline: 2px solid var(--p1); outline-offset: -2px; }

/* ⚠ NA DOTYKU CEL MUSI BYĆ WIĘKSZY. Trzydzieści dwa piksele wystarczają myszy i nie wystarczają
   palcowi. Wskaźnikiem jest SPOSÓB STEROWANIA, nie szerokość ekranu: `pointer: coarse` łapie też
   duży tablet z dotykiem, którego zapytanie o szerokość by przepuściło. */
@media (pointer: coarse) {
    .band-inner[b-moyi2guhlp] { --seg-h: 44px; --seg-min: 44px; }
}

/* ⚠ `word-spacing` ujemne: w kroju liczb każda spacja ma szerokość cyfry, więc „9 h 30 min"
   rozjeżdżało się na „9  h  30  min". Odstęp między liczbą a jednostką ma być wąski. */
.seg-time[b-moyi2guhlp] { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; word-spacing: -0.3em; }

/* Osoba i czynność dzielą to, co zostało: skracają się wielokropkiem, a gdy nie ma dla nich
   nawet kilku liter, spadają do drugiego wiersza (czyli znikają) w całości. */
.seg > .seg-rest[b-moyi2guhlp] {
    flex: 1 1 0;
    min-width: 3.75rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.seg-who[b-moyi2guhlp] { margin-right: 0.35rem; }
.seg-what[b-moyi2guhlp] { color: var(--text-soft); }

.seg > .bdot[b-moyi2guhlp] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: auto;
}

.bdot.bill[b-moyi2guhlp] { background: var(--p1); }
/* ⚠ Bez wartości zapasowej: `--line-strong` w palecie JEST i idzie za motywem ciemnym. */
.bdot.nobill[b-moyi2guhlp] { background: var(--line-strong); }

/* Zafakturowany: kreskowane tło + kłódka, ale NADAL przycisk — panel powie, dlaczego nie wolno. */
.seg.locked[b-moyi2guhlp] {
    background: repeating-linear-gradient(45deg,
        var(--cream), var(--cream) 4px, var(--paper) 4px, var(--paper) 8px);
    color: var(--text-soft);
}

.seg.locked[b-moyi2guhlp]::before { content: "🔒"; font-size: 9px; height: 20px; line-height: 20px; flex: none; }

/* Biegnący licznik nie ma jeszcze czasu, więc nie ma z czego wziąć szerokości — bierze ją z treści:
   inicjały i słowo „biegnie". Osobę i czynność niesie nazwa dostępna i panel wpisu. */
.seg.running[b-moyi2guhlp] {
    contain: none;
    margin: 3px 0 3px 2px;
    border-color: var(--p1);
    color: var(--p1);
    font-weight: 600;
}

.seg.running .seg-rest[b-moyi2guhlp] { display: none; }

.seg.nobill[b-moyi2guhlp] { border-style: dashed; }

/* „+" stoi przy LEWEJ krawędzi wolnego miejsca — zaraz za ostatnim wpisem dnia, a w pustym dniu
   na początku osi. Wyśrodkowany lądował pod kreską „8 h" i kreska przecinała napis. */
.seg-add[b-moyi2guhlp] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
    flex: 1 1 0;
    margin: 3px;
    padding: 0 0.6rem;
    overflow: hidden;
    background: transparent;
    border-style: dashed;
    color: var(--text-soft);
}

.seg-add .plus[b-moyi2guhlp] { font-size: 14px; line-height: 1; }
/* Napis ma własne tło w kolorze pasma: kreska podziałki godzinowej przechodzi POD nim, a nie
   przez środek słowa. */
.seg-add .plus-txt[b-moyi2guhlp] {
    padding: 0 0.3rem;
    margin-left: -0.3rem;
    border-radius: 3px;
    background: var(--cream-2);
    font-size: 12px;
    white-space: nowrap;
}
/* /Components/Pages/Clients/TimeLogPage.razor.rz.scp.css */
/* Rejestr czasu kontrahenta — formularz, tydzień i licznik. Scoped CSS: działa tylko w tym komponencie. */

.tl-head[b-v084tl0ir6] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

/* ── Biegnący licznik ── */

.timer-chip[b-v084tl0ir6] {
    display: flex;
    align-items: center;
    /* ⚠ Bez zawijania trzy przyciski i zegar nachodzą na siebie na wąskim ekranie — widać to
       na telefonie od razu po wejściu, bo plakietka stoi w nagłówku. */
    flex-wrap: wrap;
    gap: 0.7rem;
    padding: 0.55rem 0.8rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--p1);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.tpulse[b-v084tl0ir6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--p1);
    flex: none;
    animation: tpulse-b-v084tl0ir6 1.6s ease-in-out infinite;
}

@keyframes tpulse-b-v084tl0ir6 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.tinfo[b-v084tl0ir6] { min-width: 0; }
.tinfo .tt[b-v084tl0ir6] { font-size: 12.5px; font-weight: 500; }
.tinfo .ts[b-v084tl0ir6] { font-size: 11px; color: var(--text-soft); }
.tval[b-v084tl0ir6] { font-size: 15px; font-variant-numeric: tabular-nums; }

/* ── Górny pasek: trzy grupy i suma ──────────────────────────────────────────────────────────
   Dwa rzędy po dwie rzeczy: u góry TYDZIEŃ i jego suma, niżej WIDOK i AKCJE. Odstęp między
   grupami (2.5rem w poziomie, 1.25rem w pionie) jest kilka razy większy niż odstęp w grupie
   (0.35–0.5rem) — do 02.10.2026 wszystko stało w jednym rzędzie co 0.6rem i nie było widać,
   co do czego należy. Siatka, nie zawijany rząd: zawijają się wtedy CAŁE grupy, nigdy pojedynczy
   przycisk wyrwany z grupy. */
.tl-toolbar[b-v084tl0ir6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "tydzien suma"
        "widok   akcje";
    align-items: center;
    gap: 1.25rem 2.5rem;
    margin-bottom: 1.25rem;
    /* Menu „Akcje" rozwija się nad kartą formularza, która stoi niżej. */
    position: relative;
    z-index: 30;
}

.tl-grupa[b-v084tl0ir6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.tl-grupa-tydzien[b-v084tl0ir6] { grid-area: tydzien; }
.tl-grupa-widok[b-v084tl0ir6] { grid-area: widok; gap: 0.5rem 1.4rem; }
.tl-grupa-akcje[b-v084tl0ir6] { grid-area: akcje; justify-content: flex-end; }
.week-total[b-v084tl0ir6] { grid-area: suma; }

.week-nav[b-v084tl0ir6] { display: flex; align-items: center; gap: 0.35rem; }
.week-nav .wlabel[b-v084tl0ir6] { font-size: 14px; font-weight: 500; min-width: 13.5rem; text-align: center; }

/* ⚠ Pola kliknięcia co najmniej 32 px: strzałki tygodnia miały 28 px wysokości i kilkanaście
   szerokości — dwa najczęściej klikane przyciski ekranu były najmniejsze. */
.week-nav .btn[b-v084tl0ir6] { height: 32px; min-width: 32px; }
.week-nav .btn-ghost[b-v084tl0ir6] { font-size: 16px; padding: 0 0.55rem; }

/* ⚠ Czas pisany krojem liczb („9 h 30 min"): spacja ma tam szerokość cyfry, więc bez zwężenia
   liczba i jednostka rozjeżdżają się na boki. Jedna reguła dla wszystkich sum na tym ekranie. */
.week-total .wt-h[b-v084tl0ir6],
.tl-osoba .mono[b-v084tl0ir6] { word-spacing: -0.3em; }

/* Suma tygodnia — jedyna duża liczba na ekranie. Podpis mówi, czego i CZYJA to suma. */
.week-total[b-v084tl0ir6] { text-align: right; }
.week-total .wt-h[b-v084tl0ir6] { display: block; font-size: 22px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.week-total .wt-l[b-v084tl0ir6] { display: block; margin-top: 0.15rem; font-size: 12px; color: var(--text-soft); }

.wt-czyja[b-v084tl0ir6] {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--cream-2);
    color: var(--text);
    font-weight: 500;
}

/* Kolor tła odróżnia „cały zespół" od „Twoje godziny"; napis zostaje w kolorze tekstu, bo zielony
   na jasnozielonym nie ma dość kontrastu przy tej wielkości pisma. */
.wt-czyja.zespol[b-v084tl0ir6] { background: var(--ok-bg); }

/* ── Przełącznik widoku ──────────────────────────────────────────────────────────────────────
   Tor z gałką i napis obok. NIE wygląda jak przycisk akcji (nie ma tła ani ramki) i nie udaje
   plakietki filtra: stan widać po położeniu gałki i kolorze toru, a czytnik dostaje go
   z `aria-checked`. */
.tl-przel[b-v084tl0ir6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 32px;
    padding: 0.2rem 0.25rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.tl-przel:hover[b-v084tl0ir6] { color: var(--text); }
.tl-przel:focus-visible[b-v084tl0ir6] { outline: 2px solid var(--p1); outline-offset: 2px; }

.tl-przel-tor[b-v084tl0ir6] {
    position: relative;
    flex: none;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--line-faint);
    transition: background 0.15s;
}

.tl-przel-galka[b-v084tl0ir6] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s;
}

.tl-przel[aria-checked="true"][b-v084tl0ir6] { color: var(--text); font-weight: 500; }
.tl-przel[aria-checked="true"] .tl-przel-tor[b-v084tl0ir6] { background: var(--p1); }
.tl-przel[aria-checked="true"] .tl-przel-galka[b-v084tl0ir6] { transform: translateX(14px); }

@media (prefers-reduced-motion: reduce) {
    .tl-przel-tor[b-v084tl0ir6], .tl-przel-galka[b-v084tl0ir6] { transition: none; }
}

/* ── Wąski ekran: grupy jedna pod drugą, każda na całą szerokość ── */
@media (max-width: 900px) {
    .tl-toolbar[b-v084tl0ir6] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "tydzien"
            "suma"
            "widok"
            "akcje";
        gap: 1.25rem;
    }

    .week-total[b-v084tl0ir6] { text-align: left; }
    .tl-grupa-akcje[b-v084tl0ir6] { justify-content: flex-start; }
    .week-nav[b-v084tl0ir6] { width: 100%; }
    .week-nav .wlabel[b-v084tl0ir6] { flex: 1; min-width: 0; }
}

@media (pointer: coarse) {
    .week-nav .btn[b-v084tl0ir6] { height: 40px; min-width: 40px; }
    .tl-przel[b-v084tl0ir6] { min-height: 40px; }
}

/* ── Formularz „Dopisz czas" ─────────────────────────────────────────────────────────────────
   Trzy części jednej karty: nagłówek (tytuł + ostatnio używane czynności), pola w równej siatce
   i stopka z podpowiedzią po lewej i przyciskami po prawej. Pola mają tę samą szerokość kolumny
   i ten sam odstęp pionowy i poziomy; „Za co" zajmuje dwie kolumny. */

.tl-forma[b-v084tl0ir6] { margin-bottom: 1.25rem; }

.tl-forma-glowa[b-v084tl0ir6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 1rem 1.25rem 0;
}

.tl-forma-tytul[b-v084tl0ir6] { margin: 0; font-size: 14px; font-weight: 600; }

.quick-add[b-v084tl0ir6] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    align-items: start;
}

.qa-field[b-v084tl0ir6] { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.qa-field label[b-v084tl0ir6],
.qa-time-label[b-v084tl0ir6] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-soft);
}
/* Wszystkie pola tej samej wysokości (select i input mają z natury różne) — na dotyku wyższe. */
.qa-field select[b-v084tl0ir6], .qa-field input.form-input[b-v084tl0ir6] { width: 100%; min-width: 0; height: 36px; box-sizing: border-box; }
.qa-pomoc[b-v084tl0ir6] { font-size: 12px; color: var(--text-soft); }

/* „Ostatnio używane" — chipy czynności w nagłówku karty, NAD siatką pól (nie w niej; W-1 18.09.2026). */
.qa-recent[b-v084tl0ir6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.qa-recent-label[b-v084tl0ir6] { font-size: 12px; color: var(--text-soft); margin-right: 0.2rem; }
.qa-recent .f-chip[b-v084tl0ir6] { background: var(--cream-2); border-color: var(--line); color: var(--text); }
.qa-recent .f-chip:hover[b-v084tl0ir6] { border-color: var(--p1); color: var(--p1); }

.qa-zlecenie[b-v084tl0ir6] { display: flex; gap: 0.3rem; }
.qa-zlecenie select[b-v084tl0ir6] { flex: 1; min-width: 0; }
.qa-zlecenie .btn[b-v084tl0ir6] { flex: none; width: 36px; height: 36px; padding: 0; font-size: 16px; line-height: 1; border: 1px solid var(--line-strong); }

/* ── Czas: osobne pole godzin, osobne minut ──────────────────────────────────
   ⚠ Podpis stoi NAD parą i wiąże się z nią przez `aria-labelledby`, a nie przez <label for>:
   jeden podpis na dwa pola nie da się wskazać atrybutem `for`, a każde pole ma osobną
   etykietę czytnika ekranu („Godziny" / „Minuty"). Napisy „godz." i „min" są dla oka. */
.qa-time-pair[b-v084tl0ir6] { display: flex; align-items: center; gap: 0.6rem; }
.qa-unit[b-v084tl0ir6] { display: inline-flex; align-items: center; gap: 0.3rem; flex: 1; min-width: 0; }
.qa-unit input[b-v084tl0ir6] { text-align: right; font-variant-numeric: tabular-nums; }
.qa-unit-label[b-v084tl0ir6] { font-size: 12px; color: var(--text-soft); }

.qa-newengagement[b-v084tl0ir6] {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--line);
}
.qa-newengagement input[b-v084tl0ir6] { flex: 1; min-width: 0; }

/* Stopka: podpowiedź i przyciski w jednym rzędzie, obie rzeczy wyśrodkowane w pionie. */
.tl-forma-stopka[b-v084tl0ir6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--line);
    background: var(--cream);
    border-radius: 0 0 var(--radius) var(--radius);
}
.tl-forma-podpowiedz[b-v084tl0ir6] { margin: 0; font-size: 12.5px; color: var(--text-soft); }
.tl-klawisz[b-v084tl0ir6] {
    display: inline-block;
    margin-right: 0.15rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--paper);
    color: var(--text);
    font-size: 11.5px;
    font-weight: 600;
}
.qa-actions[b-v084tl0ir6] { display: flex; gap: 0.6rem; }

@media (pointer: coarse) {
    .qa-field select[b-v084tl0ir6], .qa-field input.form-input[b-v084tl0ir6] { height: 44px; }
    .qa-zlecenie .btn[b-v084tl0ir6] { width: 44px; height: 44px; }
}

@media (max-width: 900px) {
    .quick-add[b-v084tl0ir6] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .tl-forma-glowa[b-v084tl0ir6] { padding: 0.9rem 1rem 0; }
    .quick-add[b-v084tl0ir6] { grid-template-columns: minmax(0, 1fr); }
    .tl-forma-stopka[b-v084tl0ir6] { padding: 0.85rem 1rem; }
    .qa-actions[b-v084tl0ir6] { width: 100%; }
    .qa-actions .btn[b-v084tl0ir6] { flex: 1; }
    .timer-chip[b-v084tl0ir6] { width: 100%; }
}

/* ══ Rejestr JEDNEGO kontrahenta — dni w pionie, pasmo godzin w poziomie ══════════════════════
   Sam wiersz dnia (nagłówek + segmenty) rysuje komponent PasmoDnia i ma własny scoped CSS —
   scoped CSS nie sięga do znaczników innego komponentu, więc style muszą stać tam, gdzie
   znaczniki. Tutaj zostaje SZKIELET tabeli, podziałka nad nią i podpisy pod nią. */

.ctgrid[b-v084tl0ir6] { width: 100%; border-collapse: collapse; min-width: 620px; }

/* ⚠ Zdanie, bez którego ekran kłamie: mówi, czym są paski, ZANIM oko dojdzie do pierwszego z nich.
   Zwykłym kolorem tekstu i nie mniejsze niż 13 px — to nie jest przypis. */
.ctgrid-legenda[b-v084tl0ir6] {
    margin: 0 0 0.9rem;
    max-width: 62rem;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}

.day-cards .ctgrid-legenda[b-v084tl0ir6] { margin-bottom: 0.7rem; color: var(--text-soft); }

.ctgrid thead th[b-v084tl0ir6] {
    text-align: left;
    vertical-align: bottom;
    padding: 0 0 0.45rem;
    font-size: 11.5px;
    color: var(--text-soft);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
}

/* Odstępy nagłówków takie same jak w komórkach pod nimi (PasmoDnia.razor.css) — inaczej podpis
   kolumny stałby obok swojej kolumny. */
.ctgrid thead th.col-day[b-v084tl0ir6] { width: 8.5rem; padding-left: 0.75rem; padding-right: 0.7rem; }
.ctgrid thead th.col-sum[b-v084tl0ir6] { width: 1%; padding-left: 0.2rem; padding-right: 1rem; text-align: right; white-space: nowrap; }
.ctgrid thead th.col-band[b-v084tl0ir6] { padding-left: 0; padding-right: 0; }

/* ── Podziałka godzin ────────────────────────────────────────────────────────────────────────
   Podpis każdej godziny stoi NA jej kresce — w tym samym miejscu, w którym tło pasma rysuje
   kreskę (oba liczą położenie z tej samej długości osi). Pierwszy i ostatni podpis nie są
   wyśrodkowane, żeby nie wyszły poza kartę. */
.ctgrid .ruler[b-v084tl0ir6] { position: relative; display: block; height: 30px; }

.ctgrid .ruler .tick[b-v084tl0ir6] {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    padding-bottom: 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}

/* Kreseczka pod podpisem — pokazuje, do którego miejsca pasma podpis się odnosi. */
.ctgrid .ruler .tick[b-v084tl0ir6]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: 4px;
    background: var(--line-strong);
}

.ctgrid .ruler .tick.pierwszy[b-v084tl0ir6] { transform: none; }
.ctgrid .ruler .tick.pierwszy[b-v084tl0ir6]::after { left: 0; }
.ctgrid .ruler .tick.ostatni[b-v084tl0ir6] { transform: translateX(-100%); }
.ctgrid .ruler .tick.ostatni[b-v084tl0ir6]::after { left: auto; right: 0; }

/* „8 h" — pełny dzień. Ten sam kolor, co kreska na paśmie pod spodem. */
.ctgrid .ruler .tick.pelny-dzien[b-v084tl0ir6] { color: var(--warn-mocny); font-weight: 700; font-size: 12px; }
.ctgrid .ruler .tick.pelny-dzien[b-v084tl0ir6]::after { width: 2px; margin-left: -1px; height: 6px; background: var(--warn-mocny); }
.ctgrid .ruler .tick.pelny-dzien.ostatni[b-v084tl0ir6]::after { margin-left: 0; }

/* Na węższej siatce podpisy by się zlewały — zostaje co drugi (ekran oznacza „rzadsze" klasą;
   „8 h" nigdy do nich nie należy). */
@media (max-width: 1150px) {
    .ctgrid .ruler .tick.rzadsza[b-v084tl0ir6] { display: none; }
}

/* Kto pracował w tym tygodniu — legenda NAD kartą, nie w dymku: na dotyku dymek nie istnieje.
   Każda osoba to jedna pastylka (awatar, imię, czas); odstępy poziome i pionowe są takie same. */
.tl-osoby[b-v084tl0ir6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.6rem;
    margin: 0 0 1rem;
}
.tl-osoby-napis[b-v084tl0ir6] { margin-right: 0.2rem; font-size: 12.5px; color: var(--text-soft); }
.tl-osoba[b-v084tl0ir6] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.75rem 0.2rem 0.25rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    font-size: 12.5px;
}
.tl-osoba .mono[b-v084tl0ir6] { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* Karta tygodnia: nagłówek (zdanie o paskach), tabela, stopka (legenda). Nagłówek i stopka mają
   ten sam odstęp od lewej krawędzi co tabela (1,25 rem = 0,5 rem karty + 0,75 rem komórki dnia). */
.tl-tydzien[b-v084tl0ir6] { overflow: hidden; }
.ctgrid-legenda.tl-tydzien-glowa[b-v084tl0ir6] {
    max-width: none;
    margin: 0;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: var(--cream);
}
.tl-tydzien-tabela[b-v084tl0ir6] { overflow-x: auto; padding: 1rem 0.5rem 0.4rem; }
.ctgrid-note.tl-tydzien-stopka[b-v084tl0ir6] { margin: 0; padding: 0.8rem 1.25rem; gap: 0.5rem 1.2rem; border-top: 1px solid var(--line); }
.tl-strzalki[b-v084tl0ir6] { margin-left: auto; }
.ctgrid-note.tl-tydzien-stopka-tel[b-v084tl0ir6] { margin-top: 0.9rem; }

/* ⚠ To zdanie ratuje przed czytaniem pasma jak kalendarza. Nie schodzi poniżej 12 px i nie
   używa najsłabszego szarego — informacja, bez której ekran kłamie, nie może być najmniej
   czytelną rzeczą na stronie. */
.ctgrid-uwaga[b-v084tl0ir6] {
    margin: 0 0 0.7rem;
    padding: 0.45rem 0.7rem;
    border-left: 3px solid var(--p1);
    background: var(--cream);
    border-radius: 0 8px 8px 0;
    font-size: 12.5px;
}

.ctgrid-note[b-v084tl0ir6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0.5rem 0 0;
    font-size: 12px;
    color: var(--text-soft);
}

.ctgrid-note .leg[b-v084tl0ir6] { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Objaśnienie kreski „8 h" i tła za nią — te same kolory, co na paśmie (PasmoDnia.razor.css). */
.ctgrid-note .znak-8h[b-v084tl0ir6] { display: inline-block; width: 2px; height: 14px; background: var(--warn-mocny); }
.ctgrid-note .znak-ponad[b-v084tl0ir6] {
    display: inline-block;
    width: 18px;
    height: 12px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--warn) 24%, var(--paper));
    box-shadow: inset 0 -3px 0 var(--warn);
}
.ctgrid-note strong[b-v084tl0ir6] { color: var(--text); }

.day-cards[b-v084tl0ir6] { margin-top: 0.2rem; }
/* /Components/Pages/Clients/WyszukiwarkaKontrahentowCzasu.razor.rz.scp.css */
/* Wyszukiwarka kontrahentów rejestru czasu. Jedna kolumna o czytelnej szerokości, pole szukania
   na górze, pod nim listy. Pozycje to odnośniki na całą szerokość wiersza (cel kliknięcia ≥ 44 px). */

.tl-szukaj[b-t03z94wj6f] { max-width: 46rem; }

.tl-szukaj-etykieta[b-t03z94wj6f] {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 13px;
    font-weight: 600;
}

.tl-szukaj-pole[b-t03z94wj6f] { width: 100%; min-height: 44px; font-size: 15px; }

.tl-szukaj-pomoc[b-t03z94wj6f] { margin: 0.4rem 0 1.1rem; font-size: 12.5px; color: var(--text-soft); }

.tl-szukaj-naglowek[b-t03z94wj6f] {
    margin: 1.3rem 0 0.4rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-soft);
}
.tl-szukaj-naglowek:first-of-type[b-t03z94wj6f] { margin-top: 0.4rem; }

.tl-szukaj-lista[b-t03z94wj6f] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.tl-szukaj-lista li + li[b-t03z94wj6f] { border-top: 1px solid var(--line); }

.tl-szukaj-poz[b-t03z94wj6f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    color: var(--text);
    text-decoration: none;
    background: var(--paper);
}

.tl-szukaj-poz:hover[b-t03z94wj6f] { background: var(--cream); }
.tl-szukaj-poz:focus-visible[b-t03z94wj6f] { outline: 2px solid var(--p1); outline-offset: -2px; }

.tl-szukaj-nazwa[b-t03z94wj6f] { font-size: 14px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

.tl-szukaj-opis[b-t03z94wj6f] {
    flex: none;
    font-size: 12.5px;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}
.tl-szukaj-opis.w-tygodniu[b-t03z94wj6f] { color: var(--text); }

.tl-szukaj-notka[b-t03z94wj6f] { margin: 0.6rem 0 0; font-size: 12.5px; color: var(--text-soft); }
.tl-szukaj-pusto[b-t03z94wj6f] { margin: 0.4rem 0 0; font-size: 13.5px; color: var(--text-soft); }

@media (max-width: 760px) {
    .tl-szukaj-poz[b-t03z94wj6f] { flex-wrap: wrap; }
    .tl-szukaj-opis[b-t03z94wj6f] { flex-basis: 100%; }
}
/* /Components/Pages/Conversation/Conversation.razor.rz.scp.css */
/* ─── Shell ──────────────────────────────────────────────────────────── */
.conv-shell[b-ayj7cev44r] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    /* Wiersz przycięty do wysokości okna. Bez tego rośnie do wysokości NAJWYŻSZEJ kolumny,
       więc panel boczny z rozwiniętymi sekcjami rozpychał całą stronę zamiast przewijać się
       u siebie — jego `overflow` nigdy nie miał czego przycinać. */
    grid-template-rows: auto minmax(0, 1fr);   /* nagłówek (cała szerokość) + wątek i panel boczny */
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
    overflow: hidden;
    position: relative;
}
.conv-shell.side-hidden[b-ayj7cev44r] { grid-template-columns: minmax(0, 1fr); }
.conv-shell.side-hidden .conv-side[b-ayj7cev44r] { display: none; }
@media (min-width: 1600px) {
    .conv-shell[b-ayj7cev44r] {
        grid-template-columns: minmax(0, 1fr) 400px;
        padding: 0.65rem 1rem;
        gap: 1rem;
    }
}

.conv-thread[b-ayj7cev44r] {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);  /* mniejszy radius — bardziej "pracowniczy", mniej miękki */
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    min-height: 0;
}

/* Panel boczny jest tylko ramą — sam się NIE przewija. Przewija się obszar sekcji
   w środku (.conv-side-scroll), więc nagłówek szuflady na telefonie zostaje na wierzchu. */
.conv-side[b-ayj7cev44r] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Obszar przewijania sekcji. `min-height: 0` jest tu warunkiem działania, nie ozdobą:
   bez niego element nie zejdzie poniżej wysokości własnej treści i zamiast paska
   przewijania panelu wracamy do rozpychania strony. */
.conv-side-scroll[b-ayj7cev44r] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 4px;
}

/* ─── Zwijane sekcje panelu bocznego ─────────────────────────────────────────
   Panel ma JEDEN pasek przewijania — na obszarze sekcji. Żadna sekcja nie dostaje
   drugiego (przewijanie w przewijaniu gubi treść i myli kółko myszy).
   Stan rozwinięcia trzyma sam <details open>; nic nie jest zapamiętywane między
   wejściami — po wejściu i po odświeżeniu otwarty jest wyłącznie „Klient". */
.side-sec[b-ayj7cev44r] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    /* Sekcje nie kurczą się do wysokości obszaru. Inaczej otwarta sekcja zostaje
       ściśnięta i (przez `overflow: hidden` powyżej) po prostu ucina sobie treść. */
    flex: 0 0 auto;
}

.side-sec-head[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    user-select: none;
    list-style: none;              /* domyślny trójkącik <summary> — mamy własną strzałkę */
    transition: background 0.12s;
}
.side-sec-head[b-ayj7cev44r]::-webkit-details-marker { display: none; }
.side-sec-head:hover[b-ayj7cev44r] { background: var(--cream); }

.side-sec-title[b-ayj7cev44r] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    font-weight: 600;
    flex: none;
}

/* Podpis (np. „12 wiadomości") — kurczy się jako pierwszy i ucina wielokropkiem.
   Bez min-width: 0 długi login klienta rozpychałby nagłówek i wypychał strzałkę. */
.side-sec-meta[b-ayj7cev44r] {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-size: 11px;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-sec-chev[b-ayj7cev44r] {
    width: 14px; height: 14px;
    flex: none;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    color: var(--text-faint);
    transition: transform 0.15s;
}
.side-sec[open] > .side-sec-head > .side-sec-chev[b-ayj7cev44r] { transform: rotate(180deg); }
.side-sec[open] > .side-sec-head[b-ayj7cev44r] { border-bottom: 1px solid var(--line); }

.side-sec-body[b-ayj7cev44r] {
    padding: 0.7rem 0.85rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
/* Sekcje z własnym układem wewnętrznym (czat, zadania) same trzymają swoje odstępy. */
.side-sec-body-flush[b-ayj7cev44r] { padding: 0; gap: 0; }

.side-sec-hint[b-ayj7cev44r] {
    font-size: 11.5px;
    color: var(--text-soft);
    line-height: 1.5;
    margin: 0;
}

.side-sec-wide-btn[b-ayj7cev44r] { width: 100%; justify-content: center; }

/* Podsekcja wewnątrz sekcji (np. „Czego oczekuje kupujący" w Zamówieniach). */
.side-block[b-ayj7cev44r] { display: flex; flex-direction: column; gap: 0.35rem; }
.side-block + .side-block[b-ayj7cev44r] {
    padding-top: 0.7rem;
    border-top: 1px dashed var(--line);
}
.side-block-head[b-ayj7cev44r] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.side-block-title[b-ayj7cev44r] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.side-block-title em[b-ayj7cev44r] {
    font-style: italic;
    color: var(--text-faint);
    font-weight: 400;
}
.side-block-sub[b-ayj7cev44r] {
    font-size: 11px;
    color: var(--text-soft);
    line-height: 1.45;
    margin: 0;
}
.side-plain-list[b-ayj7cev44r] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ─── Header ─────────────────────────────────────────────────────────── */
/* ⚠ NAGŁÓWEK NAD OBIEMA KOLUMNAMI, DWA RÓWNE WIERSZE (03.10.2026, uwaga 7 właściciela: „ui trochę się rozjeżdża
   […] nazwa ma mało miejsca. trzeba to trochę przeprojektować skoro już mamy drugi wiersz ze statusami”).
   Do tego dnia nagłówek był górą kolumny wątku — przy 1280 px z otwartym panelem bocznym miał 887 px, przy
   1440 px (z menu po lewej) 817 px, a temat, numer, termin, opiekun, przyciski, statusy i tagi potrzebują razem
   ~1700 px w dwóch wierszach. Zmierzone przed zmianą (scenariusz abcare-naglowek-03-10): w KAŻDYM z sześciu
   zgłoszeń trzy rzędy, temat 35–45 znaków w dwóch liniach przy 1280 i 1440, wysokość 115 albo 126 px zależnie
   od zgłoszenia. Teraz nagłówek stoi nad wątkiem I panelem bocznym (1256 px przy 1280, 1186 px przy 1440):
     wiersz 1 — co to za sprawa: ←, klient, kanał i rodzaj, TEMAT, numer, termin, opiekun;
     wiersz 2 — w jakim jest stanie i co z nią zrobić: statusy, przypisanie, tagi | przyciski, „Szczegóły” na końcu.
   Gdy nagłówek jest węższy, skracają się NAPISY (zapytania `@container naglowek` niżej) — wiersze się nie łamią. */
.conv-head[b-ayj7cev44r] {
    grid-column: 1 / -1;
    container: naglowek / inline-size;
    padding: 0.5rem 1rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: var(--paper);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.conv-head-row1[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 28px;
    /* Zawijanie zostaje jako bezpiecznik dla tabletu (641–768 px: tu stoi też „Szczegóły” i ⋮ telefonu). Na komputerze
       wiersz tematu nie ma już przycisków i mieści się w jednej linii — mierzy to scenariusz abcare-naglowek-03-10. */
    flex-wrap: wrap;
}
.conv-back[b-ayj7cev44r] {
    display: grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: 6px;
    color: var(--text-soft);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    flex: none;
}
.conv-back:hover[b-ayj7cev44r] { background: var(--cream-2); color: var(--text); }

/* ⚠ Reguła „.conv-side-toggle z napisem" stała TUTAJ i przegrywała z drugą, niżej w tym samym
   pliku (kwadrat 32×32). Przy równej wadze wygrywa późniejsza — więc przycisk był kwadratem
   i ucinał własny napis o 36 px (zmierzone 21.09 na wydaniu 33: szerokość 32, treść 66).
   Teraz jest JEDNA reguła, w miejscu tej kanonicznej („Side toggle in header"). */
.conv-side-toggle-mobile[b-ayj7cev44r] { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Okruszek do karty klienta. Stoi TUŻ przy strzałce powrotu, bo to druga droga „w górę":
   strzałka wraca do skrzynki, okruszek do człowieka, którego ta rozmowa dotyczy. */
.conv-okruszek-klient[b-ayj7cev44r] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    max-width: 14rem;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-soft);
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-okruszek-klient svg[b-ayj7cev44r] { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.conv-okruszek-klient span[b-ayj7cev44r] { overflow: hidden; text-overflow: ellipsis; }
.conv-okruszek-klient:hover[b-ayj7cev44r] { background: var(--cream-2); color: var(--text); }
.conv-back svg[b-ayj7cev44r] {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.conv-kind[b-ayj7cev44r] {
    color: var(--text-soft);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    margin: 0;
    flex: none;  /* NIE rośnie — subject ma flex:1 i zajmuje resztę */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Kanał obok plakietki rodzaju w wierszu 1 (N2b). */
.conv-kanal[b-ayj7cev44r] { margin-right: 0.4rem; }
.conv-kind .kind-badge[b-ayj7cev44r] { vertical-align: middle; letter-spacing: 0.02em; }
/* Przyciski stoją w DRUGIM wierszu, po prawej, w jednej linii (03.10.2026). `flex: none` + `nowrap`: blok trzyma się
   razem — gdy w wyjątkowo wąskim oknie (tablet) nie zmieści się obok statusów, schodzi CAŁY pod nie i dalej trzyma
   prawą krawędź, zamiast gubić pojedyncze przyciski po kilku liniach. */
.conv-head-actions[b-ayj7cev44r] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex: none;
    flex-wrap: nowrap;
    margin-left: auto;  /* akcje trzymają prawą krawędź także po zejściu do drugiego wiersza (W-3) */
}
/* „Szczegóły” to przełącznik widoku, nie czynność na sprawie — odsunięty od reszty, zawsze ostatni, nad panelem,
   który otwiera. ⚠ Po atrybucie, nie po klasie: reguła z klasą `.conv-side-toggle` ma być jedna (MenuIOknaNieTnaTests). */
.conv-head-actions > [data-testid="conv-side-toggle"][b-ayj7cev44r] { margin-left: 0.35rem; }

/* Skracanie napisów przycisków, gdy nagłówek jest węższy (wymiar NAGŁÓWKA, nie okna: menu po lewej zwinięte
   do pasa ikon albo rozwinięte zmienia go o 170 px przy tej samej szerokości okna). Pełna nazwa zostaje
   w `title` i `aria-label`. Progi z pomiaru: reklamacja Allegro odłożona, dwa tagi — najszerszy drugi wiersz. */
@container naglowek (max-width: 1260px) {
    .ha-dl[b-ayj7cev44r] { display: none; }              /* „Pliki”, „Połącz”, „Decyzja” zamiast pełnych nazw */
}
@container naglowek (max-width: 1080px) {
    .ha-etykieta[b-ayj7cev44r] { display: none; }        /* 📎 2, 🔗, ✉ — same znaki z licznikiem */
    .sla-zrodlo[b-ayj7cev44r] { display: none; }         /* „SLA −3m” bez „· nasz termin” (jest w dymku) */
    .conv-head-row1 .agent-chip > span:last-child[b-ayj7cev44r] { display: none; }   /* opiekun: inicjały, nazwisko w dymku */
    .conv-head-row1 .agent-chip[b-ayj7cev44r] { padding-right: 0.2rem !important; }
}
.snooze-until[b-ayj7cev44r] {
    font-size: 11.5px;
    color: var(--text-soft);
    padding: 0.3rem 0.55rem;
    background: var(--cream-2);
    border-radius: 6px;
}

/* Title — inline w wierszu 1, kompaktowy. Editorial serif zachowany, ale font dramatycznie mniejszy
   (~1.1rem zamiast ~1.7rem) bo musi się zmieścić obok kanału, ticket# i akcji. */
/* ⚠ Temat NIE jest ucinany wielokropkiem (W-3, 18.09.2026). Do tej pory `white-space: nowrap` + `flex: 1;
   min-width: 0` oddawało całe miejsce plakietkom i akcjom — przy szerokim pasku akcji temat kurczył się do
   „Prośba o zwrot po term…", a właściciel pytał, czemu „nie widać w nagłówkach danych". Teraz temat ma
   gwarantowaną szerokość (14 rem) i zawija do DWÓCH linii; gdy plakietki i akcje się nie mieszczą, to ONE
   schodzą do drugiego wiersza (`flex-wrap: wrap` na `.conv-head-row1`), nie temat do wielokropka. Pełny temat
   nadal jest w dymku (`title`).
   Od 03.10.2026 (uwaga 7) akcji w tym wierszu nie ma — temat dostaje całą resztę wiersza nagłówka szerokiego na
   cały ekran rozmowy, więc tematy do ~45 znaków stoją w jednej linii przy 1100, 1280 i 1440 px; dwie linie zostają
   bezpiecznikiem dla wyjątkowo długich tematów. */
.conv-title[b-ayj7cev44r] {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.2;
    margin: 0;
    cursor: pointer;
    transition: opacity 0.15s;
    flex: 1 1 14rem;
    min-width: 14rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow-wrap: anywhere;
    font-weight: 500;  /* trochę cięższy bo mniejszy */
}
.conv-title:hover[b-ayj7cev44r] { opacity: 0.75; }
.conv-ticket-inline[b-ayj7cev44r] {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 11.5px;
    color: var(--text-soft);
    flex: none;
    white-space: nowrap;
}
.subject-edit-hint[b-ayj7cev44r] {
    font-size: 0.7em;
    color: var(--text-faint);
    margin-left: 0.3rem;
    /* Widoczna zawsze, po najechaniu wyraźniej (W-14, 19.09.2026): „widoczne dopiero po najechaniu"
       znaczy dla nowego pracownika „nie ma takiej możliwości". */
    opacity: 0.55;
    transition: opacity 0.15s;
}
.conv-title:hover .subject-edit-hint[b-ayj7cev44r] { opacity: 1; }
.subject-input[b-ayj7cev44r] {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 500;
    padding: 0.35rem 0.55rem;
    width: 100%;
    font-family: inherit;
}
.subject-hint[b-ayj7cev44r] {
    color: var(--text-soft);
    font-size: 11px;
    margin-left: 0.5rem;
    align-self: center;
}

/* Wiersz 2 nagłówka: statusy, przypisanie i tagi po lewej, przyciski po prawej (`.conv-head-actions`, margin-left: auto).
   Wysokość = plakietka statusu (30 px), więc wiersz ma tę samą wysokość w każdym zgłoszeniu. */
.conv-strip[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    margin-top: 0;
    min-height: 30px;
}
/* „+N” przy tagach — ukryte ponad trzy (patrz znacznik). Pełna ramka i tło tagu: to są tagi, tylko zwinięte;
   przerywana ramka zostaje dla „+ tag” (dodaj nowy). */
.conv-tagi-wiecej[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 0.2rem 0.55rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    font: inherit;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--text-soft);
    cursor: pointer;
}
.conv-tagi-wiecej:hover[b-ayj7cev44r] { color: var(--text); border-color: var(--line-strong); }

/* Wiersz 2 w JEDNEJ linii, gdy nagłówek ma na to miejsce (od 900 px szerokości nagłówka — od tabletu w poziomie
   w górę). Gdy przycisków jest więcej niż zwykle (AI, przyciski automatyzacji, decyzja reklamacji), ustępuje LISTA
   TAGÓW: zawija się w pudełku wysokim na jedną linię, więc tag, który się nie mieści, chowa się w całości (pełna
   lista w dymku pojemnika i na liście zgłoszeń) — a przyciski i statusy zostają w swoim wierszu.
   Poniżej 900 px (tablet w pionie) wiersz zawija się jak dawniej: blok przycisków schodzi w całości pod statusy. */
@container naglowek (min-width: 900px) {
    .conv-strip:not(.zawijaj)[b-ayj7cev44r] { flex-wrap: nowrap; }
    .conv-strip:not(.zawijaj) > *[b-ayj7cev44r] { flex-shrink: 0; }
    .conv-strip:not(.zawijaj) > .conv-head-tags[b-ayj7cev44r] {
        flex: 0 1 auto;
        min-width: 0;
        max-height: 26px;
        overflow: hidden;
        /* Gdy nie mieści się nawet PIERWSZY tag, pojemnik przewija się w poziomie — wtedy (i tylko wtedy) oś
           przewijania jest aktywna i animacja chowa go cały, zamiast zostawiać ucięty skrawek tagu. Bez obsługi
           osi przewijania (starsze przeglądarki) zostaje skrawek — nic się nie psuje. */
        animation: naglowek-tagi-nie-mieszcza-b-ayj7cev44r linear both;
        animation-timeline: scroll(self inline);
    }
    /* Tag w całości albo wcale — nie ściskany i nie łamany (ogólna reguła `.tag` pozwala mu łamać się w panelu). */
    .conv-strip:not(.zawijaj) > .conv-head-tags > .tag[b-ayj7cev44r] {
        flex: none;
        max-width: none;
        white-space: nowrap;
        overflow-wrap: normal;
    }
}
@keyframes naglowek-tagi-nie-mieszcza-b-ayj7cev44r { from, to { opacity: 0; } }
.strip-sep[b-ayj7cev44r] {
    flex: 1;
    min-width: 0.5rem;
}

/* ── Statusy zgłoszenia (K2, 02.10.2026) ─────────────────────────────────────────────────────────────
   Komputer: plakietki statusu i statusu serwisowego otwierają pasek pod tematem — przed „Weź” i tagami —
   i są w nim najwyższe (30 px). Odstęp z prawej oddziela je od reszty paska: to dwie różne rzeczy
   (stan sprawy vs. kto ją prowadzi i jak jest opisana). */
.conv-statusy[b-ayj7cev44r] { display: inline-flex; min-width: 0; margin-right: 0.35rem; }

/* Telefon: jeden pasek — plakietki po lewej, „SLA · ▼ Więcej” po prawej. Wygląd paska przejmuje wiersz,
   a przełącznik w nim staje się zwykłym, przezroczystym przyciskiem (reguła .conv-strip-toggle w app.css
   rysuje go jako osobny pasek — tu ją nadpisujemy, bo pasek jest już wokół). */
.conv-pasek-telefon[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding: 0.3rem 0.35rem 0.3rem 0.4rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    min-width: 0;
}
/* Plakietki biorą resztę szerokości i w razie potrzeby zawijają się w dwa wiersze; „SLA · ▼ Więcej” zostaje
   w jednej linii po prawej (zrzut 390 px przed tą regułą: „SLA / 46m” i „▼ / Więcej” łamane na dwie linie). */
.conv-pasek-telefon[b-ayj7cev44r]  .pz { flex: 1 1 auto; }
.conv-pasek-telefon .conv-strip-toggle[b-ayj7cev44r] {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0.2rem 0.25rem;
    background: transparent;
    border: none;
    justify-content: flex-end;
    white-space: nowrap;
}

/* Customer chip — clickable, opens modal */
.cust-chip[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem 0.25rem 0.3rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.cust-chip:hover[b-ayj7cev44r] { background: var(--cream-2); border-color: var(--line-strong); }
.cust-chip:active[b-ayj7cev44r] { transform: translateY(1px); }
.cust-chip-name[b-ayj7cev44r] {
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cust-chip-chev[b-ayj7cev44r] {
    width: 11px; height: 11px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    opacity: 0.45;
}

/* Agent chip — display only */
.agent-chip[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    background: var(--cream-2);
    border-radius: 999px;
    font-size: 11.5px;
    color: var(--text-soft);
}
.agent-chip > span:last-child[b-ayj7cev44r] { white-space: nowrap; }  /* nazwisko w całości — plakietka schodzi niżej, nie ucina (W-3) */
.agent-chip svg[b-ayj7cev44r] {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    opacity: 0.7;
}

/* Mini presence indicator (kropka + liczba) — inline w wierszu 1 zamiast big chip per-viewer. */
.conv-presence-mini[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    background: var(--cream-2);
    color: var(--text-soft);
    border-radius: 999px;
    font-size: 11px;
    font-family: var(--mono, ui-monospace, monospace);
    cursor: help;
}

/* Sidebar: customer card (avatar + name + login) — kompaktowy pojedynczy wiersz, kliknięcie = modal.
   Kafel siedzi wewnątrz sekcji, więc rysuje się sam (bez klasy .card). */
.conv-side-customer[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, transform 0.05s;
    width: 100%;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.conv-side-customer:hover[b-ayj7cev44r] { background: var(--cream-2); }
.conv-side-customer:active[b-ayj7cev44r] { transform: translateY(1px); }
.conv-side-customer-avatar[b-ayj7cev44r] {
    flex: none;
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    /* background + color pochodzi z .avatar-circle.c-1 z app.css */
}
.conv-side-customer-text[b-ayj7cev44r] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.45rem;
}
.conv-side-customer-name[b-ayj7cev44r] {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
}
.conv-side-customer-login[b-ayj7cev44r] {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 11px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}
.conv-side-customer-chev[b-ayj7cev44r] {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none; stroke-width: 2;
    color: var(--text-faint);
    flex: none;
}

/* Sidebar: tagi konwersacji — kompakt karta. */
.conv-side-tags-card[b-ayj7cev44r] {
    padding: 0.65rem 0.85rem;
}
.conv-side-tags-head[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
}
.conv-side-tags-list[b-ayj7cev44r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
}

/* Mobile: extras chipy w stripie (SLA + customer) — pokazują się gdy strip mobile-open. */
.conv-strip-mobile-extras[b-ayj7cev44r] { display: contents; }

/* Przycisk panelu bocznego w nagłówku. Niesie NAPIS, więc jest rzędem, nie kwadratem na ikonę:
   sama ikona nie mówi, że po drugiej stronie są klient, zadania i historia (opiekun J, 19.09).
   ⚠ `min-height` zamiast `height`, `width: auto` i `white-space: nowrap` — razem znaczą
   „przycisk ma się dopasować do napisu", a nie „napis ma się zmieścić w przycisku".
   `flex: none` trzyma go w całości, gdy rząd nagłówka robi się ciasny. */
.conv-side-toggle[b-ayj7cev44r] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    width: auto; min-height: 32px; padding: 0 0.5rem;
    white-space: nowrap; flex: none;
    /* Ten sam rozmiar napisu co sąsiednie „Odłóż / Zamknij / Pliki i media” (.btn-sm). Bez tej linii przycisk
       brał 14 px z treści strony i „Szczegóły” było wyraźnie większe od reszty rzędu (krytyk, 02.10.2026). */
    font-size: 12px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text-soft);
    cursor: pointer;
    transition: all 0.15s;
}
.conv-side-toggle:hover[b-ayj7cev44r] { background: var(--cream-2); color: var(--text); border-color: var(--line-strong); }
.conv-side-toggle[aria-pressed="true"][b-ayj7cev44r] { background: var(--cream-2); color: var(--text); border-color: var(--line-strong); }
.conv-side-toggle svg[b-ayj7cev44r] {
    width: 16px; height: 16px;
    flex: none;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ─── Stream + messages ──────────────────────────────────────────────── */
.conv-stream[b-ayj7cev44r] {
    padding: 0.75rem 0.9rem;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: linear-gradient(180deg, var(--cream-2) 0%, var(--paper) 100%);
}

.load-older-banner[b-ayj7cev44r] {
    align-self: center;
    padding: 0.4rem 0;
    margin-bottom: 0.5rem;
}

/* ─── Order context chip (pod subject) — info ktore zamowienie ──────── */
.conv-order-context[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding: 0.45rem 0.65rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--info);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--text-soft);
    flex-wrap: wrap;
}
.conv-order-context svg[b-ayj7cev44r] { color: var(--info); }
.conv-order-label[b-ayj7cev44r] {
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--text-soft);
}
.conv-order-id[b-ayj7cev44r] { color: var(--text); font-size: 12.5px; }
.conv-order-amount[b-ayj7cev44r] { color: var(--p1); font-weight: 500; }
.conv-order-items[b-ayj7cev44r] { color: var(--text-soft); font-size: 11.5px; }
.conv-order-more[b-ayj7cev44r] {
    color: var(--info);
    font-size: 11.5px;
    margin-left: auto;
    font-weight: 500;
}

/* ─── Pinned messages bar (sticky on top of thread) ──────────────────── */
/* Pasek „Pliki i media" (W-6, 18.09.2026): przyklejony do góry przewijanego wątku, kompaktowe kafelki. */
/* ⚠ PASEK „PLIKI I MEDIA" USUNIĘTY 20.09.2026. Był `position: sticky` w przewijanym wątku, więc
   zjadał górę rozmowy na KAŻDYM ekranie — także wtedy, gdy nikt plików nie szukał — a przycisk
   „Wszystkie" podmieniał go na panel stojący NIŻEJ w tym samym strumieniu, czyli poza kadrem:
   dla patrzącego zawartość po prostu znikała. Właściciel: „wisi na pół ekranu i do tego po
   kliknięciu »wszystkie« znika". Pliki mają teraz jedno miejsce — okno (`.pliki-modal`) otwierane
   przyciskiem w nagłówku i pozycją w menu „⋮".
   Rama okna (`.pliki-modal`) stoi od 12.10.2026 w `app.css`, przy klasach `abc-pliki-*`: to samo
   okno otwiera ekran zadania, a reguła zakresowa tego ekranu tam nie sięga. */

/* Menu rozmowy: same kropki, bez słowa „Akcje" (właściciel, 20.09.2026). */
.mobile-actions-summary[b-ayj7cev44r] {
    display: inline-grid;
    place-items: center;
    width: 38px;
    padding: 0;
}
.mobile-actions-summary svg[b-ayj7cev44r] {
    width: 18px; height: 18px;
    fill: currentColor; stroke: none;
}
.mobile-actions-summary[b-ayj7cev44r]::-webkit-details-marker,
.mobile-actions-summary[b-ayj7cev44r]::marker { display: none; content: ""; }

.pinned-bar[b-ayj7cev44r] {
    position: sticky;
    top: 0;  /* gdy nad nim stoi pasek plików, oba są sticky — kolejność w DOM ustala, który jest wyżej */
    z-index: 5;
    background: var(--warn-bg);
    border: 1px solid var(--warn);
    border-left-width: 3px;
    border-radius: 8px;
    padding: 0.5rem 0.6rem 0.6rem;
    margin-bottom: 0.6rem;
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-sm);
    color: var(--text);
}
.pinned-bar-head[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--warn, #8a5b00);
    font-weight: 500;
    margin-bottom: 0.4rem;
}
/* Pinned bar w stanie collapsed = 1 linijka (trigger button), bez listy. Margin redukujemy. */
.pinned-bar.collapsed[b-ayj7cev44r] { padding: 0.3rem 0.55rem; }
.pinned-bar.collapsed .pinned-bar-head[b-ayj7cev44r] { margin-bottom: 0; }
/* Toggle button (mobile + desktop): pełna szerokość, klikalny w całość. */
.pinned-bar-toggle[b-ayj7cev44r] {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
}
.pinned-bar-toggle:hover[b-ayj7cev44r] { color: var(--p1); }
.pinned-bar-chevron[b-ayj7cev44r] {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-soft, #888);
}
.pinned-icon[b-ayj7cev44r] {
    width: 13px; height: 13px;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.pinned-list[b-ayj7cev44r] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 180px;
    overflow-y: auto;
}
.pinned-item[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
    background: var(--paper);
    border: 1px solid rgba(201, 138, 20, 0.15);
    border-radius: 6px;
    font-size: 12px;
}
.pinned-link[b-ayj7cev44r] {
    flex: 1;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    text-decoration: none;
    color: var(--text);
    min-width: 0;
}
.pinned-link:hover[b-ayj7cev44r] { color: var(--p1); }
.pinned-author[b-ayj7cev44r] {
    font-size: 11px;
    color: var(--text-soft);
    flex: none;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pinned-preview[b-ayj7cev44r] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.pinned-unpin[b-ayj7cev44r] {
    background: transparent;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    padding: 0 0.25rem;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
    flex: none;
}
.pinned-unpin:hover[b-ayj7cev44r] { background: rgba(0,0,0,0.06); color: var(--text); }

/* Przyciski przy wiadomości (przypnij, wydziel) — ZAWSZE widoczne, najechanie tylko je podbija.
   ⚠ Do 19.09.2026 stały na opacity: 0 i pojawiały się dopiero pod kursorem (W-14 właściciela, agent A:
   „10 przycisków widocznych dopiero po najechaniu"). Człowiek pierwszego dnia nie wie, że ma najeżdżać —
   dla niego tych funkcji po prostu nie było. Przypięte zostają pełne. */
.msg-pin[b-ayj7cev44r] {
    background: transparent;
    border: none;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 4px;
    color: var(--text-faint);
    cursor: pointer;
    padding: 0;
    opacity: 0.45;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    margin-left: auto;
}
.msg:hover .msg-pin[b-ayj7cev44r] { opacity: 0.85; }
/* Oba przyciski stoją RAZEM przy prawej krawędzi (11.10.2026, właściciel: „te dwie ikonki, zgłoszenie
   i przypinanie, daj obie po prawej, obok siebie, teraz kiepsko wygląda”). Każdy ma klasę `.msg-pin`,
   czyli własne `margin-left: auto` — a dwa takie marginesy w jednym rzędzie DZIELĄ wolne miejsce między
   siebie: pinezka lądowała na środku nagłówka wiadomości, „wydziel” przy krawędzi. Odsuwa się tylko pierwszy. */
.msg-pin + .msg-pin[b-ayj7cev44r] { margin-left: 0; }

/* ── Nagłówek rozmowy: kolor = RODZAJ akcji (W-8 właściciela, 19.09.2026) ──────────────────────
   STAN (Odłóż, Zamknij, Wznów) zostaje w .btn-secondary / .btn-primary z app.css.
   ALLEGRO = decyzje idące do Allegro (reklamacja, prośba o zakończenie): pomarańcz Allegro, żeby było
   widać, że to nie jest zmiana u nas, tylko komunikat do serwisu. AI = jedno menu w odcieniu palety 5
   (teal) — inny od zieleni stanu i pomarańczu Allegro. PLIKI i POWIĄZANIA = .btn-ghost + lekka ramka:
   to „pokaż / przenieś", nie decyzje. Hierarchia: przyciski stanu i Allegro mają wypełnienie,
   AI ma wypełnienie tintem, reszta jest przezroczysta. */
.conv-head-actions .ha-allegro[b-ayj7cev44r],
.mobile-actions-menu .ha-allegro[b-ayj7cev44r] {
    background: #fff3ea;
    border: 1px solid #f7b088;
    color: #9a3c05;
}
.conv-head-actions .ha-allegro:hover[b-ayj7cev44r] { background: #ffe4d1; border-color: #ff7a2f; color: #7a2e02; }
/* Ciemny motyw: jasne #fff3ea zostawało plamą w ciemnym nagłówku (przejazd pokazu 27/28.09). */
[data-theme="dark"] .conv-head-actions .ha-allegro[b-ayj7cev44r],
[data-theme="dark"] .mobile-actions-menu .ha-allegro[b-ayj7cev44r] {
    background: color-mix(in srgb, #ff7a2f 14%, var(--paper));
    border-color: color-mix(in srgb, #ff7a2f 45%, var(--paper));
    color: #ffb68a;
}
[data-theme="dark"] .conv-head-actions .ha-allegro:hover[b-ayj7cev44r] { background: color-mix(in srgb, #ff7a2f 24%, var(--paper)); color: #ffd2b5; }

.ha-ai[b-ayj7cev44r] {
    background: color-mix(in srgb, var(--global-palette5, #1e4c53) 10%, var(--paper, #fff));
    border: 1px solid color-mix(in srgb, var(--global-palette5, #1e4c53) 40%, var(--paper, #fff));
    color: var(--global-palette4, #022c32);
}
.ha-ai:hover[b-ayj7cev44r] { background: color-mix(in srgb, var(--global-palette5, #1e4c53) 18%, var(--paper, #fff)); color: var(--global-palette4, #022c32); }

.conv-head-actions .ha-pliki[b-ayj7cev44r],
.conv-head-actions .ha-powiazania[b-ayj7cev44r] {
    border: 1px solid var(--line);
    color: var(--text-soft);
}
.conv-head-actions .ha-pliki:hover[b-ayj7cev44r],
.conv-head-actions .ha-powiazania:hover[b-ayj7cev44r] { border-color: var(--line-strong); color: var(--text); }
.msg-pin:hover[b-ayj7cev44r] { opacity: 1 !important; color: var(--warn, #8a5b00); background: rgba(201, 138, 20, 0.08); }
.msg-pin.active[b-ayj7cev44r] {
    opacity: 1;
    color: var(--warn, #8a5b00);
}
.msg-pin.active:hover[b-ayj7cev44r] { color: var(--danger); }
.msg-pin svg[b-ayj7cev44r] {
    width: 13px; height: 13px;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.msg.pinned .msg-body[b-ayj7cev44r] {
    box-shadow: 0 0 0 2px rgba(201, 138, 20, 0.2), var(--shadow-sm);
}

.msg[b-ayj7cev44r] {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 0.55rem;
    max-width: 82%;
    align-items: flex-start;
}
.msg.inbound[b-ayj7cev44r] { align-self: flex-start; }
.msg.outbound[b-ayj7cev44r] {
    align-self: flex-end;
    grid-template-columns: 1fr 30px;
}
.msg.outbound .msg-avatar[b-ayj7cev44r] { grid-column: 2; grid-row: 1; }
.msg.outbound .msg-body[b-ayj7cev44r] { grid-column: 1; grid-row: 1; }
.msg.internal[b-ayj7cev44r] { align-self: stretch; max-width: 100%; }

.msg-avatar[b-ayj7cev44r] { display: flex; justify-content: center; padding-top: 1px; }
.msg-body[b-ayj7cev44r] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.55rem 0.8rem 0.6rem;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    /* Długie URL-e / numery śledzenia / słowa bez spacji łamią się zamiast przepełniać bąbel
       (krytyczne na wąskich ekranach — inaczej mobile scrolluje poziomo). */
    overflow-wrap: anywhere;
}
/* Outbound: subtelne tlo z palette + lewy akcent paskowy.
   Uzywamy tokens-based bg zamiast hardcoded gradient — w dark mode automagic. */
.msg.outbound .msg-body[b-ayj7cev44r] {
    background: var(--paper);
    border-color: var(--line);
    border-left: 3px solid var(--p1);
}
.msg.internal .msg-body[b-ayj7cev44r] {
    background: var(--warn-bg);
    border-color: var(--warn);
    border-left: 3px solid var(--warn);
    color: var(--text);
}
.msg.delivery-pending .msg-body[b-ayj7cev44r] { opacity: 0.75; border-style: dashed; }
.msg.delivery-failed .msg-body[b-ayj7cev44r] {
    background: var(--danger-bg);
    border-color: var(--danger);
    border-left: 3px solid var(--danger);
    color: var(--text);
}

.msg-context[b-ayj7cev44r] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.6rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--p1);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s, border-color 0.12s;
}
.msg-context.order[b-ayj7cev44r] { border-left-color: var(--info); }
.msg-context.return[b-ayj7cev44r] { border-left-color: var(--warn); }
.msg-context.dispute[b-ayj7cev44r] { border-left-color: var(--danger); }
.msg-context:hover[b-ayj7cev44r] { background: var(--paper); border-color: var(--line-strong); }
.msg-context-img[b-ayj7cev44r] {
    width: 36px; height: 36px;
    object-fit: cover;
    border-radius: 4px;
    flex: none;
    background: var(--paper);
}
.msg-context-text[b-ayj7cev44r] { flex: 1; min-width: 0; }
.msg-context-label[b-ayj7cev44r] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-soft);
    font-weight: 500;
}
.msg-context-title[b-ayj7cev44r] {
    font-size: 12.5px;
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}
.msg-context-price[b-ayj7cev44r] {
    font-size: 11.5px;
    color: var(--text-soft);
    margin-top: 1px;
}
.msg-failure[b-ayj7cev44r] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.7rem;
    background: var(--danger-bg);
    border-left: 3px solid var(--danger);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text);
}
.msg-failure strong[b-ayj7cev44r] { color: var(--danger); }

/* Translation BYOK — inline pod treścią inbound message */
.msg-translate-btn[b-ayj7cev44r] {
    margin-top: 0.4rem;
    padding: 0.25rem 0.6rem;
    background: transparent;
    border: 1px dashed var(--line);
    border-radius: 4px;
    font-size: 11.5px;
    color: var(--text-soft);
    cursor: pointer;
    transition: all 0.12s;
}
.msg-translate-btn:hover:not(:disabled)[b-ayj7cev44r] {
    background: var(--cream-2);
    color: var(--text);
    border-style: solid;
    border-color: var(--p1);
}
.msg-translate-btn:disabled[b-ayj7cev44r] { opacity: 0.5; cursor: wait; }

.msg-translation[b-ayj7cev44r] {
    margin-top: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: color-mix(in srgb, var(--p1) 5%, transparent);
    border-left: 3px solid var(--p1);
    border-radius: 4px;
    font-size: 13px;
}
.msg-translation.msg-translation-err[b-ayj7cev44r] {
    background: var(--danger-bg);
    border-left-color: var(--danger);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--danger);
    font-size: 12px;
}
.msg-translation-head[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 11px;
    color: var(--text-soft);
    margin-bottom: 0.3rem;
}
.msg-translation-flag[b-ayj7cev44r] { font-size: 12px; }
.msg-translation-cache[b-ayj7cev44r] {
    padding: 1px 5px; border-radius: 999px;
    background: var(--cream-2); font-size: 10px;
    color: var(--text-soft);
}
.msg-translation-close[b-ayj7cev44r] {
    margin-left: auto; background: transparent; border: none;
    color: var(--text-faint); cursor: pointer;
    font-size: 14px; line-height: 1;
}
.msg-translation-close:hover[b-ayj7cev44r] { color: var(--text); }
.msg-translation-body[b-ayj7cev44r] { white-space: pre-wrap; }
.msg-head[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}
.msg-head strong[b-ayj7cev44r] { font-size: 13px; color: var(--text); }
.msg-time[b-ayj7cev44r] { font-size: 11px; color: var(--text-soft); }
.msg-text[b-ayj7cev44r] {
    font-size: 13.5px;
    color: var(--text);
    white-space: pre-wrap;
    line-height: 1.55;
    /* ⚠ Treść maila od obcego wchodzi tu bez ramki (audyt 25.09.2026, S2). `contain: paint`
       zamyka ją w tym pudełku: element staje się blokiem zawierającym także dla
       `position: fixed`, a wszystko poza nim jest przycinane — list nie przykryje aplikacji,
       nawet gdy w bazie leży treść odkażona jeszcze starą listą CSS. Szerokie tabele z poczty
       przewijają się w poziomie zamiast wychodzić poza dymek. */
    position: relative;
    contain: paint;
    overflow-x: auto;
}

.msg-text-html[b-ayj7cev44r] {
    white-space: normal;
}

/* ─── Obrazki osadzone w treści wiadomości ──────────────────────────────────────
   ⚠ `::deep` jest tu OBOWIĄZKOWE, nie ozdobne. Treść maila wchodzi do .msg-text przez
   MarkupString, więc jej <img> NIGDY nie dostanie atrybutu zakresu (b-…). Zapis
   `.msg-text img` skompilowałby się do `.msg-text img[b-…]` i nie złapał ANI JEDNEGO
   obrazka z poczty — reguła wyglądałaby na zrobioną i nic by nie robiła. Dokładnie tak
   umarło `.msg-body-html img` w czytniku poczty. `::deep` przenosi zakres na .msg-text
   (ten element jest pisany w .razor, więc atrybut ma), a potomek może być dowolny.
   Ta sama przyczyna stoi za tym, że `.msg-text mark.kw-hit` mieszka w app.css.

   Po co limit wysokości: rozmiar osadzonego obrazka wybiera NADAWCA. Zdjęcie 4000 px
   wysokości zajmuje kilka ekranów i wypycha resztę rozmowy poza widok — jedna wiadomość
   psuje czytelność całego wątku. Kadrujemy do 360 px; pełny rozmiar jest o jedno
   kliknięcie (powiększenie na ciemnym tle — abc-lightbox.js).

   `!important`: sanitizer przepuszcza atrybut `style`, więc styl inline nadawcy
   („height: 4000px") wygrałby ze zwykłą regułą arkusza. To zabezpieczenie przed treścią
   spoza naszej kontroli, nie skrót.
   `object-fit: contain`: gdy nadawca poda JAWNĄ wysokość, samo przycięcie jej do 360 px
   zdeformowałoby proporcje — contain wpisuje obrazek w ramkę, nie rozciąga go. */
.msg-text[b-ayj7cev44r]  img {
    max-width: 100% !important;
    max-height: 360px !important;
    object-fit: contain;
    object-position: left center;
    cursor: zoom-in;
}

/* Plik się NIE zdekodował (obcięty, nieznany format, martwy odnośnik). Domyślnie
   przeglądarka rysuje ikonę zepsutej grafiki i tekst alternatywny nadawcy — zamiast tego
   schludny prostokąt o stałej wysokości. Klasę dopina abc-email-images.js w reakcji na
   zdarzenie `error`; sam CSS takiego stanu nie wykryje.
   Podmieniamy WYGLĄD elementu, a nie sam element: treść MarkupString należy do Blazora
   i wyjmowanie z niej węzłów potrafi wywrócić późniejsze przerysowanie listy wiadomości. */
.msg-text[b-ayj7cev44r]  img.abc-img-broken {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 320px !important;
    height: 132px !important;      /* stała wysokość — ramka nie skacze zależnie od tego, co przyszło */
    max-height: 132px !important;
    background: var(--cream-2);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    cursor: default;
    font-size: 0;                  /* tekst alternatywny nadawcy nie ma tu nic do powiedzenia */
}
.msg-text[b-ayj7cev44r]  img.abc-img-broken::after {
    content: "Nie udało się wyświetlić obrazka";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 0.75rem;
    text-align: center;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-faint);
}

.msg-attachments[b-ayj7cev44r] {
    margin-top: 0.5rem;
    font-size: 11.5px;
    color: var(--text-soft);
}

/* Presence chips (kto ogląda / pisze) — inline-flex obok siebie, nigdy full-width. */
.conv-presence[b-ayj7cev44r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin: 0.3rem 0 0.4rem;
    justify-content: flex-start;
}
.conv-presence > .presence-chip[b-ayj7cev44r] {
    flex: 0 0 auto;
    width: auto;
    max-width: max-content;
    font-size: 11px;
    padding: 2px 8px;
    line-height: 1.4;
}
.presence-dot[b-ayj7cev44r] {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.presence-dot.typing[b-ayj7cev44r] {
    animation: presencePulse 1.2s ease-in-out infinite;
}
.presence-name[b-ayj7cev44r] { font-weight: 600; }
.presence-action[b-ayj7cev44r] { color: inherit; opacity: 0.85; font-weight: 400; }

/* ─── Composer ───────────────────────────────────────────────────────── */
.conv-composer[b-ayj7cev44r] {
    border-top: 1px solid var(--line);
    background: var(--paper);
    padding: 0.55rem 1rem 0.65rem;
}
/* „Tylko podgląd" — zamiast pola pisania jedno spokojne zdanie (to samo co w czytniku poczty). */
.conv-composer.conv-tylko-podglad[b-ayj7cev44r] { color: var(--text-soft); font-size: 13px; line-height: 1.5; padding: 0.8rem 1rem; }

/* Banner "Odpowiesz z: …" — pokazuje email skrzynki ABCare z której pójdzie reply.
   Mniejsze padding bo to tylko info, nie akcja. */
.reply-from-banner[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.65rem;
    margin-bottom: 0.45rem;
    background: var(--cream-2);
    border: 1px dashed var(--line-strong);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--text);
}
.reply-from-banner svg[b-ayj7cev44r] { color: var(--text-faint); }
.reply-from-banner strong[b-ayj7cev44r] { color: var(--text); }
[data-theme="dark"] .reply-from-banner[b-ayj7cev44r] { background: rgba(255,255,255,0.04); }

/* Collision warning — pokazywany NAD composer gdy inny agent aktywnie pisze. Pomarańczowy
   żeby był wyraźny (różny od info/danger które już mają zastosowanie). */
.collision-warning[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.6rem;
    background: var(--warn-bg);
    border: 1px solid var(--warn);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--warn);
}
.collision-warning strong[b-ayj7cev44r] { color: var(--warn); font-weight: 700; }
.collision-warning span[b-ayj7cev44r] { color: var(--text); }
.composer-tabs[b-ayj7cev44r] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.c-tab[b-ayj7cev44r] {
    font-size: 12px;
    color: var(--text-soft);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.c-tab:hover[b-ayj7cev44r] { background: var(--cream-2); color: var(--text); }
.c-tab.active[b-ayj7cev44r] {
    background: var(--cream-2);
    color: var(--text);
    font-weight: 500;
    border-color: var(--line);
}
.composer-area[b-ayj7cev44r] {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--cream-2);
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    resize: vertical;
    min-height: 60px;
    max-height: 33vh;        /* rośnie z treścią do ~1/3 ekranu, potem własny scroll */
    field-sizing: content;   /* auto-grow do treści (też przy wstawieniu draftu); starsze przeglądarki: fixed+scroll, bez regresji */
    overflow-y: auto;
}
.composer-area:disabled[b-ayj7cev44r] { color: var(--text-faint); }
.composer-actions[b-ayj7cev44r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

/* Podpis po lewej stronie rzędu narzędzi: kanał, adres nadawcy albo „Notatka wewn.".
   ⚠ Układ TUTAJ, nie w znaczniku — reguła telefonu go chowa, a stylu wpisanego w znacznik
   nie przykryje żaden selektor. */
.composer-nadawca-adres[b-ayj7cev44r] {
    color: var(--text-soft);
    font-size: 11.5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.composer-nadawca .channel-icon[b-ayj7cev44r] { flex: none; }

.composer-nadawca[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

/* ⚠ NA TELEFONIE „WYŚLIJ" BYŁ POZA EKRANEM (26.08.2026). Rząd jest elastyczny, bez zawijania
   i bez przewijania, a przycisk wysyłki stoi w nim OSTATNI. Przy 390 px lewa grupa (adres
   nadawcy, załącznik, „✨ Podpowiedz", szablony) wypychała go poza prawą krawędź i nie dało
   się do niego dotrzeć żadnym gestem — czyli z telefonu NIE DAŁO SIĘ WYSŁAĆ ODPOWIEDZI
   z ekranu rozmowy. Znalezione przeglądem ekranów, nie okiem.

   Zawijanie, a nie przewijanie poziome: przy wysyłce przycisk musi być WIDOCZNY, a nie
   „osiągalny po przesunięciu". Wysyłka wchodzi wtedy w drugą linię i zostaje po prawej. */
@media (max-width: 768px) {
    .composer-actions[b-ayj7cev44r] {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        column-gap: 0.4rem;
    }

    .composer-actions > [data-testid="composer-send"][b-ayj7cev44r] {
        margin-left: auto;
    }

    /* ── Tryb pisania przy „Wyślij", nie nad polem (20.09.2026) ─────────────────────────────
       ⚠ PRÓG 768 px, TEN SAM CO GLOBALNE `.mobile-only`, a nie 640 px jak reszta reguł telefonu.
       Przełącznik `.composer-tryb` pokazuje się właśnie od `.mobile-only`; gdyby zakładki znikały
       dopiero przy 640 px, między 641 a 768 px stałyby OBA naraz — dwa sposoby przestawienia tego
       samego stanu, dwa centymetry od siebie. */
    .composer-tabs[b-ayj7cev44r] { display: none; }

    /* Zwinięte pole pisania oddaje wątkowi całą swoją wysokość. Treść zostaje w pamięci ekranu —
       chowa się sam widok (patrz `kompozytorZwiniety`). */
    .conv-composer.zwiniety .composer-area-wrap[b-ayj7cev44r],
    .conv-composer.zwiniety .composer-suggest[b-ayj7cev44r],
    .conv-composer.zwiniety .composer-attachments[b-ayj7cev44r],
    .conv-composer.zwiniety .collision-warning[b-ayj7cev44r] { display: none; }
}

/* ── Przełącznik „Odpowiedź / Notatka" w rzędzie narzędzi ────────────────────────────────────
   Widoczność załatwia globalna `.mobile-only`; tu jest tylko wygląd. Oba napisy stoją zawsze,
   bo przełącznik z jednym napisem nie mówi, co się stanie po dotknięciu. */
.composer-tryb[b-ayj7cev44r] {
    display: inline-flex;
    align-items: stretch;
    flex: none;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--cream-2);
    cursor: pointer;
    font-family: inherit;
}
.composer-tryb-opcja[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 0.5rem;
    border-radius: 999px;
    font-size: 10.5px;
    line-height: 1;
    white-space: nowrap;
    color: var(--text-faint);
    transition: background 0.12s, color 0.12s;
}
.composer-tryb-opcja.wybrana[b-ayj7cev44r] {
    background: var(--paper);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
}
/* Notatka to inny adresat niż odpowiedź — przełącznik ma to mówić kolorem, nie samym pogrubieniem. */
.composer-tryb[aria-checked="true"] .composer-tryb-opcja.wybrana[b-ayj7cev44r] { background: var(--warn-bg); color: var(--warn); }

/* ── Zwijanie pola pisania ──────────────────────────────────────────────────────────────────── */
.composer-zwin[b-ayj7cev44r] {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
}
.composer-zwin:hover[b-ayj7cev44r] { background: var(--cream-2); color: var(--text); }
.composer-zwin svg[b-ayj7cev44r] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Pasek zwiniętego pola: dowód, że napisany tekst nie przepadł. */
.composer-szkic-pasek[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    margin-bottom: 0.4rem;
    padding: 0.35rem 0.6rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--cream-2);
    font-family: inherit;
    font-size: 12px;
    color: var(--text-soft);
    text-align: left;
    cursor: pointer;
}
.composer-szkic-znak[b-ayj7cev44r] { flex: none; opacity: 0.7; }
.composer-szkic-tresc[b-ayj7cev44r] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Kafelki zalączników ─ STYLE PRZENIESIONE DO app.css (11.08.2026) ───
   .composer-att-* i .msg-att-* mieszkały TUTAJ, czyli w stylach ZAKRESOWYCH jednego
   komponentu — a tych samych klas używały czat i dyskusja zadania, gdzie nie dostawały
   ani jednej reguły. Ikona bez wymiarów rozdymała się tam do 834×446 px czarnej plamy.
   Wspólne klasy muszą mieszkać w app.css; tu zostaje tylko to, co naprawdę jest
   własnością widoku zgłoszenia. */

/* ─── Tags inside strip ──────────────────────────────────────────────── */
.tag[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem 0.2rem 0.6rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 11.5px;
    color: var(--text-soft);
    line-height: 1.2;
    /* Nie pozwól, by pojedynczy długi tag przepełnił panel — mieści się i łamie w razie potrzeby. */
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}
.tag.success[b-ayj7cev44r] { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--global-palette1) 25%, transparent); }
.tag.warning[b-ayj7cev44r], .tag.warn[b-ayj7cev44r] { background: var(--warn-bg); color: var(--warn); border-color: rgba(201,138,20,0.25); }
.tag.danger[b-ayj7cev44r] { background: var(--danger-bg); color: var(--danger); border-color: rgba(192,46,29,0.25); }
.tag.info[b-ayj7cev44r] { background: var(--info-bg); color: var(--info); }
.tag-remove[b-ayj7cev44r] {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0 0.15rem;
    font-size: 14px;
    line-height: 1;
    opacity: 0.5;
    border-radius: 50%;
}
.tag-remove:hover[b-ayj7cev44r] { opacity: 1; background: rgba(0,0,0,0.06); }
.tag-add-btn[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    background: transparent;
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    font-size: 11.5px;
    color: var(--text-soft);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
}
.tag-add-btn:hover[b-ayj7cev44r] { border-style: solid; color: var(--text); background: var(--cream-2); }

.tag-picker[b-ayj7cev44r] { position: relative; display: inline-block; }

/* Picker dropdown anchored to + tag button, absolute overlay */
.tag-picker-anchor[b-ayj7cev44r] { position: relative; display: inline-flex; }
.tag-picker-pop[b-ayj7cev44r] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    min-width: 240px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.tag-picker-pop .tag-picker-list[b-ayj7cev44r] {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
    max-height: 240px;
    overflow-y: auto;
}
@media (max-width: 600px) {
    .tag-picker-pop[b-ayj7cev44r] {
        position: fixed;
        top: auto;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
}
.tag-picker-input[b-ayj7cev44r] {
    font-size: 12px;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: var(--paper);
    min-width: 160px;
    max-width: 100%;
    font-family: inherit;
}
/* ⚠ Lista trafień PŁYNIE W TREŚCI, nie wisi jako chmurka nad ekranem (naprawione 31.08.2026).
   Do tego dnia stało tu `position: absolute; top: calc(100% + 4px); left: 0`. W oknie
   „Połącz zgłoszenia” najbliższym pozycjonowanym przodkiem jest `.modal-overlay` — przyciemniona
   płachta na CAŁY ekran — więc sto procent znaczyło „wysokość ekranu”: lista rysowała się
   965 px od góry przy oknie przeglądarki wysokim na 950 px. Płachta jest przypięta
   (`position: fixed`), więc przewijanie jej nie sprowadzało i łączenia zgłoszeń NIE DAŁO SIĘ
   wykonać myszą. Pozostałe dwa użycia tej klasy na tym ekranie (`.tag-picker-pop`,
   `.conv-head-tag-picker`) i tak zdejmowały to pozycjonowanie z powrotem — absolutna chmurka
   nie służyła tu niczemu poza tą jedną awarią. Okno przewija się samo: `.modal-body` ma
   `overflow-y: auto` w dialogu ograniczonym do `max-height: 90vh`, więc lista mieści się
   także przy oknie wysokim na 900 px. */
.tag-picker-list[b-ayj7cev44r] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
    min-width: 220px;
    max-width: 100%;
    max-height: 240px;
    overflow-y: auto;
    padding: 0.3rem;
}
.tag-picker-item[b-ayj7cev44r] {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
}
.tag-picker-item:hover[b-ayj7cev44r] { background: var(--cream-2); }
.tag-picker-new[b-ayj7cev44r] {
    color: var(--p1);
    border-top: 1px solid var(--line);
    margin-top: 0.25rem;
    padding-top: 0.5rem;
}

/* ─── Tagi w nagłówku (przeniesione z sidebara conv-side-tags) ────────── */
.conv-head-tags[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    min-width: 0;
}
/* Picker w nagłówku renderowany in-flow (lista position:static). .conv-thread ma overflow:hidden,
   więc absolutny dropdown byłby przycięty; flex-basis:100% => własny pełny wiersz w stripie. */
.conv-head-tag-picker[b-ayj7cev44r] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 100%;
    margin-top: 0.15rem;
    padding: 0.45rem;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    max-width: 420px;
    z-index: 5;
}
.conv-head-tag-picker .tag-picker-list[b-ayj7cev44r] {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    max-height: 220px;
    overflow-y: auto;
}

/* ─── Historia akcji: leniwe ładowanie + filtr szumu ─────────────────── */
.history-open-btn[b-ayj7cev44r] { width: 100%; justify-content: center; }
.history-toolbar[b-ayj7cev44r] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.4rem;
}
.history-filter-toggle[b-ayj7cev44r] {
    font-family: inherit;
    font-size: 11px;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.history-filter-toggle:hover[b-ayj7cev44r] { background: var(--cream-2); color: var(--text-soft); }
.history-filter-toggle.on[b-ayj7cev44r] {
    background: var(--cream-2);
    color: var(--text);
    border-color: var(--line-strong);
}

/* ─── Mini audit (Historia akcji) ─────────────────────────────────────
   Wcześniej lista miała własny pasek przewijania wewnątrz przewijanego panelu —
   dwa paski jeden w drugim gubią treść i myli je kółko myszy. Teraz sekcja jest
   zwijana i pokazuje krótką listę, a pełną historię otwiera popup — nic nie ginie. */
.mini-audit[b-ayj7cev44r] {
    list-style: none;
    margin: 0;
    padding: 0 0.25rem 0 0;
}
/* W popupie „Pokaż pełną historię" przewija się modal, nie lista. */
.modal-body .mini-audit[b-ayj7cev44r] { max-height: none; }
.mini-audit li[b-ayj7cev44r] {
    display: flex;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--line);
}
.mini-audit li:last-child[b-ayj7cev44r] { border-bottom: none; }
.mini-audit .audit-dot[b-ayj7cev44r] {
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex: none;
    background: var(--line-faint);
}
.mini-audit .audit-dot.tone-ok[b-ayj7cev44r] { background: var(--p1); }
.mini-audit .audit-dot.tone-warn[b-ayj7cev44r] { background: var(--warn, #c98a00); }
.mini-audit .audit-dot.tone-danger[b-ayj7cev44r] { background: var(--danger); }
.mini-audit .audit-dot.tone-info[b-ayj7cev44r] { background: var(--info, #2a8ec9); }
.mini-audit-body[b-ayj7cev44r] { flex: 1; min-width: 0; }
.mini-audit-title[b-ayj7cev44r] {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.mini-audit-time[b-ayj7cev44r] {
    font-size: 10.5px;
    color: var(--text-soft);
}

/* ─── Notatki wewnętrzne w panelu bocznym ─────────────────────────────
   Wygląd wpisu bierze z listy „Historia akcji" wyżej (kropka, tytuł, czas). Własne jest tylko to,
   że wpis jest PRZYCISKIEM (prowadzi do notatki w wątku) i że długa treść jest skracana. */
.notatka-pokaz[b-ayj7cev44r] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.notatka-pokaz:hover .mini-audit-title[b-ayj7cev44r] { color: var(--p1); }
.notatka-pokaz:focus-visible[b-ayj7cev44r] { outline: 2px solid var(--info); outline-offset: 2px; }
.notatka-tresc[b-ayj7cev44r] {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* Kilka linii zamiast całej notatki — reszta pod „Pokaż całą". */
.notatka-tresc.skrocona[b-ayj7cev44r] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}
.notatka-wiecej[b-ayj7cev44r] {
    margin-top: 0.15rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 11.5px;
    color: var(--p1);
    cursor: pointer;
}
.notatka-wiecej:hover[b-ayj7cev44r] { text-decoration: underline; }
.notatka-wiecej:focus-visible[b-ayj7cev44r] { outline: 2px solid var(--info); outline-offset: 2px; }

/* Dymek wskazany ze spisu notatek: obwódka, która gaśnie — żeby oko trafiło we właściwą wiadomość.
   Klasę nakłada i zdejmuje skrypt ekranu (pokazWiadomosc). */
.msg.msg-wskazana .msg-body[b-ayj7cev44r] { animation: msg-wskazanie-b-ayj7cev44r 2.2s ease-out; }
@keyframes msg-wskazanie-b-ayj7cev44r {
    0%, 40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 60%, transparent); }
    100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .msg.msg-wskazana .msg-body[b-ayj7cev44r] { animation: none; outline: 2px solid var(--info); outline-offset: 2px; }
}

/* ─── "W rozmowie" card — refs from messages ─────────────────────────── */
.conv-refs[b-ayj7cev44r] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.conv-ref[b-ayj7cev44r] {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--p1);
    border-radius: 6px;
    align-items: flex-start;
}
.conv-ref.order[b-ayj7cev44r] { border-left-color: var(--info, #2a8ec9); }
.conv-ref.return[b-ayj7cev44r] { border-left-color: var(--warn, #c98a00); }
.conv-ref.dispute[b-ayj7cev44r] { border-left-color: var(--danger); }
.conv-ref-img[b-ayj7cev44r] {
    width: 44px; height: 44px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--paper);
    flex: none;
}
.conv-ref-img-fallback[b-ayj7cev44r] {
    display: grid; place-items: center;
    font-size: 18px;
    background: var(--paper);
    border: 1px solid var(--line);
}
.conv-ref-text[b-ayj7cev44r] { min-width: 0; flex: 1; }
.conv-ref-label[b-ayj7cev44r] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
    font-weight: 500;
    margin-bottom: 1px;
}
.conv-ref-title[b-ayj7cev44r] {
    display: block;
    font-size: 12.5px;
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin-top: 2px;
}
.conv-ref-title:hover[b-ayj7cev44r] { color: var(--p1); text-decoration: underline; }
.conv-ref-meta[b-ayj7cev44r] {
    font-size: 11px;
    color: var(--text-soft);
    margin-top: 0.2rem;
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* ─── Order rows (in aside) ────────────────────────────────────────── */
.ord-row[b-ayj7cev44r] {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
}
.ord-row:last-child[b-ayj7cev44r] { border-bottom: none; }
.ord-row-disputed[b-ayj7cev44r] {
    padding-left: 0.6rem;
    margin-left: -0.6rem;
    border-left: 3px solid var(--danger);
    background: var(--danger-bg);
    border-radius: 0 6px 6px 0;
    padding-right: 0.6rem;
    margin-right: -0.4rem;
}
.ord-meta-line[b-ayj7cev44r] {
    display: flex;
    gap: 0.4rem;
    font-size: 11.5px;
    color: var(--text-soft);
    margin-top: 0.25rem;
}
.ord-meta-label[b-ayj7cev44r] {
    color: var(--text-soft);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
}
.ord-buyer[b-ayj7cev44r] {
    margin-top: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 5px;
}
.ord-lineitems[b-ayj7cev44r] {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    border-top: 1px solid var(--line);
}
.ord-lineitem[b-ayj7cev44r] {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--line);
    font-size: 12px;
}
.ord-lineitem:last-child[b-ayj7cev44r] { border-bottom: none; }
.ord-lineitem-name[b-ayj7cev44r] {
    flex: 1;
    color: var(--text);
    line-height: 1.3;
}
.ord-lineitem-name a[b-ayj7cev44r] {
    color: var(--global-palette1);
    text-decoration: none;
}
.ord-lineitem-name a:hover[b-ayj7cev44r] { text-decoration: underline; }
.ord-lineitem-qty[b-ayj7cev44r] {
    flex-shrink: 0;
    color: var(--text-soft);
    font-size: 11.5px;
}
.ord-mentions[b-ayj7cev44r] {
    margin-top: 0.5rem;
    padding: 0.4rem 0.55rem;
    background: var(--cream-2);
    border-radius: 4px;
    font-size: 11.5px;
}
.ord-mentions-list[b-ayj7cev44r] {
    list-style: none;
    padding: 0;
    margin: 0.2rem 0 0;
}
.ord-mentions-list li[b-ayj7cev44r] {
    padding: 0.15rem 0;
    color: var(--text);
}
.ord-external-link[b-ayj7cev44r] {
    display: inline-block;
    color: var(--p1);
    font-size: 11.5px;
    text-decoration: none;
    font-weight: 500;
}
.ord-external-link:hover[b-ayj7cev44r] { text-decoration: underline; }
.ord-actions[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.ord-refresh-form[b-ayj7cev44r] { margin: 0; }
.btn-link-ghost[b-ayj7cev44r] {
    background: transparent;
    border: none;
    color: var(--text-soft);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}
.btn-link-ghost:hover[b-ayj7cev44r] { color: var(--p1); text-decoration: underline; }

/* Button "Pokaż wszystkie" w nagłówku karty aside — kompaktowy chip-style, zawsze widoczny */
.aside-show-all[b-ayj7cev44r] {
    background: color-mix(in srgb, var(--global-palette1) 8%, transparent);
    border: 1px solid var(--p1);
    border-radius: 14px;
    color: var(--p1);
    font-size: 11.5px;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.aside-show-all:hover[b-ayj7cev44r] {
    background: var(--p1);
    color: #fff;
}
.ord-head[b-ayj7cev44r] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.ord-meta[b-ayj7cev44r] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ─── Customer modal ─────────────────────────────────────────────────── */
.cust-modal[b-ayj7cev44r] {
    max-width: 720px;
    width: calc(100% - 2rem);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.cust-modal-head[b-ayj7cev44r] {
    padding: 1.25rem 1.5rem 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
}
.cust-modal-ident[b-ayj7cev44r] {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    min-width: 0;
}
.cust-modal-ident > div[b-ayj7cev44r] { min-width: 0; }
.cust-modal-name[b-ayj7cev44r] {
    font-size: 1.5rem;
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cust-modal-meta[b-ayj7cev44r] {
    font-size: 11.5px;
    color: var(--text-soft);
    margin: 0.2rem 0 0;
}
.cust-modal-head-actions[b-ayj7cev44r] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex: none;
}
.cust-modal-close[b-ayj7cev44r] {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-soft);
    cursor: pointer;
    margin-left: 0.3rem;
}
.cust-modal-close:hover[b-ayj7cev44r] { background: var(--cream-2); color: var(--text); }
.cust-modal-close svg[b-ayj7cev44r] {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* ⚠ `min-height: 0` JEST WARUNKIEM PRZEWIJANIA, NIE OZDOBĄ (20.09.2026, właściciel: „to się nie
   przewija na mobile"). Okno jest kolumną `flex`, a dziecko kolumny nie zejdzie samo poniżej wysokości
   własnej treści — `overflow-y: auto` nie ma wtedy czego przycinać i treść po prostu wystaje poza
   ekran, bez paska i bez gestu. Ta sama pułapka co w panelu bocznym rozmowy (`.conv-side-scroll`). */
.cust-modal-body[b-ayj7cev44r] {
    padding: 1.25rem 1.5rem 1.5rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ── Nagłówek okna: jasny tekst na ciemnym tle ──────────────────────────────────────────────
   ⚠ `.modal-header` maluje tło gradientem palety i ustawia `color: white`, ale dzieci nadpisują je
   własnym kolorem (`--text-soft`, `display-heading`) — pomyślanym dla jasnego papieru. Na ciemnym
   pasku dawało to szary napis na ciemnej zieleni: „7 zamówień łącznie · 2453 PLN" i „Edytuj" były
   nieczytelne (zrzut właściciela z telefonu, 20.09.2026). Kolor bierze się TUTAJ, z jednego miejsca. */
.cust-modal-head .cust-modal-name[b-ayj7cev44r],
.cust-modal-head .cust-modal-name em[b-ayj7cev44r] { color: #fff; }
.cust-modal-head .cust-modal-meta[b-ayj7cev44r] { color: rgba(255, 255, 255, 0.82); }
.cust-modal-head .btn-ghost[b-ayj7cev44r] { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.cust-modal-head .btn-ghost:hover[b-ayj7cev44r] { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.cust-modal-head .cust-modal-close[b-ayj7cev44r] { color: #fff; opacity: 0.85; }
.cust-modal-head .cust-modal-close:hover[b-ayj7cev44r] { opacity: 1; background: rgba(255, 255, 255, 0.14); }

/* ⚠ KAŻDY ciemny pasek okna, nie tylko ten jeden. `.cust-modal-close` bierze kolor z palety
   dla jasnego tła (--text-soft) i na gradiencie nagłówka daje 1,80:1 przy progu 4,5:1 —
   czyli „widać, że coś tam jest". Właściciel zgłosił to na oknie „Historia akcji" (21.09),
   ale tych okien jest sześć; naprawa jednego nie jest naprawą wzorca.
   ⚠ Ta reguła MUSI stać w arkuszu komponentu: arkusz komponentów ładuje się PO app.css,
   więc `.modal-header .cust-modal-close` zapisane w app.css przegrałoby kolejnością. */
.modal-header .cust-modal-close[b-ayj7cev44r] { color: #fff; opacity: 1; }
.modal-header .cust-modal-close:hover[b-ayj7cev44r] { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* ── Okno decyzji reklamacyjnej ─────────────────────────────────────────────────────────────
   Rodzina okien zgłoszenia (częściowy zwrot, prośba o zakończenie, odesłanie towaru): ten sam pasek,
   te same pola i przyciski. Własne jest tu tylko to, co niesie treść.

   ⚠ TŁO ŁAPIE KLIKNIĘCIA. Wspólne `.modal-overlay` ma `pointer-events: none` — kliknięcie obok okna
   trafia wtedy w stronę POD oknem (w przycisk „Zamknij zgłoszenie”, w menu), a okna nie zamyka.
   Przy decyzji, której nie da się cofnąć, kliknięcie obok ma znaczyć „rozmyśliłem się” i nic więcej. */
.modal-overlay.okno-decyzji-tlo[b-ayj7cev44r] { pointer-events: auto; }
.okno-decyzji:focus[b-ayj7cev44r] { outline: none; }

/* Co wysyłasz i że to jednorazowe — jedno miejsce, na samej górze. Kolor paska mówi, po której
   stronie jest decyzja (uznanie / odmowa / wycofanie), zanim człowiek doczyta nazwę. */
.decyzja-co[b-ayj7cev44r] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--cream-2);
}
.decyzja-co.akceptacja[b-ayj7cev44r] { border-left-color: var(--ok); background: var(--ok-bg); }
.decyzja-co.odmowa[b-ayj7cev44r] { border-left-color: var(--danger); background: var(--danger-bg); }
.decyzja-nazwa[b-ayj7cev44r] { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text); }
.decyzja-uwaga[b-ayj7cev44r] { font-size: 12.5px; line-height: 1.45; color: var(--text-soft); }

/* Zdanie pod polem i licznik znaków w jednym wierszu; licznik nie łamie się i nie ściska zdania. */
.decyzja-pod-polem[b-ayj7cev44r] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-top: 0.3rem;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-soft);
}
.decyzja-pod-polem > span:first-child[b-ayj7cev44r] { min-width: 0; }
.decyzja-pod-polem .mono[b-ayj7cev44r] { flex: none; font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.decyzja-pod-polem .mono.za-dlugie[b-ayj7cev44r] { color: var(--danger); font-weight: 600; }
.okno-decyzji textarea.form-input[b-ayj7cev44r] { resize: vertical; min-height: 5.5rem; }
.cust-modal-grid[b-ayj7cev44r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.cust-modal-section[b-ayj7cev44r] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
.cust-modal-section-full[b-ayj7cev44r] {
    margin-top: 1.5rem;
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
}
.cust-modal-section-title[b-ayj7cev44r] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-soft);
    margin: 0 0 0.35rem;
    font-weight: 500;
}
.cust-modal-count[b-ayj7cev44r] {
    background: var(--cream-2);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    color: var(--text-soft);
    margin-left: 0.3rem;
}
.cust-kv[b-ayj7cev44r] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.45rem 0.85rem;
    margin: 0;
    font-size: 13px;
}
.cust-kv dt[b-ayj7cev44r] {
    color: var(--text-soft);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: center;
}
.cust-kv dd[b-ayj7cev44r] {
    margin: 0;
    color: var(--text);
    overflow-wrap: anywhere;
}
.cust-tags-row[b-ayj7cev44r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}
.cust-notes-body[b-ayj7cev44r] {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    margin: 0;
    padding: 0.5rem 0.65rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    white-space: pre-wrap;
}

/* ─── Other open conversations (in modal) ────────────────────────────── */
.other-convs[b-ayj7cev44r] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
}
.other-conv-link[b-ayj7cev44r] {
    display: block;
    padding: 0.5rem 0.65rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    transition: all 0.12s;
}
.other-conv-link:hover[b-ayj7cev44r] { background: var(--cream-2); border-color: var(--line-strong); }
.other-conv-head[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-width: 0;
    margin-bottom: 0.25rem;
}
.other-conv-head .chip[b-ayj7cev44r] { flex-shrink: 0; }
.other-conv-subj[b-ayj7cev44r] {
    font-size: 12.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.other-conv-meta[b-ayj7cev44r] {
    font-size: 10.5px;
    color: var(--text-soft);
    margin-top: 0.2rem;
}

/* ─── Side drawer header (mobile only) ───────────────────────────────── */
.side-drawer-head[b-ayj7cev44r] { display: none; }

/* ─── Side backdrop (mobile only) ────────────────────────────────────── */
.conv-side-backdrop[b-ayj7cev44r] { display: none; }

/* ─── Mobile: side panel becomes right drawer ────────────────────────── */
@media (max-width: 1199.98px) {
    .conv-shell[b-ayj7cev44r] {
        grid-template-columns: 1fr;
        padding: 0.75rem 1rem;
        gap: 0;
    }
    /* Bez panelu obok nagłówek i wątek to jedna karta: nagłówek jej górą, wątek dołem (jak przed 03.10.2026). */
    .conv-head[b-ayj7cev44r] {
        border-radius: var(--radius) var(--radius) 0 0;
        box-shadow: none;
    }
    .conv-thread[b-ayj7cev44r] {
        border-top: none;
        border-radius: 0 0 var(--radius) var(--radius);
    }
    aside.conv-side[b-ayj7cev44r] {
        position: fixed;
        top: var(--topbar-h);
        right: 0;
        height: calc(100vh - var(--topbar-h));
        height: calc(100dvh - var(--topbar-h));
        width: min(380px, 92vw);
        max-width: 92vw;
        background: var(--cream);
        border-left: 1px solid var(--line);
        padding: 0.85rem 0.85rem 1rem;
        z-index: 95;
        transform: translateX(100%) !important;
        transition: transform 0.22s ease;
        box-shadow: -4px 0 24px rgba(0,0,0,0.12);
        pointer-events: none;
        /* Szuflada też nie przewija się sama — robi to obszar sekcji w środku,
           dzięki czemu pasek „Szczegóły konwersacji" zostaje widoczny u góry. */
        overflow: hidden;
    }
    aside.conv-side.drawer-open[b-ayj7cev44r] {
        transform: translateX(0) !important;
        pointer-events: auto;
    }
    .conv-shell.side-backdrop-show .conv-side-backdrop[b-ayj7cev44r] {
        position: fixed;
        inset: var(--topbar-h) 0 0 0;
        background: rgba(0,0,0,0.35);
        z-index: 94;
        backdrop-filter: blur(2px);
        display: block;
        animation: fadeIn-b-ayj7cev44r 0.18s ease;
    }
    /* On mobile, side panel default hidden — `display: none` for inline class — but keep transform fallback */
    .conv-shell.side-hidden[b-ayj7cev44r] { /* ignored on mobile, panel stays as drawer */ }
    .conv-shell.side-hidden .conv-side[b-ayj7cev44r] { display: flex; }
    .side-drawer-head[b-ayj7cev44r] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 0.75rem;
        border-bottom: 1px solid var(--line);
        margin-bottom: 0.75rem;
    }
    .side-drawer-head strong[b-ayj7cev44r] {
        font-size: 13px;
        color: var(--text);
    }
    .side-drawer-close[b-ayj7cev44r] {
        background: transparent;
        border: none;
        width: 32px; height: 32px;
        display: grid; place-items: center;
        border-radius: 6px;
        color: var(--text-soft);
        cursor: pointer;
    }
    .side-drawer-close:hover[b-ayj7cev44r] { background: var(--cream-2); color: var(--text); }
    .side-drawer-close svg[b-ayj7cev44r] {
        width: 18px; height: 18px;
        stroke: currentColor; fill: none;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }

    /* Header chips wrap naturally on small viewports */
    .conv-strip[b-ayj7cev44r] { gap: 0.35rem 0.4rem; }
    .cust-chip-name[b-ayj7cev44r] { max-width: 140px; }

    /* Modal full-width on mobile */
    .cust-modal[b-ayj7cev44r] {
        max-height: calc(100vh - 2rem);
        max-width: none;
    }
    .cust-modal-grid[b-ayj7cev44r] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* Podpowiedzi szablonów nad polem odpowiedzi. Na dużym ekranie rząd zawijany, na telefonie
   (niżej) zostaje z nich jedna — patrz blok 640 px. */
.composer-suggest[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
/* Opis przed propozycjami — legenda do słów w wiadomości (uwaga 8, 03.10.2026). Słowo „podkreślonych” ma ten sam
   rysunek co słowa w wiadomości (`.podpowiedzi-wzor` w app.css). Cichy, jak podpis, nie jak przycisk. */
.podpowiedzi-opis[b-ayj7cev44r] {
    font-size: 11.5px;
    color: var(--text-soft);
    white-space: nowrap;
    flex: none;
}
.podpowiedzi-opis .opis-krotki[b-ayj7cev44r] { display: none; }
.podpowiedz-szablonu[b-ayj7cev44r] {
    cursor: pointer;
    font-size: 11.5px;
    padding: 0.35rem 0.65rem;
    border: none;
    transition: box-shadow 0.15s;
}

@media (max-width: 640px) {
    /* ── 0. CAŁA SZEROKOŚĆ EKRANU (20.09.2026) ──────────────────────────────────────────────
       Właściciel: „powinno być szerzej, bez marginesów, bo po co na mobile". Rozmowa stała
       w kafelku z zaokrągleniem i cieniem — wzór z dużego ekranu, gdzie kafelek oddziela ją od
       tła i sąsiedniego panelu. Na telefonie sąsiada nie ma, a kafelek zabierał 24 px szerokości
       (2 × 12) z 390 — czyli jedno słowo w każdym wierszu wiadomości. */
    .conv-shell[b-ayj7cev44r] { padding: 0; gap: 0; }
    .conv-thread[b-ayj7cev44r] {
        border-left: none;
        border-right: none;
        border-radius: 0;
        box-shadow: none;
    }
    .conv-head[b-ayj7cev44r] {
        padding: 0.45rem 0.7rem 0.5rem;
        border: none;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        gap: 0.3rem;
    }

    /* ══ TELEFON: NAGŁÓWEK I KOMPOZYTOR ODDAJĄ MIEJSCE WIADOMOŚCIOM (20.09.2026) ═══════════════
       Zmierzone przyrządem (scenariusz OkiemT, pokaz, 390×844) PRZED tą zmianą:
         górny pasek 49 + nagłówek rozmowy 178 + kompozytor 289 = 516 px chromu (61 % okna),
         na wiadomości zostawało 258 px (31 %), a po rozwinięciu „Szczegóły" 160 px (19 %) —
         czyli dwie wiadomości, jedna ucięta. I to BEZ klawiatury ekranowej, która zabiera
         kolejne ~300 px: z nią na wątek nie zostaje nic.
       Właściciel (20.09.2026): „ta ilość miejsca na czat na mobile to patologia […] musisz to
       wszystko pochować do jakichś submenu i dać dużo więcej miejsca na konwersacje".

       ZASADA PODZIAŁU: w stałym widoku zostaje to, co czyta się PRZY KAŻDEJ WIADOMOŚCI — temat,
       stan sprawy, pole odpowiedzi z wysyłką. Wszystko, co sprawdza się RAZ (rodzaj, kanał, numer,
       opiekun, adres nadawcy, lista plików), idzie o jedno dotknięcie dalej: pod „▼ Więcej"
       albo pod „⋯ Akcje". Nic nie znika — każda rzecz schowana tutaj ma tam swój odpowiednik. */

    /* ── 1. Wiersz tematu: JEDEN wiersz zamiast trzech ──────────────────────────────────────
       Wiersz ma `flex-wrap: wrap`, a temat `min-width: 11rem` — więc przyciski „panel" i
       „⋯ Akcje" lądowały w osobnej linii, a plakietki rodzaju w jeszcze jednej. */
    .conv-head-row1[b-ayj7cev44r] { flex-wrap: nowrap; gap: 0.35rem; min-height: 0; }
    .conv-title[b-ayj7cev44r] {
        font-size: 1.05rem;
        /* ⚠ ZERO, nie 11rem. Przy `nowrap` to minimum rozpychało wiersz i wypychało przyciski
           poza krawędź; z zerem temat kurczy się do wielokropka, a przyciski zostają widoczne. */
        min-width: 0;
        flex: 1 1 auto;
        /* ⚠ `display: block` — bez niego wielokropka NIE MA. Reguła bazowa układa temat jako
           `-webkit-box` (dwie linie na komputerze), a `text-overflow` na takim pudełku nie działa:
           temat był ucinany w pół litery pod przyciskiem „Szczegóły” („Faktura do zamówieni”,
           zmierzone 02.10.2026: treść 190 px w 166 px, bez „…”). */
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }
    /* Odpowiedniki tych czterech siedzą w pasku „Szczegóły" (conv-strip-mobile-extras) i w panelu
       bocznym, więc para jest rozłączna i zawsze widać dokładnie jedną kopię. */
    .conv-head-row1 .conv-kind[b-ayj7cev44r],
    .conv-head-row1 .conv-ticket-inline[b-ayj7cev44r],
    .conv-head-row1 .agent-chip[b-ayj7cev44r],
    .conv-head-row1 .conv-presence-mini[b-ayj7cev44r] { display: none; }
    .conv-head-actions.mobile-only[b-ayj7cev44r] { flex: none; margin-left: auto; }

    /* ── 2. Pasek stanu ────────────────────────────────────────────────────────────────────── */
    .conv-strip-toggle[b-ayj7cev44r] { padding-top: 0.1rem; padding-bottom: 0.1rem; }

    /* Rozwinięty pasek bez powtórek z wiersza NAD nim. Przełącznik „▼ Więcej" zostaje widoczny
       po rozwinięciu i niesie już stan oraz termin — więc w pasku stały drugi raz, dwa centymetry
       niżej (widoczne na zrzucie PO, 20.09.2026: „Otwarte" nad „Otwarte"). Pochodzenie terminu
       zostaje w podpowiedzi przełącznika. */
    .conv-strip.mobile-open > .chip:first-child[b-ayj7cev44r],
    .conv-strip.mobile-open .conv-sla-mob[b-ayj7cev44r] { display: none; }

    /* ── 3. Pliki i media: w oknie, nie w wątku ────────────────────────────────────────────
       Pasek przyklejony do góry wątku zabierał 98 px z 390 (pomiar agenta J) i został usunięty
       — patrz uwaga przy `.pliki-modal`. Na telefonie pliki otwiera pozycja w menu „⋮". */

    /* ── 4. Kompozytor: jedna linia narzędzi zamiast dwóch ──────────────────────────────────
       Ikony zostają (cel dotyku pilnuje blok `pointer: coarse`), znikają NAPISY. Co robi ikona,
       mówi `title`, a te same akcje z pełnymi napisami są w menu „⋯ Akcje". */
    .conv-composer[b-ayj7cev44r] { padding: 0.5rem 0.85rem 0.6rem; }
    .composer-actions[b-ayj7cev44r] { margin-top: 0.35rem; gap: 0.3rem; }
    .etykieta-szeroko[b-ayj7cev44r] { display: none; }

    /* Na telefonie z podpisu zostaje SAMA PLAKIETKA kanału (22 px) — adres skrzynki schodzi,
       bo to najdłuższy element rzędu, a sprawdza się go raz. Pełna nazwa i adres są w podpowiedzi
       plakietki oraz w panelu bocznym. W trybie notatki pole ma własne tło (`.composer-internal`)
       i aktywny przełącznik „Notatka", więc i bez napisu widać, do kogo się pisze. */
    .composer-nadawca-adres[b-ayj7cev44r] { display: none; }

    /* Trzy podpowiedzi zawijały się na trzy wiersze (66 px). Zostaje pierwsza — najlepiej
       dopasowana, bo lista jest posortowana po trafieniach słów kluczowych. Reszta jest pod
       „📋" obok pola.
       ⚠ Od 03.10.2026 pierwszym dzieckiem rzędu jest OPIS („Do słów podkreślonych:”), więc liczymy
       same propozycje (`button:nth-of-type`), nie dzieci — `:nth-child(n+2)` schowałby jedyną propozycję.
       Rząd w jednej linii: opis krótki, propozycja ucięta wielokropkiem, gdy dłuższa niż reszta ekranu. */
    .composer-suggest[b-ayj7cev44r] { margin-bottom: 0.35rem; flex-wrap: nowrap; min-width: 0; }
    .composer-suggest > button:nth-of-type(n+2)[b-ayj7cev44r] { display: none; }
    .composer-suggest > .podpowiedz-szablonu[b-ayj7cev44r] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }
    .podpowiedzi-opis .opis-dlugi[b-ayj7cev44r] { display: none; }
    .podpowiedzi-opis .opis-krotki[b-ayj7cev44r] { display: inline; }

    /* ── 5. Wątek ma dostać to, co tu zaoszczędzone ────────────────────────────────────────── */
    .conv-stream[b-ayj7cev44r] { padding: 0.55rem 0.7rem; }
    /* ⚠ Temat jest w tym wierszu jedynym elementem, który się kurczy (flex: 1), więc oddawał
       miejsce WSZYSTKIM chipom naraz: zmierzone na 390 px — 20,8 px szerokości przy 146 px
       potrzebnych, czyli z „Zmiana adresu dostawy" widać było dwie litery. Wiersz ma
       `flex-wrap: wrap`, więc wystarczy dać tematowi minimum: wtedy to chipy (termin, poradnik)
       zjeżdżają do drugiej linii, a temat zostaje czytelny. */
    .conv-title[b-ayj7cev44r] { font-size: 1.2rem; min-width: 11rem; }
    .conv-stream[b-ayj7cev44r] { padding: 0.7rem; }
    .conv-composer[b-ayj7cev44r] { padding: 0.7rem 0.85rem; }
    .msg[b-ayj7cev44r] { max-width: 100%; }
    .cust-modal-head[b-ayj7cev44r] { padding: 1rem 1rem 0.85rem; }
    .cust-modal-body[b-ayj7cev44r] { padding: 1rem; }

    /* Na telefonie okno klienta bierze cały ekran: kafelek z marginesem zostawiał treści ~70 % wysokości
       i to ona musiała się mieścić w tym, co zostało po nagłówku. */
    .cust-modal[b-ayj7cev44r] {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
    .cust-modal-head[b-ayj7cev44r] { padding: 0.9rem 1rem 0.8rem; }
    .cust-modal-name[b-ayj7cev44r] { font-size: 1.15rem; }
}

@keyframes fadeIn-b-ayj7cev44r {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Kontrolki odslaniane najechaniem — na dotyku widoczne zawsze ──────────────
   ⚠ `opacity: 0` + `:hover` to na telefonie funkcja, ktora NIE ISTNIEJE: nie ma
   najechania, wiec nic nie mowi, ze przypiecie wiadomosci albo edycja tematu sa
   w ogole mozliwe. Sonda ukladu tego nie zlapie — mierzy rozmiar elementu, a nie
   to, czy da sie go zobaczyc. Wyszlo dopiero z obejrzenia czystego zrzutu. */
@media (pointer: coarse) {
    .msg-pin[b-ayj7cev44r] { opacity: 0.6; }
    .subject-edit-hint[b-ayj7cev44r] { opacity: 1; }
}

/* ── Cele dotykowe w czytniku rozmowy ─────────────────────────────────────────
   Przejazd 18.08.2026: strzalka powrotu 28×28, pinezka przy wiadomosci 22×22,
   zakladki kompozytora („Odpowiedz" / „Notka wewn.") 83×27 — wszystko ponizej progu,
   w ktory da sie trafic palcem.

   ⚠ REALNY ROZMIAR, NIE WARSTWA `::after`. Sonda zalicza cel, gdy ma ≥32×32 px albo gdy
   cztery punkty szesnascie pikseli od srodka trafiaja w niego. Druga droga dziala tylko
   dla tego, co stoi w widocznym kadrze — pinezki wiadomosci przewinietych poza kadr
   przepadalyby mimo warstwy. Poza tym pinezka siedzi w naglowku wiadomosci obok autora
   i czasu: warstwa 44 px zachodzilaby na sasiadow zamiast rozsuwac.

   ⚠ Wylacznie `(pointer: coarse)` — na komputerze gestosc czytnika zostaje bez zmian. */
@media (pointer: coarse) {
    .conv-back[b-ayj7cev44r] { width: 40px; height: 40px; }

    /* ⚠ `flex: none` NIE jest ozdoba. Pinezka stoi w `.msg-head`, czyli w rzedzie zgietym,
       a domyslne `flex-shrink: 1` sciska ja z powrotem — pomiar pokazal 30×40 px zamiast
       40×40 mimo ustawionej szerokosci. Cel byl dalej za waski i sonda dalej go zglaszala. */
    .msg-pin[b-ayj7cev44r] { width: 40px; height: 40px; flex: none; }

    .c-tab[b-ayj7cev44r] {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 40px; min-width: 44px;
        padding: 0 0.85rem;
    }
}

/* ─── Podpowiedź „to wygląda na powtórkę" ────────────────────────────────────
   Dyskretna, jednolinijkowa (na telefonie zawija się na dwie). Ma być widoczna,
   ale nie ma udawać alarmu: to podpowiedź, a nie awaria. */
.dup-hint[b-ayj7cev44r] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--info, #3b7dd8);
    border-radius: 8px;
    background: color-mix(in srgb, var(--info, #3b7dd8) 6%, transparent);
    font-size: 12.5px;
    line-height: 1.45;
    flex-wrap: wrap;
}

.dup-hint-icon[b-ayj7cev44r] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--info, #3b7dd8);
}

/* min-width: 0 — bez tego długi temat rozpycha pasek zamiast się zawinąć. */
.dup-hint-text[b-ayj7cev44r] {
    flex: 1 1 220px;
    min-width: 0;
    color: var(--text-soft);
}

.dup-hint-link[b-ayj7cev44r] {
    font-weight: 600;
    white-space: nowrap;
}

.dup-hint-why[b-ayj7cev44r] {
    display: block;
    color: var(--text-soft);
    font-size: 11.5px;
}

.dup-hint-actions[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
}

.dup-hint-dismiss[b-ayj7cev44r] {
    color: var(--text-faint);
}

/* Pasek zapisanego szkicu nad polem pisania. Ton stonowany — to potwierdzenie, nie ostrzeżenie. */
.conv-szkic-pasek[b-ayj7cev44r] {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    font-size: 11.5px;
    color: var(--text-soft);
    background: color-mix(in srgb, var(--p1, #009244) 6%, transparent);
    border-bottom: 1px solid var(--line);
}
.conv-szkic-znak[b-ayj7cev44r] { color: var(--p1, #009244); }
.conv-szkic-odrzuc[b-ayj7cev44r] {
    margin-left: auto;
    background: none; border: none; padding: 0.15rem 0.35rem;
    font: inherit; color: var(--text-faint); cursor: pointer; text-decoration: underline;
}
.conv-szkic-odrzuc:hover[b-ayj7cev44r] { color: var(--danger, #c0392b); }
@media (pointer: coarse) { .conv-szkic-odrzuc[b-ayj7cev44r] { min-height: 40px; } }
/* /Components/Pages/Conversation/ConversationTasksPanel.razor.rz.scp.css */
/* Sekcja panelu bocznego — nagłówek i zwijanie trzyma Conversation.razor,
   tutaj jest sama zawartość (bez własnej ramki karty). */
.conv-tasks[b-jr1hovzphb] {
    padding: 0;
}

.conv-tasks-head[b-jr1hovzphb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.85rem 0.35rem;
}

.conv-tasks-title[b-jr1hovzphb] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.conv-tasks-actions[b-jr1hovzphb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.conv-tasks-add[b-jr1hovzphb] {
    background: none;
    border: none;
    color: var(--p1);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}

.conv-tasks-add:hover[b-jr1hovzphb] {
    text-decoration: underline;
}

.conv-tasks-list[b-jr1hovzphb] {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 0.5rem;
    gap: 0.15rem;
}

.conv-tasks-empty[b-jr1hovzphb] {
    font-size: 11.5px;
    color: var(--text-soft);
    padding: 0.35rem;
    line-height: 1.5;
}

.conv-task-item[b-jr1hovzphb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 7px;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    font: inherit;
}

.conv-task-item:hover[b-jr1hovzphb] {
    background: var(--cream);
}

.conv-task-dot[b-jr1hovzphb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.conv-task-dot.tone-todo[b-jr1hovzphb] {
    background: var(--line-faint);
}

.conv-task-dot.tone-progress[b-jr1hovzphb] {
    background: var(--info);
}

.conv-task-dot.tone-done[b-jr1hovzphb] {
    background: var(--ok);
}

.conv-task-title[b-jr1hovzphb] {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-task-agent[b-jr1hovzphb] {
    font-size: 10.5px;
    color: var(--text-soft);
    flex: 0 0 auto;
}
/* /Components/Pages/Conversation/DodajDoZadania.razor.rz.scp.css */
/* Okno „Dodaj do istniejącego zadania" — wyszukiwarka zadań przy rozmowie. Wygląd spójny
   z oknem zgłoszenia z zaznaczenia (MenuZaznaczenia.razor.css): ten sam lede, ten sam cytat fragmentu. */

.ddz-lede[b-wzw2dmxspz] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-soft);
    margin: 0 0 0.85rem;
}

.ddz-ok[b-wzw2dmxspz] {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 0.9rem;
}

.ddz-fragment[b-wzw2dmxspz] {
    border-left: 3px solid var(--global-palette1, #009244);
    background: var(--cream-2);
    border-radius: 0 6px 6px 0;
    padding: 0.6rem 0.75rem;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 160px;
    overflow-y: auto;
    margin-bottom: 0.85rem;
}

.ddz-wyniki[b-wzw2dmxspz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0.5rem;
    min-height: 2.2rem;
}

.ddz-hint[b-wzw2dmxspz] {
    font-size: 12px;
    color: var(--text-faint);
    padding: 0.4rem 0.2rem;
}

.ddz-wynik[b-wzw2dmxspz] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.ddz-wynik:hover[b-wzw2dmxspz],
.ddz-wynik:focus-visible[b-wzw2dmxspz] {
    background: var(--cream-2);
    border-color: var(--line);
    outline: none;
}

.ddz-wynik:disabled[b-wzw2dmxspz] {
    opacity: 0.6;
    cursor: wait;
}

.ddz-kropka[b-wzw2dmxspz] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.ddz-tytul[b-wzw2dmxspz] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.ddz-meta[b-wzw2dmxspz] {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--text-soft);
}

.ddz-blad[b-wzw2dmxspz] {
    margin: 0.75rem 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--danger);
    background: var(--danger-bg);
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
}
/* /Components/Pages/Conversation/KartaSerwisu.razor.rz.scp.css */
/* Karta „Serwis zewnętrzny” — treść zwijanej sekcji panelu bocznego. Rytm i typografia jak w sąsiednich
   sekcjach (podpisy 11 px, pola .form-input z app.css); jedyny kolor spoza palety to plakietka statusu. */

.ks[b-oup0s5vrqs] { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }

.ks-stan[b-oup0s5vrqs] { display: flex; flex-direction: column; gap: 0.35rem; }
.ks-stan-wiersz[b-oup0s5vrqs] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; min-width: 0; }

/* „w serwisie 12 dni” — liczba czyta się pierwsza, tabelarycznie, bez koloru alarmu (to stan, nie błąd). */
.ks-dni[b-oup0s5vrqs] { font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.ks-dni strong[b-oup0s5vrqs] { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ks-dni-stop[b-oup0s5vrqs] { font-style: italic; }
.ks-pusto[b-oup0s5vrqs] { margin: 0; font-size: 12px; color: var(--text-soft); }

.ks-pola[b-oup0s5vrqs] { display: flex; flex-direction: column; gap: 0.55rem; }
.ks-pole[b-oup0s5vrqs] { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1 1 0; }
.ks-pole .form-input[b-oup0s5vrqs] { padding: 0.4rem 0.55rem; font-size: 12.5px; min-width: 0; }
/* Przesyłka i jej data w jednym wierszu — data jest wąska, numer przesyłki dostaje resztę. */
.ks-dwa[b-oup0s5vrqs] { display: flex; gap: 0.5rem; min-width: 0; }
.ks-pole-data[b-oup0s5vrqs] { flex: 0 0 8.6rem; }

.ks-etykieta[b-oup0s5vrqs] { font-size: 11px; color: var(--text-soft); font-weight: 500; }

.ks-powrot[b-oup0s5vrqs], .ks-podpowiedz[b-oup0s5vrqs] { margin: 0; font-size: 11.5px; color: var(--text-soft); }
.ks-po-terminie[b-oup0s5vrqs] { color: var(--danger); font-weight: 600; }

.ks-akcje[b-oup0s5vrqs] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ks-zdejmij[b-oup0s5vrqs] { margin-left: auto; }

/* Podgląd bez prawa do zmiany: dwie kolumny „podpis — wartość”. */
.ks-dane[b-oup0s5vrqs] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.3rem 0.75rem;
    margin: 0;
    font-size: 12.5px;
}
.ks-dane dt[b-oup0s5vrqs] { color: var(--text-soft); font-size: 11.5px; }
.ks-dane dd[b-oup0s5vrqs] { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--text); }
/* Odstęp przed „· wysłano …” w arkuszu, nie spacją w znaczniku — Razor zjada spację przed blokiem @if. */
.ks-data[b-oup0s5vrqs] { color: var(--text-soft); font-size: 11.5px; margin-left: 0.3rem; }

.ks-uwaga[b-oup0s5vrqs] {
    margin: 0;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--line);
    font-size: 11px;
    color: var(--text-soft);
    line-height: 1.45;
}

/* Wąski ekran (szuflada na telefonie): data pod numerem przesyłki, nie obok. */
@media (max-width: 420px) {
    .ks-dwa[b-oup0s5vrqs] { flex-direction: column; }
    .ks-pole-data[b-oup0s5vrqs] { flex-basis: auto; }
}
/* /Components/Pages/Conversation/MenuZaznaczenia.razor.rz.scp.css */
/* Menu kontekstowe nad zaznaczonym tekstem. Pozycja przychodzi atrybutem style z komponentu
   (jest wyliczana z rozmiaru okna), tutaj zostaje sam wygląd. */

/* ⚠ Element w warstwie nad stroną dostaje od przeglądarki własny zestaw stylów:
   `inset: 0`, `margin: auto`, `width/height: fit-content`, `border: solid`, `padding: .25em`
   i `overflow: auto`. Trzeba je zdjąć, bo pozycję wyliczamy sami — inaczej menu ląduje na środku
   okna zamiast przy zaznaczeniu. Zamknięty popover ma od przeglądarki `display: none` i tak
   zostaje: menu istnieje w drzewie tylko wtedy, gdy ma być widoczne. */
.menu-zaznaczenia[b-sd6k6lqf9c] {
    inset: auto;
    margin: 0;
    overflow: visible;
}

.menu-zaznaczenia[b-sd6k6lqf9c] {
    z-index: 3000;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm, 8px);
    box-shadow: var(--shadow-md, 0 10px 30px rgba(0, 0, 0, 0.18));
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-zaznaczenia .pozycja[b-sd6k6lqf9c] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    /* min-width: 0 — inaczej długa etykieta rozpycha pozycję ponad szerokość menu. */
    min-width: 0;
    padding: 0.5rem 0.6rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.menu-zaznaczenia .pozycja span[b-sd6k6lqf9c] {
    flex: 1;
    min-width: 0;
}

.menu-zaznaczenia .pozycja svg[b-sd6k6lqf9c] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--text-soft);
}

.menu-zaznaczenia .pozycja:hover[b-sd6k6lqf9c] {
    background: var(--cream-2);
}

/* Stan skupienia MUSI być widoczny — menu da się obsłużyć strzałkami, a bez ramki nie widać,
   na czym się stoi. Domyślna obwódka przeglądarki znika na ciemnym tle, więc rysujemy własną. */
.menu-zaznaczenia .pozycja:focus[b-sd6k6lqf9c],
.menu-zaznaczenia .pozycja:focus-visible[b-sd6k6lqf9c] {
    background: var(--cream-2);
    outline: 2px solid var(--global-palette1, #009244);
    outline-offset: -2px;
}

/* ── Okno zakładania zgłoszenia ─────────────────────────────────────────── */

.menu-zaznaczenia-lede[b-sd6k6lqf9c] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-soft);
    margin: 0 0 0.85rem;
}

.menu-zaznaczenia-ok[b-sd6k6lqf9c] {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 0.9rem;
}

.menu-zaznaczenia-fragment[b-sd6k6lqf9c] {
    border-left: 3px solid var(--global-palette1, #009244);
    background: var(--cream-2);
    border-radius: 0 6px 6px 0;
    padding: 0.6rem 0.75rem;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.menu-zaznaczenia-etykieta[b-sd6k6lqf9c] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.35rem;
}

.menu-zaznaczenia-etykieta span[b-sd6k6lqf9c] {
    font-weight: 400;
    color: var(--text-faint);
}

.menu-zaznaczenia-blad[b-sd6k6lqf9c] {
    margin: 0.75rem 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--danger);
    background: var(--danger-bg);
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
}
/* /Components/Pages/Conversation/PlakietkiZgloszenia.razor.rz.scp.css */
/* Dwie plakietki obok siebie: status i status serwisowy. Zawijają się, zamiast wypychać nagłówek poza ekran. */
.pz[b-9h6ud3cao1] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
}
/* /Components/Pages/Conversation/PowiazaniaZgloszenia.razor.rz.scp.css */
/* Powiązania zgłoszeń wewnątrz wątku: „powstało z" i „powstały z tego". Obie sekcje są cienkie
   celowo — to kontekst przy rozmowie, a nie druga rozmowa. */

.powiazanie-zrodlo[b-wiksmoaogd],
.powiazanie-lista[b-wiksmoaogd] {
    border: 1px solid var(--line);
    border-left: 3px solid var(--global-palette1, #009244);
    border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
    background: var(--cream-2);
    padding: 0.65rem 0.85rem;
    margin: 0 0 0.9rem;
}

.powiazanie-naglowek[b-wiksmoaogd] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-soft);
    margin-bottom: 0.4rem;
}

.powiazanie-naglowek svg[b-wiksmoaogd] {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.powiazanie-tresc[b-wiksmoaogd] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    /* min-width: 0 — bez tego długi temat rozpycha wiersz i wątek przewija się w bok. */
    min-width: 0;
}

.powiazanie-tresc a[b-wiksmoaogd],
.powiazanie-lista li a[b-wiksmoaogd] {
    /* flex: 1 — inaczej odnośnik kurczy się do najdłuższego wyrazu i tekst łamie się po literze. */
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.powiazanie-tresc a:hover[b-wiksmoaogd],
.powiazanie-lista li a:hover[b-wiksmoaogd] {
    color: var(--global-palette1, #009244);
    text-decoration: underline;
}

.powiazanie-kto[b-wiksmoaogd] {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}

.powiazanie-fragment[b-wiksmoaogd] {
    display: block;
    margin-top: 0.3rem;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-soft);
    font-style: italic;
    overflow-wrap: anywhere;
}

.powiazanie-lista ul[b-wiksmoaogd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.powiazanie-lista li[b-wiksmoaogd] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.powiazanie-lista li + li[b-wiksmoaogd] {
    border-top: 1px solid var(--line);
    padding-top: 0.5rem;
}

@media (max-width: 768px) {
    .powiazanie-kto[b-wiksmoaogd] {
        flex-basis: 100%;
    }
}
/* /Components/Pages/Customers/CustomerDetail.razor.rz.scp.css */
/* ─── Aktywność klienta (mini-audit) ──────────────────────────────────
   ⚠ Style listy żyły wyłącznie w Conversation.razor.css — a CSS izolowany działa TYLKO w swoim
   komponencie. Profil klienta dostawał gołą listę HTML: kropki wypunktowania obok kolorowych
   kropek, data pod spodem w osobnym wierszu (przejazd 25.09.2026, zrzut konw-11-profil-klienta).
   Ten sam wygląd co w panelu zgłoszenia. */
.mini-audit[b-ckrl1xz57a] {
    list-style: none;
    margin: 0;
    padding: 0 0.25rem 0 0;
}
.modal-body .mini-audit[b-ckrl1xz57a] { max-height: none; }
.mini-audit li[b-ckrl1xz57a] {
    display: flex;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--line);
}
.mini-audit li:last-child[b-ckrl1xz57a] { border-bottom: none; }
.mini-audit .audit-dot[b-ckrl1xz57a] {
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex: none;
    background: var(--line-faint);
}
.mini-audit .audit-dot.tone-ok[b-ckrl1xz57a] { background: var(--p1); }
.mini-audit .audit-dot.tone-warn[b-ckrl1xz57a] { background: var(--warn, #c98a00); }
.mini-audit .audit-dot.tone-danger[b-ckrl1xz57a] { background: var(--danger); }
.mini-audit .audit-dot.tone-info[b-ckrl1xz57a] { background: var(--info, #2a8ec9); }
.mini-audit-body[b-ckrl1xz57a] { flex: 1; min-width: 0; }
.mini-audit-title[b-ckrl1xz57a] {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}
.mini-audit-time[b-ckrl1xz57a] {
    font-size: 10.5px;
    color: var(--text-soft);
}

/* ─── Statusy zgłoszeń klienta (K5, 03.10.2026) ───────────────────────────────────────────────
   Płytki jak w lewej kolumnie list: liczba na płytce w kolorze statusu z ustawień (napis czarny albo biały — ten
   z większym kontrastem, KolorStatusu), nazwa w kolorze tekstu. Grupa — mały podpis z kreską w kolorze grupy.
   Zawijają się w wiersze, więc na telefonie nic nie wystaje poza kartę. */
.kk-statusy[b-ckrl1xz57a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.4rem;
    margin: 0 0 0.6rem;
}
.kk-grupa[b-ckrl1xz57a] {
    --grupa-kolor: var(--line-strong);
    /* Podpis grupy w tym samym rzędzie co płytki (nie osobny wiersz) — przy kilku grupach po jednym statusie
       karta zamieniała się w wysoką kolumnę pojedynczych przycisków. */
    margin-left: 0.35rem;
    padding-left: 0.45rem;
    border-left: 3px solid var(--grupa-kolor);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-soft);
}
.kk-status[b-ckrl1xz57a] {
    --ps-kolor: var(--line-strong);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 30px;
    max-width: 100%;
    padding: 0.15rem 0.6rem 0.15rem 0.2rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}
.kk-status:hover[b-ckrl1xz57a] { border-color: var(--line-strong); background: var(--cream-2); }
.kk-status:focus-visible[b-ckrl1xz57a] { outline: 2px solid var(--p1); outline-offset: 2px; }
.kk-status.wybrany[b-ckrl1xz57a] {
    border-color: var(--p1);
    background: color-mix(in srgb, var(--p1) 10%, var(--paper));
    box-shadow: inset 0 0 0 1px var(--p1);
}
.kk-status.zero .kk-nazwa[b-ckrl1xz57a] { color: var(--text-faint); }
.kk-plytka[b-ckrl1xz57a] {
    flex: none;
    min-width: 24px;
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
    background: var(--ps-kolor);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.kk-wszystkie .kk-plytka[b-ckrl1xz57a] { background: var(--cream-2); color: var(--text); }
.kk-plytka.napis-ciemny[b-ckrl1xz57a] { color: var(--napis-na-kolorze); }
.kk-plytka.napis-jasny[b-ckrl1xz57a]  { color: var(--text-light); }
.kk-klucz[b-ckrl1xz57a] {
    width: 13px; height: 13px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    color: var(--text-soft);
}
.kk-nazwa[b-ckrl1xz57a] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-wynik[b-ckrl1xz57a] { margin: 0 0 0.5rem; font-size: 12px; color: var(--text-soft); }

@media (max-width: 768px) {
    .kk-status[b-ckrl1xz57a] { min-height: 36px; }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════════════════
   PULPIT OBSŁUGI — trzy bloki, siedem miar (29.08.2026)

   ⚠ Rodzina .alert-* (.alert-banner, .alert-bar, .alert-icon, .alert-content, .alert-text,
     .alert-actions) PRZENIESIONA STĄD DO app.css. Używa jej szesnaście innych ekranów,
     a styl leżał w arkuszu ZAKRESOWYM pulpitu — czyli nie działał nigdzie poza pulpitem.
     Te szesnaście ekranów rysowało „baner" jako goły tekst i nikt tego nie zgłosił, bo
     przeglądarka nieznaną klasę po prostu pomija. Sam pulpit nie ma już banerów wcale.
     Najbardziej bolało to przy „Sprawdź połączenie" na ekranie rozmowy, przy edycji skrzynki
     i przy jej podłączaniu: odpowiedź na kliknięcie renderowała się jako goły szary tekst,
     bez ramki i bez kolorowego paska z boku — czyli wyglądała jak przypadkowe zdanie wsunięte
     w formularz, a nie jak werdykt. ⚠ NIE PRZENOSIĆ TYCH KLAS Z POWROTEM TUTAJ.

   ⚠ Klasy poniżej są UŻYWANE WYŁĄCZNIE PRZEZ TEN EKRAN i dlatego wolno im być zakresowe.
     Wygląd kafelka raportów (.kpi, .kpi-value…) mieszka w app.css i tam zostaje.
   ══════════════════════════════════════════════════════════════════════════════════════════ */


/* ── Blok ────────────────────────────────────────────────────────────────────────────────
   Trzy bloki z nagłówkami zamiast jednego rzędu siedmiu kafelków. Prawo Hicka daje logarytm
   tylko wtedy, gdy zbiór da się dzielić — osiem niepogrupowanych kafelków czyta się gorzej
   niż dziesięć pogrupowanych w trzy bloki. */
.blok[b-gzweo6u5xm] { margin-bottom: 1.75rem; }

.blok-head[b-gzweo6u5xm] {
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    /* Kreska pod nagłówkiem NIESIE STAN BLOKU, a nie ozdobę: czerwona, gdy w środku jest
       alarm; pomarańczowa, gdy tylko ostrzeżenie; szara, gdy nic. Kolor jest tu wskazówką
       wtórną — treść bloku i tak stoi słowami w kafelkach (WCAG 2.1 SC 1.4.1). */
    border-bottom: 2px solid var(--line);
}
.blok-pali .blok-head[b-gzweo6u5xm] { border-bottom-color: var(--danger); }
.blok-uwaga-head .blok-head[b-gzweo6u5xm] { border-bottom-color: var(--warn); }

.blok-tytul[b-gzweo6u5xm] {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.4rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
}

.blok-lede[b-gzweo6u5xm] {
    margin: 0.25rem 0 0;
    font-size: 12.5px;
    /* --text-soft, nie --text-faint: ten tekst niesie treść, więc ma mieć kontrast 4,5:1. */
    color: var(--text-soft);
}

/* ── Kafelki ──────────────────────────────────────────────────────────────────────────────
   Zawijany rząd, nie sztywna siatka. Kafelek z zerem w bloku „Pali się" nie jest rysowany
   wcale, więc liczba kafelków bywa różna — a pojedyncza pilna rzecz ma wtedy zająć całą
   szerokość i nie dać się przeoczyć. */
.kafle[b-gzweo6u5xm] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.kafel[b-gzweo6u5xm] {
    flex: 1 1 250px;
    /* ⚠ Bez min-width:0 element flex nie schodzi poniżej najdłuższego słowa i rozpycha rząd. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1rem 1.1rem 0.9rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--line-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

/* KAŻDY kafelek jest odnośnikiem do przefiltrowanej listy — liczba, w którą nie da się
   kliknąć, to tapeta. Podnoszenie tylko dla tych, które naprawdę gdzieś prowadzą. */
a.kafel:hover[b-gzweo6u5xm] { transform: translateY(-2px); box-shadow: var(--shadow-md); }
a.kafel:focus-visible[b-gzweo6u5xm] { outline: 2px solid var(--p1); outline-offset: 2px; }
a.kafel:hover .kafel-akcja[b-gzweo6u5xm] { text-decoration: underline; }

.kafel-etykieta[b-gzweo6u5xm] {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 500;
    color: var(--text-soft);
}

.kafel-ikona[b-gzweo6u5xm] {
    width: 15px;
    height: 15px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kafel-liczba[b-gzweo6u5xm] {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text);
}

/* Miara czasu i zdania w miejscu liczby („2 dni", „wszystko działa") — ten sam krój,
   mniejszy stopień, żeby nie łamały się w kafelku. */
.kafel-liczba-czas[b-gzweo6u5xm] {
    font-size: 1.75rem;
    line-height: 1.15;
}

.kafel-podpis[b-gzweo6u5xm] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.kafel-linia[b-gzweo6u5xm] {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-soft);
}

/* Zdanie, które musi przejść przez oko: „w tym 3 bez opiekuna — nikt o nich nie wie". */
.kafel-linia-mocna[b-gzweo6u5xm] {
    color: var(--text);
    font-weight: 500;
}

/* Czasownik na końcu kafelka — mówi, co się stanie po kliknięciu, a nie dokąd prowadzi. */
.kafel-akcja[b-gzweo6u5xm] {
    margin-top: auto;
    padding-top: 0.4rem;
    font-size: 12px;
    font-weight: 500;
    color: var(--p1);
}

/* ── CZERWONY ─────────────────────────────────────────────────────────────────────────────
   Dokładnie dwie rzeczy w całej aplikacji: sprawy po terminie i konto, które nie pobiera
   wiadomości. Test Google SRE: „czy kiedykolwiek zignoruję ten alarm, wiedząc, że nic złego
   się nie dzieje?". Jeśli tak — kolor jest zły.
   Kontrast: --danger na --danger-bg to 4,51:1 w dzień i 4,88:1 w nocy — obie ponad progiem
   AA dla tekstu. Liczba wolno więc jest czerwona, bo nadal jest czytelna. */
.kafel-alarm[b-gzweo6u5xm] {
    background: var(--danger-bg);
    border-color: var(--danger);
    border-left-color: var(--danger);
}
.kafel-alarm .kafel-etykieta[b-gzweo6u5xm] { color: var(--danger); }
.kafel-alarm .kafel-liczba[b-gzweo6u5xm] { color: var(--danger); }
.kafel-alarm .kafel-linia[b-gzweo6u5xm] { color: var(--text); }
.kafel-alarm .kafel-linia-mocna[b-gzweo6u5xm] { font-weight: 600; }
.kafel-alarm .kafel-akcja[b-gzweo6u5xm] { color: var(--danger); }

/* ── POMARAŃCZOWY ─────────────────────────────────────────────────────────────────────────
   ⚠ --warn NIE JEST tu kolorem tekstu i to nie jest przeoczenie: #c98a14 na białym daje
     2,95:1, a na własnym tle 2,64:1 — obie wartości poniżej progu AA. Pomarańcz niesie więc
     pasek, ikonę i tło (elementy nietekstowe), a treść zostaje w --text i --text-soft,
     które mają 5,2:1 i więcej. Kafelek jest przez to wyraźnie słabszy od czerwonego —
     i dokładnie o to chodzi w hierarchii. */
.kafel-uwaga[b-gzweo6u5xm] {
    background: var(--warn-bg);
    border-color: var(--line);
    border-left-color: var(--warn);
}
.kafel-uwaga .kafel-ikona[b-gzweo6u5xm] { color: var(--warn); }
.kafel-uwaga .kafel-linia[b-gzweo6u5xm] { color: var(--text-soft); }
.kafel-uwaga .kafel-akcja[b-gzweo6u5xm] { color: var(--text); }

/* ── SPOKÓJ ───────────────────────────────────────────────────────────────────────────────
   Nie „0", tylko zdanie. Rząd zer to porażka projektowa: wygląda jak zepsuty licznik,
   a nie jak dobra wiadomość. */
.kafel-cichy[b-gzweo6u5xm] {
    border-left-color: var(--ok);
    cursor: default;
}
.kafel-cichy .kafel-ikona[b-gzweo6u5xm] { color: var(--ok); }
.kafel-cichy .kafel-liczba[b-gzweo6u5xm] {
    font-size: 1.4rem;
    color: var(--text-soft);
}

/* Kafelek, który świadomie nie prowadzi nigdzie, bo ekran docelowy wymaga uprawnienia,
   którego ta osoba nie ma. Nazwany, żeby dało się go odróżnić od przeoczenia — przyrząd
   w testach przegląda pulpit i szuka kafelków bez odnośnika. */
.kafel-bez-linku[b-gzweo6u5xm] { cursor: default; }

.kafel-szeroki[b-gzweo6u5xm] { flex-basis: 100%; }

/* ── Blok „Pali się", którego nie ma ──────────────────────────────────────────────────────
   Najlepsi nie wypełniają pustki komunikatem — usuwają element, który nie ma nic do
   powiedzenia. Cały blok znika i zostawia jedno zdanie plus najbliższy termin, żeby
   „spokojnie" nie było mylone z „nie policzyliśmy". */
.blok-spokoj[b-gzweo6u5xm] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--ok);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.spokoj-znak[b-gzweo6u5xm] {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ok-bg);
    color: var(--ok);
}
.spokoj-znak svg[b-gzweo6u5xm] {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.spokoj-glowna[b-gzweo6u5xm] {
    margin: 0;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.3rem;
    line-height: 1.15;
    color: var(--text);
}
.spokoj-drugorzedna[b-gzweo6u5xm] {
    margin: 0.15rem 0 0;
    font-size: 12.5px;
    color: var(--text-soft);
}

/* ── Pierwsze kroki ───────────────────────────────────────────────────────────────────────
   Świeża firma nie potrzebuje zer, tylko listy rzeczy do zrobienia z odnośnikiem prosto
   tam, gdzie się je robi. */
.pierwsze-kroki[b-gzweo6u5xm] {
    padding: 1.15rem 1.25rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--p1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.pierwsze-kroki-glowna[b-gzweo6u5xm] {
    margin: 0;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.25rem;
    line-height: 1.15;
    color: var(--text);
}
.pierwsze-kroki-lede[b-gzweo6u5xm] {
    margin: 0.35rem 0 0.9rem;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-soft);
    max-width: 62ch;
}
.pierwsze-kroki-akcje[b-gzweo6u5xm] {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.pulpit-stopka-akcji[b-gzweo6u5xm] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}

/* Dashboard grid — dwa wykresy aktywności obok siebie, równej wagi.
   ⚠ minmax(0, 1fr), nie 1fr: element siatki ma domyślnie min-width:auto i nie schodzi
     poniżej swojej zawartości, więc szeroki wykres rozpycha kolumnę. */
.dash-grid[b-gzweo6u5xm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

/* Lista priorytetow (.prio-*) oraz .greet-row przeniesione do app.css 02.09.2026 —
   uzywa ich takze raport SLA i dziewiec ekranow wsparcia, a styl zakresowy tam nie siega. */

/* ── Telefon ──────────────────────────────────────────────────────────────────────────────
   Przy 390 px kafelek dwukolumnowy ma niecałe 170 px i podpisy („mniej niż 3 dni robocze")
   łamią się na cztery wiersze. Jedna kolumna na całą szerokość czyta się lepiej, a blok
   „Pali się" ma i tak najwyżej trzy kafelki. */
@media (max-width: 1100px) {
    .dash-grid[b-gzweo6u5xm] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .kafle[b-gzweo6u5xm] { gap: 0.7rem; }
    .kafel[b-gzweo6u5xm] { flex-basis: 100%; }
    .kafel-liczba[b-gzweo6u5xm] { font-size: 2.1rem; }
    .kafel-liczba-czas[b-gzweo6u5xm] { font-size: 1.5rem; }
    .blok-tytul[b-gzweo6u5xm] { font-size: 1.25rem; }
    .blok-spokoj[b-gzweo6u5xm] { padding: 0.85rem 1rem; }
    .spokoj-glowna[b-gzweo6u5xm] { font-size: 1.15rem; }
    .pierwsze-kroki-akcje .btn[b-gzweo6u5xm] { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .kafel[b-gzweo6u5xm] { transition: none; }
    a.kafel:hover[b-gzweo6u5xm] { transform: none; }
}

/* „Dokończ pierwsze ustawienia” (25.09.2026) — karta nad pulpitem, dopóki kreator nie jest zamknięty. */
.wdrozenie-karta[b-gzweo6u5xm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    min-width: 0;
}

.wdrozenie-tresc[b-gzweo6u5xm] {
    flex: 1 1 320px;
    min-width: 0;
}

.wdrozenie-tytul[b-gzweo6u5xm] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.2rem;
}

.wdrozenie-lede[b-gzweo6u5xm] {
    color: var(--text-soft);
    font-size: 0.875rem;
    margin: 0 0 0.6rem;
}

.wdrozenie-pasek[b-gzweo6u5xm] {
    height: 6px;
    max-width: 360px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}

.wdrozenie-pasek span[b-gzweo6u5xm] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--grad-brand);
}

/* „Najpierw pokaż mi, gdzie co jest” — oprowadzenie po aplikacji, zanim klient skończy kreator. */
.wdrozenie-oprowadzenie[b-gzweo6u5xm] {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--global-palette1);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wdrozenie-oprowadzenie:hover[b-gzweo6u5xm] {
    color: var(--text);
}

.wdrozenie-akcje[b-gzweo6u5xm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wdrozenie-akcje form[b-gzweo6u5xm] {
    margin: 0;
}

@media (max-width: 768px) {
    .wdrozenie-akcje[b-gzweo6u5xm] {
        width: 100%;
    }

    .wdrozenie-akcje > .btn[b-gzweo6u5xm],
    .wdrozenie-akcje form[b-gzweo6u5xm] {
        flex: 1 1 auto;
    }

    .wdrozenie-akcje .btn[b-gzweo6u5xm] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Email/Email.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   Sekcja Email — widok mail-native (Blok 1: rail skrzynek + lista wątków).
   Makieta źródłowa: tmp/mockups/email.html. Wypełnia .content-wrapper (flex).
   ══════════════════════════════════════════════════════════════════════ */

/* ⚠ Ekran NIE MA już własnego wiersza z nazwą (11.10.2026). Do tego dnia stał tu pasek 36 px
   z napisem „Poczta” — jedyny `h1` ekranu. Nagłówek został (niewidoczny, patrz Email.razor),
   wiersz oddał swoją wysokość liście wątków i treści listu. Kto dokłada tu cokolwiek NAD
   listą, przesuwa w dół wiersz z przełącznikiem skrzynek na telefonie — i musi przesunąć
   razem z nim próg szuflady (`--szuflada-od-gory` na końcu pliku). */
.email-page[b-htpzkw8q8z] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Stan przejściowy i stan „nie ma czego pokazać" — wypełniają całą wysokość ekranu poczty. */
.email-state[b-htpzkw8q8z] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-faint);
}

/* ── Poczta bez ani jednej skrzynki ────────────────────────────────────────────────────────
   Zamiast pustego railu z napisem „brak skrzynek" (obok pełnej listy wątków z Allegro
   w Zgłoszeniach — sprzeczność, którą zgłosił użytkownik) pokazujemy jedną kartę: co widać
   w tym miejscu, gdzie są pozostałe rozmowy i co można zrobić dalej. */
.email-none[b-htpzkw8q8z] {
    padding: 1.5rem;
}

/* ⚠ `min-width: 0` — karta jest elementem układu elastycznego (`.email-state`), a taki element nie
   kurczy się poniżej szerokości swojej najdłuższej niełamliwej treści. Odkąd karta niesie listę skrzynek
   z innych firm osoby, tą treścią bywa NAZWA FIRMY (jeden wiersz, skracana wielokropkiem): przy nazwie
   w rodzaju „… spółka z ograniczoną odpowiedzialnością” karta miała na telefonie 390 px pełne 520 px
   i wystawała po obu stronach razem z wyjaśnieniem i przyciskiem (próba w przeglądarce, 11.10.2026).
   Z zerem karta mieści się w ekranie, a nazwa skraca się tam, gdzie miała. */
.none-card[b-htpzkw8q8z] {
    max-width: 520px;
    min-width: 0;
    text-align: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem 1.8rem 1.6rem;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
}

.none-icon[b-htpzkw8q8z] {
    width: 46px;
    height: 46px;
    stroke: var(--line-faint);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.55;
    margin-bottom: 0.9rem;
}

/* `h2`, nie `h1`: nazwą ekranu jest „Poczta" (niewidoczny `h1` na górze), a to jest tytuł
   STANU, w którym ekran się znalazł. `margin: 0` zeruje odstęp, który globalna reguła dokłada nagłówkom —
   odstęp do treści daje `.none-text`. */
.none-title[b-htpzkw8q8z] {
    font-family: 'Instrument Serif', serif;
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--text);
    margin: 0;
}

.none-text[b-htpzkw8q8z] {
    margin-top: 0.6rem;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-soft);
}

.none-actions[b-htpzkw8q8z] {
    margin-top: 1.3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

@media (max-width: 520px) {
    .none-card[b-htpzkw8q8z] { padding: 1.5rem 1.1rem 1.2rem; }
    .none-title[b-htpzkw8q8z] { font-size: 1.25rem; }
    .none-actions .btn[b-htpzkw8q8z] { flex: 1 1 100%; }
    /* Wiersz skrzynki innej firmy to na telefonie cel dla palca, nie dla kursora. */
    .none-inne-firmy[b-htpzkw8q8z]  .mbox-item { min-height: 40px; }
}

.email-shell[b-htpzkw8q8z] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    /* Brak otwartego wątku → lista na CAŁĄ szerokość (kolumna czytnika = 0fr).
       Otwarcie wątku → czytnik zajmuje 3fr, lista się zwęża.

       `transition` obsługuje TYLKO zwijanie panelu skrzynek — czyli zmianę klasy na żyjącym
       elemencie. Przy zmianie wątku nie ma czego animować, bo shell renderuje się od razu
       z docelową siatką (klasa `reader-open` liczona z parametru trasy, patrz Email.razor).

       ⚠ Gdyby ktoś wrócił do liczenia `reader-open` ze stanu ustawianego w `OnParametersSetAsync`:
       shell wyrenderuje się najpierw jako zamknięty (czytnik 0fr), a zaraz potem otwarty (3fr) —
       i ten `transition` zacznie animować KAŻDE wejście w wątek, jakby czytnik otwierał się od zera.
       Dokładnie tak wyglądał zgłoszony błąd „wątek wjeżdża z lewej przy każdej zmianie". */
    grid-template-columns: 248px minmax(400px, 1fr) 0fr;
    overflow: hidden;
    transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .email-shell[b-htpzkw8q8z] { transition: none; }
}
.email-shell.reader-open[b-htpzkw8q8z] { grid-template-columns: 248px minmax(400px, 1fr) 3fr; }
.email-shell.rail-collapsed[b-htpzkw8q8z] { grid-template-columns: minmax(400px, 1fr) 0fr; }
.email-shell.rail-collapsed.reader-open[b-htpzkw8q8z] { grid-template-columns: minmax(400px, 1fr) 3fr; }
.email-shell.rail-collapsed .mbox-rail[b-htpzkw8q8z] { display: none; }


/* ── Rail: skrzynki ── */
.mbox-rail[b-htpzkw8q8z] {
    border-right: 1px solid var(--line);
    background: var(--cream);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
/* Szyna nie ma własnego nagłówka („Skrzynki" + „?"): nazwę ekranu niesie niewidoczny `h1`,
   a poradnik stoi pod „?” na pasku górnym — widać go także przy zwiniętej szynie. Odstęp od
   góry, który dawał tamten wiersz, bierze na siebie pierwsza grupa. */
/* ⚠ Druga pozycja w tych regułach (`.inne-firmy ::deep …`) to skrzynki z POZOSTAŁYCH firm osoby.
   Rysuje je składnik-dziecko (SkrzynkiInnychFirm), a reguły tego arkusza są zakresowe: bez `::deep`
   nie sięgają w znaczniki dziecka i jego wiersze stałyby jako gołe przyciski przeglądarki.
   Dopisana pozycja zamiast osobnej kopii reguł — wiersz cudzej skrzynki ma wyglądać jak własny
   także po następnej zmianie szyny. `.inne-firmy` to opakowanie, które ten ekran stawia wokół listy. */
.mbox-group[b-htpzkw8q8z], .inne-firmy[b-htpzkw8q8z]  .mbox-group { padding: 0.5rem 0.6rem; }
.mbox-group-foot[b-htpzkw8q8z] { margin-top: auto; }
.mbox-group-label[b-htpzkw8q8z], .inne-firmy[b-htpzkw8q8z]  .mbox-group-label {
    padding: 0.4rem 0.5rem 0.3rem;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-soft);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* .mbox-item jest <button> — reset chrome */
.mbox-item[b-htpzkw8q8z], .inne-firmy[b-htpzkw8q8z]  .mbox-item {
    width: 100%;
    text-align: left;
    font-family: inherit;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s;
}
.mbox-item:hover[b-htpzkw8q8z], .inne-firmy[b-htpzkw8q8z]  .mbox-item:hover { background: var(--cream-2); }
.mbox-item.active[b-htpzkw8q8z] { background: var(--paper); box-shadow: var(--shadow-inset); font-weight: 500; }
.mbox-item.disabled[b-htpzkw8q8z] { cursor: default; opacity: 0.55; }
.mbox-item.disabled:hover[b-htpzkw8q8z] { background: none; }

/* Odnośnik pod listą skrzynek: „Ukryte u Ciebie: N — pokaż” — cichy, w tej samej kolumnie co nazwy skrzynek. */
.mbox-ukryte[b-htpzkw8q8z] {
    display: block;
    padding: 0.35rem 0.5rem 0.2rem;
    font-size: 11.5px;
    color: var(--text-soft);
}
.mbox-ukryte:hover[b-htpzkw8q8z] { color: var(--text); }

.mbox-dot[b-htpzkw8q8z], .inne-firmy[b-htpzkw8q8z]  .mbox-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mbox-dot.ring[b-htpzkw8q8z], .inne-firmy[b-htpzkw8q8z]  .mbox-dot.ring { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-faint); }
.mbox-item .lbl[b-htpzkw8q8z], .inne-firmy[b-htpzkw8q8z]  .mbox-item .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbox-item .cnt[b-htpzkw8q8z], .inne-firmy[b-htpzkw8q8z]  .mbox-item .cnt { font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--text-soft); }
.mbox-item .cnt.hot[b-htpzkw8q8z], .inne-firmy[b-htpzkw8q8z]  .mbox-item .cnt.hot { background: var(--danger); color: #fff; padding: 0 6px; border-radius: 999px; }

.soon[b-htpzkw8q8z] {
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--p1);
    background: var(--ok-bg);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
}
.mbox-empty[b-htpzkw8q8z] { padding: 0.4rem 0.55rem; font-size: 12px; color: var(--text-faint); }

/* ── Skrzynki z pozostałych firm osoby ──
   Ta sama grupa i ten sam wiersz co własne skrzynki (klasy wyżej) — różni je tylko nagłówek
   z nazwą firmy i kółko zamiast kolorowej kropki. Grupa stoi tuż pod własnymi adresami, więc
   bez górnego odstępu; długa nazwa firmy skraca się wielokropkiem zamiast łamać szynę.
   Znaczniki rysuje SkrzynkiInnychFirm, stąd `::deep` — powód przy `.mbox-group` wyżej. */
.inne-firmy[b-htpzkw8q8z]  .mbox-group-inna { padding-top: 0; }
.inne-firmy[b-htpzkw8q8z]  .mbox-group-nazwa { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Znak przejścia na końcu wiersza (strzałka „na zewnątrz”): ten wiersz przenosi do innej firmy,
   a nie wybiera skrzynki. Stały rozmiar — nazwa skrzynki skraca się przed nim, licznik stoi tuż obok. */
.inne-firmy[b-htpzkw8q8z]  .mbox-przejscie { flex: none; display: inline-flex; color: var(--text-faint); }
.inne-firmy[b-htpzkw8q8z]  .mbox-przejscie svg {
    width: 13px; height: 13px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.inne-firmy[b-htpzkw8q8z]  .mbox-item:hover .mbox-przejscie { color: var(--text); }

/* …i ta sama lista na ekranie „nie masz tu skrzynki", pod wyjaśnieniem i przyciskami karty.
   Kreska oddziela to, co dotyczy TEJ firmy, od skrzynek, które są gdzie indziej. Karta ma własne
   marginesy, więc grupy nie dokładają bocznych; zdanie wprowadzające zostaje wyśrodkowane jak
   reszta karty, a nagłówki firm i wiersze układają się do lewej same (jak w szynie). */
.none-inne-firmy[b-htpzkw8q8z] {
    margin-top: 1.3rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
}
.none-inne-firmy .none-text[b-htpzkw8q8z] { margin-bottom: 0.5rem; }
.none-inne-firmy[b-htpzkw8q8z]  .mbox-group { padding-left: 0; padding-right: 0; }
.none-inne-firmy[b-htpzkw8q8z]  .mbox-group:last-child { padding-bottom: 0; }

/* ── Foldery e-mail (Gmail UX) — Odebrane/Robocze/Wysłane/Archiwum/Kosz + etykiety/kanały ── */
.fold-group[b-htpzkw8q8z] { padding: 0.3rem 0.6rem; }
.fold-group-label[b-htpzkw8q8z] {
    padding: 0.55rem 0.5rem 0.35rem;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-soft);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
/* .fold-item bywa <button> — reset chrome (jak .mbox-item) */
.fold-item[b-htpzkw8q8z] {
    width: 100%;
    text-align: left;
    font-family: inherit;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.55rem;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
}
.fold-item:hover[b-htpzkw8q8z] { background: var(--cream-2); }
.fold-item.active[b-htpzkw8q8z] { background: var(--paper); box-shadow: var(--shadow-inset); font-weight: 600; }
.fold-item.active[b-htpzkw8q8z]::before {
    content: '';
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background: var(--grad-brand);
}
.fold-item svg[b-htpzkw8q8z] { width: 16px; height: 16px; color: var(--text-soft); stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }
.fold-item.active svg[b-htpzkw8q8z] { color: var(--p1); }
.fold-item .lbl[b-htpzkw8q8z] { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold-item .cnt[b-htpzkw8q8z] { font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--text-soft); }
.fold-item .cnt.hot[b-htpzkw8q8z] { background: var(--danger); color: #fff; padding: 0 6px; border-radius: 999px; }
.fold-item .cnt.draft[b-htpzkw8q8z] { background: var(--warn); color: #6a4a00; padding: 0 6px; border-radius: 999px; font-weight: 600; }
.fold-item.disabled[b-htpzkw8q8z] { cursor: default; opacity: 0.55; }
.fold-item.disabled:hover[b-htpzkw8q8z] { background: none; }

/* etykiety — kolorowa kropka (kropka koloru z EmailChannel.Color; tone-swatch dla tagów jest globalny) */
.lbl-dot[b-htpzkw8q8z] { width: 9px; height: 9px; border-radius: 50%; flex: none; margin: 0 3px; }

/* A4 — etykieta jako cel upuszczenia (wątek pod kursorem podczas przeciągania) */
.fold-item[data-nad-etykieta][b-htpzkw8q8z] { background: var(--ok-bg); box-shadow: inset 0 0 0 1.5px var(--p1); }
.fold-item[data-nad-etykieta] .lbl[b-htpzkw8q8z] { color: var(--text); font-weight: 600; }
.fold-item[data-nad-etykieta] .lbl-dot[b-htpzkw8q8z] { transform: scale(1.25); transition: transform .1s; }

/* „Edytuj etykiety" — link do strony tagów (wyciszony) */
.fold-add-btn[b-htpzkw8q8z] { color: var(--text-faint); text-decoration: none; }
.fold-add-btn svg[b-htpzkw8q8z] { width: 14px; height: 14px; }
/* „Odznacz wszystkie" — mały link w nagłówku sekcji Etykiety */
.fold-clear[b-htpzkw8q8z] {
    margin-left: auto;
    background: none; border: none; padding: 0;
    font-family: inherit; font-size: 10.5px; font-weight: 600;
    text-transform: none; letter-spacing: 0;
    color: var(--p1); cursor: pointer;
}
.fold-clear:hover[b-htpzkw8q8z] { text-decoration: underline; }
.fold-add-input[b-htpzkw8q8z] {
    width: calc(100% - 1.1rem);
    margin: 0.1rem 0.55rem 0.35rem;
    height: 30px;
    box-sizing: border-box;
    padding: 0 0.6rem;
    background: var(--paper);
    border: 1px solid var(--p1);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text);
}
.fold-add-input:focus[b-htpzkw8q8z] { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--global-palette1) 10%, transparent); }

/* ── Wskaźnik draftu na wątku (żółty pill z ołówkiem) ── */
.draft-chip[b-htpzkw8q8z] {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0 6px;
    height: 16px;
    border-radius: 999px;
    background: var(--warn-bg);
    color: #8a6512;
    border: 1px solid #f0d9a8;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    flex: none;
}
.draft-chip svg[b-htpzkw8q8z] { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }
/* zajawka draftu w kolorze roboczych */
.ti-snippet.draft[b-htpzkw8q8z] { color: #a9791a; font-style: italic; }

/* ── Środek: lista wątków ── */
.thread-list[b-htpzkw8q8z] {
    border-right: 1px solid var(--line);
    background: var(--paper);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.tl-head[b-htpzkw8q8z] {
    padding: 0.7rem 0.8rem 0.6rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.tl-head-top[b-htpzkw8q8z] { display: flex; align-items: center; gap: 0.5rem; }
.tl-head-bottom[b-htpzkw8q8z] {
    display: flex;
    align-items: center;
    /* Mniejszy odstęp między LINIAMI (0,4 rem) niż między plakietkami w linii (0,6 rem) — patrz niżej. */
    gap: 0.4rem 0.6rem;
    min-height: 24px;

    /* ⚠ WIERSZ SIĘ ZAWIJA — NIE PRZEWIJA I NICZEGO NIE OBCINA (11.10.2026, zrzut właściciela z produkcji:
       „tutaj jest ucięte” — z liczby 1728 w pastylce „Nieprzeczytane” było widać „172” i pół pastylki).

       Historia tego miejsca, żeby nikt nie wrócił do poprzedniego kroku:
         • do 26.08.2026 wiersz nie miał ani zawijania, ani przewijania — na telefonie „Odczytaj wszystkie”
           wychodził 145 px poza ekran i nie dało się do niego dotrzeć;
         • 26.08 dostał PRZEWIJANIE W POZIOMIE z ukrytym przewijakiem (`overflow-x: auto`,
           `scrollbar-width: none`). Na telefonie palec go przesuwał. Na komputerze nie ma ani gestu,
           ani paska, więc wszystko, co nie zmieściło się w kolumnie listy (ok. 400–430 px przy otwartym
           wątku), było po prostu obcięte jej krawędzią — i nic nie mówiło, że dalej coś jest;
         • teraz to, co się nie mieści, schodzi do drugiej linii. Kosztuje to wysokość listy TYLKO wtedy,
           gdy naprawdę brakuje szerokości; przy szerokiej kolumnie wiersz wygląda jak dotąd.
       Pilnuje tego PocztaWierszFiltrowNieUcinaTests. */
    flex-wrap: wrap;
}
/* Elastyczne dzieci domyślnie kurczą się do zera i tekst łamie się na literach — tu mają zachować
   swoją szerokość i przejść do następnej linii W CAŁOŚCI (od tego jest zawijanie wyżej). */
.tl-head-bottom > *[b-htpzkw8q8z] { flex-shrink: 0; }
/* `nowrap`: „Wątki” i licznik obok to jedna rzecz — nie rozdzielają się między linie. */
.tl-title[b-htpzkw8q8z] { font-weight: 600; font-size: 14px; white-space: nowrap; }
.tl-title small[b-htpzkw8q8z] {
    color: var(--text-soft);
    font-weight: 400;
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    margin-left: 0.35rem;
}
/* Znacznik aktywnej etykiety obok „Wątki". Bez niego filtr po etykiecie był niewidoczny —
   lista wyglądała po prostu na pustszą. Klik = wyczyść filtr. */
.tl-labelchip[b-htpzkw8q8z] {
    display: inline-flex; align-items: center; gap: 0.32rem; flex: none; max-width: 42%;
    height: 24px; padding: 0 0.3rem 0 0.45rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line-strong); background: var(--paper);
    color: var(--text-soft); font-family: inherit; font-size: 11.5px; font-weight: 500;
}
.tl-labelchip:hover[b-htpzkw8q8z] { border-color: var(--p1); color: var(--text); }
.lc-dot[b-htpzkw8q8z] { width: 8px; height: 8px; border-radius: 50%; flex: none; }
/* min-width:0 — bez tego grid/flex item nie zejdzie poniżej treści i ellipsis nie zadziała. */
.lc-name[b-htpzkw8q8z] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-x[b-htpzkw8q8z] { flex: none; width: 15px; height: 15px; display: inline-grid; place-items: center;
    border-radius: 50%; font-size: 13px; line-height: 1; color: var(--text-faint); }
.tl-labelchip:hover .lc-x[b-htpzkw8q8z] { background: var(--cream-2); color: var(--danger); }

/* Wiersz szkicu NOWEJ wiadomości (folder „Robocze"). Nie ma nadawcy ani wątku, więc zamiast
   inicjałów klienta dostaje ikonę ołówka — od razu widać, że to coś, co sam piszesz. */
.thread-item.compose-draft .draft-avatar[b-htpzkw8q8z] {
    background: var(--warn-bg); color: #8a6512; border: 1px solid #f0d9a8;
    display: inline-grid; place-items: center;
}
.thread-item.compose-draft .draft-avatar svg[b-htpzkw8q8z] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.thread-item.compose-draft .ti-from[b-htpzkw8q8z] { color: var(--text-soft); }

.tl-search[b-htpzkw8q8z] { flex: 1 1 auto; min-width: 0; position: relative; }
.tl-search input[b-htpzkw8q8z] {
    height: 30px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.6rem 0 1.9rem;
    background: var(--cream-2);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text);
}
.tl-search input:focus[b-htpzkw8q8z] { outline: none; background: var(--paper); border-color: var(--p1); }
.tl-search svg[b-htpzkw8q8z] {
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--text-faint);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}

/* przełącznik chowania railu */
.rail-toggle[b-htpzkw8q8z] {
    flex: none;
    width: 30px; height: 30px;
    display: inline-grid; place-items: center;
    border: none; background: none; border-radius: var(--radius-sm);
    color: var(--text-faint); cursor: pointer;
}
.rail-toggle:hover[b-htpzkw8q8z] { background: var(--cream-2); color: var(--text); }
.rail-toggle svg[b-htpzkw8q8z] { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* Dwa przełączniki skrzynek: jeden dla kolumny (komputer), drugi dla szuflady (telefon).
   Widoczny jest zawsze DOKŁADNIE jeden — próg 820 px to ten sam próg, na którym kolumna
   skrzynek zamienia się w szufladę. Powód rozdziału: patrz komentarz w Email.razor. */
.rail-toggle-szuflada[b-htpzkw8q8z] { display: none; }

/* R4 — „Napisz" nowy mail */
.compose-btn[b-htpzkw8q8z] {
    flex: none;
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.7rem; border: none; border-radius: 999px;
    background: #009244;
    color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: background 0.14s;
}
.compose-btn:hover[b-htpzkw8q8z] { background: #007a38; }
.compose-btn svg[b-htpzkw8q8z] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* „Odczytaj wszystkie" */
.tl-readall[b-htpzkw8q8z] {
    flex: none;
    margin-left: auto;
    border: none; background: none;
    font-family: inherit; font-size: 11.5px; color: var(--p1);
    cursor: pointer; padding: 0.2rem 0.35rem; border-radius: var(--radius-sm); font-weight: 500;
    white-space: nowrap;
}
.tl-readall:hover[b-htpzkw8q8z] { background: var(--ok-bg); }
/* „Odczytaj wszystkie N” (11.10.2026) — wszystko, co pasuje do widoku, także wątki spoza wczytanej setki.
   Ten sam krój co przycisk obok, tylko w obwódce i grubszy: to większa czynność (pyta o potwierdzenie)
   i ma się od „Odczytaj widoczne” odróżniać na pierwszy rzut oka. Zostaje widoczny także na telefonie —
   rząd filtrów się zawija, więc ma gdzie stanąć. */
.tl-oznacz-wszystko[b-htpzkw8q8z] {
    flex: none;
    margin-left: auto;
    border: 1px solid color-mix(in srgb, var(--p1) 45%, transparent);
    background: none;
    font-family: inherit; font-size: 11.5px; color: var(--p1);
    cursor: pointer; padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.tl-oznacz-wszystko:hover[b-htpzkw8q8z] { background: var(--ok-bg); }
.tl-oznacz-wszystko[disabled][b-htpzkw8q8z] { opacity: 0.55; cursor: default; }
/* Gdy stoją oba, do prawej dosuwa się pierwszy („Odczytaj widoczne”), a ten staje tuż za nim. */
.tl-readall + .tl-oznacz-wszystko[b-htpzkw8q8z] { margin-left: 0; }
/* Ta sama akcja jako ikona w górnym rzędzie — widoczna tylko do 820 px (reguła w bloku szuflady niżej). */
.tl-readall-ikona[b-htpzkw8q8z] {
    display: none;
    flex: none;
    width: 40px; height: 40px;   /* cel dotykowy 40 px — reguła domu (TelefonISpojnoscTests) */
    place-items: center;
    border: none; background: none; border-radius: var(--radius-sm);
    color: var(--p1); cursor: pointer;
}
.tl-readall-ikona:hover[b-htpzkw8q8z] { background: var(--ok-bg); }
.tl-readall-ikona svg[b-htpzkw8q8z] { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* pasek akcji masowych */
/* Zawija się jak wiersz filtrów, który zastępuje (11.10.2026). Policzone z arkusza, NIE zmierzone:
   licznik + dwa przyciski + „×” to ok. 290–300 px, a kolumna listy na tablecie z otwartym wątkiem
   ma 320 px (ok. 298 px w środku) — pasek jest tam na styk i przy dłuższym liczniku „×” może wyjść
   za krawędź kolumny, która obcina wszystko, co wystaje. */
.bulk-bar[b-htpzkw8q8z] { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; min-width: 0; }
.bulk-count[b-htpzkw8q8z] { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.bulk-act[b-htpzkw8q8z] {
    border: 1px solid var(--line-strong); background: var(--paper);
    font-family: inherit; font-size: 12px; color: var(--text-soft);
    padding: 0.25rem 0.6rem; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
}
.bulk-act:hover[b-htpzkw8q8z] { border-color: var(--p1); color: var(--p1); }
.bulk-clear[b-htpzkw8q8z] {
    margin-left: auto; flex: none;
    width: 26px; height: 26px; display: inline-grid; place-items: center;
    border: none; background: none; border-radius: var(--radius-sm); color: var(--text-faint); cursor: pointer;
}
.bulk-clear:hover[b-htpzkw8q8z] { background: var(--cream-2); color: var(--text); }
.bulk-clear svg[b-htpzkw8q8z] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* position:relative = kotwica wskaźnika pull-to-refresh; overscroll contain = brak natywnego PTR/chaining */
.tl-scroll[b-htpzkw8q8z] { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }

/* Tło szuflady skrzynek (mobile) — na desktopie nieużywane. */
.mobile-rail-backdrop[b-htpzkw8q8z] { display: none; }
.tl-info[b-htpzkw8q8z] { padding: 1.4rem 1rem; font-size: 13px; color: var(--text-faint); text-align: center; }

/* ── Menu kontekstowe (prawy przycisk) ── */
.ctx-backdrop[b-htpzkw8q8z] { position: fixed; inset: 0; z-index: 300; }
.ctx-menu[b-htpzkw8q8z] {
    position: fixed;
    z-index: 301;
    min-width: 220px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ctx-item[b-htpzkw8q8z] {
    display: flex; align-items: center; gap: 0.6rem;
    width: 100%; text-align: left;
    border: none; background: none; font-family: inherit; font-size: 13px; color: var(--text);
    padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); cursor: pointer;
}
.ctx-item:hover[b-htpzkw8q8z] { background: var(--cream-2); }
.ctx-item svg[b-htpzkw8q8z] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; flex: none; color: var(--text-faint); }

.thread-item[b-htpzkw8q8z] {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    position: relative;
    transition: background 0.12s;
    text-decoration: none;
    color: inherit;
    /* Dotyk: żadnego natywnego menu/"lupy"/„otwórz w nowej karcie" po przytrzymaniu (menu = tylko prawy przycisk na PC).
       user-select:none wyłącza zaznaczanie tekstu, które na Androidzie odpalało natywne menu blokujące drag.
       touch-action zostaje domyślne — inaczej padłoby przewijanie listy. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.thread-item:hover[b-htpzkw8q8z] { background: var(--cream); }
.thread-item.picked[b-htpzkw8q8z] { background: var(--ok-bg); }
/* A4 — wiersz w trakcie przeciągania (subtelne wyszarzenie źródła) */
.thread-item.dragging[b-htpzkw8q8z] { opacity: 0.5; }

/* checkbox zaznaczenia — subtelny, ale WIDOCZNY bez najechania (W-14, 19.09.2026: element widoczny dopiero
   pod kursorem to dla nowego pracownika element, którego nie ma); najechanie / zaznaczenie = pełny. */
.ti-check[b-htpzkw8q8z] { display: inline-grid; place-items: center; opacity: 0.45; transition: opacity 0.12s; cursor: pointer; }
.thread-item:hover .ti-check[b-htpzkw8q8z],
.thread-item.picked .ti-check[b-htpzkw8q8z] { opacity: 1; }
.ti-check input[b-htpzkw8q8z] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--p1); }
/* Na dotyku 15 px to jedna trzecia palca — zaznaczanie wątków było loterią.
   Powiększamy kontrolkę i całą etykietę wokół niej; wiersz i tak jest wyższy przez avatar,
   więc lista nie rośnie. ⚠ Ta reguła MUSI być tutaj, nie globalnie: `.ti-check input`
   jest bardziej szczegółowe niż `input[type=checkbox]` i wygrywa z regułą ogólną. */
@media (pointer: coarse) {
    /* ⚠ WAŻNIEJSZE OD ROZMIARU: pole wyboru było odsłaniane najechaniem myszą
       (`opacity: 0` + `:hover`), a na dotyku najechania NIE MA. Na telefonie zaznaczanie
       wątków było więc nie tyle trudne, co NIEWIDOCZNE — nic nie mówiło, że w ogóle istnieje.
       Sonda tego nie łapała, bo mierzy rozmiar elementu, a nie to, czy da się go zobaczyć:
       przezroczysty jest sam rodzic, więc `opacity` samej kontrolki dalej wynosi 1. */
    .ti-check[b-htpzkw8q8z] { opacity: 1; min-width: 40px; min-height: 40px; }
    .ti-check input[b-htpzkw8q8z] { width: 22px; height: 22px; }
}
.thread-item.active[b-htpzkw8q8z] { background: var(--cream-2); }
.thread-item.active[b-htpzkw8q8z]::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--grad-brand);
}
.thread-item.unread .ti-from[b-htpzkw8q8z],
.thread-item.unread .ti-subject[b-htpzkw8q8z] { font-weight: 600; color: var(--text); }
/* ⚠ Samo POGRUBIENIE nie wystarcza (agent H: „nieprzeczytane nieodróżnialne") — na liście, gdzie
   połowa tematów jest krótka, różnica grubości ginie. Dokładamy tło i mocniejszą kropkę.
   Pasek po lewej zostaje zarezerwowany dla wiersza OTWARTEGO (.active::before): dwa różne stany
   nie mogą mówić tym samym znakiem, bo wtedy żaden nic nie znaczy. */
.thread-item.unread:not(.active):not(.picked)[b-htpzkw8q8z] { background: color-mix(in srgb, var(--p1) 6%, var(--paper, #fff)); }
.thread-item.unread .ti-date[b-htpzkw8q8z] { color: var(--text); font-weight: 600; }

/* Przycisk „oznacz jako (nie)przeczytane" na wierszu — widoczny zawsze, mocniejszy pod kursorem.
   ⚠ Widoczny ZAWSZE, bo na dotyku najechania nie ma, a menu kontekstowego tam nie otwieramy. */
.thread-mark[b-htpzkw8q8z] {
    background: none; border: none; padding: 0;
    display: inline-grid; place-items: center;
    width: 20px; height: 20px; cursor: pointer;
    color: var(--text-faint);
    opacity: 0.42;
    transition: opacity .12s, color .12s;
}
.thread-mark svg[b-htpzkw8q8z] { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.thread-mark:hover[b-htpzkw8q8z] { opacity: 1; color: var(--p1); }
.thread-mark:focus-visible[b-htpzkw8q8z] { outline: 2px solid var(--p1); outline-offset: 2px; border-radius: 4px; }
@media (pointer: coarse) { .thread-mark[b-htpzkw8q8z] { opacity: 1; min-width: 40px; min-height: 40px; } }
/* Gwiazdka „Oznaczone" — 20 px to pół opuszki, a stoi tuż przy dacie i przy przycisku stanu.
   Na dotyku wszystkie trzy cele w tym rzędzie mają mieć po 40 px, inaczej trafia się w sąsiada. */
@media (pointer: coarse) { .thread-star[b-htpzkw8q8z] { min-width: 40px; min-height: 40px; } }

/* Pusty stan etykiet — droga na miejscu, nie instrukcja. */
.mbox-empty-link[b-htpzkw8q8z] { display: block; margin-top: 0.25rem; color: var(--p1); font-weight: 600; text-decoration: none; }
.mbox-empty-link:hover[b-htpzkw8q8z] { text-decoration: underline; }

.ti-body[b-htpzkw8q8z] { min-width: 0; }
.ti-line1[b-htpzkw8q8z] { display: flex; align-items: center; gap: 0.4rem; }
.ti-from[b-htpzkw8q8z] {
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* T4 — licznik wiadomości w wątku: pill z ikoną dymka (dawniej gołe „5" mono, słabo widoczne). */
.ti-count[b-htpzkw8q8z] {
    display: inline-flex; align-items: center; gap: 0.2rem; flex: none;
    padding: 0 6px 0 4px; height: 17px; border-radius: 999px;
    background: var(--cream-2); color: var(--text-soft);
    font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ti-count svg[b-htpzkw8q8z] { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.ti-subject[b-htpzkw8q8z] {
    font-size: 12.5px;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.ti-snippet[b-htpzkw8q8z] {
    font-size: 12px;
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.ti-meta[b-htpzkw8q8z] { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.ti-date[b-htpzkw8q8z] { font-size: 11px; color: var(--text-soft); font-family: 'Geist Mono', monospace; white-space: nowrap; }
.unread-dot[b-htpzkw8q8z] { width: 8px; height: 8px; border-radius: 50%; background: var(--p1); }

/* ── Gwiazdka „Oznaczone" na wierszu (toggle; klik nie otwiera wątku) ── */
.thread-star[b-htpzkw8q8z] {
    background: none; border: none; padding: 0;
    display: inline-grid; place-items: center;
    width: 20px; height: 20px; cursor: pointer;
    color: var(--text-faint);
    opacity: 0.38;
    transition: opacity 0.12s, color 0.12s, transform 0.1s;
}
.thread-star svg[b-htpzkw8q8z] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.thread-star:hover[b-htpzkw8q8z] { color: var(--warn); transform: scale(1.12); }
/* Kontur odznaczonej gwiazdki widoczny ZAWSZE (na dotyku nie ma hover) — mocniejszy na hover; oznaczona pełna. */
.thread-item:hover .thread-star[b-htpzkw8q8z],
.thread-star:hover[b-htpzkw8q8z],
.thread-star:focus-visible[b-htpzkw8q8z],
.thread-star.starred[b-htpzkw8q8z] { opacity: 1; }
.thread-star.starred[b-htpzkw8q8z] { color: var(--warn); }
.thread-star.starred svg[b-htpzkw8q8z] { fill: currentColor; }

/* avatar-circle (kolor + rozmiar z app.css) — tu tylko zabezpieczenie przed skurczem w gridzie */
.thread-item .avatar-circle[b-htpzkw8q8z] { flex: none; }

/* ── Czytnik ── */
.reader[b-htpzkw8q8z] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;              /* pozwala kolumnie zwinąć się do 0 (grid item ma domyślnie min-width:auto) */
    background: var(--cream);
}
/* Placeholder pustego czytnika niepotrzebny — gdy nic nie otwarte kolumna czytnika ma 0 szerokości. */
.reader-empty[b-htpzkw8q8z] { display: none; }
/* ── Czytnik NIE wjeżdża animacją. Świadoma rezygnacja, nie przeoczenie ──────────────────────────
   Był tu slajd `reader-in` z klasą `reader-anim`, dodawaną tylko przy przejściu zamknięty→otwarty.
   Wyglądało to poprawnie i NIE DZIAŁAŁO: slajd leciał przy każdej zmianie wątku. Dwa powody, oba
   zmierzone w przeglądarce (`scratchpad/Probe-Anim.ps1`):

   1. Przy zmianie /email/thread/A → /B Blazor odtwarza CAŁY komponent strony — `.email-shell`
      i lista wątków to nowe węzły DOM. Żadne pole C# nie przeżywa, więc nie da się odróżnić
      „pierwsze otwarcie" od „kolejny wątek": po odtworzeniu zawsze wygląda jak pierwsze.
   2. `.thread-reader` też jest nowym węzłem, a animacja CSS odpala się na każdym nowo wstawionym
      elemencie — „już się odegrała" nie istnieje.

   Warunek dałoby się utrzymać poza komponentem (sessionStorage), ale klasę można dopiąć dopiero
   PO pierwszym renderze — czyli czytnik najpierw mignąłby w pełni, a potem wjechał. Gorzej niż brak
   animacji. Gdyby slajd miał wrócić, trzeba najpierw przestać odtwarzać komponent przy zmianie wątku. */
.reader-empty-inner[b-htpzkw8q8z] { text-align: center; color: var(--text-faint); padding: 2rem; }
.reader-empty-icon[b-htpzkw8q8z] {
    width: 46px;
    height: 46px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
    opacity: 0.5;
    margin-bottom: 0.8rem;
}
.reader-empty-title[b-htpzkw8q8z] { font-size: 15px; font-weight: 600; color: var(--text-soft); }
.reader-empty-sub[b-htpzkw8q8z] { font-size: 12.5px; margin-top: 0.3rem; }

/* A4 — pigułka potwierdzenia po upuszczeniu wątku na etykietę */
.drop-flash[b-htpzkw8q8z] {
    position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 300;
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.95rem;
    background: var(--ok-bg); border: 1px solid var(--p1); border-radius: 999px;
    font-size: 12.5px; color: var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    animation: drop-flash-in-b-htpzkw8q8z 0.2s ease;
}
.drop-flash svg[b-htpzkw8q8z] { width: 15px; height: 15px; stroke: var(--p1); fill: none; stroke-width: 2.2; flex: none; }
@keyframes drop-flash-in-b-htpzkw8q8z { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Potwierdzenie „Spam” / „To nie spam” z listy — ta sama pigułka, ale z przyciskami („Cofnij”, „Dodaj też
   nadawcę”) i z dłuższym zdaniem, więc ma ograniczoną szerokość i wolno jej się zawinąć. Na telefonie zdanie
   dostaje cały wiersz, a przyciski schodzą pod nie. ── */
.spam-flash[b-htpzkw8q8z] {
    max-width: min(46rem, calc(100vw - 1.5rem)); border-radius: 14px;
    flex-wrap: wrap; justify-content: flex-end; row-gap: 0.4rem;
}
.spam-flash.blad[b-htpzkw8q8z] { background: var(--warn-bg); border-color: var(--warn); }
.spam-flash.blad > svg[b-htpzkw8q8z] { stroke: var(--warn); }
.sf-tekst[b-htpzkw8q8z] { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.sf-btn[b-htpzkw8q8z] {
    flex: none; height: 28px; padding: 0 0.7rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line); background: var(--paper); color: var(--text);
    font-family: inherit; font-size: 12px; font-weight: 600;
}
.sf-btn:hover[b-htpzkw8q8z] { border-color: var(--p1); color: var(--p1); }
.sf-x[b-htpzkw8q8z] {
    flex: none; width: 26px; height: 26px; display: inline-grid; place-items: center;
    border: none; background: none; border-radius: 999px; color: var(--text-faint); cursor: pointer;
}
.sf-x:hover[b-htpzkw8q8z] { background: var(--line); color: var(--text); }
.spam-flash .sf-x svg[b-htpzkw8q8z] { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; }
@media (pointer: coarse) {
    .sf-btn[b-htpzkw8q8z] { height: 40px; }
    .sf-x[b-htpzkw8q8z] { width: 40px; height: 40px; }
}

/* ── Chip etykiety poczty w wierszu wątku (obok gwiazdki/draft-chipa) ── */
/* ⚠ Etykieta wiersza jest teraz PRZYCISKIEM (filtruje). Przeglądarka dokłada przyciskowi własne
   tło, ramkę i krój — bez tego zerowania kafelek etykiety wyglądałby w poczcie inaczej niż wszędzie. */
button.lbl-chip[b-htpzkw8q8z] { border: none; background: none; font: inherit; cursor: pointer; }
.lbl-chip[b-htpzkw8q8z] {
    display: inline-flex; align-items: center; gap: 0.28rem;
    padding: 0 7px; height: 16px; border-radius: 999px;
    background: color-mix(in srgb, var(--lbl-color, #3b82f6) 14%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--lbl-color, #3b82f6) 45%, transparent);
    color: var(--text-soft);
    font-size: 10px; font-weight: 600; letter-spacing: .01em;
    white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; flex: none;
}
.lbl-chip-dot[b-htpzkw8q8z] { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--lbl-color, #3b82f6); }

/* ── Filtr po tagach w nagłówku listy (rozwijany panel; osobny od etykiet poczty) ── */
.tl-tagfilter[b-htpzkw8q8z] { position: relative; margin-left: auto; flex: none; }
/* Dwa filtry obok siebie („Źródło” i „Tagi”) trzymają się razem przy prawej krawędzi. Każdy miał własny
   `margin-left: auto`, więc wolne miejsce dzieliło się między nie i po zawinięciu wiersza (11.10.2026)
   „Źródło” stawało samotnie na środku linii. Odsuwa się tylko pierwszy. */
.tl-tagfilter + .tl-tagfilter[b-htpzkw8q8z] { margin-left: 0; }
.tagfilter-btn[b-htpzkw8q8z] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.22rem 0.5rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); font-family: inherit; font-size: 11.5px; color: var(--text-soft); cursor: pointer;
    white-space: nowrap;   /* ikona, napis i pastylka z liczbą zawsze w jednym rzędzie */
    transition: border-color 0.12s, color 0.12s;
}
.tagfilter-btn:hover[b-htpzkw8q8z], .tagfilter-btn.on[b-htpzkw8q8z] { border-color: var(--p1); color: var(--p1); }
.tagfilter-btn.has[b-htpzkw8q8z] { border-color: var(--p1); color: var(--p1); background: var(--ok-bg); }
.tagfilter-btn svg[b-htpzkw8q8z] { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }
.tagfilter-btn .tagfilter-chev[b-htpzkw8q8z] { width: 11px; height: 11px; }
/* ⚠ `flex: none` jest tu OBOWIĄZKOWE (11.10.2026). Pastylka ma jawne `min-width: 15px`, a jawna szerokość
   minimalna WYŁĄCZA domyślną ochronę elementu elastycznego („nie mniej niż treść”): ściśnięta plakietka
   zostawiłaby pastylce 15 px, a białe cyfry wyszłyby poza zielone tło — czyli zniknęły. Liczba bywa
   czterocyfrowa (1728 nieprzeczytanych w firmie właściciela) i ma być widoczna w całości. */
.tagfilter-cnt[b-htpzkw8q8z] {
    flex: none;
    display: inline-grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 999px; background: var(--p1); color: #fff; font-size: 9.5px; font-weight: 700;
    font-family: 'Geist Mono', monospace; white-space: nowrap;
}
.tagfilter-backdrop[b-htpzkw8q8z] { position: fixed; inset: 0; z-index: 200; }
.tagfilter-panel[b-htpzkw8q8z] {
    position: absolute; top: calc(100% + 5px); right: 0; z-index: 201;
    display: flex; flex-direction: column; gap: 1px;
    min-width: 200px; max-width: 260px; max-height: 300px; overflow-y: auto; padding: 5px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
}
.tagfilter-head[b-htpzkw8q8z] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.35rem 0.45rem 0.4rem; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-soft); font-weight: 600;
}
.tagfilter-clear[b-htpzkw8q8z] {
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--p1);
}
.tagfilter-clear:hover[b-htpzkw8q8z] { text-decoration: underline; }
.tagfilter-empty[b-htpzkw8q8z] { padding: 0.5rem 0.55rem; font-size: 11.5px; color: var(--text-soft); }
.tagfilter-opt[b-htpzkw8q8z] {
    display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
    padding: 0.4rem 0.5rem; border: none; background: none; border-radius: 7px;
    cursor: pointer; color: var(--text); font-family: inherit; font-size: 12.5px;
}
.tagfilter-opt:hover[b-htpzkw8q8z] { background: var(--cream-2); }
.tagfilter-opt.sel[b-htpzkw8q8z] { background: var(--ok-bg); }
.tagfilter-check[b-htpzkw8q8z] { width: 14px; flex: none; color: var(--p1); font-weight: 700; font-size: 11px; text-align: center; }
.tagfilter-dot[b-htpzkw8q8z] { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tagfilter-name[b-htpzkw8q8z] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Overlay drop-zon etykiet (podczas przeciągania wątku) — kwadraty na dole/środku ekranu ──
   Wrapper nie łapie zdarzeń (pointer-events:none), tylko siatka kwadratów — żeby nie blokować UI pod spodem. */
.label-drop-overlay[b-htpzkw8q8z] {
    --sq: 92px;   /* rozmiar kwadratu-etykiety; mobilnie zmniejszany w media query */
    position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 320;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    /* definite width (nie tylko max-width) — inaczej siatka (shrink-to-fit) losowo dawała 1–2 kolumny */
    width: min(92vw, 720px); pointer-events: none;
}
.label-drop-hint[b-htpzkw8q8z] {
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-soft); background: var(--paper); border: 1px solid var(--line);
    padding: 0.2rem 0.7rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.label-drop-grid[b-htpzkw8q8z] {
    /* Grid z auto-fit — spójna liczba kolumn wypełniająca szerokość (flex-wrap dawał 1 kol. na wąskich ekranach).
       auto-fit zwija puste tory, justify-content centruje ostatni niepełny rząd. */
    display: grid; grid-template-columns: repeat(auto-fit, var(--sq, 92px));
    justify-content: center; gap: 0.5rem; width: fit-content; max-width: 100%;
    padding: 0.7rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); pointer-events: auto;
    /* Wiele etykiet (np. 10+): siatka nigdy nie może zasłonić całego ekranu ani wyjechać poza górę —
       kapujemy wysokość i pozwalamy przewijać samą siatkę. */
    max-height: min(48vh, 360px); overflow-y: auto;
}
.label-drop-square[b-htpzkw8q8z] {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
    width: var(--sq, 92px); height: 72px; padding: 0.4rem;
    border-radius: 12px; border: 2px dashed color-mix(in srgb, var(--lbl-color, #3b82f6) 55%, transparent);
    background: color-mix(in srgb, var(--lbl-color, #3b82f6) 8%, var(--paper));
    cursor: copy; transition: transform 0.1s, box-shadow 0.12s, background 0.12s;
}
.label-drop-square[data-nad-etykieta][b-htpzkw8q8z] {
    transform: scale(1.06);
    background: color-mix(in srgb, var(--lbl-color, #3b82f6) 20%, var(--paper));
    box-shadow: 0 0 0 2px var(--lbl-color, #3b82f6) inset;
}
.lds-dot[b-htpzkw8q8z] { width: 14px; height: 14px; border-radius: 50%; background: var(--lbl-color, #3b82f6); flex: none; pointer-events: none; }
.lds-name[b-htpzkw8q8z] {
    font-size: 11px; font-weight: 600; color: var(--text); text-align: center; line-height: 1.15;
    max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    pointer-events: none;
}

/* ── Responsywność ── */
/* Tablet: rail chowany, zostają 2 kolumny (lista + reader). */
@media (max-width: 1200px) and (min-width: 821px) {
    .email-shell[b-htpzkw8q8z],
    .email-shell.rail-collapsed[b-htpzkw8q8z] { grid-template-columns: minmax(320px, 1fr) 0fr; }
    .email-shell.reader-open[b-htpzkw8q8z],
    .email-shell.rail-collapsed.reader-open[b-htpzkw8q8z] { grid-template-columns: minmax(320px, 1fr) 3fr; }
    .mbox-rail[b-htpzkw8q8z] { display: none; }
}

/* Mobile: drill-down. Lista PEŁNY EKRAN; po tapnięciu wątku — reader pełny ekran (lista schowana),
   X w czytniku wraca do listy. Skrzynki jako poziome chipy nad listą (rail ukryty). */
@media (max-width: 820px) {
    .email-shell[b-htpzkw8q8z],
    .email-shell.rail-collapsed[b-htpzkw8q8z] {
        display: block; position: relative;
        /* Od tej wysokości zaczyna się szuflada skrzynek. Zmierzone na 390 px: wiersz z
           przełącznikiem kończył się na 96,8 px, więc szuflada startuje tuż pod nim i nie
           ma jak przykryć przycisku, którym się ją zamyka.

           ⚠ Próg idzie RAZEM z tym wierszem. Między 01.09 a 11.10.2026 nad listą stał pasek
             z nazwą ekranu (36 px) i próg wynosił 136 px; pasek zniknął, wiersz wrócił na swoje
             miejsce, więc próg wraca do 100 px. Zostawiony na 136 px otwierałby szufladę 36 px
             pod przełącznikiem — z pasem listy widocznym nad nią. W drugą stronę jest gorzej:
             próg za niski kładzie szufladę NA przełączniku i dotknięcie miejsca, w którym widać
             jej zamknięcie, uruchamia pobieranie skrzynki (usterka naprawiona 29.08.2026). */
        --szuflada-od-gory: 100px;
    }

    .thread-list[b-htpzkw8q8z] { display: flex; height: 100%; border-right: none; }
    .reader[b-htpzkw8q8z] { display: none; }
    .email-shell.reader-open .thread-list[b-htpzkw8q8z] { display: none; }
    .email-shell.reader-open .reader[b-htpzkw8q8z] { display: flex; height: 100%; }
    .reader-empty[b-htpzkw8q8z] { display: none; }

    /* Na telefonie przełącznik szuflady zastępuje przełącznik kolumny. */
    .rail-toggle-kolumna[b-htpzkw8q8z] { display: none; }
    .rail-toggle-szuflada[b-htpzkw8q8z] { display: inline-grid; }

    /* „Odczytaj wszystkie” na telefonie: ikona w górnym rzędzie zamiast napisu przyklejonego do
       prawej krawędzi rzędu filtrów, gdzie przykrywał „Nieprzeczytane” (przegląd zrzutów 25.09.2026). */
    .tl-readall[b-htpzkw8q8z] { display: none; }
    .tl-readall-ikona[b-htpzkw8q8z] { display: inline-grid; }

    /* Skrzynki jako SZUFLADA — otwierana przyciskiem (rail-toggle) w nagłówku listy.
       Pokazuje pełną listę skrzynek (jak na desktopie), nie chipy.
       Nadpisujemy też `.rail-collapsed .mbox-rail{display:none}` (desktopowe) — na telefonie
       kolumna i szuflada to dwa osobne stany, a `rail-collapsed` NIE może ukryć szuflady.

       ⚠ `top` NIE jest zerem, i to jest cała poprawka z 29.08.2026. Szuflada wysunięta od
       samej góry przykrywała nagłówek listy, a w nim przełącznik, którym się ją zamyka:
       zmierzone na 390 px, przełącznik stał w 11,6–50,0 px, a przycisk „Pobierz nowe teraz"
       ze szuflady w 8,5–303,9 px, więc `document.elementFromPoint(30, 78)` zwracał PRZYCISK
       POBIERANIA. Dotknięcie miejsca, w którym widać zamknięcie szuflady, uruchamiało
       pobieranie skrzynki. Szuflada zaczyna się teraz pod wierszem z przełącznikiem. */
    .mbox-rail[b-htpzkw8q8z],
    .email-shell.rail-collapsed .mbox-rail[b-htpzkw8q8z] {
        display: flex;
        position: fixed; top: var(--szuflada-od-gory); left: 0; bottom: 0; z-index: 120;
        width: 80%; max-width: 320px;
        transform: translateX(-100%);
        transition: transform 0.24s ease;
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.28);
    }

    /* Druga, niezależna zapora na to samo: nawet gdyby wiersz nagłówka kiedyś urósł i szuflada
       weszła pod przełącznik, przełącznik zostaje NAD nią i nad przyciemnieniem (120 i 119).
       Tło nieprzezroczyste, bo przy otwartej szufladzie reszta ekranu jest przygaszona. */
    .email-shell.mobile-rail-open .rail-toggle-szuflada[b-htpzkw8q8z] {
        position: relative;
        z-index: 130;
        background: var(--paper);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
        color: var(--text);
    }
    .email-shell.mobile-rail-open .mbox-rail[b-htpzkw8q8z] { transform: translateX(0); }
    .mobile-rail-backdrop[b-htpzkw8q8z] { display: none; }
    .email-shell.mobile-rail-open .mobile-rail-backdrop[b-htpzkw8q8z] {
        display: block; position: fixed; inset: 0; z-index: 119;
        background: rgba(20, 22, 28, 0.45);
    }

    /* Overlay etykiet na mobile: mniejsze kwadraty (--sq), by 10+ etykiet mieściło się w mniej rzędach
       i nie zjadało całego ekranu (siatka i tak jest przewijalna przez max-height wyżej). */
    .label-drop-overlay[b-htpzkw8q8z] { --sq: 74px; bottom: 0.9rem; width: min(96vw, 520px); }
    .label-drop-square[b-htpzkw8q8z] { height: 58px; }
    .lds-dot[b-htpzkw8q8z] { width: 12px; height: 12px; }
    .lds-name[b-htpzkw8q8z] { font-size: 10px; }
}

/* ── Cele dotykowe na telefonie ────────────────────────────────────────────────
   Zmierzone na 390 px: "Napisz" 80x27, "Tagi" 70x25, "Odczytaj wszystkie" 114x23,
   gwiazdka 20x20, przelacznik skrzynek 30x30. Palec to ~9 mm, czyli ~44 px —
   w 20-pikselowa gwiazdke miedzy dwoma wierszami listy trafia sie na trzeci raz.
   Powiekszamy POLE KLIKANIA, nie tekst i nie ikone: gestosc listy zostaje bez zmian.
   Tylko pod (pointer: coarse) — na komputerze interfejs sie nie rozpycha. */
@media (pointer: coarse) {
    .compose-btn[b-htpzkw8q8z],
    .tagfilter-btn[b-htpzkw8q8z],
    .tl-readall[b-htpzkw8q8z] { min-height: 38px; }

    /* „Odczytaj wszystkie” było tu od 20.09.2026 przyklejone do prawej krawędzi (`sticky` z cieniem), bo
       wiersz filtrów przewijał się w poziomie i przycisk lądował poza ekranem. Od 11.10.2026 wiersz się
       ZAWIJA (patrz `.tl-head-bottom`), więc przycisk zawsze jest w kolumnie, a przyklejenie nie miałoby
       czego trzymać — zostałby po nim sam cień na krawędzi przycisku. Na telefonie (≤ 820 px) tę akcję
       niesie ikona w górnym rzędzie. */

    .rail-toggle[b-htpzkw8q8z] { width: 38px; height: 38px; }

    /* Gwiazdka i tak stoi w wolnym miejscu obok godziny — powiekszamy sam obszar
       dotyku, ikona zostaje 15 px, wiec wizualnie nic sie nie zmienia. */
    .thread-star[b-htpzkw8q8z] {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── "Pobierz nowe teraz" ─────────────────────────────────────────────────────────────────
   Przycisk sprawdza skrzynke poza kolejnoscia. Komunikat pod nim niesie odpowiedz serwera:
   albo "sprawdzamy", albo powod odmowy razem z czasem, ile jeszcze czekac. */
/* 12 px od góry, bo to teraz PIERWSZY element szyny — nagłówek szyny zniknął (patrz wyżej). */
.pobierz-teraz[b-htpzkw8q8z] {
    padding: 12px 10px 4px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pobierz-teraz button[b-htpzkw8q8z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 7px 10px;
    font-size: 12.5px;
    border-radius: 8px;
    cursor: pointer;
    min-width: 0;
}

.pobierz-teraz button[disabled][b-htpzkw8q8z] {
    opacity: .65;
    cursor: default;
}

.pobierz-teraz-info[b-htpzkw8q8z] {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-soft);
    overflow-wrap: anywhere;
}

/* Odmowa to nie awaria - wyroznienie ma byc czytelne, a nie alarmujace. */
.pobierz-teraz-info.odmowa[b-htpzkw8q8z] {
    color: var(--global-palette4, #a26a12);
}

@media (max-width: 768px) {
    .pobierz-teraz[b-htpzkw8q8z] { padding: 6px 8px 2px 8px; }
    .pobierz-teraz button[b-htpzkw8q8z] { padding: 9px 10px; font-size: 13px; }
}

/* Cele dotykowe na ekranie poczty — wskazane przyrzadem Q (21.09.2026, 390x844).
   Kazdy z rozmiarem, ktory mial przed poprawka. */
@media (pointer: coarse) {
    .compose-btn[b-htpzkw8q8z] { min-height: 40px; }        /* bylo 80x38 — "Napisz", glowna akcja ekranu */
    .tagfilter-btn[b-htpzkw8q8z] { min-height: 40px; }      /* bylo 82x38 — filtry etykiet */
    .rail-toggle[b-htpzkw8q8z] { min-width: 40px; min-height: 40px; }  /* bylo 38x38 — "Pokaz skrzynki" */
    .mbox-empty-link[b-htpzkw8q8z] { display: inline-flex; align-items: center; min-height: 40px; }  /* bylo 279x18 */
    .tl-readall[b-htpzkw8q8z] { min-height: 40px; }         /* bylo 114x38 — "Odczytaj wszystkie" */
    .tl-oznacz-wszystko[b-htpzkw8q8z] { min-height: 40px; } /* nowy 11.10.2026 — "Odczytaj wszystkie N", od poczatku 40 px */
    /* ⚠ ZOSTAJE 22 px: pole wyboru watku (`.ti-check input`) siedzi w etykiecie `.ti-check`,
       ktora ma 40x40 i to ONA jest celem palca. Przyrzad mierzy element, nie jego klikalnego
       rodzica — i dlatego wypisuje te 22 px jako "za male". To nuansa przyrzadu, nie ekranu. */
}
/* /Components/Pages/Email/EmailComposeModal.razor.rz.scp.css */
/* Modal „Napisz" — nowy wątek e-mail. Bazuje na globalnym .modal-overlay/.modal-dialog/.form-input/.btn. */

.compose-modal[b-arz1dtfgf7] { width: min(640px, 94vw); max-height: 90vh; display: flex; flex-direction: column; }

.compose-head[b-arz1dtfgf7] { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.2rem 0.7rem; border-bottom: 1px solid var(--line); }
.compose-title[b-arz1dtfgf7] { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.4rem; margin: 0; color: var(--text); }
.compose-head .modal-close[b-arz1dtfgf7] { margin-left: auto; }

.compose-body[b-arz1dtfgf7] { padding: 0.9rem 1.2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.7rem; }
.compose-field[b-arz1dtfgf7] { display: flex; flex-direction: column; gap: 0.25rem; }
.compose-label[b-arz1dtfgf7] { font-size: 11.5px; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.compose-nomailbox[b-arz1dtfgf7] { font-size: 12.5px; color: var(--text-faint); padding: 0.4rem 0; }
.compose-area[b-arz1dtfgf7] { min-height: 160px; field-sizing: content; max-height: 42vh; resize: vertical; line-height: 1.5; }
.compose-error[b-arz1dtfgf7] { align-self: flex-start; }

.compose-foot[b-arz1dtfgf7] { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.2rem; border-top: 1px solid var(--line); }
.compose-sig[b-arz1dtfgf7] { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.compose-hint[b-arz1dtfgf7] { font-size: 11px; color: var(--text-soft); }

/* Podpis — podgląd + wybór (kopia stylów z czytnika; scoped CSS nie przechodzi między komponentami) */
.sig-pick[b-arz1dtfgf7] { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 11.5px; color: var(--text-soft); }
.sig-pick select[b-arz1dtfgf7] { font-family: inherit; font-size: 11.5px; color: var(--text); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0.15rem 0.4rem; max-width: 190px; }
.sig-toggle[b-arz1dtfgf7] { border: none; background: none; padding: 0; font-size: 11.5px; color: var(--p1); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.sig-preview[b-arz1dtfgf7] { border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--cream); overflow: hidden; }
.sig-preview-label[b-arz1dtfgf7] { padding: 0.3rem 0.6rem; font-size: 10.5px; color: var(--text-soft); border-bottom: 1px dashed var(--line); background: var(--cream-2); }
.sig-preview-body[b-arz1dtfgf7] { padding: 0.55rem 0.7rem; font-size: 12.5px; color: var(--text); max-height: 140px; overflow: auto; overflow-wrap: anywhere; }
.sig-preview-body img[b-arz1dtfgf7] { max-width: 100%; height: auto; }

/* Minimalny WYSIWYG — toolbar + contenteditable (scoped CSS nie przechodzi między komponentami). */
.rich-toolbar[b-arz1dtfgf7] { display: flex; gap: 0.25rem; padding: 0.3rem 0.4rem; border: 1px solid var(--line-strong); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--cream-2); }
.rich-toolbar .btn[b-arz1dtfgf7] { padding: 0.2rem 0.45rem; min-width: 30px; line-height: 1; }
.rich-toolbar .btn svg[b-arz1dtfgf7] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rich-toolbar .btn strong[b-arz1dtfgf7], .rich-toolbar .btn em[b-arz1dtfgf7] { font-size: 13px; }
.rich-editor[b-arz1dtfgf7] { min-height: 160px; max-height: 42vh; overflow: auto; line-height: 1.5; padding: 0.5rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 0 0 var(--radius-sm) var(--radius-sm); outline: none; overflow-wrap: anywhere; background: var(--paper); color: var(--text); font-family: inherit; font-size: 13.5px; }
.rich-editor:focus[b-arz1dtfgf7] { border-color: var(--p1); }
.rich-editor:empty[b-arz1dtfgf7]::before { content: attr(data-placeholder); color: var(--text-faint); }
.rich-editor img.abc-inline-img[b-arz1dtfgf7] { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 0.3rem 0; }

/* 2b — spinacz + chipy załączników-plików (scoped na modal; te same klasy co reply, osobny komponent) */
.rich-toolbar .rich-attach[b-arz1dtfgf7] { cursor: pointer; display: inline-grid; place-items: center; }
.reply-atts[b-arz1dtfgf7] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
/* Ostrzeżenie pod załącznikami: szkic ich nie zachowa (agent H, 19.09.2026). */
.compose-att-hint[b-arz1dtfgf7] { margin: 0.4rem 0 0; font-size: 11.5px; line-height: 1.45; color: var(--warn, #8a5b00); }
.reply-att-chip[b-arz1dtfgf7] { display: inline-flex; align-items: center; gap: 0.4rem; max-width: 260px; padding: 0.25rem 0.35rem 0.25rem 0.55rem; background: var(--cream); border: 1px solid var(--line-strong); border-radius: 999px; font-size: 11.5px; color: var(--text); }
.reply-att-chip > svg[b-arz1dtfgf7] { width: 13px; height: 13px; stroke: var(--ch-email, currentColor); fill: none; stroke-width: 1.7; flex: none; }
.reply-att-chip .rac-name[b-arz1dtfgf7] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-att-chip .rac-size[b-arz1dtfgf7] { color: var(--text-soft); font-family: 'Geist Mono', monospace; font-size: 10px; flex: none; }
.reply-att-chip .rac-remove[b-arz1dtfgf7] { border: none; background: none; color: var(--text-faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; flex: none; border-radius: 50%; }
.reply-att-chip .rac-remove:hover:not(:disabled)[b-arz1dtfgf7] { color: var(--danger); background: var(--line); }

/* ── #8c — DW/UDW w kompozytorze (pola schowane domyślnie, jak przy odpowiedzi) ── */
.compose-to-row[b-arz1dtfgf7] { display: flex; align-items: center; gap: 0.4rem; }
.compose-to-row .form-input[b-arz1dtfgf7] { flex: 1 1 auto; min-width: 0; }
.compose-cc-toggle[b-arz1dtfgf7] { flex: none; padding: 0 10px; height: 32px; border-radius: 999px; border: 1px dashed var(--line-strong); background: none; font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.compose-cc-toggle:hover[b-arz1dtfgf7], .compose-cc-toggle.on[b-arz1dtfgf7] { border-color: var(--p1); color: var(--p1); background: var(--ok-bg); border-style: solid; }
.compose-cc[b-arz1dtfgf7] { gap: 0.4rem; }
.compose-cc-line[b-arz1dtfgf7] { display: flex; align-items: center; gap: 0.5rem; }
.compose-cc-lbl[b-arz1dtfgf7] { flex: none; width: 34px; font-size: 11px; font-weight: 600; color: var(--text-soft); }
.compose-cc-line .form-input[b-arz1dtfgf7] { flex: 1 1 auto; min-width: 0; }

/* ── #8c — dziedziczone załączniki (forward): read-only, bez „×" ── */
.compose-inherited[b-arz1dtfgf7] { align-items: center; }
.compose-inherited-lbl[b-arz1dtfgf7] { font-size: 11px; color: var(--text-soft); font-weight: 600; flex: none; }
.reply-att-chip.inherited[b-arz1dtfgf7] { background: var(--ok-bg); border-color: color-mix(in srgb, var(--p1) 35%, transparent); }
.reply-att-chip.inherited > svg[b-arz1dtfgf7] { stroke: var(--p1); }

/* ── K3-4 — pasek „Cofnij" (kopia stylu z czytnika; scoped CSS nie przechodzi między komponentami) ── */
.reply-undo[b-arz1dtfgf7] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem 0.3rem 0.7rem;
    background: var(--warn-bg); border: 1px solid #f0d9a8; border-radius: 999px; }
.reply-undo > svg[b-arz1dtfgf7] { width: 16px; height: 16px; stroke: #8a6512; fill: none; stroke-width: 2; flex: none; }
.reply-undo-txt[b-arz1dtfgf7] { font-size: 13px; color: #8a6512; }
.reply-undo-txt strong[b-arz1dtfgf7] { font-variant-numeric: tabular-nums; }

/* ── M1 — kompozytor „Napisz/Przekaż" na PEŁNY EKRAN na mobile ──
   Wcześniej modal (max-height 90vh) zostawiał biały pas pod stopką (~1/4 ekranu) i ucinał się.
   Fullscreen: head + body(rośnie, scroll) + foot(zakotwiczona na dole); edytor wypełnia wolne miejsce. */
@media (max-width: 820px) {
    .modal-overlay[b-arz1dtfgf7] { padding: 0; }
    .compose-modal[b-arz1dtfgf7] {
        width: 100%; max-width: none;
        height: 100dvh; max-height: none;
        border-radius: 0;
    }
    .compose-body[b-arz1dtfgf7] { flex: 1 1 auto; min-height: 0; }
    /* Pole „Treść" (to z edytorem) wypełnia wolną przestrzeń; edytor rośnie razem z nim. */
    .compose-field:has(.rich-editor)[b-arz1dtfgf7] { flex: 1 1 auto; min-height: 0; }
    .rich-editor[b-arz1dtfgf7] { flex: 1 1 auto; max-height: none; min-height: 120px; }
    .compose-foot[b-arz1dtfgf7] { flex: none; flex-wrap: wrap; row-gap: 0.4rem; }
    .compose-sig[b-arz1dtfgf7] { min-width: 0; }
}

/* ── V2 — X „zamknij" widoczny w trybie JASNYM. Globalny .modal-close jest biały (na ciemny nagłówek),
   a nagłówek kompozytora jest jasny (paper) → biały X był niewidoczny. Ciemny znak + subtelny hover. */
.compose-head .modal-close[b-arz1dtfgf7] { background: none; color: var(--text-soft); }
.compose-head .modal-close:hover[b-arz1dtfgf7] { background: var(--cream-2); color: var(--text); }
.compose-head .modal-close svg[b-arz1dtfgf7] { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* ── V1 — oznaczanie niepoprawnych adresów e-mail ── */
.form-input.addr-invalid[b-arz1dtfgf7] { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent); }
.compose-addr-warn[b-arz1dtfgf7] { margin-top: 0.3rem; font-size: 11.5px; color: var(--danger); overflow-wrap: anywhere; }
/* /Components/Pages/Email/EmailMessageWindow.razor.rz.scp.css */
/* Jeden list w osobnym oknie (/email/message/{wątek}/{list}). Kartka na całą wysokość okna: temat jest
   jedynym mocnym akcentem, reszta ma nie przeszkadzać w czytaniu. Przewija się okno — list nie ma
   własnego paska przewijania. Kolory wyłącznie ze zmiennych aplikacji. */
.okno-listu[b-g1ryptjkbo] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: min(100%, 980px);
    margin: 0 auto;
    background: var(--paper);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
}

.ol-glowa[b-g1ryptjkbo] { padding: 1.3rem 1.6rem 1rem; border-bottom: 1px solid var(--line); }
.ol-temat[b-g1ryptjkbo] {
    margin: 0 0 0.9rem;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
}
.ol-nadawca[b-g1ryptjkbo] { display: flex; align-items: flex-start; gap: 0.7rem; }
.ol-nadawca .avatar-circle[b-g1ryptjkbo] { flex: none; }
.ol-kto[b-g1ryptjkbo] { flex: 1 1 auto; min-width: 0; }
.ol-od[b-g1ryptjkbo] { font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.ol-od small[b-g1ryptjkbo] { font-weight: 400; font-size: 12px; color: var(--text-soft); margin-left: 0.3rem; }
.ol-do[b-g1ryptjkbo] { font-size: 12px; color: var(--text-soft); margin-top: 2px; overflow-wrap: anywhere; }
.ol-etykieta[b-g1ryptjkbo] { color: var(--text-faint); }
.ol-data[b-g1ryptjkbo] { flex: none; font-size: 12px; color: var(--text-soft); white-space: nowrap; padding-top: 2px; }

.okno-listu > .spoof-warning[b-g1ryptjkbo] { margin: 0.9rem 1.6rem 0; }

.ol-obrazki[b-g1ryptjkbo] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.9rem 1.6rem 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--cream);
    font-size: 12.5px;
    color: var(--text-soft);
}
.ol-obrazki svg[b-g1ryptjkbo] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; flex: none; }
.ol-obrazki .btn[b-g1ryptjkbo] { margin-left: auto; flex: none; }

/* Treść bierze całą wolną wysokość okna — załączniki stoją na dole kartki, nie w połowie pustego okna. */
.ol-tresc-pole[b-g1ryptjkbo] { flex: 1 1 auto; padding: 1.1rem 1.6rem 1.4rem; min-width: 0; }
.ol-tresc[b-g1ryptjkbo] { font-size: 14px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; max-width: 78ch; }
.ol-tresc-nasza[b-g1ryptjkbo] { overflow-x: auto; }
.ol-tresc-nasza[b-g1ryptjkbo]  img { max-width: 100%; height: auto; }
.ol-tresc-nasza[b-g1ryptjkbo]  a { color: var(--ch-email); text-decoration: underline; text-underline-offset: 2px; }
.ol-tresc-nasza[b-g1ryptjkbo]  p { margin: 0 0 0.6rem; }
.ol-tresc-nasza[b-g1ryptjkbo]  blockquote { margin: 0.4rem 0; padding-left: 0.8rem; border-left: 3px solid var(--line-strong); color: var(--text-soft); }

/* Ramka listu przychodzącego: wysokość ustawia abcEmailFrame.fit (treść), białe tło jak w czytniku —
   list projektowano na jasne tło. */
.ol-ramka[b-g1ryptjkbo] {
    display: block;
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: white;
    color-scheme: light;
}

.ol-pliki[b-g1ryptjkbo] { padding: 0.9rem 1.6rem 1.3rem; border-top: 1px solid var(--line); background: var(--cream); }
.ol-pliki-tytul[b-g1ryptjkbo] { margin: 0 0 0.6rem; font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.ol-pliki-lista[b-g1ryptjkbo] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ol-plik[b-g1ryptjkbo] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    min-height: 34px;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--text);
    font-size: 12.5px;
    text-decoration: none;
}
a.ol-plik:hover[b-g1ryptjkbo] { border-color: var(--p1); }
a.ol-plik:focus-visible[b-g1ryptjkbo] { outline: 2px solid var(--p1); outline-offset: 2px; }
.ol-plik svg[b-g1ryptjkbo] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; flex: none; color: var(--ch-email); }
.ol-plik-nazwa[b-g1ryptjkbo] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-plik-rozmiar[b-g1ryptjkbo] { flex: none; font-size: 11px; color: var(--text-soft); }
.ol-plik-uwaga[b-g1ryptjkbo] { color: var(--danger); font-weight: 700; }
.ol-plik-brak[b-g1ryptjkbo] { border-style: dashed; opacity: .65; cursor: help; }
.ol-plik-brak .ol-plik-nazwa[b-g1ryptjkbo] { text-decoration: line-through; }
.ol-plik-wszystkie[b-g1ryptjkbo] { border-style: dashed; color: var(--text-soft); }

@media (max-width: 820px) {
    .okno-listu[b-g1ryptjkbo] { border-left: 0; border-right: 0; }
    .ol-glowa[b-g1ryptjkbo] { padding: 1rem 1rem 0.8rem; }
    .ol-temat[b-g1ryptjkbo] { font-size: 18px; }
    .ol-nadawca[b-g1ryptjkbo] { flex-wrap: wrap; }
    .ol-data[b-g1ryptjkbo] { order: 3; flex-basis: 100%; padding-left: calc(36px + 0.7rem); }
    .okno-listu > .spoof-warning[b-g1ryptjkbo], .ol-obrazki[b-g1ryptjkbo] { margin-left: 1rem; margin-right: 1rem; }
    .ol-obrazki[b-g1ryptjkbo] { flex-wrap: wrap; }
    .ol-tresc-pole[b-g1ryptjkbo] { padding: 0.9rem 1rem 1.1rem; }
    .ol-pliki[b-g1ryptjkbo] { padding: 0.8rem 1rem 1.1rem; }
    .ol-plik[b-g1ryptjkbo] { min-height: 40px; }
}
/* /Components/Pages/Email/EmailThread.razor.rz.scp.css */
/* Pełnookienny czytnik wątku (route /email/window/{id}) — wypełnia .content-wrapper. */
.email-standalone[b-3953lzt2a5] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    background: var(--cream);
}
/* /Components/Pages/Email/EmailThreadReader.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   Czytnik wątku e-mail (Blok 2). Makieta: tmp/mockups/email.html (.msg / .quote / .att).
   ══════════════════════════════════════════════════════════════════════ */

.thread-reader[b-g4ufztonjl] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    /* Znak dla skryptu: czy „Odpowiedz” otwiera pole W MIEJSCU (0), czy jako arkusz na cały ekran (1).
       Jedynka stoi w bloku telefonu niżej. Czyta ją `abcRichmail.poleJakoArkusz` — dzięki temu próg
       szerokości zna WYŁĄCZNIE ten arkusz i nie da się go przestawić tu, zapominając o skrypcie. */
    --odpowiedz-arkuszem: 0;
}

/* Wjazd treści przy otwarciu PIERWSZEGO wątku (gdy wcześniej nic nie było otwarte).
   ⚠ Klasę `abc-wjazd` dopina JavaScript z App.razor, nie Blazor — i to jest konieczne, nie fanaberia:
   zmiana wątku odtwarza cały komponent strony, więc dla CSS „pierwsze otwarcie" i „kolejny wątek"
   wyglądają identycznie, a żaden stan w C# tego nie przeżyje. Pamięć o tym, czy czytnik był już
   otwarty, żyje w sessionStorage — czyli w jedynym miejscu, które przeżywa nawigację. */
.thread-reader.abc-wjazd[b-g4ufztonjl] {
    animation: reader-in-b-g4ufztonjl 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes reader-in-b-g4ufztonjl {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .thread-reader.abc-wjazd[b-g4ufztonjl] { animation: none; }
}

/* R3.1 — potwierdzenie po utworzeniu zadania z maila (floating pigułka) */
.task-flash[b-g4ufztonjl] { position: absolute; top: 0.6rem; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.4rem 0.4rem 0.75rem; background: var(--ok-bg); border: 1px solid var(--p1); border-radius: 999px; font-size: 12.5px; color: var(--text); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
.task-flash > svg[b-g4ufztonjl] { width: 15px; height: 15px; stroke: var(--p1); fill: none; stroke-width: 2; flex: none; }
.task-flash a[b-g4ufztonjl] { color: var(--p1); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.task-flash-x[b-g4ufztonjl] { width: 20px; height: 20px; display: inline-grid; place-items: center; border: none; background: none; color: var(--text-faint); cursor: pointer; border-radius: var(--radius-sm); flex: none; }
.task-flash-x svg[b-g4ufztonjl] { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.task-flash-x:hover[b-g4ufztonjl] { background: var(--line); color: var(--text); }
.tr-info[b-g4ufztonjl] { padding: 2rem 1.4rem; color: var(--text-faint); font-size: 13px; }

/* ── Nagłówek ──
   ⚠ ŚCIŚNIĘTY 11.10.2026 (właściciel: „mało troszkę tego miejsca do czytania wiadomości… trochę
   pociaśnić tytuł i przyciski”). Policzone z tego arkusza przy 1 rem = 14 px, NIE zmierzone:
     przed:  14 góra + 32 wiersz tematu + 7 + 26 statusy + 8,4 + 1,4 + 20 tagi + 11,9 dół + 1 = ok. 122 px
     po:      7 góra + 28 wiersz tematu + 4,2 + 26 statusy (tagi w tym samym wierszu) + 6,3 dół + 1 = ok. 73 px
   Trzy rzeczy naraz: mniejsze odstępy, mniejszy temat i ikony, a tagi przestały mieć własny wiersz.
   Telefon (≤ 820 px) ma własne odstępy i własny rozmiar tematu w blokach @media niżej — tam ta
   zmiana niczego nie rusza, bo cele dotykowe były tam mierzone i poprawiane osobno.
   Sufitu pilnuje CzytnikPocztyMaMiejsceNaTrescTests (liczy go z tych samych reguł). */
.reader-head[b-g4ufztonjl] {
    padding: 0.5rem 1.4rem 0.45rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    /* Nagłówek mierzy SIEBIE, nie okno — patrz @container niżej. */
    container-type: inline-size;
    container-name: rh;
}
/* `center`, nie `flex-start`: temat (ok. 20 px) jest teraz niższy niż ikony obok (28 px) —
   przyklejony do góry wiersza stałby wyraźnie wyżej niż one. */
.rh-top[b-g4ufztonjl] { display: flex; align-items: center; gap: 0.75rem; }
/* ⚠ `flex: 1` jest tu OBOWIĄZKOWE, nie kosmetyczne. Bez niego temat ma flex-basis:auto i przy
   `min-width: 0` kurczy się do NAJDŁUŻSZEGO SŁOWA, bo sąsiedni pasek akcji ma `flex: none`
   i nie ustępuje ani piksela. Efekt: „Problem / z / płatnością / BLIK / #164830" w siedmiu
   linijkach obok metra wolnego miejsca. Skracamy wielokropkiem — temat to jedna linia. */
/* `h1` w osobnym oknie, `h2` w panelu — patrz komentarz w EmailThreadReader.razor. Rozmiar
   i waga są tu wpisane WPROST, żeby zmiana znacznika nie zmieniła ani jednego piksela:
   globalna reguła dokłada nagłówkom `margin-bottom` i `font-weight: 500`. */
.rh-subject[b-g4ufztonjl] {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    color: var(--text);
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rh-actions[b-g4ufztonjl] { margin-left: auto; display: flex; gap: 0.25rem; flex: none; align-items: center; }
.reader-close[b-g4ufztonjl] {
    width: 32px; height: 32px;
    display: inline-grid; place-items: center;
    border: none; background: none; border-radius: var(--radius-sm);
    color: var(--text-faint); cursor: pointer;
}
.reader-close:hover[b-g4ufztonjl] { background: var(--cream-2); color: var(--text); }
.reader-close svg[b-g4ufztonjl] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Ikony 28 px TYLKO pod kursor i tylko poza układem telefonu. Na dotyku zostaje 32 px: mniejszy
   cel to gorsze trafianie palcem, a tych ikon nikt tam nie mierzył poniżej 32. Warunek
   `pointer: fine` to ten sam podział, którym `app.css` rozróżnia `.btn-sm` (28 px / 40 px). */
@media (min-width: 821px) and (pointer: fine) {
    .reader-close[b-g4ufztonjl] { width: 28px; height: 28px; }
}

/* ── #8 — „⋯" (rzadsze akcje). DESKTOP: .rh-more i .rh-more-menu są PRZEZROCZYSTE dla layoutu
   (display: contents), więc ich przyciski leżą płasko w .rh-actions dokładnie jak przed redesignem —
   zero zmian dla desktopu przy jednym kawałku markupu. Samo „⋯" ukryte. ── */
.rh-more[b-g4ufztonjl] { display: contents; }
.rh-more-menu[b-g4ufztonjl] { display: contents; }
.rh-more-btn[b-g4ufztonjl] { display: none; }
.rh-spam-ikona[b-g4ufztonjl] { display: none; }
.rh-more-backdrop[b-g4ufztonjl] { position: fixed; inset: 0; z-index: 40; }

/* ── Rzadsze akcje chowają się pod „⋯", gdy pasek jest za wąski ──────────────────────────────
   Pasek ma sześć przycisków z etykietami („Jako zgłoszenie", „Oznacz jako nieprzeczytaną", …)
   i zajmuje ok. 880 px. Na temat zostawało ~120 px, więc łamał się na pojedyncze słowa.

   ⚠ To MUSI być @container, nie @media. Szerokość czytnika nie wynika z szerokości okna, tylko
   z tego, ile paneli jest otwartych: przy trzech kolumnach (skrzynki + wątki + czytnik) na Full HD
   czytnik ma ~1030 px, a przy zwiniętych panelach — dwa razy tyle. Próg liczony po oknie mijał się
   z celem: przy 1920 px okno jest „szerokie", a pasek ciasny. Container query pyta sam pasek.

   Próg: 880 px akcji + ~320 px na sensowny temat. */
@container rh (max-width: 1200px) {
    .rh-more[b-g4ufztonjl] { display: inline-block; position: relative; flex: none; }
    .rh-more-btn[b-g4ufztonjl] { display: inline-grid; }
    .rh-more-btn.on[b-g4ufztonjl] { background: var(--cream-2); color: var(--text); }
    .rh-more-menu[b-g4ufztonjl] {
        display: none;
        position: absolute; top: calc(100% + 6px); right: 0; z-index: 41;
        flex-direction: column; gap: 1px; min-width: 208px; padding: 4px;
        background: var(--paper); border: 1px solid var(--line);
        border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
        animation: ai-menu-pop-b-g4ufztonjl .16s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .rh-more.on .rh-more-menu[b-g4ufztonjl] { display: flex; }
    /* Pozycje wyglądają jak menu, nie jak przyciski paska (kasuje obrys/tło .btn-secondary). */
    .rh-actions .rh-more-menu .btn.btn-secondary[b-g4ufztonjl] {
        display: flex; align-items: center; justify-content: flex-start; gap: 0.55rem;
        width: 100%; min-width: 0; padding: 0.5rem; text-align: left;
        border: none; background: none; border-radius: 7px;
        font-size: 12.5px; font-weight: 400; color: var(--text);
    }
    .rh-actions .rh-more-menu .btn.btn-secondary svg[b-g4ufztonjl] { width: 15px; height: 15px; margin: 0; flex: none; color: var(--text-faint); }
    .rh-actions .rh-more-menu .btn.btn-secondary:hover[b-g4ufztonjl] { background: var(--cream-2); }
    .rh-actions .rh-more-menu .btn.spam-on[b-g4ufztonjl] { color: var(--danger); }
    /* Pasek zwinięty pod „⋯” → „Spam” dostaje własną ikonę obok lupy (patrz niżej, .rh-spam-ikona). */
    .rh-spam-ikona[b-g4ufztonjl] { display: inline-grid; }
}

/* ── „Spam” widoczny bez „⋯” (lista właściciela 11.10.2026, pkt 15) ───────────────────────────
   Na szerokim czytniku przycisk „Oznacz jako spam” leży płasko w pasku z napisem — druga ikona obok byłaby
   dublem, więc domyślnie jej nie ma. Pokazuje ją dopiero ten sam próg, który zwija pasek pod „⋯” (wyżej).
   Na telefonie zostaje pozycja w „⋯”: w rzędzie ikon nad tematem nie ma miejsca na kolejną (blok niżej).
   Ikona ma rozmiar pozostałych (.reader-close), więc wysokość nagłówka się nie zmienia.
   ⚠ Reguła „domyślnie ukryta” stoi WYŻEJ, przed @container (obok .rh-more-btn) — tutaj wygrałaby z nim kolejnością. */
.rh-spam-ikona.spam-on[b-g4ufztonjl] { color: var(--danger); }
@media (max-width: 820px) {
    .rh-spam-ikona[b-g4ufztonjl] { display: none; }
}

/* Mobile — przycisk powrotu do listy (drill-down). Desktop: ukryty (lista jest obok). */
.reader-back[b-g4ufztonjl] { display: none; }
@media (max-width: 820px) {
    .reader-back[b-g4ufztonjl] {
        display: inline-grid; place-items: center; flex: none;
        width: 36px; height: 36px; margin-right: 0.15rem;
        border: none; background: none; border-radius: var(--radius-sm);
        color: var(--text); cursor: pointer;
    }
    .reader-back svg[b-g4ufztonjl] { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
    .reader-head[b-g4ufztonjl] { padding: 0.4rem 0.75rem 0.45rem; }

    /* Temat: CAŁA szerokość, POD paskiem ikon. Wcześniej siedział między „‹" a rzędem siedmiu ikon
       (zostawało mu ~90 px) i zawijał się na cztery linijki. Bez zmiany DOM: flex-wrap + order —
       back(0) → actions(2) → subject(3, flex-basis 100% = własny rząd).
       Większy/mocniejszy tytuł = więcej obecności, mniej wrażenia pustej przestrzeni w nagłówku. */
    .rh-top[b-g4ufztonjl] { align-items: center; flex-wrap: wrap; gap: 0; }
    .rh-actions[b-g4ufztonjl] { order: 2; gap: 0.1rem; }
    .rh-subject[b-g4ufztonjl] {
        order: 3; flex-basis: 100%; margin-top: 0.05rem;
        font-size: 1.35rem; line-height: 1.2;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* „×" zbędny — „‹" po lewej robi dokładnie to samo (powrót do listy). */
    .rh-close-x[b-g4ufztonjl] { display: none; }

    /* Menu „⋯" jest już włączone wyżej (max-width: 1800px) — tu nie ma czego powtarzać. */
}

/* Odstęp między WIERSZAMI (0,3 rem) jest mniejszy niż między elementami w wierszu (0,6 rem):
   gdy tagi nie zmieszczą się obok statusów i zejdą niżej, mają stać blisko, a nie o cały odstęp. */
.rh-meta[b-g4ufztonjl] { display: flex; align-items: center; gap: 0.3rem 0.6rem; margin-top: 0.3rem; flex-wrap: wrap; }
/* Status i status serwisowy wątku (K2) — pierwsze w wierszu, w kolorach statusów (plakietki: PlakietkaStatusu). */
.rh-statusy[b-g4ufztonjl] { display: inline-flex; min-width: 0; max-width: 100%; }
/* Dane wątku (skrzynka / klient / szkic). DESKTOP: display:contents → leżą płasko w .rh-meta jak dawniej,
   a „szczegóły" nie istnieje (tam wszystko widać od razu). MOBILE: chowają się — patrz media query niżej. */
.rh-facts[b-g4ufztonjl] { display: contents; }
.rh-details-btn[b-g4ufztonjl] { display: none; }
.rh-channel[b-g4ufztonjl] { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 12.5px; color: var(--text-soft); }
.rh-channel .channel-icon[b-g4ufztonjl] { width: 18px; height: 18px; font-size: 10px; }
.rh-sub[b-g4ufztonjl] { color: var(--text-faint); font-size: 12px; }

/* Chip „masz szkic odpowiedzi" w nagłówku (scoped — .draft-chip z Email.razor.css nie przekracza granicy komponentu)
   ⚠ Kolory ZE ZMIENNYCH, tak jak przycisk „Dokończ odpowiedź” na pasku pod wątkiem (11.10.2026, próba końcowa):
     wpisany na stałe brąz #8a6512 na `--warn-bg` w motywie ciemnym dawał ciemny napis na ciemnym tle — plakietki
     nie dało się przeczytać, choć przycisk obok (te same zmienne co niżej) był czytelny. */
.draft-chip[b-g4ufztonjl] {
    display: inline-flex; align-items: center; gap: 0.28rem;
    padding: 0 6px; height: 18px; border-radius: 999px;
    background: var(--warn-bg); color: var(--warn-mocny); border: 1px solid var(--warn);
    font-size: 10.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; flex: none;
}
.draft-chip svg[b-g4ufztonjl] { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Gwiazdka „Oznaczone" w nagłówku czytnika (reużywa .reader-close jako baza ikony 32px) */
.rh-star svg[b-g4ufztonjl] { fill: none; }
.rh-star:hover[b-g4ufztonjl] { color: var(--warn); }
.rh-star.starred[b-g4ufztonjl] { color: var(--warn); }
.rh-star.starred svg[b-g4ufztonjl] { fill: currentColor; }

/* „To nie spam" — subtelne wyróżnienie przycisku gdy konwersacja jest już w Spamie */
.rh-actions .btn.spam-on[b-g4ufztonjl] { color: var(--danger); }

/* ── Etykieta poczty w nagłówku (single, mailowy system ODRĘBNY od tagów) — chip aktualnej + dropdown zmiany ── */
.rh-label[b-g4ufztonjl] { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; }
/* Chip = PRZYCISK (sam otwiera listę). Wcześniej był <span> + osobne „zmień" obok — chip wyglądał
   na klikalny, ale nie był, a na dotyku to pierwsza rzecz, w którą celuje palec. */
.rh-label-chip[b-g4ufztonjl] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 1px 6px 1px 7px; height: 20px; border-radius: 999px;
    background: color-mix(in srgb, var(--rh-lbl-color, #3b82f6) 14%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--rh-lbl-color, #3b82f6) 45%, transparent);
    font-family: inherit; font-size: 11px; color: var(--text); white-space: nowrap; max-width: 220px;
    cursor: pointer;
}
.rh-label-chip:hover[b-g4ufztonjl], .rh-label-chip.on[b-g4ufztonjl] {
    background: color-mix(in srgb, var(--rh-lbl-color, #3b82f6) 24%, var(--paper));
    border-color: var(--rh-lbl-color, #3b82f6);
}
.rh-label-caret[b-g4ufztonjl] { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.4; flex: none; opacity: .5; transition: transform .15s; }
.rh-label-chip.on .rh-label-caret[b-g4ufztonjl] { transform: rotate(180deg); opacity: .8; }
.rh-label-dot[b-g4ufztonjl] { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--rh-lbl-color, #3b82f6); }
.rh-label-dot.none[b-g4ufztonjl] { background: none; border: 1.5px dashed var(--line-strong); }
.rh-label-name[b-g4ufztonjl] { overflow: hidden; text-overflow: ellipsis; }
.rh-label-btn[b-g4ufztonjl] {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 1px 8px; height: 20px; border-radius: 999px;
    border: 1px dashed var(--line-strong); background: none;
    font-family: inherit; font-size: 11px; color: var(--text-soft); cursor: pointer;
}
.rh-label-btn:hover[b-g4ufztonjl], .rh-label-btn.on[b-g4ufztonjl] { border-color: var(--p1); color: var(--p1); background: var(--ok-bg); }
.rh-label-btn svg[b-g4ufztonjl] { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }
.rh-label-backdrop[b-g4ufztonjl] { position: fixed; inset: 0; z-index: 40; }
.rh-label-menu[b-g4ufztonjl] {
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 41;
    display: flex; flex-direction: column; gap: 1px;
    min-width: 190px; max-height: 260px; overflow-y: auto; padding: 4px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
    animation: ai-menu-pop-b-g4ufztonjl .16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rh-label-opt[b-g4ufztonjl] {
    display: flex; align-items: center; gap: 0.5rem; text-align: left; width: 100%;
    padding: 0.4rem 0.5rem; border: none; background: none; border-radius: 7px;
    cursor: pointer; color: var(--text); font-family: inherit; font-size: 12.5px;
}
.rh-label-opt:hover[b-g4ufztonjl] { background: var(--cream-2); }
.rh-label-opt.sel[b-g4ufztonjl] { background: var(--ok-bg); font-weight: 600; }
.rh-label-empty[b-g4ufztonjl] { padding: 0.5rem 0.55rem; font-size: 11.5px; color: var(--text-soft); }

/* ── A5/A6 — etykiety wątku w nagłówku (chipy z „×", „+ etykieta", propozycje AI) ── */
/* ⚠ BEZ WŁASNEGO WIERSZA (11.10.2026). Do tego dnia tagi miały wymuszony osobny wiersz — także wtedy,
   gdy w wątku stał sam przycisk „+ tag” (czyli prawie zawsze): 20 px wysokości i dwa odstępy na jeden
   mały przycisk. Teraz stoją w wierszu ze statusem, skrzynką i etykietą; gdy się nie mieszczą,
   `.rh-meta` zawija je do następnego wiersza SAM (`flex-wrap`), a tam zawijają się dalej w sobie.
   Próg szerokości nie jest tu potrzebny — o zawinięciu decyduje to, ile tagów naprawdę jest. */
.rh-tags[b-g4ufztonjl] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.rh-tag[b-g4ufztonjl] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 1px 4px 1px 7px; height: 20px; border-radius: 999px;
    background: color-mix(in srgb, var(--rh-tag-color, #9ca3af) 12%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--rh-tag-color, #9ca3af) 45%, transparent);
    font-size: 11px; color: var(--text); white-space: nowrap; max-width: 220px;
}
.rh-tag-dot[b-g4ufztonjl] { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--rh-tag-color, #9ca3af); }
.rh-tag-name[b-g4ufztonjl] { overflow: hidden; text-overflow: ellipsis; }
.rh-tag-x[b-g4ufztonjl] { border: none; background: none; padding: 0 2px; font-size: 14px; line-height: 1; color: var(--text-faint); cursor: pointer; border-radius: 50%; flex: none; }
.rh-tag-x:hover[b-g4ufztonjl] { color: var(--danger); }

.rh-tagadd[b-g4ufztonjl] { position: relative; display: inline-flex; }
.rh-tagadd-btn[b-g4ufztonjl] {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 1px 8px; height: 20px; border-radius: 999px;
    border: 1px dashed var(--line-strong); background: none;
    font-family: inherit; font-size: 11px; color: var(--text-soft); cursor: pointer;
}
.rh-tagadd-btn:hover[b-g4ufztonjl], .rh-tagadd-btn.on[b-g4ufztonjl] { border-color: var(--p1); color: var(--p1); background: var(--ok-bg); }
.rh-tagadd-btn svg[b-g4ufztonjl] { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.4; flex: none; }

.rh-tag-backdrop[b-g4ufztonjl] { position: fixed; inset: 0; z-index: 40; }
.rh-tag-menu[b-g4ufztonjl] {
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 41;
    display: flex; flex-direction: column; gap: 1px;
    min-width: 190px; max-height: 260px; overflow-y: auto; padding: 4px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
    animation: ai-menu-pop-b-g4ufztonjl .16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rh-tag-opt[b-g4ufztonjl] {
    display: flex; align-items: center; gap: 0.5rem; text-align: left; width: 100%;
    padding: 0.4rem 0.5rem; border: none; background: none; border-radius: 7px;
    cursor: pointer; color: var(--text); font-family: inherit; font-size: 12.5px;
}
.rh-tag-opt:hover[b-g4ufztonjl] { background: var(--cream-2); }
.rh-tag-empty[b-g4ufztonjl] { padding: 0.5rem 0.55rem; font-size: 11.5px; color: var(--text-soft); }

.rh-ai-sug[b-g4ufztonjl] { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; }
.rh-ai-sug-lbl[b-g4ufztonjl] { font-size: 10.5px; color: var(--text-soft); font-weight: 600; }
.rh-ai-chip[b-g4ufztonjl] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 1px 8px 1px 6px; height: 20px; border-radius: 999px;
    border: 1px dashed color-mix(in srgb, var(--rh-tag-color, #9ca3af) 55%, transparent);
    background: none; font-family: inherit; font-size: 11px; color: var(--text-soft); cursor: pointer;
}
.rh-ai-chip:hover[b-g4ufztonjl] { background: color-mix(in srgb, var(--rh-tag-color, #9ca3af) 14%, var(--paper)); color: var(--text); }

/* ══ #8 — mobilny nagłówek: progressive disclosure danych wątku ══════════════════════════════════
   ⚠ Ten blok MUSI stać PO bazowych .rh-meta/.rh-label/.rh-tags — ta sama specyficzność, więc
   decyduje kolejność w pliku. Media query wyżej (przy .reader-back) przegrałaby z bazą niżej. */
@media (max-width: 820px) {
    .rh-meta[b-g4ufztonjl] { gap: 0.35rem 0.4rem; margin-top: 0.3rem; }

    /* Widoczne od razu: chip etykiety + „+ tag" + „szczegóły". Reszta pod rozwinięciem. */
    .rh-label[b-g4ufztonjl] { order: 1; }
    .rh-tags[b-g4ufztonjl] { order: 2; flex-basis: auto; flex: 1 1 auto; min-width: 0; margin-top: 0; }
    .rh-details-btn[b-g4ufztonjl] {
        order: 3; margin-left: auto; flex: none;
        display: inline-flex; align-items: center; gap: 0.2rem;
        padding: 1px 7px; height: 20px; border-radius: 999px;
        border: 1px solid var(--line-strong); background: none;
        font-family: inherit; font-size: 11px; color: var(--text-soft); cursor: pointer;
    }
    .rh-details-btn svg[b-g4ufztonjl] { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.4; flex: none; transition: transform .15s; }
    .rh-details-btn.on[b-g4ufztonjl] { border-color: var(--p1); color: var(--p1); background: var(--ok-bg); }
    .rh-details-btn.on svg[b-g4ufztonjl] { transform: rotate(180deg); }

    /* Skrzynka / klient / szkic — trzy linijki nad treścią, potrzebne rzadko. */
    .rh-facts[b-g4ufztonjl] {
        display: none; order: 4; flex-basis: 100%;
        flex-direction: column; align-items: flex-start; gap: 0.3rem;
        margin-top: 0.35rem; padding-top: 0.4rem; border-top: 1px dashed var(--line);
    }
    .rh-meta.open .rh-facts[b-g4ufztonjl] { display: flex; }
    .rh-sub[b-g4ufztonjl] { line-height: 1.45; }
}

/* R2.2 — pasek szukania w wątku */
.rh-search-toggle.on[b-g4ufztonjl] { background: var(--cream-2); color: var(--p1); }
.rh-search[b-g4ufztonjl] { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; padding: 0.3rem 0.5rem; background: var(--cream); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.rh-search > svg[b-g4ufztonjl] { width: 15px; height: 15px; stroke: var(--line-faint); fill: none; stroke-width: 2; flex: none; }
.rh-search input[b-g4ufztonjl] { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--text); }
.rh-search input[b-g4ufztonjl]::placeholder { color: var(--text-faint); }
.rh-search-count[b-g4ufztonjl] { font-size: 11.5px; color: var(--p1); font-weight: 600; white-space: nowrap; flex: none; }
.rh-search-scope[b-g4ufztonjl] { font-size: 11px; color: var(--text-soft); white-space: nowrap; flex: none; }
.rh-search-clear[b-g4ufztonjl] { width: 22px; height: 22px; display: inline-grid; place-items: center; border: none; background: none; border-radius: var(--radius-sm); color: var(--text-faint); cursor: pointer; flex: none; }
.rh-search-clear:hover[b-g4ufztonjl] { background: var(--line); color: var(--text); }
.rh-search-clear svg[b-g4ufztonjl] { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

/* R2.1 — „załaduj starsze" nad listą wiadomości */
.load-older[b-g4ufztonjl] { align-self: center; margin: 0.3rem 0 0.5rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.9rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--text-soft); font-size: 12px; font-family: inherit; cursor: pointer; }
.load-older:hover:not(:disabled)[b-g4ufztonjl] { border-color: var(--p1); color: var(--text); }
.load-older:disabled[b-g4ufztonjl] { opacity: .6; cursor: default; }
.load-older svg[b-g4ufztonjl] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* R2.2 — podświetlenie dopasowanych / przygaszenie reszty */
.msg.match[b-g4ufztonjl] { border-color: var(--p1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--global-palette1) 18%, transparent); }
.msg.collapsed.dim[b-g4ufztonjl] { opacity: .4; }
.msg.collapsed.dim:hover[b-g4ufztonjl] { opacity: .85; }

/* ── Lista wiadomości ── */
.reader-scroll[b-g4ufztonjl] {
    position: relative;         /* kotwica wskaźnika pull-to-refresh (.abc-ptr) */
    flex: 1 1 auto;
    min-height: 220px;          /* lista wiadomości ZAWSZE ma miejsce + własny scroll (nie kurczy się do zera) */
    overflow-y: auto;
    overscroll-behavior-y: contain;  /* zabija natywny pull-to-refresh Chrome/WebView + scroll-chaining */
    padding: 0.7rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--cream);
    scrollbar-width: thin;
    scrollbar-color: var(--line-faint) transparent;
    /* Najmniejsza wysokość ostatniej rozwiniętej karty. Wartość startowa = zwykła karta; właściwą podaje
       skrypt (abcCzytnikWidok), gdy zmierzy pole — patrz reguła `.msg[data-ostatni]` niżej. */
    --czytnik-ostatni-min: 50px;
}
.reader-scroll[b-g4ufztonjl]::-webkit-scrollbar { width: 12px; }
.reader-scroll[b-g4ufztonjl]::-webkit-scrollbar-thumb { background: var(--line-faint); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
.reader-scroll[b-g4ufztonjl]::-webkit-scrollbar-thumb:hover { background: var(--text-soft); background-clip: content-box; }

.msg[b-g4ufztonjl] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    min-height: 50px;   /* każda wiadomość ma min. 50px (równy rytm rzędów) */
    /* Karta w przewijanej liście NIE może się kurczyć: element flex-column .reader-scroll
       inaczej ściska rozwiniętą wiadomość do min-height:50px, a overflow:hidden obcina treść
       (BUG „po kliknięciu brak 40vh/wysokości tekstu"). flex:none = trzymaj wysokość treści,
       kontener .reader-scroll przewija. Od 12.10.2026 rozwinięta nie ma już własnego sufitu. */
    flex: none;
}
.msg-head[b-g4ufztonjl] { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.9rem; cursor: pointer; }
.msg-head .avatar-circle[b-g4ufztonjl] { flex: none; }
.mh-body[b-g4ufztonjl] { min-width: 0; flex: 1; }
.mh-from[b-g4ufztonjl] { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-from small[b-g4ufztonjl] { color: var(--text-soft); font-weight: 400; font-size: 11.5px; margin-left: 0.35rem; }
.mh-dir[b-g4ufztonjl] { font-size: 11px; color: var(--text-soft); margin-top: 1px; display: inline-flex; align-items: center; gap: 0.25rem; }
.mh-date[b-g4ufztonjl] { font-size: 11px; color: var(--text-soft); font-family: 'Geist Mono', monospace; white-space: nowrap; flex: none; align-self: flex-start; }
.mh-tick[b-g4ufztonjl] { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; flex: none; }
/* „Wysłane" — ciche (szare); wyróżniają się tylko stany wymagające uwagi. */
.mh-dir.d-delivered[b-g4ufztonjl] { color: var(--text-faint); }
.mh-dir.d-pending[b-g4ufztonjl] { color: var(--warn); }
.mh-dir.d-failed[b-g4ufztonjl] { color: var(--danger); font-weight: 600; }

/* collapsed = slim jednoliniowy rząd, bez chrome karty — równy rytm z rozwiniętymi kartami.
   Bez margin-top:-1px (rytm daje gap w .reader-scroll). Padding większy → spójna wysokość rzędu ~38px. */
.msg.collapsed[b-g4ufztonjl] { box-shadow: none; background: transparent; border-color: transparent; border-radius: var(--radius-sm); display: flex; align-items: center; }
.msg.collapsed:hover[b-g4ufztonjl] { background: var(--paper); border-color: var(--line); box-shadow: var(--shadow-sm); }
.msg.collapsed .msg-head[b-g4ufztonjl] { padding: 0.42rem 0.7rem; gap: 0.5rem; flex: 1; width: 100%; }
.msg.collapsed .mh-from[b-g4ufztonjl] { font-size: 12px; font-weight: 500; flex: none; }
.msg.collapsed .mh-body[b-g4ufztonjl] { display: flex; align-items: baseline; gap: 0.4rem; }
.msg.collapsed .mh-date[b-g4ufztonjl] { font-size: 10.5px; }
.msg.collapsed .mh-preview[b-g4ufztonjl] { color: var(--text-soft); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.msg-body-wrap[b-g4ufztonjl] { border-top: 1px solid var(--line); }
.msg-body[b-g4ufztonjl] { padding: 0.85rem 1.1rem; font-size: 13.5px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.msg-body-text[b-g4ufztonjl] { white-space: normal; }

/* ⚠ ROZWINIĘTY LIST NIE MA WŁASNEGO PRZEWIJANIA W PIONIE (12.10.2026, właściciel: „otwarty mail może być
   na całą wysokość tego pola z mailami; wtedy przewijasz do góry i masz pozostałe maile”). Stały tu sufity
   40vh z własnym paskiem — na ekranie 900 px list miał okienko 360 px, a pod nim zostawało puste tło.
   Teraz list ma wysokość swojej treści, a przewija się CZYTNIK (.reader-scroll). W poziomie zostaje jak
   było: szeroka tabela przewija się wewnątrz karty i nie rozpycha czytnika (list w ramce robi to we
   własnym dokumencie — `.abc-frame-wrap` w DokumentRamki). */
.msg-body-html[b-g4ufztonjl] { overflow-x: auto; overflow-y: hidden; }
.msg-body-html[b-g4ufztonjl]::-webkit-scrollbar { height: 8px; }
.msg-body-html[b-g4ufztonjl]::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

/* ⚠ OSTATNI ROZWINIĘTY LIST SIĘGA DO DOŁU POLA. Krótki list zostawiał pod kartą puste tło czytnika aż do
   paska „Odpowiedz”. Wysokość liczy skrypt (abcCzytnikWidok w abc-email-frame.js) i podaje zmienną na
   polu wiadomości (a ostatnią kartę znaczy atrybutem `data-ostatni`): tyle, żeby przy widoku ustawionym na najnowszym liście karta kończyła się równo z polem.
   Arkusz sam tego nie policzy — pole zmienia wysokość, gdy otwiera się odpowiedź, a nad listem stoi
   zmienna liczba wierszy. Bez skryptu (zmienna pusta) zostaje zwykłe 50 px, czyli stan sprzed zmiany.
   Pusta przestrzeń, jeśli jest, leży WEWNĄTRZ karty, pod treścią. */
.reader-scroll > .msg[data-ostatni]:not(.collapsed)[b-g4ufztonjl] { min-height: var(--czytnik-ostatni-min, 50px); }

/* Nasza treść (outbound/notatka) renderowana INLINE — bez iframe (patrz EmailThreadReader.razor).
   Wysokość = wysokość treści, więc krótkie „Ok" to mały bąbel, nie pusty 150px iframe. */
/* ⚠ `::deep` jest tu OBOWIĄZKOWE. Treść wchodzi do .msg-body-html przez MarkupString, więc jej <img>
   NIGDY nie dostanie atrybutu zakresu (b-…) — poprzedni zapis `.msg-body-html img` kompilował się do
   `.msg-body-html img[b-…]` i nie łapał ani jednego obrazka z wiadomości. Reguła wyglądała na zrobioną
   i nie robiła nic (sprawdzone w wygenerowanym ABCare.Web.styles.css). `::deep` przenosi zakres na
   .msg-body-html, który JEST pisany w .razor, więc atrybut ma.

   Limit wysokości: rozmiar obrazka wybiera nadawca — zdjęcie 4000 px wysokości zajmuje kilka ekranów.
   Kadrujemy do 360 px, pełny rozmiar jest o jedno kliknięcie (abc-lightbox.js łapie kliknięcia w całym
   .reader-scroll). `!important` — inline `style` z treści wiadomości wygrałby ze zwykłą regułą;
   `object-fit` ratuje proporcje, gdy w treści podano jawną wysokość. */
.msg-body-html[b-g4ufztonjl]  img {
    max-width: 100% !important;
    max-height: 360px !important;
    height: auto;
    object-fit: contain;
    object-position: left center;
    cursor: zoom-in;
}
.msg-body-html[b-g4ufztonjl]  img.abc-inline-img { border-radius: var(--radius-sm); margin: 0.3rem 0; }

/* Plik się NIE zdekodował — zamiast ikony zepsutej grafiki schludna ramka o stałej wysokości.
   Klasę dopina abc-email-images.js na zdarzenie `error` (sam CSS tego stanu nie wykryje);
   zmieniamy wygląd elementu, a nie strukturę, bo treść MarkupString należy do Blazora. */
.msg-body-html[b-g4ufztonjl]  img.abc-img-broken {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 320px !important;
    height: 132px !important;
    max-height: 132px !important;
    background: var(--cream-2);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    cursor: default;
    font-size: 0;
}
.msg-body-html[b-g4ufztonjl]  img.abc-img-broken::after {
    content: "Nie udało się wyświetlić obrazka";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 0.75rem;
    text-align: center;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-faint);
}
.msg-body-html a[b-g4ufztonjl] { color: var(--ch-email, #0b6b3a); text-decoration: underline; text-underline-offset: 2px; }
.msg-body-html p[b-g4ufztonjl] { margin: 0 0 0.5rem; }
.msg-body-html ul[b-g4ufztonjl], .msg-body-html ol[b-g4ufztonjl] { margin: 0.2rem 0 0.5rem; padding-left: 1.4rem; }
.msg-body-html blockquote[b-g4ufztonjl] { margin: 0.3rem 0; padding-left: 0.8rem; border-left: 3px solid var(--line-strong); color: var(--text-soft); }
.msg-body-html > :last-child[b-g4ufztonjl] { margin-bottom: 0; }
.msg-body-html > :first-child[b-g4ufztonjl] { margin-top: 0; }

/* Render maila w izolowanym iframe — własny reset, białe tło, auto-height (JS abcEmailFrame.fit).
   Białe tło jest ŚWIADOME: mail przychodzi z kolorami dobranymi przez nadawcę pod jasne tło, więc
   przemalowanie go na ciemne psuje czytelność treści, na którą nie mamy wpływu. */
.msg-frame[b-g4ufztonjl] {
    display: block;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 44px;
    background: #fff;
    color-scheme: light;
}

/* ── Ciemny motyw: KARTKA, NIE DZIURA (20.09.2026, właściciel: „edytor w dark mode lipa") ────────
   Zrzut z telefonu: biały prostokąt pełnej szerokości, bez ramki i bez zaokrągleń, wklejony w prawie
   czarny ekran — wyglądał jak wyrwa w interfejsie, a nie jak wiadomość. Treści maila nie wolno
   przemalować (patrz wyżej), więc zmieniamy OPRAWĘ: kartka ma widoczny brzeg, cień i jest lekko
   przygaszona, żeby nie świeciła. `brightness` dotyka też tekstu — i o to chodzi: czerń na bieli
   robi się ciemną szarością na kremie, czyli kontrast, jaki ma papier. */
/* ⚠ Te same dwa warunki, co w `app.css`: jawny wybór ciemnego motywu ORAZ ustawienie systemowe,
   gdy człowiek nie wybrał nic. Sam `[data-theme="dark"]` pomija domyślnych — a to oni widzą ciemny
   ekran najczęściej. */
[data-theme="dark"] .msg-frame[b-g4ufztonjl] {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    filter: brightness(0.9);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .msg-frame[b-g4ufztonjl] {
        border-color: rgba(255, 255, 255, 0.16);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
        filter: brightness(0.9);
    }
}

/* „Pokaż w nowym oknie” w nagłówku rozwiniętego listu — cicha ikona za datą; cel 28 px pod kursorem,
   36 px na dotyku (telefon nie ma osobnego menu listu, więc przycisk stoi w tym samym miejscu). */
.msg-okno[b-g4ufztonjl] {
    flex: none;
    align-self: flex-start;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: -5px -4px -5px 0;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
}
.msg-okno:hover[b-g4ufztonjl] { background: var(--cream-2); color: var(--text); }
.msg-okno:focus-visible[b-g4ufztonjl] { outline: 2px solid var(--p1); outline-offset: 1px; }
.msg-okno svg[b-g4ufztonjl] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (pointer: coarse) {
    .msg-okno[b-g4ufztonjl] { width: 36px; height: 36px; margin: -8px -6px -8px 0; }
}

/* „W tej wiadomości ukryto N obrazków z internetu” — w karcie wiadomości, nad jej treścią. */
.img-bar[b-g4ufztonjl] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.7rem 1.1rem 0;
    padding: 0.5rem 0.8rem;
    background: var(--warn-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--warn);
}
.img-bar svg[b-g4ufztonjl] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; flex: none; }
.img-bar .btn[b-g4ufztonjl] { margin-left: auto; flex: none; }

/* Rekonstrukcja cytatu z wątku */
.quote-toggle[b-g4ufztonjl] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.2rem 1.3rem 1rem;
    padding: 0.2rem 0.6rem;
    background: var(--cream-2);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-soft);
    cursor: pointer;
    font-weight: 500;
    user-select: none;
}
.quote-toggle:hover[b-g4ufztonjl] { background: var(--line); }
.quote-toggle .dots[b-g4ufztonjl] { font-family: 'Geist Mono', monospace; letter-spacing: 1px; }
.quoted[b-g4ufztonjl] {
    margin: 0 1.3rem 1.1rem;
    border-left: 3px solid var(--line-strong);
    padding: 0.35rem 0 0.35rem 0.9rem;
    color: var(--text-faint);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}
.quoted .qmeta[b-g4ufztonjl] { font-style: italic; margin-bottom: 0.25rem; }
.quoted :is(p)[b-g4ufztonjl] { margin: 0 0 0.5rem; }

/* Załączniki */
.msg-atts[b-g4ufztonjl] { display: flex; gap: 0.5rem; padding: 0 1.3rem 1.1rem; flex-wrap: wrap; }
.att[b-g4ufztonjl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text);
    text-decoration: none;
    max-width: 260px;
}
.att:hover[b-g4ufztonjl] { border-color: var(--p1); }
.att svg[b-g4ufztonjl] { width: 15px; height: 15px; color: var(--ch-email); stroke: currentColor; fill: none; stroke-width: 1.7; flex: none; }
.att .att-name[b-g4ufztonjl] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att .as[b-g4ufztonjl] { color: var(--text-soft); font-family: 'Geist Mono', monospace; font-size: 10.5px; flex: none; }
/* K3-3 — załączniki z podglądem (obraz/PDF) i „Pobierz wszystkie" */
.att.att-preview[b-g4ufztonjl] { cursor: zoom-in; }
.att.att-preview:hover[b-g4ufztonjl] { background: var(--ok-bg); }
.att.att-zip[b-g4ufztonjl] { background: none; border-style: dashed; color: var(--text-soft); cursor: pointer; }
.att.att-zip:hover[b-g4ufztonjl] { border-color: var(--p1); color: var(--p1); background: var(--ok-bg); }
.att.att-zip svg[b-g4ufztonjl] { color: var(--text-soft); }
.att.att-zip:hover svg[b-g4ufztonjl] { color: var(--p1); }
/* Załącznik trwale usunięty (retencja lub limit miejsca) — nie jest odnośnikiem,
   bo nie ma dokąd prowadzić. Ma wyglądać na nieaktywny, ale nadal być czytelny. */
.att.att-gone[b-g4ufztonjl] { cursor: help; opacity: .62; border-style: dashed; text-decoration: line-through; }
.att.att-gone:hover[b-g4ufztonjl] { border-color: var(--line); opacity: .85; }
.att.att-gone svg[b-g4ufztonjl] { color: var(--text-faint); }
.att.att-gone .as[b-g4ufztonjl] { text-decoration: none; font-style: italic; }

/* ── Pasek akcji pod wątkiem: „Odpowiedz”, „Odp. wszystkim”, „Przekaż dalej” ───────────────────────
   Do 11.10.2026 pasek był tylko na telefonie, a na komputerze pole odpowiedzi stało pod wątkiem ZAWSZE:
   co najmniej ok. 260 px zabrane treści listu także wtedy, gdy człowiek tylko czyta. Właściciel:
   „odpowiedź dać schowaną i przycisk «Odpowiedz» i dopiero wtedy pokazuje się pole”.

   Teraz oba układy mają pasek, a różni je to, co pasek otwiera:
     • komputer (blok niżej) — pole w miejscu, pod wątkiem; pasek ustępuje mu miejsca;
     • telefon (blok @media max-width: 820px dalej w pliku) — arkusz na cały ekran, jak dotąd.
   Reguły wyglądu przycisków są rozdzielone na te dwa bloki celowo: telefon ma swoje wymiary pod palec
   i ta zmiana nie rusza tam ani jednej deklaracji. */
.reader-actionbar[b-g4ufztonjl] { display: none; }
/* Napis przy ikonie „Odpowiedz” i przycisk chowania pola — tylko komputer (patrz blok niżej). */
.ab-icon-txt[b-g4ufztonjl] { display: none; }
.reply-zwin[b-g4ufztonjl] { display: none; }

@media (min-width: 821px) {
    /* ⚠ display:none, NIE usunięcie z drzewa — z tego samego powodu co na telefonie: edytor musi żyć,
       żeby autozapis szkicu, wgrane pliki i „Cofnij” wysyłki miały do czego wrócić. Odczyt treści
       bierze innerHTML, więc brak układu mu nie przeszkadza.
       Pole widać, gdy jest otwarte w miejscu (.otwarte) albo rozwinięte do okna (.expanded). */
    .reply-dock:not(.otwarte):not(.expanded)[b-g4ufztonjl] { display: none; }

    .reader-actionbar[b-g4ufztonjl] {
        display: flex; align-items: center; gap: 0.5rem; flex: none;
        padding: 0.5rem 1.1rem;
        background: var(--paper); border-top: 1px solid var(--line);
    }
    /* Pole otwarte → pasek znika. „Wszystkim” stoi wtedy w nagłówku pola, „Przekaż” w akcjach wątku
       u góry — a dwa przyciski „Odpowiedz” naraz to pytanie, który z nich działa. */
    .reader-actionbar.pole-otwarte[b-g4ufztonjl] { display: none; }

    .ab-row[b-g4ufztonjl] { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
    /* Kształt jak `.btn-primary` / `.btn-secondary` z arkusza wspólnego (promień, obwódka, kolory), ale 32 px
       zamiast 28 px z `.btn-sm`: to jedyne wejście do pisania odpowiedzi, więc cel ma być wygodny. */
    .ab-icon[b-g4ufztonjl],
    .ab-btn[b-g4ufztonjl] {
        display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
        height: 32px; padding: 0 0.85rem; border-radius: var(--radius);
        border: 1px solid var(--line-strong); background: var(--paper);
        color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 500;
        white-space: nowrap; cursor: pointer;
        transition: background .15s, border-color .15s;
    }
    .ab-icon svg[b-g4ufztonjl],
    .ab-btn svg[b-g4ufztonjl] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
    .ab-btn:hover[b-g4ufztonjl] { background: var(--cream-2); border-color: var(--p3); }
    /* „Odpowiedz” — jedyny przycisk z wypełnieniem: to po niego człowiek sięga najczęściej. */
    .ab-icon[b-g4ufztonjl],
    .ab-btn.ab-btn-main[b-g4ufztonjl] { background: var(--global-palette1); border-color: transparent; color: var(--text-light); font-weight: 600; }
    .ab-icon:hover[b-g4ufztonjl],
    .ab-btn.ab-btn-main:hover[b-g4ufztonjl] { background: color-mix(in srgb, var(--global-palette1) 86%, black); border-color: transparent; }
    .ab-icon-txt[b-g4ufztonjl] { display: inline; }
    /* Szkic czeka: bursztyn i „Dokończ odpowiedź”. Ten stan widać na komputerze tylko wtedy, gdy człowiek
       sam schował pole z treścią — wątek ze szkicem otwiera pole od razu. */
    .ab-icon.has-draft[b-g4ufztonjl],
    .ab-btn.ab-btn-main.has-draft[b-g4ufztonjl] { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-mocny); }
    .ab-icon.has-draft:hover[b-g4ufztonjl],
    .ab-btn.ab-btn-main.has-draft:hover[b-g4ufztonjl] { background: color-mix(in srgb, var(--warn-bg) 80%, var(--warn)); border-color: var(--warn); }
    /* „Odrzuć szkic” — niszczy, więc daleko od „Dokończ”: przy przeciwnej krawędzi i bez wypełnienia. */
    .ab-discard[b-g4ufztonjl] {
        margin-left: auto; flex: none;
        display: inline-flex; align-items: center; gap: 0.3rem;
        height: 32px; padding: 0 0.6rem; border: none; background: none; border-radius: var(--radius-sm);
        color: var(--danger); font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
    }
    .ab-discard svg[b-g4ufztonjl] { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
    .ab-discard:hover[b-g4ufztonjl] { background: var(--danger-bg); }

    /* „Schowaj pole odpowiedzi” — obok „rozwiń do okna”, ten sam wygląd. W oknie go nie ma: tam jedyną
       drogą wyjścia jest „zwiń”, które wraca do pola w miejscu. */
    .reply-dock.otwarte:not(.expanded) .reply-zwin[b-g4ufztonjl] {
        flex: none; width: 26px; height: 26px; display: inline-grid; place-items: center;
        border: none; background: none; border-radius: var(--radius-sm); color: var(--text-faint); cursor: pointer;
    }
    .reply-dock.otwarte:not(.expanded) .reply-zwin:hover:not(:disabled)[b-g4ufztonjl] { background: var(--cream-2); color: var(--text); }
    .reply-zwin:disabled[b-g4ufztonjl] { opacity: .5; cursor: not-allowed; }
    .reply-zwin svg[b-g4ufztonjl] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}

/* Szeroki ekran dotykowy (tablet poziomo): te same przyciski, ale wysokość pod palec — jak `.btn-sm`. */
@media (min-width: 821px) and (pointer: coarse) {
    .ab-icon[b-g4ufztonjl],
    .ab-btn[b-g4ufztonjl],
    .ab-discard[b-g4ufztonjl] { height: 40px; }
    .reply-dock.otwarte:not(.expanded) .reply-zwin[b-g4ufztonjl] { width: 40px; height: 40px; }
}

/* „Tylko podgląd" — w miejscu pola odpowiedzi i przycisków wysyłki stoi jedno spokojne zdanie.
   Ta sama rama co pole (linia u góry, tło), żeby nie wyglądało na komunikat o błędzie. */
.reply-readonly[b-g4ufztonjl] {
    flex: none; border-top: 1px solid var(--line); background: var(--paper);
    padding: 0.8rem 1.1rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
    color: var(--text-soft); font-size: 13px; line-height: 1.5;
}

/* ── Odpowiedź inline ── */
.reply-dock[b-g4ufztonjl] { border-top: 1px solid var(--line); background: var(--paper); padding: 0.8rem 1.1rem 1rem; flex: none; }
.reply-box[b-g4ufztonjl] { border: 1.5px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--paper); overflow: visible; transition: border-color .15s, box-shadow .15s; }
.reply-box:focus-within[b-g4ufztonjl] { border-color: var(--p1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--global-palette1) 10%, transparent); }
.reply-box.sending[b-g4ufztonjl] { opacity: .75; }

/* Zapisany szkic — subtelna bursztynowa poświata + banner „Szkic zapisany automatycznie · czas" */
.reply-box.has-draft[b-g4ufztonjl] { box-shadow: 0 0 0 3px rgba(224, 168, 0, 0.12); }
.draft-banner[b-g4ufztonjl] {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    background: var(--warn-bg);
    border-bottom: 1px solid #f0d9a8;
    font-size: 11.5px; color: #8a6512; font-weight: 500;
}
.draft-banner svg[b-g4ufztonjl] { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.draft-banner .discard[b-g4ufztonjl] { margin-left: auto; color: var(--danger); cursor: pointer; font-weight: 600; }
.draft-banner .discard:hover[b-g4ufztonjl] { text-decoration: underline; }
.reply-from[b-g4ufztonjl] { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem 0.5rem 0.9rem; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-soft); }
.reply-from .rf-text[b-g4ufztonjl] { display: flex; align-items: baseline; gap: 0.35rem; min-width: 0; white-space: nowrap; }
/* Adresat („Do: X") ma pierwszeństwo; skrzynka („z …") ustępuje i ucina się pierwsza (flex-shrink duży). */
.rf-lead[b-g4ufztonjl] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rf-mailbox[b-g4ufztonjl] { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-faint); }
.reply-from strong[b-g4ufztonjl] { color: var(--text); font-weight: 600; }

/* „Wszystkim" / „DW" — akcje przy nagłówku kompozytora (przed ↗ „rozwiń"). */
.rf-btn[b-g4ufztonjl] {
    flex: none; display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.4rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--paper); color: var(--text-soft); font-family: inherit; font-size: 11px; cursor: pointer;
    white-space: nowrap;
}
.rf-btn:hover:not(:disabled)[b-g4ufztonjl] { background: var(--cream-2); color: var(--text); }
.rf-btn.on[b-g4ufztonjl] { border-color: var(--p1); color: var(--p1); background: var(--ok-bg, var(--cream-2)); }
.rf-btn:disabled[b-g4ufztonjl] { opacity: .55; cursor: not-allowed; }
.rf-btn svg[b-g4ufztonjl] { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Pola DW/UDW — pokazywane dopiero po kliknięciu „DW" albo „Wszystkim" (jak w Gmailu). */
.reply-cc[b-g4ufztonjl] { display: flex; flex-direction: column; gap: 1px; border-bottom: 1px solid var(--line); background: var(--cream-2); }
.reply-cc-row[b-g4ufztonjl] { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.9rem; }
.reply-cc-row > span[b-g4ufztonjl] { flex: none; width: 34px; font-size: 11.5px; color: var(--text-soft); }
.reply-cc-row input[b-g4ufztonjl] {
    flex: 1 1 auto; min-width: 0;
    border: none; background: none; outline: none;
    font-family: inherit; font-size: 12.5px; color: var(--text);
}
.reply-cc-row input[b-g4ufztonjl]::placeholder { color: var(--text-faint); }
.composer-expand[b-g4ufztonjl] { margin-left: auto; flex: none; width: 26px; height: 26px; display: inline-grid; place-items: center; border: none; background: none; border-radius: var(--radius-sm); color: var(--text-faint); cursor: pointer; }
.composer-expand:hover[b-g4ufztonjl] { background: var(--cream-2); color: var(--text); }
/* „Wyślij" w nagłówku kompozytora — TYLKO arkusz pełnoekranowy na telefonie (reguła w @media niżej).
   Domyślnie schowany: na desktopie i w zwiniętym docku wysyła przycisk ze stopki. */
.rf-send[b-g4ufztonjl] { display: none; }
.composer-expand svg[b-g4ufztonjl] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reply-area[b-g4ufztonjl] {
    display: block; width: 100%; box-sizing: border-box;
    border: 0; outline: none; resize: vertical;
    padding: 0.75rem 0.9rem; min-height: 110px;
    /* R1.1 — rośnie z tekstem, po limicie scroll; resize:vertical zostawia ręczną kontrolę.
       Cap 20vh (nie 34vh) — inline composer nie zjada listy wątku przy pisaniu; dłuższe pisanie
       → „rozwiń do okna" (.reply-dock.expanded). */
    field-sizing: content; max-height: 26vh; overflow-y: auto;
    color: var(--text); font-size: 13.5px; font-family: inherit; line-height: 1.5; background: transparent;
}
.reply-area[b-g4ufztonjl]::placeholder { color: var(--text-faint); }
.reply-error[b-g4ufztonjl] { padding: 0.3rem 0.9rem; color: var(--danger); font-size: 12px; }
.reply-foot[b-g4ufztonjl] { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.9rem 0.65rem; }
.reply-hint[b-g4ufztonjl] { font-size: 11px; color: var(--text-soft); }
/* Spam — pasek z wynikiem czynności („jest w Spamie”, co z nadawcą) i przyciskiem „Cofnij”. Siedzi nad
   kompozytorem, żeby było go widać bez przewijania. `flex-wrap`: na telefonie przyciski schodzą pod zdanie. */
.spam-prompt[b-g4ufztonjl] {
    display: flex; align-items: center; gap: 0.55rem; flex: none; flex-wrap: wrap;
    padding: 0.55rem 0.9rem; background: var(--warn-bg); border-top: 1px solid #f0d9a8;
}
.spam-prompt > svg[b-g4ufztonjl] { width: 16px; height: 16px; stroke: #8a6512; fill: none; stroke-width: 2; flex: none; }
.spam-prompt.done[b-g4ufztonjl] { background: var(--ok-bg, #eef8f1); border-top-color: #bfe3cc; }
.spam-prompt.done > svg[b-g4ufztonjl] { stroke: var(--p1, #019344); }
/* min-width:0 — inaczej długi adres rozpycha pasek i przyciski uciekają poza obrys. */
.sp-text[b-g4ufztonjl] { flex: 1 1 12rem; min-width: 0; font-size: 12.5px; color: #7a5a10; }
.spam-prompt.done .sp-text[b-g4ufztonjl] { color: var(--text-soft); }
.sp-text strong[b-g4ufztonjl] { overflow-wrap: anywhere; }
.sp-text small[b-g4ufztonjl] { display: block; font-size: 11px; opacity: .8; }
.sp-btn[b-g4ufztonjl] {
    flex: none; height: 30px; padding: 0 0.7rem; border-radius: 8px; cursor: pointer;
    border: 1px solid #dcc089; background: var(--paper); color: #7a5a10;
    font-family: inherit; font-size: 12px; font-weight: 600;
}
.spam-prompt.done .sp-btn[b-g4ufztonjl] { border-color: var(--line); color: var(--text); }
.sp-x[b-g4ufztonjl] {
    flex: none; width: 28px; height: 28px; display: inline-grid; place-items: center;
    border: none; background: none; border-radius: var(--radius-sm); color: var(--text-faint); cursor: pointer;
}
.sp-x:hover[b-g4ufztonjl] { background: var(--line); color: var(--text); }
.sp-x svg[b-g4ufztonjl] { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

/* K3-4 — pasek „Cofnij wysyłkę" (okno przed faktyczną wysyłką). Siedzi NA WĄTKU, nie w kompozytorze:
   po kliknięciu Wyślij kompozytor się zamyka i user wraca do czytania rozmowy.
   Kompozytor jest wtedy chowany klasą (nie usuwany z DOM), żeby „Cofnij" miał co przywrócić. */
.reply-dock.undo-hidden[b-g4ufztonjl], .reader-actionbar.undo-hidden[b-g4ufztonjl] { display: none !important; }
.thread-undo[b-g4ufztonjl] {
    display: flex; align-items: center; gap: 0.5rem; flex: none;
    padding: 0.55rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--warn-bg); border-top: 1px solid #f0d9a8;
}
.thread-undo > svg[b-g4ufztonjl] { width: 16px; height: 16px; stroke: #8a6512; fill: none; stroke-width: 2; flex: none; }
.tu-text[b-g4ufztonjl] { font-size: 13px; color: #8a6512; flex: 1 1 auto; min-width: 0; }
.tu-text strong[b-g4ufztonjl] { font-variant-numeric: tabular-nums; }
.tu-btn[b-g4ufztonjl] {
    flex: none; height: 32px; padding: 0 0.8rem; border-radius: 9px; cursor: pointer;
    border: 1px solid #dcc089; background: var(--paper); color: #7a5a10;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
}
.tu-btn:active[b-g4ufztonjl] { background: color-mix(in srgb, #8a6512 10%, var(--paper)); }
/* „Wyślij teraz" — akcja wprzód, więc odróżniona wypełnieniem od wycofującego „Cofnij". */
.tu-now[b-g4ufztonjl] { background: var(--global-palette1); border-color: transparent; color: #fff; }

/* ── R1.2/R1.3 — podgląd + wybór podpisu ── */
.sig-control[b-g4ufztonjl] { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.sig-pick[b-g4ufztonjl] { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 11.5px; color: var(--text-soft); }
.sig-pick select[b-g4ufztonjl] {
    font-family: inherit; font-size: 11.5px; color: var(--text); background: var(--paper);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0.15rem 0.4rem; max-width: 190px;
}
.sig-toggle[b-g4ufztonjl] { border: none; background: none; padding: 0; font-size: 11.5px; color: var(--p1); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.sig-toggle:hover[b-g4ufztonjl] { color: var(--p1); }
.sig-preview[b-g4ufztonjl] { margin: 0 0.9rem 0.2rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--cream); overflow: hidden; }
.sig-preview-label[b-g4ufztonjl] { padding: 0.3rem 0.6rem; font-size: 10.5px; color: var(--text-soft); border-bottom: 1px dashed var(--line); background: var(--cream-2); }
.sig-preview-body[b-g4ufztonjl] { padding: 0.55rem 0.7rem; font-size: 12.5px; color: var(--text); max-height: 160px; overflow: auto; overflow-wrap: anywhere; }
.sig-preview-body img[b-g4ufztonjl] { max-width: 100%; height: auto; }

/* ── Minimalny WYSIWYG w polu odpowiedzi (toolbar + contenteditable) ── */
.reply-box .rich-toolbar[b-g4ufztonjl] { display: flex; gap: 0.25rem; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--line); background: var(--cream-2); flex-wrap: wrap; }
.reply-box .rich-toolbar .btn[b-g4ufztonjl] { padding: 0.2rem 0.45rem; min-width: 30px; line-height: 1; }
.reply-box .rich-toolbar .btn svg[b-g4ufztonjl] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reply-box .rich-toolbar .btn strong[b-g4ufztonjl], .reply-box .rich-toolbar .btn em[b-g4ufztonjl] { font-size: 13px; }
/* „Aa" toggle formatowania — desktop: zbędny (formatowanie zawsze widoczne, wrapper przezroczysty). */
.fmt-toggle[b-g4ufztonjl] { display: none; }
.fmt-tools[b-g4ufztonjl] { display: contents; }
.fmt-toggle svg[b-g4ufztonjl] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reply-editor[b-g4ufztonjl] {
    display: block; width: 100%; box-sizing: border-box;
    /* Cap 20vh — inline composer zostawia widoczny wątek przy pisaniu (Image #12). Dłuższe pisanie
       → „rozwiń do okna" gdzie max-height znika (.reply-dock.expanded .reply-editor). */
    padding: 0.75rem 0.9rem; min-height: 110px; max-height: 26vh; overflow: auto;
    outline: none; color: var(--text); font-size: 13.5px; font-family: inherit; line-height: 1.5; background: transparent;
    overflow-wrap: anywhere;
}
.reply-editor:empty[b-g4ufztonjl]::before { content: attr(data-placeholder); color: var(--text-faint); }
.reply-editor img.abc-inline-img[b-g4ufztonjl] { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 0.3rem 0; }

/* 2b — spinacz + chipy załączników-plików */
.reply-box .rich-toolbar .rich-attach[b-g4ufztonjl] { cursor: pointer; display: inline-grid; place-items: center; }
.reply-atts[b-g4ufztonjl] { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.45rem 0.9rem 0; }
.reply-att-chip[b-g4ufztonjl] { display: inline-flex; align-items: center; gap: 0.4rem; max-width: 260px; padding: 0.25rem 0.35rem 0.25rem 0.55rem; background: var(--cream); border: 1px solid var(--line-strong); border-radius: 999px; font-size: 11.5px; color: var(--text); }
.reply-att-chip > svg[b-g4ufztonjl] { width: 13px; height: 13px; stroke: var(--ch-email, currentColor); fill: none; stroke-width: 1.7; flex: none; }
.reply-att-chip .rac-name[b-g4ufztonjl] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-att-chip .rac-size[b-g4ufztonjl] { color: var(--text-soft); font-family: 'Geist Mono', monospace; font-size: 10px; flex: none; }
.reply-att-chip .rac-remove[b-g4ufztonjl] { border: none; background: none; color: var(--text-faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; flex: none; border-radius: 50%; }
.reply-att-chip .rac-remove:hover:not(:disabled)[b-g4ufztonjl] { color: var(--danger); background: var(--line); }

/* ── Toolbox AI: jedna ikonka „✨ AI" → rozwijane opcje (styl macOS: pop + stagger) ── */
.ai-toolbox[b-g4ufztonjl] { position: relative; flex: none; }
.ai-fab[b-g4ufztonjl] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.28rem 0.62rem; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--paper);
    color: var(--text); font-family: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.ai-fab:hover:not(:disabled)[b-g4ufztonjl], .ai-fab.on[b-g4ufztonjl] { border-color: var(--p1); color: var(--p1); background: var(--ok-bg); }
.ai-fab:disabled[b-g4ufztonjl] { opacity: .55; cursor: default; }
.ai-fab .ai-fab-ic[b-g4ufztonjl] { font-size: 13px; line-height: 1; }
.ai-fab.busy[b-g4ufztonjl] { pointer-events: none; }
.ai-fab-spin[b-g4ufztonjl] {
    width: 13px; height: 13px; flex: none;
    border: 2px solid color-mix(in srgb, var(--p1) 25%, transparent); border-top-color: var(--p1);
    border-radius: 50%; animation: ai-spin-b-g4ufztonjl .7s linear infinite;
}
@keyframes ai-spin-b-g4ufztonjl { to { transform: rotate(360deg); } }

.ai-menu-backdrop[b-g4ufztonjl] { position: fixed; inset: 0; z-index: 40; }
.ai-menu[b-g4ufztonjl] {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 41;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 252px; padding: 5px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 14px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    transform-origin: top right;
    animation: ai-menu-pop-b-g4ufztonjl .19s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ai-menu-pop-b-g4ufztonjl {
    from { opacity: 0; transform: scale(.82) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ai-opt[b-g4ufztonjl] {
    display: flex; align-items: center; gap: 0.65rem; text-align: left; width: 100%;
    padding: 0.5rem 0.55rem; border: none; background: none; border-radius: 10px;
    cursor: pointer; color: var(--text); font-family: inherit;
    animation: ai-opt-in-b-g4ufztonjl .30s both cubic-bezier(0.34, 1.4, 0.64, 1);
}
.ai-opt:hover:not(:disabled)[b-g4ufztonjl] { background: var(--cream-2); }
.ai-opt:disabled[b-g4ufztonjl] { opacity: .5; cursor: default; }
.ai-opt:nth-child(1)[b-g4ufztonjl] { animation-delay: .03s; }
.ai-opt:nth-child(2)[b-g4ufztonjl] { animation-delay: .07s; }
.ai-opt:nth-child(3)[b-g4ufztonjl] { animation-delay: .11s; }
@keyframes ai-opt-in-b-g4ufztonjl {
    from { opacity: 0; transform: translateY(-6px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ai-opt-ic[b-g4ufztonjl] { font-size: 17px; width: 32px; height: 32px; flex: none; display: grid; place-items: center; background: var(--cream); border-radius: 9px; }
.ai-opt-tx[b-g4ufztonjl] { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ai-opt-tx strong[b-g4ufztonjl] { font-size: 13px; font-weight: 600; }
.ai-opt-tx small[b-g4ufztonjl] { font-size: 11px; color: var(--text-soft); }
@media (prefers-reduced-motion: reduce) {
    .ai-menu[b-g4ufztonjl], .ai-opt[b-g4ufztonjl] { animation: none; }
    .ai-fab-spin[b-g4ufztonjl] { animation-duration: 1.2s; }
}

/* „Generuj ponownie" — subtelny link przy reużytym wyniku AI (wymusza świeże, płatne wywołanie). */
.ai-regen[b-g4ufztonjl] {
    border: none; background: none; padding: 0; flex: none;
    font-family: inherit; font-size: 10.5px; font-weight: 600; color: var(--p1);
    cursor: pointer; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}
.ai-regen:hover:not(:disabled)[b-g4ufztonjl] { color: var(--p1); }
.ai-regen:disabled[b-g4ufztonjl] { opacity: .5; cursor: default; text-decoration: none; }

/* ── R1.4 — composer rozwinięty do modala (więcej miejsca na pisanie) ── */
/* grid-template-columns: minmax(0,1fr) — bez tego niejawna kolumna jest sizowana MIN-CONTENTEM, a nagłówek
   „Odpowiadasz z: …" (white-space: nowrap) rozpychał ją ponad szerokość ekranu: arkusz robił się szerszy
   niż telefon i toolbar z ✨AI (oraz wybór podpisu) wyjeżdżał poza prawą krawędź. Definite track = .rf-text
   normalnie skraca się wielokropkiem. */
.reply-dock.expanded[b-g4ufztonjl] { position: fixed; inset: 0; z-index: 250; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 4vh 4vw; border-top: 0; background: none; }
.composer-backdrop[b-g4ufztonjl] { position: fixed; inset: 0; background: rgba(20, 22, 28, 0.44); }
.reply-dock.expanded .reply-box[b-g4ufztonjl] { position: relative; z-index: 1; width: min(780px, 94vw); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); }
.reply-dock.expanded .reply-area[b-g4ufztonjl] { flex: 1 1 auto; field-sizing: normal; max-height: none; min-height: 42vh; resize: none; }
.reply-dock.expanded .reply-editor[b-g4ufztonjl] { flex: 1 1 auto; max-height: none; min-height: 42vh; }
.reply-dock.expanded .reply-foot[b-g4ufztonjl] { flex: none; }

/* ── Mobile: wygodniejsze pisanie odpowiedzi ── */
@media (max-width: 820px) {
    /* Toolbar zwięzły: [Aa][spinacz] … [✨AI]. Formatowanie (B/I/listy/link) schowane pod „Aa".
       BEZ overflow (ucinałby menu AI) — nadmiar zawija się do nowego rzędu. */
    .reply-box .rich-toolbar[b-g4ufztonjl] { flex-wrap: wrap; align-items: center; }
    .fmt-toggle[b-g4ufztonjl] { display: inline-grid; place-items: center; flex: none; }
    .fmt-tools[b-g4ufztonjl] { display: none; }
    .fmt-tools.open[b-g4ufztonjl] {
        display: flex; gap: 0.2rem; order: 20; flex-basis: 100%;
        margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid var(--line);
    }
    /* Menu AI otwiera się w GÓRĘ (kompozytor inline jest przy dolnej krawędzi ekranu). */
    .ai-menu[b-g4ufztonjl] { top: auto; bottom: calc(100% + 6px); transform-origin: bottom right; }
    /* ...ALE w arkuszu pełnoekranowym toolbar jest przy GÓRNEJ krawędzi — menu w górę uciekłoby
       poza ekran (widoczna zostawała tylko ostatnia pozycja). Tam otwieramy w DÓŁ, przy przycisku. */
    .reply-dock.expanded .ai-menu[b-g4ufztonjl] { top: calc(100% + 6px); bottom: auto; transform-origin: top right; }

    /* ── #8 — arkusz na PEŁNY ekran (nie modal z marginesem). Kompozytor jest teraz JEDYNĄ drogą do
       odpowiedzi na telefonie, a modal zostawiał ~12 px backdropu z każdej strony — nie ma w co trafić
       palcem, żeby go zamknąć. Pełny ekran + wyraźny „zwiń" w rogu zamiast celowania w szparę. */
    .reply-dock.expanded[b-g4ufztonjl] { padding: 0; }
    .reply-dock.expanded .reply-box[b-g4ufztonjl] {
        width: 100%; max-width: none; height: 100%; max-height: none;
        border: 0; border-radius: 0; box-shadow: none;
    }
    .composer-backdrop[b-g4ufztonjl] { display: none; }   /* arkusz zajmuje cały ekran — backdropu i tak nie widać */
    /* Cel dotykowy „zwiń" — 32px to za mało jak na jedyne wyjście z arkusza. */
    .reply-dock.expanded .composer-expand[b-g4ufztonjl] { width: 38px; height: 38px; }
    .reply-dock.expanded .composer-expand svg[b-g4ufztonjl] { width: 17px; height: 17px; }

    /* Wyższe, stabilne pole tekstu (więcej miejsca; mniej „skakania w górę" przy pisaniu). */
    .reply-editor[b-g4ufztonjl], .reply-area[b-g4ufztonjl] { min-height: 130px; max-height: 30vh; }

    /* ── #8 — kompozytor ZWINIĘTY. W wątku najczęściej się CZYTA, a dock na stałe zjadał ~⅓ ekranu.
       Otwiera go pasek akcji niżej — od razu jako arkusz pełnoekranowy (.expanded).
       display:none, NIE usunięcie z DOM: edytor musi żyć, żeby szkic (autozapis) i staged-załączniki
       przetrwały zwinięcie. getHtml() czyta innerHTML, więc brak layoutu mu nie przeszkadza.
       Tym samym znikł problem stopki wypychanej poza ekran przez podgląd podpisu — arkusz ma własny layout. */
    .reply-dock:not(.expanded)[b-g4ufztonjl] { display: none; }
    /* Znak dla skryptu: tutaj „Odpowiedz” otwiera arkusz na cały ekran (patrz `.thread-reader` na górze
       pliku). Stoi OBOK reguły, która chowa pole poza arkuszem — to jedna decyzja zapisana dwa razy,
       raz dla przeglądarki i raz dla czytnika, i ma się zmieniać razem. */
    .thread-reader[b-g4ufztonjl] { --odpowiedz-arkuszem: 1; }

    /* Pasek akcji = JEDEN rząd jak w Gmailu: ikona „Odpowiedz" + „Odp. wszystkim" + „Przekaż dalej".
       Wcześniej były dwa rzędy z pełnymi napisami — zjadały dolną strefę i dublowały akcje. */
    .reader-actionbar[b-g4ufztonjl] {
        display: flex; flex-direction: column; gap: 0.35rem; flex: none;
        padding: 0.5rem 0.7rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
        background: var(--paper); border-top: 1px solid var(--line);
    }
    .ab-row[b-g4ufztonjl] { display: flex; gap: 0.4rem; align-items: stretch; }
    /* Ikona „Odpowiedz" — jedyny akcent kolorem w pasku; stała szerokość, nie kurczy się przy
       długich etykietach obok. */
    .ab-icon[b-g4ufztonjl] {
        flex: 0 0 52px; width: 52px; display: inline-flex; align-items: center; justify-content: center;
        height: 42px; border-radius: 11px; border: none;
        background: var(--global-palette1); color: #fff; cursor: pointer;
    }
    .ab-icon svg[b-g4ufztonjl] { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
    .ab-icon:active[b-g4ufztonjl] { transform: scale(0.98); }
    /* Szkic — ikona przejmuje rolę chipa „masz szkic" (bursztyn + ołówek), bo w jednym rzędzie
       nie mieści się napis „Dokończ odpowiedź". */
    .ab-icon.has-draft[b-g4ufztonjl] { background: var(--warn-bg); color: #8a6512; border: 1px solid #f0d9a8; }
    .ab-btn[b-g4ufztonjl] {
        /* min-width:0 — bez tego flex-item nie schodzi poniżej treści i „Przekaż dalej" wypycha rząd. */
        flex: 1 1 0; min-width: 0;
        display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
        height: 42px; border-radius: 11px;
        border: 1px solid var(--line-strong); background: var(--paper);
        color: var(--text-soft); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ab-btn svg[b-g4ufztonjl] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
    .ab-btn:active[b-g4ufztonjl] { background: var(--cream-2); }
    /* Brak adresata „wszystkim" → „Odpowiedz" jest jedyną akcją odpowiedzi, więc dostaje akcent. */
    .ab-btn-main[b-g4ufztonjl] { background: var(--global-palette1); color: #fff; border: none; font-weight: 600; }
    .ab-btn-main.has-draft[b-g4ufztonjl] { background: var(--warn-bg); color: #8a6512; border: 1px solid #f0d9a8; }
    /* „Odrzuć szkic" — akcja niszcząca i rzadka: poza głównym rzędem, jako dyskretny link,
       żeby nie zabierała szerokości akcjom codziennym. */
    .ab-discard[b-g4ufztonjl] {
        display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
        width: 100%; height: 30px; border: none; background: none; cursor: pointer;
        color: var(--danger); font-family: inherit; font-size: 12px; font-weight: 500;
    }
    .ab-discard svg[b-g4ufztonjl] { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
    .ab-discard:active[b-g4ufztonjl] { background: color-mix(in srgb, var(--danger) 10%, var(--paper)); border-radius: 8px; }

    /* Stopka: Wyślij + wybór podpisu nie mieszczą się w jednym rzędzie → zawijamy;
       podpis w osobnym rzędzie na całą szerokość, select się kurczy (nie ucieka za obrys),
       „Pokaż/Ukryj podpis" zawsze widoczny. */
    .reply-foot[b-g4ufztonjl] { flex-wrap: wrap; row-gap: 0.5rem; }
    .sig-control[b-g4ufztonjl] { width: 100%; margin-left: 0; justify-content: space-between; gap: 0.5rem; }
    .sig-pick[b-g4ufztonjl] { min-width: 0; flex: 1 1 auto; }
    .sig-pick select[b-g4ufztonjl] { min-width: 0; max-width: 100%; flex: 1 1 auto; }
    .sig-toggle[b-g4ufztonjl] { flex: none; white-space: nowrap; }

    /* „Rozwiń do okna" (przycisk ↗) = PEŁNOEKRANOWY arkusz od GÓRY: edytor rośnie w dół,
       Wyślij zawsze widoczny na dole — bez przewijania w górę. */
    /* Arkusz pełnoekranowy: „Wyślij" wskakuje do nagłówka (kciuk i tak jest przy górze przy pisaniu,
       a dolny przycisk chowała klawiatura). Dolny w tym trybie znika, żeby nie było dwóch „Wyślij". */
    .reply-dock.expanded .rf-send[b-g4ufztonjl] {
        display: inline-flex; align-items: center; gap: 0.3rem; flex: none;
        height: 32px; padding: 0 0.7rem; margin-left: 0.15rem; border: none; border-radius: 9px;
        background: var(--global-palette1); color: #fff; cursor: pointer;
        font-family: inherit; font-size: 12.5px; font-weight: 600;
    }
    .reply-dock.expanded .rf-send svg[b-g4ufztonjl] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .reply-dock.expanded .rf-send:disabled[b-g4ufztonjl] { opacity: .6; cursor: not-allowed; }
    /* Nagłówek robi się ciasny — „z <adres skrzynki>" ustępuje pierwszy, adresat zostaje. */
    .reply-dock.expanded .rf-mailbox[b-g4ufztonjl] { display: none; }
    .reply-dock.expanded .reply-foot > .btn-primary[b-g4ufztonjl] { display: none; }

    .reply-dock.expanded[b-g4ufztonjl] { place-items: stretch; padding: 0; }
    .reply-dock.expanded .reply-box[b-g4ufztonjl] { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; box-shadow: none; }
    .reply-dock.expanded .reply-editor[b-g4ufztonjl],
    .reply-dock.expanded .reply-area[b-g4ufztonjl] { min-height: 0; max-height: none; flex: 1 1 auto; }
}

/* ── V1 — oznaczanie niepoprawnych adresów DW/UDW ── */
.reply-cc input.addr-invalid[b-g4ufztonjl] { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent); }
.reply-addr-warn[b-g4ufztonjl] { font-size: 11px; color: var(--danger); margin: 0.1rem 0 0.2rem; overflow-wrap: anywhere; }

/* ── Cele dotykowe w pasku nad wątkiem ────────────────────────────────────────
   Zmierzone 18.08.2026 na tablecie i telefonie: „etykieta" 74×20, „tag" 49×20,
   „szczegóły" 80×20 px — wysokość jednego wiersza tekstu. Ekran wątku poczty był
   przez cały czas poza zasięgiem sondy (odnajdywała go dopiero po naprawie
   rozpoznawania adresu z parametrami), więc te trzy przyciski nie były mierzone ANI RAZU.

   ⚠ Realna wysokość, nie niewidzialna warstwa `::after`: nakładka bywa przycięta przez
   `overflow` rodzica i wtedy pomiar jej nie widzi — poprawka wygląda w kodzie na zrobioną,
   a rozmiar się nie zmienia. Ta sama lekcja, co przy `.ts-link` i `.rd-back`. */
@media (pointer: coarse) {
    .rh-label-btn[b-g4ufztonjl],
    .rh-tagadd-btn[b-g4ufztonjl],
    .rh-details-btn[b-g4ufztonjl] {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        min-width: 44px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   NISKIE OKNO — pole odpowiedzi ma być osiągalne ZAWSZE
   ══════════════════════════════════════════════════════════════════════════════════════════════
   Właściciel, 21.09.2026 ze zrzutem: „przy takiej w ogóle nie da się przewinąć ekranu do
   odpowiedzi. Musisz tu coś innego wymyślić".

   POMIAR PRZED (stanowisko, wydanie 40, szerokość 1440):

     okno 1000 → pole w oknie, na treść zostaje 547 px
     okno  800 → pole w oknie, na treść zostaje 347 px
     okno  744 → pole w oknie, na treść zostaje 291 px
     okno  680 → pole POZA oknem (dół na 708 px) i NIC SIĘ NIE PRZEWIJA
     okno  600 → to samo

   MECHANIZM, nie przeczucie. Czytnik jest kolumną elastyczną z `overflow: hidden`; lista
   wiadomości ma `min-height: 220px`, a pasek odpowiedzi `flex: none`. Kiedy okno zejdzie poniżej
   sumy „nagłówek + 220 + pasek", kolumna nie ma się z czego skurczyć — więc pasek wychodzi poza
   dolną krawędź, a `overflow: hidden` obcina go BEZ paska przewijania. Element jest w drzewie,
   jest widoczny dla testu obecności i jest całkowicie nieosiągalny dla człowieka.

   CO ROBIMY — trzy stopnie, od najłagodniejszego:
     1. poniżej 820 px oddajemy pion z rzeczy stałych (mniejsze odstępy, niższe pole pisania);
     2. poniżej 700 px lista wiadomości może się skurczyć mocniej — ma własny przewijak, więc
        nic z niej nie ginie, a pasek odpowiedzi zostaje w oknie;
     3. poniżej 560 px zdejmujemy `overflow: hidden` z całego czytnika i dajemy mu własny
        przewijak. To jest PODŁOGA: przy każdej wysokości okna da się dojechać do „Wyślij",
        choćby przewijaniem. Lepiej przewijać, niż nie dosięgnąć.

   ⚠ Czego tu NIE ma: chowania kolumny z listą wątków. Rozważałem to (właściciel dopuszczał:
   „może trzeba przy takiej szerokości czy wysokości chować już ekran"), ale lista wątków zabiera
   szerokość, a brakuje WYSOKOŚCI — schowanie jej nie oddałoby ani jednego piksela w pionie. */

@media (max-height: 820px) {
    .reader-scroll[b-g4ufztonjl] { min-height: 140px; padding: 0.5rem 0.9rem; }
    .reply-dock[b-g4ufztonjl] { padding: 0.5rem 1.1rem 0.6rem; }
    .reply-area[b-g4ufztonjl] { min-height: 72px; max-height: 22vh; }
}

@media (max-height: 700px) {
    .reader-scroll[b-g4ufztonjl] { min-height: 96px; padding: 0.4rem 0.9rem; }
    .reply-dock[b-g4ufztonjl] { padding: 0.4rem 1.1rem 0.5rem; }
    .reply-area[b-g4ufztonjl] { min-height: 56px; max-height: 20vh; }
}

@media (max-height: 560px) {
    /* PODŁOGA: czytnik przestaje być sztywną kolumną i dostaje własny przewijak. */
    .thread-reader[b-g4ufztonjl] { overflow-y: auto; }
    .reader-scroll[b-g4ufztonjl] { min-height: 0; flex: 0 0 auto; overflow-y: visible; }
    .reply-area[b-g4ufztonjl] { min-height: 48px; }
}
/* /Components/Pages/Inbox/Inbox.razor.rz.scp.css */
/* .inbox-head przeniesiony do app.css 02.09.2026 — uzywa go piec innych ekranow. */

/* Widok Tablica potrzebuje pełnej szerokości (kolumny Kanban). */
.content.inbox-board-view[b-e6qt5fasb8] {
    max-width: none;
}

/* Przełącznik Tabela/Tablica przeniesiony do wspólnego <ViewToggle /> (Components/Shared).
   Dawne .seg/.seg-btn/.seg-on usunięte — jedno źródło stylu segmentu. */

/* ⚠ Nagłówek NIE wychodzi poza swoją kolumnę (przegląd zrzutów 25.09.2026: „OPIEKUNWIAD.”). Kolumny
   opiekuna i liczby wiadomości miały 50/44 px, a „OPIEKUN” wielkimi literami z odstępami ma ~57 px —
   napis wjeżdżał w sąsiedni i czytało się jedno słowo. Kolumny poszerzone do 64/56 px, a gdyby kiedyś
   znów zabrakło miejsca, napis kończy się wielokropkiem zamiast sklejać z sąsiadem.
   Pilnuje NaglowekTabeliZgloszenNieSklejaKolumnTests. Nie dotyczy dwóch pierwszych komórek:
   pola „zaznacz wszystkie” (kolumna 12 px — obcięcie by je przycięło) i „Kanał” (kolumna 36 px na
   ikony — „KANAŁ” ma ~45 px i mieści się razem z odstępem przed „Klient”, a obcięte czytało się „KAN…”,
   przegląd ABHelp 26.09). */
.t-head > div:nth-child(n+3)[b-e6qt5fasb8] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t-head .sortable[b-e6qt5fasb8] {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}
.t-head .sortable:hover[b-e6qt5fasb8] {
    color: var(--text);
}

/* inbox-search / btn-icon-clear / bulk-bar / bulk-tag-dropdown / filter-bar / f-chip / f-sep
   — przeniesione do wwwroot/app.css (używane też przez Outbox/Audit/ApiLimits) */

.t-row.selected[b-e6qt5fasb8] {
    background: var(--cream-2);
    box-shadow: inset 3px 0 0 var(--p1, #019344);
}

/* Inbox table */
.inbox-table[b-e6qt5fasb8] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.t-head[b-e6qt5fasb8] {
    display: grid;
    grid-template-columns: 12px 36px 1.6fr 2.2fr 110px 1fr 64px 56px 90px;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    font-weight: 500;
    align-items: center;
}

.t-row[b-e6qt5fasb8] {
    display: grid;
    grid-template-columns: 12px 36px 1.6fr 2.2fr 110px 1fr 64px 56px 90px;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line);
    align-items: center;
    transition: background 0.12s;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.t-row:last-child[b-e6qt5fasb8] { border-bottom: none; }
.t-row:hover[b-e6qt5fasb8] { background: var(--cream); }
.t-row.unread[b-e6qt5fasb8] { background: linear-gradient(90deg, color-mix(in srgb, var(--global-palette1) 2.5%, transparent) 0%, transparent 30%); }
.t-row.unread[b-e6qt5fasb8]::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--p1);
}

/* Status tinting — subtle row glow + 3px left bar (open dominates unread, closed dims) */
.t-row.status-closed[b-e6qt5fasb8] {
    background: rgba(120, 120, 120, 0.04);
    opacity: 0.78;
}
.t-row.status-closed:hover[b-e6qt5fasb8] { opacity: 1; background: var(--cream); }
.t-row.status-closed[b-e6qt5fasb8]::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--line-faint);
}
.t-row.status-pending[b-e6qt5fasb8]::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--warn, #c98a00);
}
.t-row.status-snoozed[b-e6qt5fasb8]::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--info, #2a8ec9);
}
/* Unread bar wins over status bar */
.t-row.unread[b-e6qt5fasb8]::before { z-index: 1; }

/* Pasek koloru konta (lista 11.10.2026, pkt 13) stoi przy samej krawędzi wiersza — rysuje go cień wewnętrzny
   z app.css (`.t-row.source-tinted`). Paski stanu wiersza (nieprzeczytane, status) odsuwają się o jego szerokość,
   żeby oba było widać naraz: konto mówi „skąd”, pasek obok „w jakim stanie”. Bez tego pasek konta znikał akurat
   na wierszach nieprzeczytanych. Wiersz bez koloru konta (inny kanał bez koloru osobistego) zostaje jak dotąd.
   Zaznaczenie rysuje własny cień — w wierszu z kolorem konta składamy oba, inaczej zaznaczenie zjadłoby pasek. */
.t-row.source-tinted[b-e6qt5fasb8]::before,
.t-row.source-tinted[b-e6qt5fasb8]::after { margin-left: 3px; }
.t-row.source-tinted.selected[b-e6qt5fasb8] {
    box-shadow: inset 3px 0 0 var(--row-source-color, transparent), inset 6px 0 0 var(--p1, #019344);
}

/* SLA row tinting — breach maluje cały wiersz na lekki czerwony alert */
.t-row.sla-breached[b-e6qt5fasb8] {
    background: linear-gradient(90deg, rgba(192, 46, 29, 0.10) 0%, rgba(192, 46, 29, 0.04) 60%, transparent 100%);
}
.t-row.sla-breached:hover[b-e6qt5fasb8] {
    background: linear-gradient(90deg, rgba(192, 46, 29, 0.16) 0%, rgba(192, 46, 29, 0.08) 60%, var(--cream) 100%);
}
.t-row.sla-danger[b-e6qt5fasb8] {
    background: linear-gradient(90deg, rgba(201, 138, 0, 0.08) 0%, rgba(201, 138, 0, 0.02) 60%, transparent 100%);
}
.t-row.sla-warn[b-e6qt5fasb8] {
    background: linear-gradient(90deg, rgba(201, 138, 0, 0.04) 0%, transparent 50%);
}

/* Plakietki statusu w wierszu (K3, 03.10.2026): własny status firmy w jego kolorze i — gdy towar jest w serwisie —
   status serwisowy z liczbą dni. Wygląd plakietki niesie wspólny komponent (PlakietkaStatusu, rozmiar „mała”);
   tu tylko odstęp w rzędzie oznaczeń. Rząd `.t-badges` ma `overflow: hidden`: gdy zabraknie miejsca, plakietka
   zostaje przycięta, a wiersz się nie rozjeżdża. */
.t-badges[b-e6qt5fasb8]  .plakietka-statusu { margin-right: 0.35rem; flex: none; }

/* ── Akcja masowa „Ustaw status” / „Status serwisowy” ──────────────────────────────────────────────── */
.masowo-lista[b-e6qt5fasb8] { min-width: 230px; max-height: 320px; }
.masowo-pozycja[b-e6qt5fasb8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Próbka koloru statusu — ten sam kolor co plakietka (zmienna wpisana przez KolorStatusu.Styl). */
.masowo-probka[b-e6qt5fasb8] {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--ps-kolor, var(--line-strong));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent);
}
.masowo-okno[b-e6qt5fasb8] { max-width: 520px; }
/* Okno mówi zmianę jednym rzędem: „3 zgłoszenia → [W trakcie]” — liczba i cel, zanim przeczyta się zdania. */
.masowo-cel[b-e6qt5fasb8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--cream);
}
.masowo-ile[b-e6qt5fasb8] { font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.masowo-ile-podpis[b-e6qt5fasb8] { font-size: 13px; color: var(--text-soft); }
.masowo-strzalka[b-e6qt5fasb8] {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: var(--text-faint);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.masowo-bez[b-e6qt5fasb8] { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.masowo-opis[b-e6qt5fasb8] { font-size: 13px; line-height: 1.55; margin: 0 0 0.4rem; }
.masowo-opis-cichy[b-e6qt5fasb8] { color: var(--text-soft); font-size: 12px; }
.t-leader[b-e6qt5fasb8] { display: flex; justify-content: center; }
.unread-dot[b-e6qt5fasb8] {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--p1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--global-palette1) 15%, transparent);
}

.t-customer[b-e6qt5fasb8] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.t-customer .c-name[b-e6qt5fasb8] {
    font-weight: 500;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Brand chip — kropka pomocna do szybkiego rozpoznania sklepu w skrzynce.
   Tooltip (title) na hover pokazuje nazwę brandu. Tenant z 1 brandem też ją widzi (subtelna identyfikacja). */
.t-customer .c-name .brand-dot[b-e6qt5fasb8] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
    flex-shrink: 0;
}

.t-row.unread .t-customer .c-name[b-e6qt5fasb8] { font-weight: 600; }

.t-customer .c-login[b-e6qt5fasb8] {
    font-size: 11.5px;
    color: var(--text-soft);
    font-family: 'Geist Mono', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dwie linie: oznaczenia u góry, temat pod spodem.
   Jedna linia oznaczała, że chipy (rodzaj + kanał + status + numer) mają pierwszeństwo przed
   tematem — a to temat mówi, czego sprawa dotyczy. Przy oknie 1500 px zostawało na niego
   kilkadziesiąt pikseli. Wysokość wiersza się nie zmienia: sąsiednia kolumna z klientem
   i tak jest dwuliniowa.
   min-width: 0 na elemencie siatki jest WARUNKIEM działania przycinania — bez tego kolumna
   rozpycha się do najdłuższego tematu zamiast go skracać. */
.t-snippet[b-e6qt5fasb8] {
    font-size: 13px;
    color: var(--text-soft);
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}

.t-snippet .t-badges[b-e6qt5fasb8] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    overflow: hidden;
}

/* ⚠ NUMER ZGŁOSZENIA NIGDY NIE ZNIKA PO CICHU (29.08.2026).
   Przy 390 px w wierszu stały cztery znaczniki, a numer szedł ostatni: pojemnik `.t-badges`
   ma `overflow: hidden` i `text-overflow: clip`, więc `#1233377` pokazywał się jako `#12333`
   — bez wielokropka, bez żadnego znaku, że czegoś brakuje. Zmierzone: 24 takie numery na
   jednym ekranie, jeden przycięty o 18 px. Człowiek czyta skróconą liczbę jako KOMPLETNY
   numer zgłoszenia i przepisuje go klientowi — to nie jest kosmetyka, tylko zła informacja.

   Rozwiązanie: kurczą się ZNACZNIKI (i mówią o tym wielokropkiem), a numer nie kurczy się
   nigdy. Numer ma dodatkowo własny wielokropek — gdyby kiedyś zabrakło miejsca nawet na
   niego, ma być widać, że jest ucięty. */
.t-snippet .t-badges > *:not(.ticket-num)[b-e6qt5fasb8] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ⚠ `text-overflow` NIE DZIAŁA na pojemniku flex, a `.kind-badge` i chip kanału są `inline-flex`
   (globalnie, bo gdzie indziej niosą ikonę). W wierszu listy mają sam napis, więc tutaj — i tylko
   tutaj — robimy z nich blok; wysokość mają stałą, więc `line-height` zastępuje wyśrodkowanie
   flexem. Bez tego skrócony znacznik urywał się w połowie litery, tak samo po cichu jak numer. */
.t-snippet .t-badges > .kind-badge[b-e6qt5fasb8],
.t-snippet .t-badges > .email-channel-chip[b-e6qt5fasb8] {
    display: block;
    line-height: 18px;
}

/* Plakietka konta (nazwa skrzynki zamiast „E-MAIL”, pkt 13 listy 11.10.2026) — osobny składnik, więc reguła
   o kurczeniu się znaczników wyżej jej nie obejmuje (styl zakresowy nie sięga do składnika-dziecka; stąd ::deep,
   jak przy plakietce statusu). Kurczy się jak pozostałe znaczniki i mówi o tym wielokropkiem (overflow i max-width
   ma w app.css) — numer zgłoszenia dalej nie kurczy się nigdy. */
.t-snippet .t-badges[b-e6qt5fasb8]  .plakietka-konta {
    flex: 0 1 auto;
    min-width: 0;
}

.t-snippet .t-text[b-e6qt5fasb8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    display: block;
}

/* ⚠ TEMAT NIE MOŻE ZJEŚĆ CAŁEJ ZAJAWKI (03.09.2026).
   Temat i zajawka dzielą JEDEN budżet szerokości z wielokropkiem na końcu — i przy długim
   temacie temat brał wszystko. Na zrzucie z szerokości 1280 px (czyli tej, na której ludzie
   naprawdę pracują) wiersz wyglądał tak:

     Pytanie o zamowienie ruch-1788390940-220400 — O…

   Zostawała JEDNA LITERA wiadomości. Na 1920 px ta sama kolumna pokazywała
   „— Odpisaliśmy: Notatka od autom…", więc przy przeglądaniu na dużym ekranie usterki
   nie widać wcale.

   Ograniczenie do 55% jest ŚWIADOMIE niezależne od szerokości ekranu: wiąże dopiero wtedy,
   gdy temat jest długi — czyli dokładnie wtedy, gdy zajawka i tak by przepadła. Przy krótkim
   temacie nic się nie zmienia, bo do 55% mu daleko. Dostrajanie jednostek `fr` pod jeden
   punkt łamania załatwiłoby 1280 px i zostawiło 1360 px. */
.t-snippet .t-text .subject[b-e6qt5fasb8] {
    display: inline-block;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.t-row.unread .t-snippet[b-e6qt5fasb8] { color: var(--text); }

.t-snippet .subject[b-e6qt5fasb8] {
    color: var(--text);
    font-weight: 500;
    margin-right: 0.35rem;
}

.t-row.unread .t-snippet .subject[b-e6qt5fasb8] { font-weight: 600; }

.t-snippet .ticket-num[b-e6qt5fasb8] {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 11px;
    color: var(--text-soft);
    margin-right: 0.4rem;
    padding: 1px 5px;
    background: var(--cream-2);
    border-radius: 4px;
    /* Nie kurczy się i nie znika — miejsce oddają sąsiednie znaczniki (patrz reguła wyżej). */
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t-sla[b-e6qt5fasb8] { display: flex; flex-direction: column; gap: 4px; }
.t-sla .label[b-e6qt5fasb8] {
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    color: var(--text-soft);
}
.t-sla .label.danger[b-e6qt5fasb8] { color: var(--danger); font-weight: 600; }
.t-sla .label.warn[b-e6qt5fasb8] { color: var(--warn); font-weight: 600; }
.t-sla .label.ok[b-e6qt5fasb8] { color: var(--text-faint); }

.t-tags[b-e6qt5fasb8] { display: flex; gap: 4px; flex-wrap: wrap; }

.t-time[b-e6qt5fasb8] {
    font-family: 'Geist Mono', monospace;
    font-size: 11.5px;
    color: var(--text-soft);
    text-align: right;
}

.t-time .abs[b-e6qt5fasb8] {
    display: block;
    font-size: 10px;
    color: var(--text-soft);
    margin-top: 1px;
}

.t-pager[b-e6qt5fasb8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--cream);
    border-top: 1px solid var(--line);
    color: var(--text-soft);
    font-size: 12.5px;
}

.t-pager .nums[b-e6qt5fasb8] { font-family: 'Geist Mono', monospace; }
.t-pager strong[b-e6qt5fasb8] { color: var(--text); font-weight: 600; }

.desktop-only[b-e6qt5fasb8] { display: grid; }

/* ⚠ 1440 px = zwykły laptop pracownika obsługi (przegląd zrzutów 16.09.2026, P-01; decyzja właściciela
   17.09). Przy 1440 kolumna TEMAT miała ~330 px, a cztery znaczniki jedną linią zjadały ją całą:
   „E-M…", „Pozost…", „CZEKAMY NA KLIE…", temat urwany, zajawka poza oknem (zmierzone: sześć zajawek
   poza oknem). Przy 1920 wszystko wchodziło, więc na monitorze programisty usterki nie było.
   Poniżej 1600 px znaczniki zawijają się do drugiej linii — tak jak na telefonie — a temat dostaje
   własną, całą linię; kolumny boczne oddają kilka pikseli tematowi. */
@media (max-width: 1600px) and (min-width: 1201px) {
    .t-head[b-e6qt5fasb8], .t-row[b-e6qt5fasb8] {
        grid-template-columns: 12px 36px 1.4fr 2.8fr 100px 0.8fr 64px 56px 84px;
        gap: 0.6rem;
    }
    .t-snippet .t-badges[b-e6qt5fasb8] { flex-wrap: wrap; row-gap: 0.2rem; }
    .t-snippet .t-badges > *:not(.ticket-num)[b-e6qt5fasb8] {
        flex: 0 0 auto;
        overflow: visible;
        text-overflow: clip;
    }
}

/* Pusta kolumna TAGI. Gdy żaden wiersz na stronie nie ma tagu, kolumna zajmowała pełne 1fr pustego
   pasa (a firma bez tagów to każda świeża firma). Ekran dodaje klasę `bez-tagow` i kolumna znika,
   a jej szerokość idzie do tematu. Tylko powyżej 1200 px — niżej kolumnę i tak chowa reguła obok. */
@media (min-width: 1201px) {
    .inbox-table.bez-tagow .t-head[b-e6qt5fasb8],
    .inbox-table.bez-tagow .t-row[b-e6qt5fasb8] { grid-template-columns: 12px 36px 1.6fr 3.2fr 110px 64px 56px 90px; }
    .inbox-table.bez-tagow .t-head > :nth-child(6)[b-e6qt5fasb8],
    .inbox-table.bez-tagow .t-row > :nth-child(6)[b-e6qt5fasb8] { display: none; }
}
@media (max-width: 1600px) and (min-width: 1201px) {
    .inbox-table.bez-tagow .t-head[b-e6qt5fasb8],
    .inbox-table.bez-tagow .t-row[b-e6qt5fasb8] { grid-template-columns: 12px 36px 1.4fr 3.6fr 100px 64px 56px 84px; }
}

@media (max-width: 1200px) {
    .t-head[b-e6qt5fasb8], .t-row[b-e6qt5fasb8] {
        grid-template-columns: 12px 36px 1.4fr 1.6fr 110px 90px;
        gap: 0.5rem;
    }
    /* Hide tagi, agent, count w średnich szerokościach */
    .t-head > :nth-child(n+6):nth-child(-n+8)[b-e6qt5fasb8],
    .t-row > :nth-child(n+6):nth-child(-n+8)[b-e6qt5fasb8] { display: none; }
}

@media (max-width: 900px) {
    .desktop-only[b-e6qt5fasb8] { display: none; }
    .t-row[b-e6qt5fasb8] {
        grid-template-columns: auto 1fr auto;
        gap: 0.6rem;
        padding: 0.75rem 0.95rem;
        align-items: flex-start;
    }
    .t-row > :nth-child(1)[b-e6qt5fasb8] { /* leader (unread bar) — left padding */
        display: none;
    }
    .t-row > :nth-child(2)[b-e6qt5fasb8] { /* channel icon */
        grid-row: 1 / span 2;
    }
    .t-row > :nth-child(3)[b-e6qt5fasb8] { /* customer */
        grid-row: 1;
        min-width: 0;
    }
    .t-row > :nth-child(4)[b-e6qt5fasb8] { /* snippet */
        grid-column: 2 / span 1;
        grid-row: 2;
        min-width: 0;
    }
    .t-row > :nth-child(5)[b-e6qt5fasb8] { /* sla */
        grid-column: 3;
        grid-row: 1;
        text-align: right;
    }
    .t-row > :nth-child(6)[b-e6qt5fasb8],
    .t-row > :nth-child(7)[b-e6qt5fasb8],
    .t-row > :nth-child(8)[b-e6qt5fasb8] { display: none; }
    .t-row > :nth-child(9)[b-e6qt5fasb8] { /* time */
        grid-column: 3;
        grid-row: 2;
    }
    .t-row > :nth-child(9) .abs[b-e6qt5fasb8] { display: none; }

    /* ⚠ NA TELEFONIE ZNACZNIKI PRZESTAJĄ SIĘ KURCZYĆ (02.09.2026).
       Kurczenie się znaczników na rzecz tematu jest słuszne na szerokim ekranie — tam po
       skróceniu dalej widać, co znaczą. Na telefonie ta sama reguła robiła z trzech znaczników
       „E-M…", „Pozos…" i „OTWA…", czyli trzy plamki bez treści zajmujące pół wiersza. Skrót,
       którego nie da się rozwinąć w głowie, jest gorszy niż zawinięcie do drugiej linii —
       tu wiersz jest kartą, a nie komórką tabeli, więc miejsce w pionie jest tanie. */
    .t-snippet .t-badges[b-e6qt5fasb8] { flex-wrap: wrap; }
    .t-snippet .t-badges > *:not(.ticket-num)[b-e6qt5fasb8] {
        flex: 0 0 auto;
        overflow: visible;
        text-overflow: clip;
    }

    /* ⚠ NA TELEFONIE TEMAT I ZAJAWKA PRZESTAJĄ DZIELIĆ JEDNĄ LINIĘ (09.09.2026, przegląd UX poz. 8).
       Przy oknie 390 px karta pokazywała DWA ucięte teksty obok siebie — „Produkt przyszedł u…"
       i „Poproszę o wy…" — z których żaden nie był czytelny. Temat dostawał 55% linii (reguła
       z 03.09, słuszna na szerokim ekranie: tam po podziale widać oba), czyli około dziewiętnastu
       znaków. Skrzynka jest ekranem, na którym się SKANUJE: po ucięciu do 19 znaków wszystkie
       tematy zaczynające się tak samo („Prośba o…", „Pytanie o…", „Zwrot —…") wyglądają identycznie
       i lista przestaje do czegokolwiek służyć.
       Powód, dla którego wolno je rozdzielić akurat tutaj, stoi trzy reguły wyżej i jest ten sam:
       wiersz jest na telefonie KARTĄ, a nie komórką tabeli, więc miejsce w pionie jest tanie. */
    .t-snippet .t-text[b-e6qt5fasb8] { white-space: normal; }
    .t-snippet .t-text .subject[b-e6qt5fasb8] {
        display: block;
        max-width: none;
        margin-right: 0;
        white-space: nowrap;   /* temat dalej jedną linią — ale CAŁEJ szerokości karty */
    }
    .t-snippet .t-myslnik[b-e6qt5fasb8] { display: none; }
    .t-snippet .t-zajawka[b-e6qt5fasb8] {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ── Lista obok lewej kolumny statusów (02.10.2026) ──────────────────────────────────────────────
   Sam układ „kolumna + lista” i przycisk chowania są wspólne dla ekranów i stoją w app.css
   (`.uklad-kolumny`, `.przelacznik-kolumny`). Tutaj wyłącznie to, co dotyczy TEJ tabeli.

   ⚠ Ten blok stoi NA KOŃCU pliku celowo: zapadka SkrzynkaNaLaptopieTests wymaga, żeby pierwsza reguła
   dla 1600 px stała przed pierwszą dla 1200 px, a reguły niżej i tak wygrywają wagą selektora
   (`.uklad-kolumny.z-kolumna …`), nie kolejnością.

   ⚠ Z PEŁNĄ KOLUMNĄ LISTA JEST WĘŻSZA O 232 px (do 03.10.2026: 248) — a progi tabeli wyżej liczą się od szerokości OKNA.
   Te reguły dotyczą tylko PEŁNEJ kolumny (`z-kolumna`): pas (`z-pasem`, 62 px) i uchwyt (`z-uchwytem`, 32 px) zostawiają
   liście prawie całą szerokość, więc tabela układa się wtedy tak, jak bez kolumny.
   Zmierzone na zrzutach 02.10.2026 przy oknie 1440 px (zwykły laptop): lista z kolumną ma 906 px
   i w układzie dziewięciu kolumn klient dostawał 125 px („Renata Chmiele…”), temat z zajawką 249 px,
   a plakietka tagu łamała się na dwie linie w kolumnie 71 px. Dlatego:
     • 1440–1600 px: siedem kolumn — odpadają „Tagi” i „Wiad.”; opiekun zostaje. Tagi stoją wtedy
       z liczbami w lewej kolumnie, a klient i temat odzyskują szerokość (177 i 355 px).
     • 1201–1439 px: sześć kolumn — ten sam układ, który i tak obowiązuje poniżej 1200 px.
     • powyżej 1600 px: bez zmian, lista ma dość miejsca na dziewięć.
   Kto chce z powrotem kolumn tagów i liczby wiadomości — zwija lewą kolumnę do pasa albo chowa ją (przycisk w jej nagłówku). */
@media (max-width: 1600px) and (min-width: 1440px) {
    .uklad-kolumny.z-kolumna .t-head[b-e6qt5fasb8],
    .uklad-kolumny.z-kolumna .t-row[b-e6qt5fasb8],
    .uklad-kolumny.z-kolumna .inbox-table.bez-tagow .t-head[b-e6qt5fasb8],
    .uklad-kolumny.z-kolumna .inbox-table.bez-tagow .t-row[b-e6qt5fasb8] {
        /* Klient 1,4 → 1,2 fr, temat 2,8 → 3,6 fr (04.10.2026): miejsce dostaje temat z oznaczeniami, a nie nazwisko. */
        grid-template-columns: 12px 36px minmax(0, 1.2fr) minmax(0, 3.6fr) 100px 64px 84px;
    }
    .uklad-kolumny.z-kolumna .t-head > :nth-child(6)[b-e6qt5fasb8],
    .uklad-kolumny.z-kolumna .t-row > :nth-child(6)[b-e6qt5fasb8],
    .uklad-kolumny.z-kolumna .t-head > :nth-child(8)[b-e6qt5fasb8],
    .uklad-kolumny.z-kolumna .t-row > :nth-child(8)[b-e6qt5fasb8] { display: none; }
}
@media (max-width: 1439px) and (min-width: 1201px) {
    .uklad-kolumny.z-kolumna .t-head[b-e6qt5fasb8],
    .uklad-kolumny.z-kolumna .t-row[b-e6qt5fasb8],
    .uklad-kolumny.z-kolumna .inbox-table.bez-tagow .t-head[b-e6qt5fasb8],
    .uklad-kolumny.z-kolumna .inbox-table.bez-tagow .t-row[b-e6qt5fasb8] {
        /* Schowane są TAGI, opiekun i liczba wiadomości, więc do siatki wchodzi 6 pozycji: znacznik, kanał, klient, temat,
           SLA, czas. Zmierzone 04.10.2026 przy 978 px listy: klient 117, temat 339, czas 85 — temat dostaje teraz resztę. */
        grid-template-columns: 12px 36px minmax(0, 1.2fr) minmax(0, 4fr) 100px 84px;
        gap: 0.5rem;
    }
    .uklad-kolumny.z-kolumna .t-head > :nth-child(n+6):nth-child(-n+8)[b-e6qt5fasb8],
    .uklad-kolumny.z-kolumna .t-row > :nth-child(n+6):nth-child(-n+8)[b-e6qt5fasb8] { display: none; }
}

/* Gęstość listy zgłoszeń (04.10.2026, „nie marnujemy tego miejsca”): wiersz 67 → ~56 px, nagłówek tabeli niższy.
   Cel mierzony scenariuszem abcare-menu-zwarte-04-10: przy 1280×800 w oknie ≥ 8 zgłoszeń. Poniżej 901 px układ telefonu
   zostaje bez zmian (cele dotyku). */
@media (min-width: 901px) {
    .ekran-z-kolumna .t-row[b-e6qt5fasb8] { padding: 0.42rem 1rem; }
    .ekran-z-kolumna .t-head[b-e6qt5fasb8] { padding: 0.4rem 1rem; }
}
/* Znaczniki w JEDNEJ linii także poniżej 1600 px (tam do dziś zawijały się do drugiej): wiersz ma mieć jedną wysokość.
   Kurczą się znaczniki (z wielokropkiem), numer zgłoszenia nigdy — patrz reguła o numerze wyżej. Temat dostaje miejsce
   kosztem kolumny klienta. */
@media (min-width: 1201px) {
    .ekran-z-kolumna .t-snippet .t-badges[b-e6qt5fasb8] { flex-wrap: nowrap; }
    .ekran-z-kolumna .t-snippet .t-badges > *:not(.ticket-num)[b-e6qt5fasb8] {
        flex: 0 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Rodzaj zgłoszenia (PYTANIE, REKLAMACJA, ZWROT) czyta się zawsze w całości — ustępuje mu miejsca plakietka serwisu. */
    .ekran-z-kolumna .t-snippet .t-badges > .kind-badge[b-e6qt5fasb8] { flex: 0 0 auto; overflow: visible; }
    .ekran-z-kolumna .inbox-table .t-head[b-e6qt5fasb8],
    .ekran-z-kolumna .inbox-table .t-row[b-e6qt5fasb8] { gap: 0.5rem; }
}
/* /Components/Pages/Inbox/OknoZamknijWszystkie.razor.rz.scp.css */
/* Treść okna „Zamknij wszystkie i oznacz jako przeczytane”. Rama okna (tło, nagłówek, stopka z przyciskami)
   należy do OknoPotwierdzenia i leży w app.css — tu jest tylko to, co stoi w środku. */
.zw[b-95mwmc5tf1] { display: grid; gap: 0.7rem; text-align: left; }
/* Długa treść (obie ramki naraz) przewija się tutaj — okno pytania samo się nie przewija, więc bez tego
   na niskim ekranie przyciski wyszłyby poza okno. Odliczanie stoi pod spodem i jest widoczne zawsze. */
.zw-tresc[b-95mwmc5tf1] { display: grid; gap: 0.7rem; max-height: 56vh; overflow-y: auto; }

/* Liczba najpierw, zdanie obok — jak w oknie „Ustaw status” na tej samej liście. */
.zw-cel[b-95mwmc5tf1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--cream);
}
.zw-ile[b-95mwmc5tf1] {
    flex: none;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.zw-podpis[b-95mwmc5tf1] { font-size: 13px; line-height: 1.5; color: var(--text); }

.zw-zdanie[b-95mwmc5tf1] { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text); }
.zw-zdanie-ciche[b-95mwmc5tf1] { font-size: 12px; color: var(--text-soft); }

/* Ramka z tym, czego czynność nie ruszy (ostrzegawcza) i z tym, co po niej zniknie (groźna). */
.zw-ramka[b-95mwmc5tf1] {
    display: grid;
    gap: 0.25rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--warn);
    border-radius: var(--radius-sm);
    background: var(--warn-bg);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text);
}
.zw-ramka strong[b-95mwmc5tf1] { font-size: 13px; }
.zw-ramka-grozna[b-95mwmc5tf1] {
    border: 2px solid var(--danger);
    background: var(--danger-bg);
}
.zw-ramka-grozna strong[b-95mwmc5tf1] { color: var(--danger); font-size: 13.5px; }
.zw-lista[b-95mwmc5tf1] { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; }

.zw-odliczanie[b-95mwmc5tf1] { margin: 0; font-size: 12px; color: var(--text-faint); text-align: center; }
.zw-odliczanie strong[b-95mwmc5tf1] { color: var(--text); font-variant-numeric: tabular-nums; }

/* Wąski ekran: liczba nad zdaniem, żeby zdanie miało całą szerokość okna. */
@media (max-width: 480px) {
    .zw-cel[b-95mwmc5tf1] { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}
/* /Components/Pages/Inbox/WSerwisie.razor.rz.scp.css */
/* Ekran „W serwisie” (K3b, 03.10.2026).
   Jedna rzecz ma tu być widoczna z daleka: ILE DNI towar leży w serwisie — to liczba, o którą właściciel pyta serwis
   przez telefon. Dlatego kolumna „Dni” idzie pierwsza, dużą cyfrą o stałej szerokości, a reszta wiersza jest cicha.
   Czerwień tylko tam, gdzie serwis spóźnia się z obiecanym powrotem — jedyny stan, który wymaga ruchu. */

.ws-narzedzia[b-dqulark25r] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.ws-pusto[b-dqulark25r] {
    padding: 2rem 1.5rem;
    text-align: left;
    color: var(--text-soft);
}
.ws-pusto strong[b-dqulark25r] { display: block; color: var(--text); font-size: 14px; margin-bottom: 0.35rem; }
.ws-pusto p[b-dqulark25r] { margin: 0 0 0.9rem; font-size: 13px; line-height: 1.55; max-width: 62ch; }

/* Tabela w karcie; szersza niż okno (pośrednie szerokości) przewija się SAMA, strona nie. */
.ws-karta[b-dqulark25r] { padding: 0; overflow-x: auto; }
.ws-tabela[b-dqulark25r] { min-width: 760px; }
.ws-tabela th[b-dqulark25r] { white-space: nowrap; }
.ws-tabela tbody tr[b-dqulark25r] { cursor: pointer; }
.ws-tabela td[b-dqulark25r] { vertical-align: middle; }

.ws-sort[b-dqulark25r] {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.ws-sort:hover[b-dqulark25r] { color: var(--text); }
.ws-sort:focus-visible[b-dqulark25r] { outline: 2px solid var(--p1); outline-offset: 2px; border-radius: 3px; }

/* ── Dni w serwisie: liczba pierwsza ── */
.ws-kol-dni[b-dqulark25r] { width: 1%; }
.ws-dni[b-dqulark25r] { white-space: nowrap; }
.ws-dni-wartosc[b-dqulark25r] { display: inline-flex; align-items: baseline; }
.ws-dni-liczba[b-dqulark25r] {
    display: inline-block;
    min-width: 2ch;
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    text-align: right;
}
.ws-dni-jedn[b-dqulark25r] { margin-left: 0.3rem; font-size: 12px; color: var(--text-soft); }
.ws-dni-wrocilo[b-dqulark25r] { font-size: 12px; color: var(--text-faint); }
.ws-wiersz.po-terminie .ws-dni-liczba[b-dqulark25r] { color: var(--danger); }
.ws-wiersz.wrocilo td[b-dqulark25r] { color: var(--text-soft); }

/* ── Klient i temat ── */
.ws-zgl[b-dqulark25r] { min-width: 0; }
.ws-klient[b-dqulark25r] {
    display: block;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 34ch;
}
.ws-klient:hover[b-dqulark25r] { text-decoration: underline; }
.ws-klient:focus-visible[b-dqulark25r] { outline: 2px solid var(--p1); outline-offset: 2px; border-radius: 3px; }
.ws-temat[b-dqulark25r] {
    display: block;
    font-size: 12.5px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 44ch;
}
.ws-meta[b-dqulark25r] { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; flex-wrap: wrap; }
.ws-numer[b-dqulark25r] { font-size: 11.5px; color: var(--text-faint); }

/* ── Oczekiwany powrót ── */
.ws-powrot[b-dqulark25r] { white-space: nowrap; }
.ws-powrot-data[b-dqulark25r] { display: block; font-size: 13px; }
.ws-powrot-opis[b-dqulark25r] { display: block; font-size: 11.5px; color: var(--text-soft); }
.ws-powrot-opis.po-terminie[b-dqulark25r] { color: var(--danger); font-weight: 600; }
.ws-brak[b-dqulark25r] { color: var(--text-faint); }

/* ── Telefon: karty (data-table.responsive) — klient i temat jako nagłówek karty, dni zaraz pod nim ── */
@media (max-width: 768px) {
    .ws-karta[b-dqulark25r] { background: transparent; border: 0; box-shadow: none; overflow: visible; }
    .ws-tabela[b-dqulark25r] { min-width: 0; }
    .ws-tabela tbody tr[b-dqulark25r] { display: flex; flex-direction: column; }
    .ws-tabela tbody tr.po-terminie[b-dqulark25r] { border-left-color: var(--danger); }
    .ws-tabela tbody tr.wrocilo[b-dqulark25r] { border-left-color: var(--line-strong); }
    .ws-tabela td.cell-title[b-dqulark25r] { order: -1; flex-direction: column; align-items: flex-start; }
    .ws-klient[b-dqulark25r], .ws-temat[b-dqulark25r] { max-width: 100%; white-space: normal; }
    .ws-dni-liczba[b-dqulark25r] { font-size: 1.25rem; }
    .ws-powrot[b-dqulark25r] { text-align: right; }
    .ws-powrot-data[b-dqulark25r], .ws-powrot-opis[b-dqulark25r] { display: inline; margin-left: 0.4rem; }
}
/* /Components/Pages/Integrations/AddIntegration.razor.rz.scp.css */
/* Wybor rodzaju integracji.

   ⚠ TE REGULY MIESZKALY W BLOKU <style> WEWNATRZ STRONY, czyli GLOBALNIE (30.08.2026).
   Nazwa `.integ-grid` jest uzywana takze na liscie integracji, ktora ma wlasny arkusz
   zakresowy o tej samej nazwie klasy — jedna strona narzucala wiec uklad drugiej, i to
   tylko wtedy, gdy akurat byla otwarta wczesniej. Arkusz zakresowy zamyka sprawe: reguly
   dotycza wylacznie tej strony.

   ⚠ `auto-fit`, NIE `auto-fill`. Przy `auto-fill` przegladarka tworzy tyle sciezek, ile
   sie zmiesci (na 1440 px — cztery), a dwa istniejace kafelki zajmuja dwie pierwsze
   i zostaja waskie na 320 px, z pusta polowa ekranu obok. `auto-fit` zwija puste sciezki
   i oddaje ich miejsce kafelkom — czyli robi to, po co ta strona dostala cala szerokosc. */

.integ-grid[b-yb6a55kt9z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap: 1.1rem;
    align-items: start;
}

.integ-tile[b-yb6a55kt9z] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.2rem 1.25rem 1.1rem;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
}

.integ-tile.available:hover[b-yb6a55kt9z] { border-color: var(--p1); box-shadow: var(--shadow-md); }
.integ-tile.coming-soon[b-yb6a55kt9z] { opacity: 0.7; }

.integ-tile-head[b-yb6a55kt9z] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.integ-tile-title[b-yb6a55kt9z] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.integ-tile-title strong[b-yb6a55kt9z] {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.35rem;
    line-height: 1.1;
    font-weight: 400;
    color: var(--text);
}

.integ-tile-sub[b-yb6a55kt9z] {
    font-size: 11.5px;
    color: var(--text-soft);
}

.integ-tile-desc[b-yb6a55kt9z] {
    font-size: 12.5px;
    color: var(--text-soft);
    line-height: 1.5;
    margin-bottom: 0.85rem;
    max-width: 68ch;
}

/* Przyciski maja siedziec na dole kafelka, zeby dwa kafelki roznej dlugosci konczyly sie
   rowno — inaczej „Polacz" jednego stoi w polowie wysokosci drugiego i wyglada to na
   przypadek. */
.integ-tile-actions[b-yb6a55kt9z] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.sandbox-toggle[b-yb6a55kt9z] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 11.5px;
    color: var(--text-soft);
    cursor: pointer;
    margin-left: auto;
}

.sandbox-toggle input[b-yb6a55kt9z] { accent-color: var(--warn); }
.sandbox-toggle:hover[b-yb6a55kt9z] { color: var(--text-soft); }

.sandbox-warning[b-yb6a55kt9z] {
    margin-top: 0.85rem;
    padding: 0.75rem 0.85rem;
    background: var(--warn-bg);
    border: 1px solid var(--warn);
    border-radius: var(--radius-sm);
    display: flex;
    gap: 0.7rem;
}

.sw-icon[b-yb6a55kt9z] { font-size: 1.4rem; color: var(--warn); line-height: 1; }
.sw-body[b-yb6a55kt9z] { flex: 1; min-width: 0; }
.sw-body strong[b-yb6a55kt9z] { display: block; color: var(--warn); font-size: 12.5px; margin-bottom: 0.25rem; }
.sw-body p[b-yb6a55kt9z] { font-size: 11.5px; color: var(--text); line-height: 1.45; }
.sw-body a[b-yb6a55kt9z] { color: var(--warn); text-decoration: underline; }

.sync-from-row[b-yb6a55kt9z] {
    margin-top: 0.85rem;
    margin-bottom: 0.9rem;
    padding: 0.65rem 0.75rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.sync-from-etykieta[b-yb6a55kt9z] {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--text-faint);
}

.sync-from-pole[b-yb6a55kt9z] {
    padding: 0.4rem 0.6rem;
    font-size: 12.5px;
    max-width: 11rem;
}

.sync-from-uwaga[b-yb6a55kt9z] {
    display: block;
    margin-top: 0.25rem;
    font-size: 10.5px;
    color: var(--text-soft);
}

/* Ostrzezenie „zanim podlaczysz" — to samo zdanie, co na formularzu recznego podlaczenia.
   Musi stac takze tutaj, bo logowanie przez Gmail i Outlook ten formularz OMIJA. */
.integ-tile-zanim[b-yb6a55kt9z] {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--danger);
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text);
}

.integ-tile-zanim strong:first-child[b-yb6a55kt9z] { color: var(--danger); }

.integ-tile-stopka[b-yb6a55kt9z] {
    margin-top: 0.6rem;
    font-size: 11px;
    color: var(--text-soft);
    line-height: 1.5;
}

/* ── Naglowek strony ─────────────────────────────────────────────────────────────── */

.add-glowa[b-yb6a55kt9z] {
    margin-bottom: 1.5rem;
    max-width: 72ch;
}

.add-okruchy[b-yb6a55kt9z] {
    color: var(--text-faint);
    margin-bottom: 0.4rem;
}

.add-okruchy a[b-yb6a55kt9z] { color: var(--text-faint); text-decoration: none; }
.add-okruchy a:hover[b-yb6a55kt9z] { color: var(--text-soft); text-decoration: underline; }

.add-tytul[b-yb6a55kt9z] { font-size: clamp(1.8rem, 3.2vw, 2.4rem); }

.add-lede[b-yb6a55kt9z] {
    font-size: 13.5px;
    margin-top: 0.5rem;
}

/* ── Drobiazgi kafelkow ──────────────────────────────────────────────────────────── */

.integ-ikona[b-yb6a55kt9z] {
    width: 38px;
    height: 38px;
    font-size: 16px;
    border-radius: 9px;
    flex: none;
}

/* Drugi akapit opisu jest ciagiem dalszym pierwszego, wiec stoi tuz pod nim. */
.integ-tile-desc-ciag[b-yb6a55kt9z] { margin-top: -0.35rem; }

.sw-linki[b-yb6a55kt9z] { margin-top: 0.4rem; font-size: 11.5px; }

.sw-akcje[b-yb6a55kt9z] {
    margin-top: 0.7rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (prefers-reduced-motion: no-preference) {
    .sandbox-warning[b-yb6a55kt9z] { animation: msFadeIn 0.15s ease-out; }
}

@media (max-width: 768px) {
    .integ-tile-actions > .btn[b-yb6a55kt9z] { flex: 1 1 auto; justify-content: center; }
}
/* /Components/Pages/Integrations/CytatSerweraPocztowego.razor.rz.scp.css */
/* Cytat z serwera pocztowego — wyglada JAK CYTAT, bo nim jest.

   Styl ma robic jedna rzecz: pokazac, ze to nie jest zdanie aplikacji. Stad kreska z lewej,
   inne tlo niz karta i kursywa na samej tresci. Gdyby to bylo sformatowane jak reszta ekranu,
   klient czytalby cudze zdanie jako nasze — a tego zdania nie mamy jak sprawdzic.

   ⚠ Styl zakresowy nalezy do TEGO komponentu. Klasy sa uzywane wylacznie tutaj, wiec nie ma
   ich w app.css: wspolne klasy zakresowe nie dzialaja poza wlasnym komponentem. */

.cytat-serwera[b-ib13cl6osu] {
    margin-top: .55rem;
    padding: .6rem .75rem;
    background: var(--warn-bg);
    border-left: 3px solid var(--warn);
    border-radius: var(--radius-sm);
    font-size: 12px;
    line-height: 1.5;
    /* Dlugie zdanie od obcego serwera potrafi byc jednym slowem bez spacji (adres strony).
       Bez tego rozpycha karte na siatce i lamie uklad calego ekranu. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.cytat-kto[b-ib13cl6osu] {
    color: var(--warn);
    font-weight: 650;
    margin-bottom: .25rem;
}

.cytat-tresc[b-ib13cl6osu] {
    margin: 0;
    padding: 0;
    font-style: italic;
    color: var(--text);
    /* Cudzysłow drukarski jest tu czescia znaczenia: pokazuje, gdzie zaczyna sie i konczy
       cudza wypowiedz — takze dla kogos, kto nie widzi kolorow. */
}

.cytat-tresc[b-ib13cl6osu]::before { content: "\201E"; }
.cytat-tresc[b-ib13cl6osu]::after  { content: "\201D"; }

.cytat-uwaga[b-ib13cl6osu] {
    margin-top: .3rem;
    font-size: 11px;
    color: var(--text-soft);
    font-style: normal;
}

/* Ostrzezenie „nie reczymy za te tresc" i „nie otwieraj adresow" ma byc widoczne, a nie schowane
   w drobnym druku obok reszty. RFC 9051 zada, zeby alarm byl WYRAZNIE oznaczony jako podejrzany —
   przypis w kolorze tla tego nie spelnia. */
.cytat-uwaga strong[b-ib13cl6osu] { color: var(--warn); font-weight: 650; }

.cytat-kiedy[b-ib13cl6osu] { display: block; }
/* /Components/Pages/Integrations/Email/AddEmailAccount.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════
   Ekran podlaczania skrzynki pocztowej.

   ⚠ CALY UKLAD PRZEROBIONY 30.08.2026 (zgloszenie wlasciciela: „tragicznie brzydki,
   porozwalane, ciasne, masz cala szerokosc ekranu"). Formularz stal w jednej kolumnie
   ograniczonej do 720 px — na monitorze 1440 zajmowal lewa polowe ekranu, a szesc sekcji
   jedna pod druga dawalo kilka ekranow przewijania. Teraz: dwie kolumny (co wpisujesz /
   co ustawiamy za Ciebie), kroki z numeracja, rzeczy rzadkie pod „Ustawieniami
   zaawansowanymi", sprawdzenie polaczenia jako szeroki przystanek, a glowna akcja
   w pasku przyklejonym do dolu okna.

   Wszystkie kolory z tokenow (--p1, --ok, --warn, --danger, --line, --paper, --cream…) —
   ani jednego hexa, zeby motyw ciemny dzialal sam z siebie.

   ⚠ 12.10.2026: UKLAD, POLA, UWAGI, BLOKI I PASEK AKCJI MIESZKAJA W app.css (sekcja
   „EKRANY SKRZYNEK POCZTOWYCH”, pod klasa `.skrz-ekran`). Bierze je stamtad takze ekran
   edycji skrzynki — oba ekrany maja wygladac tak samo, wiec regul nie ma w dwoch miejscach.
   Tutaj zostalo tylko to, co ma WYLACZNIE ekran dodawania.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── Naglowek strony ──────────────────────────────────────────────────────────────── */

.skrz-glowa[b-tss4ekv6bi] {
    margin-bottom: 1.75rem;
    max-width: 74ch;
}

.skrz-okruchy[b-tss4ekv6bi] {
    color: var(--text-faint);
    margin-bottom: 0.4rem;
}

.skrz-okruchy a[b-tss4ekv6bi] {
    color: var(--text-faint);
    text-decoration: none;
}

.skrz-okruchy a:hover[b-tss4ekv6bi] { color: var(--text-soft); text-decoration: underline; }

.skrz-tytul[b-tss4ekv6bi] { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }

.skrz-lede[b-tss4ekv6bi] {
    font-size: 14px;
    margin-top: 0.5rem;
    max-width: 62ch;
}

/* Instrukcja hasła aplikacji Google — numerowane kroki czytelne na telefonie. */
.instrukcja-google[b-tss4ekv6bi] { margin-top: 0.75rem; }
.instrukcja-google ol[b-tss4ekv6bi] {
    margin: 0.2rem 0 0.35rem;
    padding-left: 1.2rem;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text);
}
.instrukcja-google li[b-tss4ekv6bi] { margin: 0.2rem 0; overflow-wrap: anywhere; }
.instrukcja-google a[b-tss4ekv6bi] { color: var(--p1, var(--global-palette1)); font-weight: 600; }

/* ── Podpowiedz pod lista dostawcow ────────────────────────────────────────────────
   Co juz wpisalismy za klienta i skad to mamy. Zrodlo widoczne z zalozenia: pozycja
   bez potwierdzenia u dostawcy nie ma prawa byc na liscie, a klient ma sposob to
   sprawdzic. */

.dostawca-podpowiedz[b-tss4ekv6bi] {
    display: block;
    margin-top: 0.15rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--ok);
    border-radius: var(--radius-sm);
    background: var(--ok-bg);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text);
}

.dostawca-podpowiedz strong[b-tss4ekv6bi] { color: var(--text); }

/* Zdanie „rozpoznalismy dostawce po Twoim adresie" — stoi PIERWSZE, bo odpowiada na
   pytanie, ktore czlowiek zadaje sobie, gdy formularz sam sie wypelnia: kto to zrobil. */
.dostawca-rozpoznanie[b-tss4ekv6bi] {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-soft);
}

.dostawca-wskazowka[b-tss4ekv6bi] {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-soft);
}

/* Zdanie o limicie wysylki — oddzielone kreska, bo mowi o czym innym niz reszta
   tabliczki: nie o polach formularza, tylko o suficie, ktory dostawca narzuca skrzynce. */
.dostawca-limit[b-tss4ekv6bi] {
    display: block;
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--ok);
    color: var(--text-soft);
}

.dostawca-zrodlo[b-tss4ekv6bi] {
    display: block;
    margin-top: 0.35rem;
    font-size: 10.5px;
    color: var(--text-soft);
}

.dostawca-zrodlo a[b-tss4ekv6bi] { color: var(--text-soft); text-decoration: underline; }
.dostawca-zrodlo a:hover[b-tss4ekv6bi] { color: var(--text); }

/* ── Telefon ───────────────────────────────────────────────────────────────────────
   Nic tu nie znika: kolumny skladaja sie w jedna, pasek akcji rozciaga przyciski na
   cala szerokosc, a przystanek sprawdzenia ustawia przycisk pod zdaniem. */

@media (max-width: 768px) {
    .skrz-glowa[b-tss4ekv6bi] { margin-bottom: 1.25rem; }
}
/* /Components/Pages/Integrations/Email/KrokPodlaczenia.razor.rz.scp.css */
/* Krok podlaczania skrzynki — numer w kolumnie, kreska prowadzaca do nastepnego kroku.

   Kreska jest ::before na calej sekcji i siega ponizej jej dolnej krawedzi o wysokosc
   odstepu w siatce rodzica — dlatego ciagnie sie bez przerw miedzy krokami. Ostatni krok
   ma ja wygaszona, zeby nie prowadzila donikad. */

.krok[b-clbe4q22u3] {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0 1rem;
    min-width: 0;
}

.krok[b-clbe4q22u3]::before {
    content: '';
    position: absolute;
    left: 1.125rem;
    top: 2.6rem;
    bottom: -1.9rem;
    width: 1px;
    background: var(--line);
}

.krok-ostatni[b-clbe4q22u3]::before { display: none; }

/* Sekcja bez numeru (ekran edycji skrzynki): jedna kolumna, bez kreski do następnej sekcji.
   Tytuł i odstępy pól zostają dokładnie te same. Selektor złożony, żeby wygrał także
   z regułą telefonu niżej. */
.krok.krok-bez-numeru[b-clbe4q22u3] { grid-template-columns: minmax(0, 1fr); }
.krok.krok-bez-numeru[b-clbe4q22u3]::before { display: none; }

.krok-slup[b-clbe4q22u3] {
    display: flex;
    justify-content: center;
}

.krok-numer[b-clbe4q22u3] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    color: var(--p1);
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.15rem;
    line-height: 1;
    padding-bottom: 1px;
}

.krok-tresc[b-clbe4q22u3] {
    min-width: 0;
    padding-bottom: 0.25rem;
}

.krok-tytul[b-clbe4q22u3] {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0.3rem 0 0;
}

.krok-podtytul[b-clbe4q22u3] {
    font-size: 12.5px;
    color: var(--text-soft);
    line-height: 1.5;
    margin: 0.3rem 0 0;
    max-width: 62ch;
}

/* Kontener tresci kroku — rysuje go TEN komponent, wiec zakresowy selektor go trafia.
   Odstepy miedzy polami robi `gap`, a nie regula na dzieciach: dzieci przychodza od rodzica
   i niosa JEGO znacznik zakresu, wiec zaden selektor z tego arkusza by ich nie zlapal. */
.krok-pola[b-clbe4q22u3] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 0.9rem;
    min-width: 0;
}

@media (max-width: 560px) {
    .krok[b-clbe4q22u3] {
        grid-template-columns: 1.75rem minmax(0, 1fr);
        gap: 0 0.7rem;
    }
    .krok[b-clbe4q22u3]::before { left: 0.875rem; top: 2.1rem; }
    .krok-numer[b-clbe4q22u3] { width: 1.75rem; height: 1.75rem; font-size: 1rem; }
    .krok-tytul[b-clbe4q22u3] { font-size: 1.25rem; }
}
/* /Components/Pages/Integrations/Email/PodsumowanieSkrzynki.razor.rz.scp.css */
/* Tabliczka znamionowa — panel „co ustawiamy za Ciebie".

   Wzorowana na tabliczce urzadzenia, a nie na karcie marketingowej: wloskowe linie miedzy
   wierszami, etykiety drobne i wersalikami, wartosci krojem maszynowym. To jest jedyne
   miejsce na tym ekranie z takim rytmem — reszta strony ma byc przy nim cicha. */

.tabliczka[b-9431xk8nxh] {
    position: sticky;
    top: calc(var(--topbar-h) + 1rem);
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    min-width: 0;
}

.tabliczka-glowa[b-9431xk8nxh] {
    padding: 0.9rem 1.05rem 0.8rem;
    border-bottom: 1px solid var(--line);
    background: var(--cream-2);
}

.tabliczka-etykieta[b-9431xk8nxh] {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-soft);
}

.tabliczka-adres[b-9431xk8nxh] {
    display: block;
    margin-top: 0.3rem;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    overflow-wrap: anywhere;
}

.tabliczka-lista[b-9431xk8nxh] {
    margin: 0;
    padding: 0.25rem 1.05rem 0.5rem;
}

.tabliczka-wiersz[b-9431xk8nxh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line);
}

.tabliczka-wiersz:last-child[b-9431xk8nxh] { border-bottom: none; }

.tabliczka-wiersz dt[b-9431xk8nxh] {
    font-size: 11.5px;
    color: var(--text-soft);
    line-height: 1.35;
    min-width: 0;
}

.tabliczka-wiersz dd[b-9431xk8nxh] {
    margin: 0;
    font-size: 12px;
    color: var(--text);
    line-height: 1.4;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.tabliczka-brak[b-9431xk8nxh] {
    color: var(--text-faint);
    font-style: italic;
}

.tabliczka-znacznik[b-9431xk8nxh] {
    display: block;
    margin-top: 0.15rem;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
}

.tabliczka-znacznik-ok[b-9431xk8nxh] { color: var(--ok); }
.tabliczka-znacznik-uwaga[b-9431xk8nxh] { color: var(--warn); }

.tabliczka-haslo[b-9431xk8nxh] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0;
    padding: 0.75rem 1.05rem 0.85rem;
    border-top: 1px solid var(--line);
    background: var(--cream);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-soft);
}

.tabliczka-haslo strong[b-9431xk8nxh] { color: var(--text); }

/* Na waskim ekranie tabliczka przestaje byc kolumna obok formularza i staje sie zwyklym
   blokiem — przyklejanie jej do gory zabieraloby wtedy pol ekranu treaci. */
@media (max-width: 1180px) {
    .tabliczka[b-9431xk8nxh] { position: static; }
}

@media (max-width: 560px) {
    .tabliczka-wiersz[b-9431xk8nxh] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }
    .tabliczka-wiersz dd[b-9431xk8nxh] { text-align: left; }
    .tabliczka-znacznik[b-9431xk8nxh] { display: inline; margin-left: 0.4rem; }
}
/* /Components/Pages/Integrations/Email/WynikSprawdzenia.razor.rz.scp.css */
/* Wynik sprawdzenia polaczenia.

   ⚠ TLO, NIE TYLKO RAMKA. Poprzednia wersja korzystala z `.alert-banner`, ktora ma na stale
   tlo ostrzegawcze — samo przemalowanie obrysu na zielono dawalo przy UDANYM polaczeniu
   zielona ramke na czerwonym tle, czyli sukces wygladajacy jak awaria. Tutaj oba stany maja
   wlasny komplet: obrys, tlo i kolor znaku. */

.wynik[b-bfctlcsz5m] {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.95rem 1.1rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--line);
    background: var(--paper);
    animation: fade-up 0.25s ease-out;
}

.wynik-ok[b-bfctlcsz5m] {
    border-color: var(--ok);
    background: var(--ok-bg);
}

.wynik-zle[b-bfctlcsz5m] {
    border-color: var(--danger);
    background: var(--danger-bg);
}

.wynik-znak[b-bfctlcsz5m] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-light);
}

.wynik-ok .wynik-znak[b-bfctlcsz5m] { background: var(--ok); }
.wynik-zle .wynik-znak[b-bfctlcsz5m] { background: var(--danger); }

.wynik-tresc[b-bfctlcsz5m] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.wynik-naglowek[b-bfctlcsz5m] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.wynik-ok .wynik-naglowek[b-bfctlcsz5m] { color: var(--ok); }
.wynik-zle .wynik-naglowek[b-bfctlcsz5m] { color: var(--danger); }

/* Numer sprawdzenia — ma być widać, ale nie krzyczeć: to ślad po kliknięciu, nie treść wyniku. */
.wynik-proba[b-bfctlcsz5m] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-soft);
    margin-left: 0.35rem;
}

.wynik-zdanie[b-bfctlcsz5m] {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text);
    overflow-wrap: anywhere;
}

.wynik-rada[b-bfctlcsz5m] {
    margin-top: 0.35rem;
    padding-top: 0.4rem;
    border-top: 1px solid color-mix(in oklab, var(--danger) 25%, transparent);
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-soft);
}

.wynik-rada strong[b-bfctlcsz5m] { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
    .wynik[b-bfctlcsz5m] { animation: none; }
}
/* /Components/Pages/Integrations/Integrations.razor.rz.scp.css */
.head-row[b-ij54nucs0t] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ⚠ DWIE KOLUMNY NA MONITORZE, NIE TRZY (30.08.2026). Przy `minmax(320px, 1fr)` kontener 1210 px
   mieścił trzy karty po ~370 px: listy wyboru retencji („7 dni / 30 dni / 90 dni / 1 rok / zawsze")
   łamały się na dwie linie, etykiety zawijały, karty rosły do różnych wysokości i nic się między
   nimi nie zestawiało. `min(100%, 480px)` daje dwie karty po ~595 px na 1440 px, a na telefonie
   nie wypycha treści poza ekran — bez `min()` kolumna 480 px byłaby szersza niż okno 390 px. */
.integ-grid[b-ij54nucs0t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr));
    gap: 1rem;
    /* Karty w jednym rzędzie mają wspólną wysokość (domyślne `stretch`) — stopka z przyciskami
       ląduje wtedy na tej samej linii w obu kartach i da się je porównać wzrokiem. */
    align-items: stretch;
}

/* Stopka z akcjami dosuwana do dołu karty, żeby przy równej wysokości kart przyciski stały
   w jednej linii niezależnie od tego, ile wierszy ma karta wyżej. */
.integ-card .integ-actions[b-ij54nucs0t] { margin-top: auto; }

/* Przestroga o bezpowrotnym kasowaniu — RAZ, nad listą. Ton poważny, ale nie alarmowy:
   to jest opis skutku ustawienia, nie awaria. */
.integ-przestroga[b-ij54nucs0t] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text);
    background: var(--danger-bg);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-sm);
}

.integ-przestroga > span:first-child[b-ij54nucs0t] { color: var(--danger); font-weight: 700; flex: none; }

.integ-card[b-ij54nucs0t] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.15rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.integ-card.tone-ok[b-ij54nucs0t] { border-left-color: var(--p1); }
.integ-card.tone-warn[b-ij54nucs0t] { border-left-color: var(--warn); }
.integ-card.tone-danger[b-ij54nucs0t] { border-left-color: var(--danger); }

.integ-card:hover[b-ij54nucs0t] { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.integ-head[b-ij54nucs0t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.integ-brand[b-ij54nucs0t] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.integ-brand strong[b-ij54nucs0t] { font-size: 14px; color: var(--text); }

.integ-meta[b-ij54nucs0t] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.integ-meta .kv-row[b-ij54nucs0t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--line);
    font-size: 12.5px;
}

.integ-meta .kv-row:last-child[b-ij54nucs0t] { border-bottom: none; }

/* Wiersz z grupą znaczników („7 dni / 30 dni / …"). Etykieta NAD wyborem, nie obok:
   przy etykiecie z lewej i znacznikach dociśniętych do prawej przez środek karty biegła
   pustka, a sama grupa dostawała tak mało miejsca, że łamała się na dwie linie. */
.integ-meta .kv-row.kv-stack[b-ij54nucs0t] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding-bottom: 0.6rem;
}

.integ-meta .kv-row.kv-stack .kv-label[b-ij54nucs0t] { padding-top: 0; }

/* Nagłówek grupy „Ustawienia tego konta" — ten sam punkt zaczepienia w każdej karcie. */
.integ-section[b-ij54nucs0t] {
    margin: 0.9rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--text-soft);
}

.integ-meta .kv-label[b-ij54nucs0t] {
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10.5px;
    font-weight: 500;
}

.integ-meta .kv-val[b-ij54nucs0t] {
    color: var(--text);
    text-align: right;
    font-size: 12px;
}

/* Layout: jeden wiersz, primary po lewej, ikony destructive po prawej (auto-margin).
   Icon-only destructive (32×32px) zostawiają miejsce na 2 tekstowe primary buttons nawet
   w wąskiej karcie — bez wrap. Gdyby się jednak nie zmieściło, danger przeskakuje w
   nowy wiersz z prawym wyrównaniem. */
.integ-actions[b-ij54nucs0t] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

.integ-actions[b-ij54nucs0t]  .integ-actions-primary {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.integ-actions[b-ij54nucs0t]  .integ-actions-danger {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
    margin-left: auto;  /* zawsze do prawej (ważne też dla wrapped case — własna linia z right-align) */
}

/* Icon-only buttons w danger group — square 32×32, subtle hover, brak border domyślnie */
.integ-actions[b-ij54nucs0t]  .integ-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-soft);
    transition: all 0.15s ease;
    padding: 0;
}

.integ-actions[b-ij54nucs0t]  .integ-icon-btn:hover {
    background: var(--cream-2);
    color: var(--text);
    border-color: var(--line-strong);
}

/* "Ukryj" hover → soft danger (subtle, bo bezpieczna akcja — można cofnąć) */
.integ-actions[b-ij54nucs0t]  .integ-icon-hide:hover {
    background: #fbe9e6;
    color: var(--danger);
    border-color: #f1c5be;
}

/* "Usuń" hover → solid danger (mocny sygnał — destrukcyjne, irreversible) */
.integ-actions[b-ij54nucs0t]  .integ-icon-delete:hover {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

[data-theme="dark"] .integ-actions[b-ij54nucs0t]  .integ-icon-btn:hover {
    background: var(--cream-2);
}
[data-theme="dark"] .integ-actions[b-ij54nucs0t]  .integ-icon-hide:hover {
    background: rgba(196,57,47,0.12);
    border-color: rgba(196,57,47,0.32);
    color: #f08a82;
}

/* Sync interval — segmented chip group per ConnectorAccount.
   Każdy pill to osobny formularz post — klik = natychmiastowy zapis (zero "Zapisz" button). */
.interval-pills[b-ij54nucs0t] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    background: var(--cream-2);
    padding: 0.25rem;
    border-radius: 10px;
    border: 1px solid var(--line);
}

.interval-pills form[b-ij54nucs0t] { display: inline; margin: 0; padding: 0; }

.interval-pills .f-chip[b-ij54nucs0t] {
    padding: 0.3rem 0.7rem;
    font-size: 12px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 7px;
    color: var(--text-soft);
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: all 0.12s;
}

.interval-pills .f-chip:hover[b-ij54nucs0t] { background: var(--paper); color: var(--text); }

.interval-pills .f-chip.active[b-ij54nucs0t] {
    background: var(--p1);
    color: #fff;
    border-color: var(--p1);
}

/* Powod, dla ktorego przycisk naprawy jest niedostepny. Ta sama waga co przyciski obok,
   ale bez ramki — to komunikat, nie akcja. */
.integ-actions[b-ij54nucs0t]  .integ-perm-note {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-soft);
    max-width: 30ch;
}

.integ-actions[b-ij54nucs0t]  .integ-perm-note strong { color: var(--text); font-weight: 600; }

/* Skrzynka czekajaca na ponowne wpisanie hasla. Ton ostrzegawczy, nie alarmowy: nic nie
   jest zepsute, brakuje jednej rzeczy — i dlatego ten blok ma powiedziec, jakiej. */
.integ-do-wpisania[b-ij54nucs0t] {
    margin-top: .55rem;
    padding: .6rem .75rem;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text);
    background: var(--warn-bg);
    border-left: 3px solid var(--warn);
    border-radius: var(--radius-sm);
}

.integ-do-wpisania strong[b-ij54nucs0t] { display: block; color: var(--warn); font-weight: 650; margin-bottom: .2rem; }

/* Wybor w drugim kroku usuwania integracji — klikalna karta, nie sam maly krazek radia.
   Cala etykieta jest celem klikniecia, wiec na telefonie tez da sie w to trafic. */
.del-choice[b-ij54nucs0t] {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .85rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: .6rem;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.del-choice:hover[b-ij54nucs0t] { border-color: var(--line-strong); }
.del-choice.is-picked[b-ij54nucs0t] { border-color: var(--p1); background: color-mix(in oklab, var(--p1) 6%, transparent); }
.del-choice-danger.is-picked[b-ij54nucs0t] { border-color: var(--danger); background: color-mix(in oklab, var(--danger) 7%, transparent); }
.del-choice input[type="radio"][b-ij54nucs0t] { margin-top: .2rem; flex: none; }
.del-choice > span[b-ij54nucs0t] { min-width: 0; }
.del-choice-desc[b-ij54nucs0t] {
    display: block;
    margin-top: .3rem;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-soft);
}

/* ===== Widok tabeli (03.10.2026) =====
   Tabela ma duzo kolumn (wszystkie dane konta), wiec przewija sie poziomo W SWOIM POJEMNIKU,
   a nie calej strony. Pierwsza kolumna (konto) i ostatnia (akcje) stoja w miejscu — przy
   przewijaniu zawsze widac, o ktore konto chodzi i co mozna z nim zrobic. */
.integ-tabela-wrap[b-ij54nucs0t] {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
}
.integ-tabela[b-ij54nucs0t] { min-width: 1900px; }
.integ-tabela td[b-ij54nucs0t], .integ-tabela th[b-ij54nucs0t] { vertical-align: top; white-space: nowrap; }
.integ-tabela td.integ-kol-stan[b-ij54nucs0t] { white-space: normal; min-width: 190px; }
.integ-tabela .integ-tabela-blad[b-ij54nucs0t] { white-space: normal; min-width: 220px; max-width: 320px; color: var(--danger); font-size: 12px; margin-top: .2rem; }
.integ-tabela .integ-kol-konto[b-ij54nucs0t],
.integ-tabela .integ-kol-akcje[b-ij54nucs0t] { position: sticky; background: var(--paper); z-index: 1; }
.integ-tabela thead .integ-kol-konto[b-ij54nucs0t],
.integ-tabela thead .integ-kol-akcje[b-ij54nucs0t] { background: var(--cream-2); }
.integ-tabela .integ-kol-konto[b-ij54nucs0t] { left: 0; box-shadow: 1px 0 0 var(--line); }
.integ-tabela .integ-kol-akcje[b-ij54nucs0t] { right: 0; box-shadow: -1px 0 0 var(--line); }
/* Przyklejona kolumna „Akcje" zawsze lezy NA tych, ktore przewijaja sie pod nia (przy tabeli ustawionej na poczatku
   — na „Ostatnie sprawdzenie"). Twarda krawedz uciela wtedy naglowek w pol slowa i wyglada na blad, a nie na nakladke —
   dlatego (1) kolumna jest wezsza (przyciski jeden pod drugim), a (2) jej lewa krawedz rzuca miekki cien, ktory mowi
   „tabela biegnie dalej pod spodem". Naglowek kolumny pod spodem zostaje caly w tresci komorki (nic nie jest obcinane
   przez sama kolumne), przycina go tylko nakladka — i to widac. */
.integ-tabela .integ-kol-akcje[b-ij54nucs0t] {
    box-shadow: -1px 0 0 var(--line),
                -14px 0 14px -10px color-mix(in oklab, var(--text) 28%, transparent);
}
.integ-tabela .integ-kol-konto[b-ij54nucs0t] {
    box-shadow: 1px 0 0 var(--line),
                14px 0 14px -10px color-mix(in oklab, var(--text) 28%, transparent);
}
/* Naglowki kolumn pod nakladka maja wlasny, niezmienny odstep — „Ostatnie sprawdzenie" nie sciska sie do „Ostatnie spraw…". */
.integ-tabela thead th[b-ij54nucs0t] { min-width: 8.5rem; }
.integ-tabela thead th.integ-kol-konto[b-ij54nucs0t] { min-width: 0; }
.integ-tabela thead th.integ-kol-akcje[b-ij54nucs0t] { min-width: 0; }
.integ-tabela tbody tr:hover .integ-kol-konto[b-ij54nucs0t],
.integ-tabela tbody tr:hover .integ-kol-akcje[b-ij54nucs0t] { background: var(--cream-2); }
.integ-tabela .row-actions[b-ij54nucs0t] { display: table-cell; }
.integ-tabela td.integ-kol-akcje[b-ij54nucs0t] { white-space: normal; min-width: 150px; max-width: 170px; text-align: left; }
/* ── Czynnosci wiersza: jeden slupek, jedna szerokosc, jedna wysokosc (12.10.2026) ──────────────
   Stala tu regula `.btn { display: block }`. To ona rozjezdzala przyciski: `display: block` zdejmuje
   z przycisku jego wlasne srodkowanie (`.btn` jest `inline-flex` z `align-items` i `justify-content`),
   wiec napis odnosnika „Popraw haslo" ladowal przy gornej krawedzi i — przez `text-align: right`
   dziedziczone z `.row-actions` — po prawej. Do tego `<button>` w ukladzie blokowym kurczy sie do
   napisu, a `<a>` rozciaga na cala szerokosc: stad dwa rozmiary obok siebie.
   Teraz slupek jest pojemnikiem elastycznym i to ON ustawia szerokosc; przycisk zostaje soba. */
.integ-akcje[b-ij54nucs0t] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
    min-width: 0;
}
.integ-akcje .btn[b-ij54nucs0t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2rem;
    margin: 0;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
}
/* Telefon: ten sam slupek na cala szerokosc karty konta. */
.data-card-actions.integ-akcje[b-ij54nucs0t] { flex-wrap: nowrap; }
.integ-tabela-podpowiedz[b-ij54nucs0t] { margin: 0 0 .5rem; font-size: 12px; color: var(--text-soft); }
.integ-tabela .row-actions > * + *[b-ij54nucs0t] { margin-left: 0; }
.integ-wiersz-ukryty[b-ij54nucs0t] { opacity: .6; }
.integ-tabela .integ-brand[b-ij54nucs0t] { display: flex; align-items: center; gap: .55rem; }

/* Okno „Edytuj" niesie cala karte ustawien konta — bez drugiej ramki i bez „unoszenia" przy najechaniu. */
.integ-edit-dialog[b-ij54nucs0t] { max-width: 680px; width: 100%; }
.integ-edit-dialog .integ-card[b-ij54nucs0t] { border: none; border-left: 4px solid var(--line-strong); box-shadow: none; padding: 0 0 0 1rem; }
.integ-edit-dialog .integ-card.tone-ok[b-ij54nucs0t] { border-left-color: var(--p1); }
.integ-edit-dialog .integ-card.tone-warn[b-ij54nucs0t] { border-left-color: var(--warn); }
.integ-edit-dialog .integ-card.tone-danger[b-ij54nucs0t] { border-left-color: var(--danger); }
.integ-edit-dialog .integ-card:hover[b-ij54nucs0t] { transform: none; box-shadow: none; }
/* /Components/Pages/Integrations/PrzykladZdjec.razor.rz.scp.css */
/* Przykład „to samo zdjęcie w trzech wersjach” — patrz PrzykladZdjec.razor.
   Trzy wycinki w jednym rzędzie, każdy tej samej wielkości na ekranie, żeby oko porównywało obraz,
   a nie ramki. Kolory wyłącznie ze zmiennych aplikacji. */
.pz[b-34u56kip9n] {
    margin: 0.7rem 0 0;
    padding: 0;
    width: 100%;
}

.pz-opis[b-34u56kip9n] {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-soft);
    margin-bottom: 0.5rem;
    max-width: 62ch;
}

.pz-rzad[b-34u56kip9n] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.pz-wersja[b-34u56kip9n] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.35rem 0.35rem 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    min-width: 0;
}

.pz-wersja:hover[b-34u56kip9n],
.pz-wersja:focus-visible[b-34u56kip9n] {
    border-color: var(--p1);
    outline: none;
}

/* Wyróżnienie wybranego poziomu: grubsza krawędź w kolorze akcentu — bez zmiany wielkości kafla. */
.pz-wybrana[b-34u56kip9n] {
    border-color: var(--p1);
    box-shadow: inset 0 0 0 1px var(--p1);
}

.pz-wycinek[b-34u56kip9n] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 5px;
    background: var(--surface-muted);
    cursor: zoom-in;
}

.pz-nazwa[b-34u56kip9n] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.3rem;
    font-size: 12.5px;
    font-weight: 600;
}

.pz-znak[b-34u56kip9n] {
    font-size: 10.5px;
    font-weight: 500;
}

.pz-rozmiar[b-34u56kip9n] {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pz-wymiary[b-34u56kip9n] {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--text-soft);
}

/* Telefon: trzy kafle obok siebie byłyby za wąskie na liczby — idą jeden pod drugim,
   wycinek po lewej, liczby po prawej. */
@media (max-width: 560px) {
    .pz-rzad[b-34u56kip9n] {
        grid-template-columns: 1fr;
    }

    .pz-wersja[b-34u56kip9n] {
        display: grid;
        grid-template-columns: 42% 1fr;
        column-gap: 0.6rem;
        align-content: start;
    }

    .pz-wycinek[b-34u56kip9n] {
        grid-row: 1 / span 3;
    }

    .pz-nazwa[b-34u56kip9n] {
        margin-top: 0;
    }
}
/* /Components/Pages/Oferta/OfertaDlaFirm.razor.rz.scp.css */
.oferta[b-g0hkgtuzx9] { padding-top: 1.5rem; font-size: 1rem; }
.oferta-okruszki[b-g0hkgtuzx9] { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .875rem; color: var(--text-soft); }
.oferta a:not(.btn)[b-g0hkgtuzx9] { color: var(--p1); text-underline-offset: .2em; }
.oferta .oferta-hero[b-g0hkgtuzx9] { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; padding: 3rem 0 3.25rem; gap: 2.5rem; }
.oferta-hero h1[b-g0hkgtuzx9] { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(2.9rem, 4.8vw, 4.3rem); line-height: 1.04; letter-spacing: -.025em; max-width: 15ch; margin-bottom: 1.25rem; }
.oferta-hero .str-lede[b-g0hkgtuzx9] { font-size: 1.125rem; max-width: 44ch; line-height: 1.65; }
.oferta .oferta-hero-test[b-g0hkgtuzx9] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin: 1.5rem 0 0; }
.oferta-hero-test strong[b-g0hkgtuzx9] { font-size: 1.4rem; font-weight: 650; color: var(--text); }
.oferta-hero-test span[b-g0hkgtuzx9] { font-size: .875rem; }
.oferta .str-cta[b-g0hkgtuzx9] { margin-top: 1rem; }
.oferta .str-cta .btn[b-g0hkgtuzx9] { min-height: 46px; white-space: normal; text-align: center; }
.oferta .str-cta-notka[b-g0hkgtuzx9] { font-size: .875rem; line-height: 1.65; }
.oferta .oferta-pokaz-notka[b-g0hkgtuzx9] { font-size: .8rem; margin: .65rem 0 0; }
.oferta-ekran[b-g0hkgtuzx9] { margin: 0; min-width: 0; }
.oferta-ekran-hero[b-g0hkgtuzx9] { background: var(--paper); padding: 1.1rem; border: 1px solid var(--line); border-radius: 16px; }
.oferta-dowod-naglowek[b-g0hkgtuzx9] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin-bottom: 1rem; font-size: .85rem; }
.oferta-dowod-naglowek span[b-g0hkgtuzx9] { font-weight: 600; color: var(--text); }
.oferta-dowod-pola[b-g0hkgtuzx9] { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; padding-top: 1rem; font-size: .85rem; font-weight: 600; color: var(--text); }
.oferta-dowod-pola span[b-g0hkgtuzx9] { display: flex; align-items: center; gap: .4rem; }
.oferta-dowod-pola span[b-g0hkgtuzx9]::before { content: ''; height: .4rem; width: .4rem; flex: none; border-radius: 50%; background: var(--p1); }
.oferta-ekran figcaption[b-g0hkgtuzx9] { margin-top: .8rem; font-size: .8rem; line-height: 1.6; color: var(--text-soft); }
.oferta-ekran figcaption a[b-g0hkgtuzx9] { display: inline-block; }
.oferta-sekcje[b-g0hkgtuzx9] { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; padding: 1.15rem 0; border-block: 1px solid var(--line); font-size: .95rem; }
.oferta-sekcja[b-g0hkgtuzx9] { padding: 3.75rem 0; border-bottom: 1px solid var(--line); }
.oferta-sekcja h2[b-g0hkgtuzx9], .oferta-faq h2[b-g0hkgtuzx9] { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(2.2rem, 3.2vw, 3rem); line-height: 1.12; max-width: 29ch; }
.oferta-sekcja p[b-g0hkgtuzx9] { font-size: 1rem; line-height: 1.7; }
.oferta-korzysci[b-g0hkgtuzx9] { gap: 2rem; }
.oferta-korzysci h3[b-g0hkgtuzx9] { font-size: 1.15rem; margin-bottom: .8rem; }
.oferta-zastosowania[b-g0hkgtuzx9] { display: grid; gap: 0; margin-bottom: 1.25rem; }
.oferta-zastosowania > div[b-g0hkgtuzx9] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: .5rem 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.oferta-zastosowania > div:last-child[b-g0hkgtuzx9] { border-bottom: 0; }
.oferta-zastosowania h3[b-g0hkgtuzx9] { grid-row: span 2; font-size: 1.2rem; }
.oferta-zastosowania p[b-g0hkgtuzx9] { margin: 0; max-width: 61ch; }
.oferta-zastosowania a[b-g0hkgtuzx9] { font-size: .95rem; justify-self: start; }
.oferta .oferta-notka[b-g0hkgtuzx9] { font-size: .875rem; line-height: 1.7; }
.oferta .oferta-uruchomienie[b-g0hkgtuzx9] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; padding: 2.75rem; margin: 3.75rem 0; background: var(--paper); border: 1px solid var(--line-strong); border-top: 5px solid var(--p1); border-radius: 18px; }
.oferta-test-warunki[b-g0hkgtuzx9], .oferta-test-start[b-g0hkgtuzx9] { min-width: 0; }
.oferta .oferta-test-etykieta[b-g0hkgtuzx9] { margin: 0 0 .25rem; color: var(--text); font-weight: 600; }
.oferta .oferta-cena[b-g0hkgtuzx9] { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(5rem, 8vw, 7rem); line-height: 1; letter-spacing: -.04em; color: var(--text); margin: .3rem 0; }
.oferta-cena span[b-g0hkgtuzx9] { font-size: .52em; letter-spacing: -.02em; }
.oferta .oferta-cena-warunek[b-g0hkgtuzx9] { font-size: .875rem; margin: 0 0 1.75rem; }
.oferta-uruchomienie h2[b-g0hkgtuzx9] { font-size: clamp(2.2rem, 3vw, 2.75rem); margin-bottom: .9rem; }
.oferta .oferta-klucz[b-g0hkgtuzx9] { margin: 1.3rem 0 .4rem; font-size: .875rem; color: var(--text); font-weight: 500; }
.oferta-klucz-link[b-g0hkgtuzx9] { font-size: .875rem; }
.oferta-test-start[b-g0hkgtuzx9] { border-left: 1px solid var(--line); padding-left: 2.75rem; }
.oferta-test-start > h3[b-g0hkgtuzx9] { font-size: 1.2rem; margin-bottom: 1.5rem; }
.oferta-kroki[b-g0hkgtuzx9] { list-style: none; counter-reset: etap; margin: 0 0 1.75rem; padding: 0; }
.oferta-kroki > li[b-g0hkgtuzx9] { counter-increment: etap; position: relative; padding: 0 0 1.75rem 2.8rem; }
.oferta-kroki > li[b-g0hkgtuzx9]::before { content: counter(etap); position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; background: var(--cream); border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text); font-weight: 600; font-size: .875rem; }
.oferta-kroki > li:not(:last-child)[b-g0hkgtuzx9]::after { content: ''; position: absolute; left: .95rem; top: 2.2rem; bottom: .4rem; border-left: 1px solid var(--line); }
.oferta-kroki > li:last-child[b-g0hkgtuzx9] { padding-bottom: 0; }
.oferta-kroki h3[b-g0hkgtuzx9] { font-size: 1rem; }
.oferta-kroki p[b-g0hkgtuzx9] { margin: 0; font-size: .95rem; }
.oferta .oferta-test-start .str-cta[b-g0hkgtuzx9] { flex-direction: column; align-items: stretch; }
.oferta .oferta-rozliczenia[b-g0hkgtuzx9] { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3rem; align-items: center; padding-top: 0; }
.oferta-rozliczenia-tekst[b-g0hkgtuzx9] { min-width: 0; }
.oferta-faq[b-g0hkgtuzx9] { max-width: 850px; padding: 3.5rem 0; margin: 0 auto; }
.oferta-faq summary[b-g0hkgtuzx9] { margin-left: 1rem; line-height: 1.5; }
.oferta-faq details p[b-g0hkgtuzx9] { font-size: 1rem; line-height: 1.7; }
.oferta .oferta-final[b-g0hkgtuzx9] { padding: 3.5rem 2rem; }
.oferta-final h2[b-g0hkgtuzx9] { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(2.2rem, 3.5vw, 3.2rem); line-height: 1.12; margin-bottom: 1rem; }
.oferta-final .str-cta[b-g0hkgtuzx9] { margin-top: 1.5rem; }
.oferta .oferta-final-notka[b-g0hkgtuzx9] { margin-top: 1rem; font-size: .875rem; opacity: 1; }
.oferta .oferta-final-notka a[b-g0hkgtuzx9] { color: var(--text-light); }
@media (max-width: 1000px) {
    .oferta .oferta-hero[b-g0hkgtuzx9] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem; }
    .oferta-hero h1[b-g0hkgtuzx9] { font-size: 3.25rem; }
    .oferta .oferta-uruchomienie[b-g0hkgtuzx9] { gap: 2rem; padding: 2rem; }
    .oferta-test-start[b-g0hkgtuzx9] { padding-left: 2rem; }
}
@media (max-width: 760px) {
    .oferta .oferta-hero[b-g0hkgtuzx9] { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: 2rem; }
    .oferta-hero h1[b-g0hkgtuzx9] { font-size: clamp(2.9rem, 7.5vw, 4rem); max-width: 18ch; }
    .oferta-sekcja[b-g0hkgtuzx9] { padding: 2.75rem 0; }
    .oferta-korzysci[b-g0hkgtuzx9] { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .oferta-zastosowania > div[b-g0hkgtuzx9] { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
    .oferta-zastosowania h3[b-g0hkgtuzx9] { grid-row: auto; }
    .oferta .oferta-uruchomienie[b-g0hkgtuzx9] { grid-template-columns: minmax(0, 1fr); margin: 2.75rem 0; gap: 2rem; padding: 1.5rem; }
    .oferta-test-start[b-g0hkgtuzx9] { border-left: 0; border-top: 1px solid var(--line); padding: 1.75rem 0 0; }
    .oferta .oferta-rozliczenia[b-g0hkgtuzx9] { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    .oferta-faq[b-g0hkgtuzx9] { padding: 2.75rem 0; }
}
@media (max-width: 480px) {
    .oferta[b-g0hkgtuzx9] { padding-top: 1rem; }
    .oferta-hero h1[b-g0hkgtuzx9] { font-size: 2.9rem; }
    .oferta-hero .str-lede[b-g0hkgtuzx9] { font-size: 1.0625rem; }
    .oferta .oferta-hero-test[b-g0hkgtuzx9] { margin-top: 1.25rem; }
    .oferta-sekcje[b-g0hkgtuzx9] { gap: .75rem 1.2rem; }
    .oferta-ekran-hero[b-g0hkgtuzx9] { padding: .85rem; }
    .oferta .oferta-uruchomienie[b-g0hkgtuzx9] { padding: 1.25rem; }
    .oferta .oferta-final[b-g0hkgtuzx9] { padding: 2.5rem 1.25rem; }
}
/* /Components/Pages/Oferta/ZastosowanieWidok.razor.rz.scp.css */
.zastosowanie[b-jvlxt9bewy] { padding-block: 2rem 4rem; }
.zastosowanie-okruszki[b-jvlxt9bewy] { display:flex; flex-wrap:wrap; gap:.5rem; color:var(--global-palette6); margin-bottom:2rem; font-size:.9rem; }
.zastosowanie header[b-jvlxt9bewy] { max-width:76ch; }
.zastosowanie h1[b-jvlxt9bewy] { color:var(--global-palette3); font-size:clamp(2rem,4vw,3.2rem); line-height:1.15; }
.zastosowanie-wstep[b-jvlxt9bewy] { font-size:1.18rem; line-height:1.8; }
.zastosowanie figure[b-jvlxt9bewy] { margin:2rem 0 3rem; max-width:60rem; }
.zastosowanie img[b-jvlxt9bewy] { display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--line); }
.zastosowanie figcaption[b-jvlxt9bewy] { font-size:.85rem; color:var(--global-palette6); margin-top:.7rem; }
.zastosowanie-tresc[b-jvlxt9bewy] { max-width:78ch; line-height:1.8; }
.zastosowanie-tresc section[b-jvlxt9bewy] { margin-bottom:2rem; }
.zastosowanie h2[b-jvlxt9bewy] { color:var(--global-palette3); font-size:1.55rem; line-height:1.35; }
.zastosowanie a:focus-visible[b-jvlxt9bewy] { outline:2px solid var(--global-palette1); outline-offset:4px; }
@media(max-width:768px) { .zastosowanie[b-jvlxt9bewy] { padding-block:1.5rem 3rem; } }
/* /Components/Pages/Onboarding/CreateTenant.razor.rz.scp.css */
.onboarding-klucz[b-aaot3lxng3] { margin-bottom: 1.25rem; }
.onboarding-klucz-label[b-aaot3lxng3] { display: block; color: var(--text-soft); margin-bottom: .4rem; }
.onboarding-klucz-input[b-aaot3lxng3] { width: 100%; }
.onboarding-klucz-opis[b-aaot3lxng3] { font-size: 12.5px; color: var(--text-soft); margin-top: .5rem; }

/* Wariant „Kolejna firma” (osoba, która ma już firmę). Nagłówek i wstęp w tych samych rozmiarach
   co „Załóż firmę” obok — to ten sam ekran, nie nowy. */
.onboarding-naglowek[b-aaot3lxng3] { font-size: 2rem; margin-bottom: .5rem; }
.onboarding-wstep[b-aaot3lxng3] { font-size: 13.5px; margin-bottom: 1.75rem; }

/* Pole „firma prywatna”: cały wiersz jest etykietą (klikalny), kontrolka u góry, bo tekst łamie się
   na dwie-trzy linie. min-width: 0 — bez tego długie zdanie rozpycha kartę na wąskim ekranie. */
.onboarding-prywatna[b-aaot3lxng3] { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: 1.5rem; cursor: pointer; }
.onboarding-prywatna input[b-aaot3lxng3] { flex: none; margin-top: .2rem; accent-color: var(--global-palette1); }
.onboarding-prywatna-tresc[b-aaot3lxng3] { min-width: 0; }
.onboarding-prywatna-tekst[b-aaot3lxng3] { display: block; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.onboarding-prywatna-opis[b-aaot3lxng3] { display: block; font-size: 12.5px; line-height: 1.45; color: var(--text-soft); margin-top: .25rem; }

.onboarding-powrot[b-aaot3lxng3] { display: flex; justify-content: center; margin: 1rem 0 0; }
/* /Components/Pages/Reliability/Reliability.razor.rz.scp.css */
/* Panel niezawodności automatyzacji — kafelki podsumowania + badge stanu. Styl editorial-utility. */
.rel-summary[b-wvd523bzl9] {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
}
.rel-stat[b-wvd523bzl9] {
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.8rem 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.rel-stat.danger[b-wvd523bzl9] { border-color: var(--danger); }
.rel-stat.warn[b-wvd523bzl9] { border-color: var(--warn, #b8730a); }
.rel-num[b-wvd523bzl9] { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--text); }
.rel-stat.danger .rel-num[b-wvd523bzl9] { color: var(--danger); }
.rel-stat.warn .rel-num[b-wvd523bzl9] { color: var(--warn, #b8730a); }
.rel-lbl[b-wvd523bzl9] { font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.03em; }

.rel-badge[b-wvd523bzl9] {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.rel-badge.s-dead[b-wvd523bzl9] { background: color-mix(in oklab, var(--danger) 14%, transparent); color: var(--danger); }
.rel-badge.s-failed[b-wvd523bzl9] { background: var(--warn-bg, #fbedd8); color: var(--warn, #b8730a); }
.rel-badge.s-proc[b-wvd523bzl9] { background: var(--cream-2); color: var(--text-soft); }
.rel-badge.s-retry[b-wvd523bzl9] { background: var(--ok-bg); color: var(--p1); }

/* ─── Tabela ───
   ⚠ „Dlaczego się nie udało" to jedyny powód, dla którego ktokolwiek wchodzi na ten ekran, więc
   ta kolumna dostaje najwięcej miejsca i ZAWIJA SIĘ zamiast urywać wielokropkiem. Reszta kolumn
   ma stałe szerokości, żeby nie odbierały jej miejsca przy dłuższych nazwach zdarzeń. */
.rel-table[b-wvd523bzl9] { table-layout: fixed; }
.rel-table .rel-col-when[b-wvd523bzl9] { width: 96px; }
.rel-table .rel-col-what[b-wvd523bzl9] { width: 190px; }
.rel-table .rel-col-tenant[b-wvd523bzl9] { width: 150px; }
.rel-table .rel-col-state[b-wvd523bzl9] { width: 110px; }
/* ⚠ 64 px NIE WYSTARCZAŁO NA WŁASNY NAGŁÓWEK. Napis „PRÓBY" jest wersalikami z odstępem
   0.08em, a komórka oddaje 2×1rem na wewnętrzne marginesy — na treść zostawało 32 px i słowo
   łamało się w środku, jako „PRÓB / Y". Dopóki ekran był panelem obsługi, oglądały go dwie
   osoby; od 02.09.2026 ogląda go klient. Pilnuje tego sprawdzenie w abcare-niezawodnosc-izolacja,
   które liczy, na ile linii przeglądarka rozbiła sam tekst nagłówka. */
.rel-table .rel-col-tries[b-wvd523bzl9] { width: 88px; }
.rel-table .rel-col-do[b-wvd523bzl9] { width: 150px; }
.rel-table .rel-col-why[b-wvd523bzl9] { width: auto; }

.rel-table td.rel-why[b-wvd523bzl9] {
    font-size: 12px;
    color: var(--text-soft);
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}

.rel-table td.rel-tenant[b-wvd523bzl9] {
    font-size: 12px;
    color: var(--text-soft);
    overflow-wrap: anywhere;
}

.rel-table td.rel-do[b-wvd523bzl9] { white-space: nowrap; }

/* Na karcie telefonu powód jest zdaniem, nie liczbą — etykieta nad tekstem, tekst do lewej. */
.data-card-row.rel-card-why[b-wvd523bzl9] { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.data-card-row.rel-card-why .value[b-wvd523bzl9] { text-align: left; font-weight: 400; font-size: 0.85rem; line-height: 1.5; }

/* ── Najczęstsze przyczyny ────────────────────────────────────────────────────────
   Powstało 04.09.2026. Ekran pokazywał na stanowisku 59 572 wiersze, z czego 53 031
   miało JEDNĄ przyczynę. Karta z liczbą mówi to jednym spojrzeniem, a kliknięcie
   zawęża listę — dopiero wtedy „zaznacz wszystkie pasujące" znaczy coś sensownego. */
.rel-przyczyny-lista[b-wvd523bzl9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}
.rel-przyczyna[b-wvd523bzl9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 100%;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}
.rel-przyczyna:hover[b-wvd523bzl9] { border-color: var(--p1); }
.rel-przyczyna.wybrana[b-wvd523bzl9] { border-color: var(--p1); background: var(--cream-2); }
.rel-przyczyna-ile[b-wvd523bzl9] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
/* ⚠ `min-width: 0` na elemencie elastycznym — bez tego długa przyczyna nie daje się
   skrócić i rozpycha kartę poza krawędź ekranu. */
.rel-przyczyna-tekst[b-wvd523bzl9] {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-soft);
}

/* ── Pasek nad tabelą: zawężenie po firmie + działania na zaznaczeniu ──────────────
   Powstał 03.09.2026. Na stanowisku ekran pokazywał 933 zdarzenia z jedną przyczyną,
   a jedyną drogą było klikanie „Ponów" wiersz po wierszu. */
.rel-pasek[b-wvd523bzl9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 0.9rem;
}
.rel-pasek-pole[b-wvd523bzl9] { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.rel-pasek-pole > span[b-wvd523bzl9] { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); }
.rel-pasek-pole select[b-wvd523bzl9] { min-width: 0; max-width: 320px; }

/* Pasek działania. `margin-left: auto` dopycha go w prawo na szerokim ekranie, a przy
   zawinięciu (telefon) wraca pod zawężenie i zajmuje całą szerokość. */
.rel-zaznaczenie[b-wvd523bzl9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-left: auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--p1);
    border-radius: 8px;
    background: var(--ok-bg);
    font-size: 12.5px;
}
.rel-zaznaczenie strong[b-wvd523bzl9] { font-size: 15px; color: var(--p1); }

/* Kolumna zaznaczania. Szerokość stała — inaczej pole wyboru rozpycha się razem
   z komórką i nagłówek „Kiedy" ucieka o kilkanaście pikseli w prawo. */
.rel-table .rel-col-zazn[b-wvd523bzl9] { width: 38px; text-align: center; }
.rel-table td.rel-col-zazn[b-wvd523bzl9] { padding-right: 0; }
.rel-table .rel-col-zazn input[b-wvd523bzl9] { cursor: pointer; }

/* Zaznaczony wiersz musi być widoczny BEZ patrzenia na pole wyboru — przy pięćdziesięciu
   wierszach samo pole ginie w lewej krawędzi. */
.rel-wiersz-zazn[b-wvd523bzl9] { background: var(--ok-bg); }
article.data-card.rel-wiersz-zazn[b-wvd523bzl9] { border-color: var(--p1); }

/* „próba za 3 min" pod plakietką stanu. Mała, bo to dopowiedzenie, nie druga plakietka. */
.rel-kolejna[b-wvd523bzl9] {
    font-size: 10.5px;
    color: var(--text-soft);
    margin-top: 0.2rem;
    white-space: nowrap;
}
/* /Components/Pages/Reports/MessagesHeatmap.razor.rz.scp.css */
/* Panel „Według statusu zgłoszeń” (K5, 03.10.2026) — statusy firmy w grupach i kolejności z ustawień.
   Nagłówek grupy: ten sam wzór co w lewej kolumnie list (pas 4 px w kolorze grupy i tło 12 % koloru, w ciemnym 22 %),
   napis w kolorze motywu. Pasek udziału w kolorze statusu — tym samym, co plakietka obok. */
.raport-grupa[b-uhxk2efwxz] {
    --grupa-kolor: var(--line-strong);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    background: var(--cream-2);
    box-shadow: inset 4px 0 0 var(--grupa-kolor);
    font-size: 12.5px;
    font-weight: 650;
    color: var(--text);
}
.raport-grupa:first-child[b-uhxk2efwxz] { margin-top: 0; }
.raport-grupa.z-kolorem[b-uhxk2efwxz] { background: color-mix(in srgb, var(--grupa-kolor) 12%, var(--paper)); }
[data-theme="dark"] .raport-grupa.z-kolorem[b-uhxk2efwxz] { background: color-mix(in srgb, var(--grupa-kolor) 22%, var(--paper)); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .raport-grupa.z-kolorem[b-uhxk2efwxz] { background: color-mix(in srgb, var(--grupa-kolor) 22%, var(--paper)); }
}
.raport-grupa-suma[b-uhxk2efwxz] { font-size: 11.5px; font-weight: 500; color: var(--text-soft); }

.raport-statusy[b-uhxk2efwxz] { list-style: none; padding: 0; margin: 0; }
.raport-statusy li[b-uhxk2efwxz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0 0.35rem 0.6rem;
    border-bottom: 1px solid var(--cream-2);
}
.raport-statusy li.zero[b-uhxk2efwxz] { opacity: 0.6; }
.raport-status-nazwa[b-uhxk2efwxz] { flex: 0 0 12rem; min-width: 0; display: flex; }
.raport-pasek[b-uhxk2efwxz] { flex: 1; min-width: 2rem; background: var(--cream-2); height: 12px; border-radius: 6px; overflow: hidden; }
.raport-pasek > div[b-uhxk2efwxz] { height: 100%; }
.raport-liczba[b-uhxk2efwxz] { flex: none; font-size: 11.5px; min-width: 70px; text-align: right; }

@media (max-width: 480px) {
    .raport-status-nazwa[b-uhxk2efwxz] { flex-basis: 7.5rem; }
}
/* /Components/Pages/Returns/Returns.razor.rz.scp.css */
/* Lista zwrotów (03.10.2026, „to ma być wszędzie to samo”). Układ kolumny, plakietki i okna — wspólne (app.css,
   KolumnaStatusow, PlakietkaStatusu); tu tylko to, czego ten ekran potrzebuje ponad nie: narzędzia nad listą,
   wiersz klikany w całości z polem wyboru i okno akcji masowej (ten sam wzór co „Ustaw status” na liście zgłoszeń). */

.zw-narzedzia[b-6h18vjjww4] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Wiersz: całość prowadzi do karty zwrotu, pole wyboru i numer mają własne kliknięcie. */
.zw-wiersz[b-6h18vjjww4] { cursor: pointer; }

/* Wariant z polem wyboru: siedem kolumn z app.css (36 px + sześć), z tą samą ochroną przed rozpychaniem, co 6-kolumnowy. */
.zw-z-zaznaczaniem .cust-row > div[b-6h18vjjww4],
.zw-z-zaznaczaniem .cust-head > div[b-6h18vjjww4] { min-width: 0; }
.zw-z-zaznaczaniem .cr-name strong[b-6h18vjjww4] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zw-z-zaznaczaniem .cr-name span[b-6h18vjjww4],
.zw-z-zaznaczaniem .cr-contact div[b-6h18vjjww4] { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zw-z-zaznaczaniem .cr-tags[b-6h18vjjww4] { overflow: hidden; }
/* Kolumna „Status” niesie dwie plakietki (własny status + stan w Allegro) — szersza niż w wariancie bez zaznaczania,
   żeby nazwa statusu firmy nie ucinała się już przy 1440 px. */
@media (min-width: 901px) {
    .zw-z-zaznaczaniem .cust-head[b-6h18vjjww4],
    .zw-z-zaznaczaniem .cust-row[b-6h18vjjww4] {
        grid-template-columns: 36px minmax(150px, 1.25fr) minmax(130px, 1fr) minmax(190px, 1.5fr) 70px 100px 110px;
    }
}
.zw-tabela .cr-tags[b-6h18vjjww4]  .plakietka-statusu { flex: none; }

.zw-bulk[b-6h18vjjww4] { flex-wrap: wrap; }

/* Okno akcji masowej: „3 zwroty → [Do oględzin]” jednym rzędem, zanim przeczyta się zdania. */
.zw-okno[b-6h18vjjww4] { max-width: 520px; }
.zw-cel[b-6h18vjjww4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--cream);
}
.zw-ile[b-6h18vjjww4] { font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.zw-ile-podpis[b-6h18vjjww4] { font-size: 13px; color: var(--text-soft); }
.zw-strzalka[b-6h18vjjww4] {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: var(--text-faint);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.zw-bez[b-6h18vjjww4] { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.zw-opis[b-6h18vjjww4] { font-size: 13px; line-height: 1.55; margin: 0 0 0.4rem; }
.zw-opis-cichy[b-6h18vjjww4] { color: var(--text-soft); font-size: 12px; }

@media (max-width: 900px) {
    .zw-z-zaznaczaniem .cust-row .cr-cb[b-6h18vjjww4] { justify-content: flex-start; }
}
/* /Components/Pages/Settings/FeaturesSettings.razor.rz.scp.css */
/* Funkcje firmy — dwa pytania jedno pod drugim, w szerokości wygodnej do czytania. */

.funkcje-firmy[b-sydj7d9ex0] {
    max-width: 880px;
}

.funkcje-karta[b-sydj7d9ex0] {
    padding: 1.25rem 1.4rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.funkcje-komunikat[b-sydj7d9ex0] {
    display: flex;
    padding: 0.55rem 0.85rem;
    margin-bottom: 1rem;
    font-size: 13px;
    border-radius: var(--radius);
    white-space: normal;
    line-height: 1.5;
}

.funkcje-stopka[b-sydj7d9ex0] {
    color: var(--text-soft);
    font-size: 0.9rem;
    margin: 0.5rem 0 0;
}

@media (max-width: 768px) {
    .funkcje-karta[b-sydj7d9ex0] {
        padding: 1rem;
    }
}
/* /Components/Pages/Settings/StatusesSettings.razor.rz.scp.css */
/* Ekran „Statusy” — jedna lista statusów firmy (zgłoszeniowe, serwisowe, zadaniowe).
   Wygląd przejęty z dawnego ekranu „Statusy zadań” (ta sama karta, tabela, plakietka, formularz
   nad tabelą); style tamtego ekranu były zakresowe, więc reguły zostały tu przeniesione, a nie
   współdzielone. Doszły: nagłówki grup, trzy stałe miejsca na rodzaj i bloki „do czego służy”. */

.st-flash[b-a43fplv4n6] {
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font-size: 13px;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
}
.st-flash-ok[b-a43fplv4n6]  { background: color-mix(in srgb, var(--p1) 10%, var(--paper)); border-color: color-mix(in srgb, var(--p1) 35%, var(--line)); color: var(--text); }
.st-flash-err[b-a43fplv4n6] { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); color: var(--danger); }
.st-flash-uwaga[b-a43fplv4n6] {
    background: var(--warn-bg);
    border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
    color: var(--warn-mocny);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
}

.st-card[b-a43fplv4n6] { padding: 0; overflow: hidden; }

/* Nagłówek karty: tytuł, przełącznik rodzaju, przyciski dodawania. Zawija się — na telefonie
   trzy rzeczy w jednej linii nie mają prawa wypchnąć karty poza ekran. */
.st-card-header[b-a43fplv4n6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
}
.st-filtr[b-a43fplv4n6] { display: flex; flex-wrap: wrap; gap: 0.15rem; margin-right: auto; }
.st-dodaj[b-a43fplv4n6] { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* ── Formularz edycji ── */
.st-edit[b-a43fplv4n6] {
    padding: 1rem 1.35rem 1.1rem;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
}
.st-edit-grupa[b-a43fplv4n6] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.8rem;
}
.st-edit-grupa .st-field-name[b-a43fplv4n6] { flex: 1 1 220px; max-width: 360px; }

.st-edit-grid[b-a43fplv4n6] {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) auto minmax(150px, 1fr);
    gap: 0.8rem;
    align-items: end;
}

.st-field[b-a43fplv4n6] { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.st-field-actions[b-a43fplv4n6] { flex-direction: row; gap: 0.4rem; align-items: center; }
.st-field-zachowanie[b-a43fplv4n6] { max-width: 240px; }

.st-label[b-a43fplv4n6] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
    font-weight: 600;
}

.st-color-row[b-a43fplv4n6] { display: flex; gap: 0.4rem; align-items: center; }
.st-color[b-a43fplv4n6] {
    width: 36px; height: 32px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    cursor: pointer;
    flex: none;
}
.st-color-hex[b-a43fplv4n6] { width: 88px; }

/* „Do czego służy” — trzy bloki, każdy z własnymi polami. Pola pokazują się dopiero po
   zaznaczeniu rodzaju: lewa krawędź w kolorze akcentu mówi, że należą do tego rodzaju. */
.st-rodzaje-pole[b-a43fplv4n6] {
    border: 0;
    margin: 1rem 0 0;
    padding: 0;
    min-width: 0;
    display: grid;
    gap: 0.45rem;
}
.st-rodzaje-pole > legend[b-a43fplv4n6] { padding: 0; margin-bottom: 0.45rem; }

.st-rodzaj-blok[b-a43fplv4n6] {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    padding: 0.55rem 0.8rem;
}
.st-rodzaj-blok.wlaczony[b-a43fplv4n6] { border-color: color-mix(in srgb, var(--p1) 40%, var(--line)); }

.st-rodzaj-szczegoly[b-a43fplv4n6] {
    margin: 0.55rem 0 0.15rem 0.45rem;
    padding-left: 0.95rem;
    border-left: 2px solid color-mix(in srgb, var(--p1) 45%, var(--line));
    display: grid;
    gap: 0.5rem;
}

.st-check[b-a43fplv4n6] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-soft);
    cursor: pointer;
}
.st-check input[b-a43fplv4n6] { accent-color: var(--p1); margin-top: 0.15rem; flex: none; }
.st-check-glowny[b-a43fplv4n6] { font-size: 13px; color: var(--text); }
.st-check-schowany[b-a43fplv4n6] { margin-top: 0.8rem; }

.st-opis[b-a43fplv4n6] { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-soft); max-width: 68ch; }
.st-hint[b-a43fplv4n6] { color: var(--text-faint); }

.st-edit-stopka[b-a43fplv4n6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    margin-top: 0.9rem;
}
.st-preview[b-a43fplv4n6] {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Tabela ── */
.st-table[b-a43fplv4n6] { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.st-table thead th[b-a43fplv4n6] {
    background: var(--cream);
    text-align: left;
    padding: 0.6rem 1rem;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    white-space: nowrap;
}
.st-table td[b-a43fplv4n6] { padding: 0.6rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.st-table tbody tr:last-child td[b-a43fplv4n6] { border-bottom: none; }

.st-kol-kolejnosc[b-a43fplv4n6] { width: 118px; }
/* Kwadrat koloru i plakietka nazwy stoją w jednej linii — przy długiej nazwie („Czekamy na
   klienta”) plakietka spadała pod kwadrat i wiersz robił się dwa razy wyższy. */
.st-kol-status[b-a43fplv4n6] { white-space: nowrap; }
/* Rodzaj zajmuje tyle, ile trzy stałe miejsca — resztę szerokości dostają „Ustawienia”. */
.st-kol-rodzaj[b-a43fplv4n6] { width: 1%; white-space: nowrap; }
.st-kol-uzycie[b-a43fplv4n6] { white-space: nowrap; color: var(--text-soft); font-size: 12.5px; }
.st-kol-akcje[b-a43fplv4n6] { white-space: nowrap; width: 130px; }

.st-muted[b-a43fplv4n6] { color: var(--text-faint); font-size: 12px; }

/* Status schowany z wyboru dalej stoi na liście — przygaszony, żeby było widać, że nie da się go ustawić. */
.st-schowany td[b-a43fplv4n6] { background: color-mix(in srgb, var(--cream) 55%, var(--paper)); }
.st-schowany .chip:not(.chip-warn)[b-a43fplv4n6] { opacity: 0.7; }

/* Nagłówek grupy: pas w tle tabeli, nazwa grupy jako śródtytuł, akcje po prawej. */
.st-grupa td[b-a43fplv4n6] {
    background: var(--cream);
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--line);
}
.st-table tbody tr.st-grupa:first-child td[b-a43fplv4n6] { border-top: 0; }
.st-grupa-linia[b-a43fplv4n6] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; }
.st-grupa-nazwa[b-a43fplv4n6] { font-weight: 650; font-size: 13px; letter-spacing: 0.01em; color: var(--text); }
.st-grupa-akcje[b-a43fplv4n6] { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.st-grupa-pusta td[b-a43fplv4n6] { padding-left: 1.6rem; }

/* Kolor grupy (03.10.2026). Jedyne miejsce, gdzie kolor wchodzi do tabeli: zmienna `--grupa-kolor`
   ze znacznika (KolorStatusu.StylGrupy). Nagłówek grupy dostaje pas z lewej i lekki odcień tła,
   wiersze statusów tej grupy — cienki pas z lewej, żeby po przewinięciu nadal było widać, do której
   grupy należą. Grupa bez koloru wygląda jak dotąd. */
/* Wartości zapasowe zmiennej — znacznik nadpisuje je stylem przy elemencie, gdy grupa ma kolor. */
.st-table tr[b-a43fplv4n6],
.st-podglad-w-grupie[b-a43fplv4n6] { --grupa-kolor: transparent; }
.st-grupa-podglad[b-a43fplv4n6] { --grupa-kolor: var(--line-strong); }
.st-grupa-znacznik[b-a43fplv4n6] {
    display: none;
    width: 10px; height: 10px;
    border-radius: 50%;
    flex: none;
    background: var(--grupa-kolor);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent);
}
.st-grupa.z-kolorem .st-grupa-znacznik[b-a43fplv4n6] { display: inline-block; }
.st-grupa.z-kolorem td[b-a43fplv4n6] {
    background: color-mix(in srgb, var(--grupa-kolor) 9%, var(--cream));
    box-shadow: inset 4px 0 0 var(--grupa-kolor);
}
.w-grupie-z-kolorem > td:first-child[b-a43fplv4n6] { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--grupa-kolor) 70%, transparent); }

/* Formularz grupy: podgląd nagłówka z wybranym kolorem. */
.st-check-bez-koloru[b-a43fplv4n6] { align-items: center; margin-left: 0.3rem; white-space: nowrap; }
.st-check-bez-koloru input[b-a43fplv4n6] { margin-top: 0; }
.st-grupa-podglad[b-a43fplv4n6] {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    align-self: end;
    min-height: 32px;
    padding: 0 0.75rem;
    border-radius: 8px;
    font-weight: 650;
    font-size: 13px;
    color: var(--text);
    background: color-mix(in srgb, var(--grupa-kolor) 9%, var(--cream));
    box-shadow: inset 4px 0 0 var(--grupa-kolor);
}
.st-grupa-podglad .st-grupa-znacznik[b-a43fplv4n6] { display: inline-block; }
/* Podgląd statusu: pas koloru grupy obok plakietki (gdy wybrana grupa ma kolor). */
.st-podglad-w-grupie[b-a43fplv4n6] { display: inline-flex; padding-left: 0.4rem; box-shadow: inset 3px 0 0 var(--grupa-kolor); }

/* Kolejność: numer + dwie strzałki. Strzałki są małe, ale mają własne pole kliknięcia. */
.st-kolejnosc[b-a43fplv4n6] { display: inline-flex; align-items: center; gap: 0.2rem; }
.st-kolejnosc > .mono[b-a43fplv4n6] { min-width: 1.4rem; }
.st-strzalka[b-a43fplv4n6] {
    width: 24px; height: 24px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
}
.st-strzalka:hover:not(:disabled)[b-a43fplv4n6] { background: var(--paper); border-color: var(--line); color: var(--text); }
.st-strzalka:focus-visible[b-a43fplv4n6] { outline: 2px solid var(--p1); outline-offset: 1px; }
.st-strzalka:disabled[b-a43fplv4n6] { opacity: 0.28; cursor: default; }

/* Rodzaj: trzy STAŁE miejsca w wierszu. Rodzaj, którego status nie ma, zostawia puste miejsce
   tej samej szerokości — kolumnę czyta się wtedy w pionie, jak tabelkę. */
.st-rodzaje[b-a43fplv4n6] { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 6.1rem; gap: 0.3rem; }
.st-rodzaj[b-a43fplv4n6] {
    visibility: hidden;
    display: inline-block;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.5;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--text-soft);
    white-space: nowrap;
}
.st-rodzaj.jest[b-a43fplv4n6] { visibility: visible; }

.st-ustawienia[b-a43fplv4n6] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; }

.st-swatch[b-a43fplv4n6] {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 3px;
    margin-right: 0.4rem;
    vertical-align: -1px;
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

.st-link[b-a43fplv4n6] {
    background: none;
    border: none;
    padding: 0;
    font-size: 12.5px;
    color: var(--p1);
    cursor: pointer;
}
.st-link:hover:not(:disabled)[b-a43fplv4n6] { text-decoration: underline; }
.st-link:disabled[b-a43fplv4n6] { color: var(--text-faint); cursor: default; }
.st-link-danger[b-a43fplv4n6] { color: var(--danger); }
.st-sep[b-a43fplv4n6] { color: var(--text-faint); margin: 0 0.3rem; }

/* ⚠ POLE DOTYKU (przeniesione z dawnego ekranu statusów zadań): „Edytuj” i „Usuń” stoją OBOK
   SIEBIE, więc na dotyku chybienie trafia w sąsiada, czyli w „Usuń”. Dajemy realną wysokość —
   wyłącznie na dotyku, żeby na komputerze gęstość tabeli została bez zmian. */
@media (pointer: coarse) {
    .st-link[b-a43fplv4n6] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        min-width: 44px;
        padding: 0 0.5rem;
    }
    .st-sep[b-a43fplv4n6] { margin: 0 0.55rem; }
    .st-strzalka[b-a43fplv4n6] { width: 40px; height: 40px; font-size: 12px; }
}

.st-empty[b-a43fplv4n6] { padding: 2rem; text-align: center; color: var(--text-soft); font-size: 13.5px; }

@media (max-width: 760px) {
    .st-edit-grid[b-a43fplv4n6] { grid-template-columns: 1fr; }
    .st-field-zachowanie[b-a43fplv4n6] { max-width: none; }
    .st-field-actions[b-a43fplv4n6] { justify-content: flex-start; }
    /* Tabela ma swoją szerokość i przewija się w poziomie wewnątrz karty (table-wrap). */
    .st-table[b-a43fplv4n6] { min-width: 860px; }
}
/* /Components/Pages/Setup/KartaCoJest.razor.rz.scp.css */
/* Karta „Co jest w ABCare” nad krokami kreatora. Jedyny głośniejszy element to tytuł krojem z oprowadzenia
   (Instrument Serif, jak „Pierwszy raz w ABCare?” i tytuły dymków) — karta mówi tym samym głosem co trasa.
   Hierarchia z układu, nie z ozdobników: Zgłoszenia w osobnym rzędzie z wypełnioną ikoną (to wystarczy
   do Allegro), trzy pozostałe moduły w jednym rzędzie z ikoną w obwódce (do wyboru). Kolory tylko ze
   zmiennych palety — tryb ciemny przychodzi sam. */

.cojest[b-oga51vsd9p] {
    margin-bottom: 1.25rem;
    padding: 0.9rem 1.25rem 1.1rem;
}

.cojest:not([open])[b-oga51vsd9p] {
    padding-bottom: 0.9rem;
}

.cojest-naglowek[b-oga51vsd9p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
    cursor: pointer;
    border-radius: var(--radius);
}

.cojest-naglowek[b-oga51vsd9p]::-webkit-details-marker {
    display: none;
}

.cojest-naglowek:focus-visible[b-oga51vsd9p] {
    outline: 2px solid var(--p1);
    outline-offset: 3px;
}

.cojest-tytul[b-oga51vsd9p] {
    margin: 0;
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: 1.65rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text);
}

.cojest-chev[b-oga51vsd9p] {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: var(--text-faint);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.cojest[open] .cojest-chev[b-oga51vsd9p] {
    transform: rotate(180deg);
}

/* ── Moduły ── */
.cojest-lista[b-oga51vsd9p] {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}

.cojest-modul[b-oga51vsd9p] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

/* Zgłoszenia — cały pierwszy rząd, oddzielony od modułów do wyboru. */
.cojest-modul.is-podstawowy[b-oga51vsd9p] {
    grid-column: 1 / -1;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.cojest-ikona[b-oga51vsd9p] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper);
}

.cojest-ikona svg[b-oga51vsd9p] {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: var(--text-soft);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cojest-modul.is-podstawowy .cojest-ikona[b-oga51vsd9p] {
    background: var(--p1);
    border-color: var(--p1);
}

.cojest-modul.is-podstawowy .cojest-ikona svg[b-oga51vsd9p] {
    stroke: var(--text-light);
}

/* Moduł, który firma ma teraz wyłączony — obwódka przerywana, jak pominięty krok w trasie kreatora. */
.cojest-modul.is-wylaczony .cojest-ikona[b-oga51vsd9p] {
    border-style: dashed;
}

.cojest-stan[b-oga51vsd9p] {
    margin-left: 0.35rem;
    font-weight: 400;
    font-size: 12px;
    color: var(--text-faint);
}

.cojest-tresc[b-oga51vsd9p] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.cojest-nazwa[b-oga51vsd9p] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
}

.cojest-opis[b-oga51vsd9p] {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-soft);
    max-width: 72ch;
    overflow-wrap: anywhere;
}

/* Sedno karty: „nie musisz używać wszystkiego”. Tło w tonie zieleni Zgłoszeń. */
.cojest-dopisek[b-oga51vsd9p] {
    margin: 1.1rem 0 0;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius);
    background: var(--ok-bg);
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .cojest-lista[b-oga51vsd9p] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem;
    }

    .cojest-modul.is-podstawowy[b-oga51vsd9p] {
        padding-bottom: 0.85rem;
    }
}

@media (max-width: 768px) {
    .cojest[b-oga51vsd9p] {
        padding: 0.8rem 0.9rem 0.95rem;
    }

    .cojest-tytul[b-oga51vsd9p] {
        font-size: 1.45rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cojest-chev[b-oga51vsd9p] { transition: none; }
}
/* /Components/Pages/Setup/KrokTerminy.razor.rz.scp.css */
/* Krok „Terminy odpowiedzi” — trzy wielkie odpowiedzi do kliknięcia, ten sam wzór co „Tak / Nie” w Funkcjach firmy
   (WyborFunkcji.razor.css). Kolory wyłącznie ze zmiennych palety (app.css), także w trybie ciemnym. */

.terminy-pole[b-i7d243sm9l] {
    border: 0;
    margin: 0 0 1rem;
    padding: 0;
    min-width: 0;
}

.terminy-pytanie[b-i7d243sm9l] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.6rem;
    padding: 0;
}

.terminy-opcje[b-i7d243sm9l] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.terminy-opcja[b-i7d243sm9l] {
    position: relative;
    display: block;
    cursor: pointer;
    min-width: 0;
}

/* Samo pole wyboru zostaje w dokumencie (klawiatura, czytnik ekranu), ale niewidoczne — stan pokazuje karta obok. */
.terminy-opcja input[b-i7d243sm9l] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.terminy-karta[b-i7d243sm9l] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    height: 100%;
    padding: 1rem 1rem 1rem 2.6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper);
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.terminy-karta[b-i7d243sm9l]::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 1.15rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--line-faint);
    background: var(--paper);
}

.terminy-opcja:hover .terminy-karta[b-i7d243sm9l] {
    border-color: var(--p1);
}

.terminy-opcja input:checked + .terminy-karta[b-i7d243sm9l] {
    border-color: var(--p1);
    box-shadow: inset 0 0 0 1px var(--p1);
    background: var(--ok-bg);
}

.terminy-opcja input:checked + .terminy-karta[b-i7d243sm9l]::before {
    border-color: var(--p1);
    background: var(--p1);
    box-shadow: inset 0 0 0 3px var(--paper);
}

.terminy-opcja input:focus-visible + .terminy-karta[b-i7d243sm9l] {
    outline: 2px solid var(--p1);
    outline-offset: 2px;
}

.terminy-pole:disabled .terminy-opcja[b-i7d243sm9l] {
    cursor: not-allowed;
    opacity: 0.75;
}

.terminy-tytul[b-i7d243sm9l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--text);
}

.terminy-znacznik[b-i7d243sm9l] {
    font-size: 0.7rem;
    font-weight: 500;
}

.terminy-opis[b-i7d243sm9l] {
    font-size: 0.875rem;
    color: var(--text-soft);
    line-height: 1.45;
}

@media (max-width: 768px) {
    .terminy-opcje[b-i7d243sm9l] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Setup/SetupPage.razor.rz.scp.css */
/* „Pierwsze ustawienia”. Układ: trasa kroków po lewej (to prawdziwa sekwencja — stąd numery),
   bieżący krok w jednej karcie po prawej. Jedyny wyróżniony element to pasek postępu pod
   nagłówkiem; reszta cicha. Kolory wyłącznie ze zmiennych palety — działa też w trybie ciemnym.
   Treść kroków rysują komponenty-dzieci, dlatego ich klasy idą przez ::deep. */

.kreator[b-75l1njw76f] {
    max-width: 1080px;
}

/* ── Pasek postępu ─────────────────────────────────────────────── */
.kreator-pasek[b-75l1njw76f] {
    height: 6px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
    margin: 0.25rem 0 1.25rem;
}

.kreator-pasek-wypelnienie[b-75l1njw76f] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--grad-brand);
    transition: width 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .kreator-pasek-wypelnienie[b-75l1njw76f] { transition: none; }
}

.kreator-komunikat[b-75l1njw76f] {
    display: flex;
    padding: 0.55rem 0.85rem;
    margin-bottom: 1rem;
    font-size: 13px;
    border-radius: var(--radius);
    white-space: normal;
    line-height: 1.5;
}

/* ── Układ: trasa + krok ───────────────────────────────────────── */
.kreator-uklad[b-75l1njw76f] {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.kreator-trasa[b-75l1njw76f] {
    position: sticky;
    top: calc(var(--topbar-h) + 1rem);
    min-width: 0;
}

.kreator-trasa ol[b-75l1njw76f] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    /* Linia łącząca kroki — przebiega za znacznikami. */
    background: linear-gradient(var(--line-strong), var(--line-strong)) no-repeat 0.95rem 1rem / 2px calc(100% - 2rem);
}

.kreator-trasa a[b-75l1njw76f] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.4rem;
    border-radius: var(--radius);
    color: var(--text-soft);
    text-decoration: none;
    min-width: 0;
}

.kreator-trasa a:hover[b-75l1njw76f] {
    background: var(--cream-2);
    color: var(--text);
}

.kreator-trasa a:focus-visible[b-75l1njw76f] {
    outline: 2px solid var(--p1);
    outline-offset: 2px;
}

.kreator-znacznik[b-75l1njw76f] {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    background: var(--paper);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
}

.kreator-trasa li.zrobiony .kreator-znacznik[b-75l1njw76f] {
    border-color: var(--p1);
    background: var(--p1);
    color: var(--text-light);
}

/* Pominięty: przerywana obwódka i kreska zamiast numeru — ani „zrobiony”, ani „jeszcze przed Tobą”. */
.kreator-trasa li.pominiety .kreator-znacznik[b-75l1njw76f] {
    border-style: dashed;
    color: var(--text-soft);
}

.kreator-trasa li.biezacy a[b-75l1njw76f] {
    color: var(--text);
    font-weight: 600;
    background: var(--ok-bg);
}

.kreator-trasa li.biezacy .kreator-znacznik[b-75l1njw76f] {
    border-color: var(--p1);
    color: var(--p1);
}

.kreator-trasa li.biezacy.zrobiony .kreator-znacznik[b-75l1njw76f] {
    color: var(--text-light);
}

.kreator-trasa-nazwa[b-75l1njw76f] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── Karta kroku ───────────────────────────────────────────────── */
.kreator-krok[b-75l1njw76f] {
    padding: 1.4rem 1.6rem 1.5rem;
    min-width: 0;
}

.kreator-numer[b-75l1njw76f] {
    margin: 0 0 0.2rem;
    font-size: 0.8rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.kreator-krok[b-75l1njw76f]  .kreator-krok-tytul {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.4rem;
}

.kreator-krok[b-75l1njw76f]  .kreator-krok-lede {
    color: var(--text-soft);
    margin: 0 0 1.25rem;
    max-width: 64ch;
    line-height: 1.55;
}

.kreator-krok[b-75l1njw76f]  .kreator-podtytul {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 1.5rem 0 0.5rem;
}

.kreator-krok[b-75l1njw76f]  .kreator-komunikat {
    display: flex;
    padding: 0.55rem 0.85rem;
    margin-bottom: 1rem;
    font-size: 13px;
    border-radius: var(--radius);
    white-space: normal;
    line-height: 1.5;
}

.kreator-krok[b-75l1njw76f]  .kreator-podpowiedz {
    color: var(--text-soft);
    font-size: 0.875rem;
    margin: 0.75rem 0 0;
    overflow-wrap: anywhere;
}

.kreator-krok[b-75l1njw76f]  .kreator-uwaga {
    color: var(--text-soft);
    font-size: 0.875rem;
    margin: 1.25rem 0 0;
    padding-left: 0.75rem;
    border-left: 3px solid var(--p2);
}

/* Pola formularzy kroków */
.kreator-krok[b-75l1njw76f]  .kreator-allegro-form,
.kreator-krok[b-75l1njw76f]  .kreator-zaproszenie {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.kreator-krok[b-75l1njw76f]  .kreator-pole {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    flex: 1 1 220px;
}

.kreator-krok[b-75l1njw76f]  .kreator-pole .kreator-podpowiedz {
    margin: 0;
    font-size: 0.8rem;
}

.kreator-krok[b-75l1njw76f]  .kreator-etykieta {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text);
}

/* Lista podłączonych kont / skrzynek / osób */
.kreator-krok[b-75l1njw76f]  .kreator-lista {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.kreator-krok[b-75l1njw76f]  .kreator-lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-top: 1px solid var(--line);
    min-width: 0;
}

.kreator-krok[b-75l1njw76f]  .kreator-lista li:first-child {
    border-top: 0;
}

.kreator-krok[b-75l1njw76f]  .kreator-lista-nazwa {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-weight: 500;
}

/* Trzy drogi podłączenia skrzynki */
.kreator-krok[b-75l1njw76f]  .kreator-drogi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.kreator-krok[b-75l1njw76f]  .kreator-droga {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper);
    text-decoration: none;
    min-width: 0;
}

.kreator-krok[b-75l1njw76f]  .kreator-droga:hover,
.kreator-krok[b-75l1njw76f]  .kreator-droga:focus-visible {
    border-color: var(--p1);
    box-shadow: inset 0 0 0 1px var(--p1);
}

.kreator-krok[b-75l1njw76f]  .kreator-droga-tytul {
    font-weight: 600;
    color: var(--text);
}

.kreator-krok[b-75l1njw76f]  .kreator-droga-opis {
    font-size: 0.8rem;
    color: var(--text-soft);
}

/* Opisy ról pod zaproszeniem */
.kreator-krok[b-75l1njw76f]  .kreator-role {
    margin: 1rem 0 1.25rem;
    display: grid;
    gap: 0.4rem;
}

.kreator-krok[b-75l1njw76f]  .kreator-role dt {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
}

.kreator-krok[b-75l1njw76f]  .kreator-role dd {
    margin: 0 0 0.3rem;
    font-size: 0.85rem;
    color: var(--text-soft);
}

.kreator-krok[b-75l1njw76f]  .kreator-link-zaproszenia {
    overflow-wrap: anywhere;
}

/* Podsumowanie */
.kreator-krok[b-75l1njw76f]  .kreator-podsumowanie {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.kreator-krok[b-75l1njw76f]  .kreator-podsumowanie li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem 0.65rem 2.4rem;
    border-top: 1px solid var(--line);
    position: relative;
}

.kreator-krok[b-75l1njw76f]  .kreator-podsumowanie li:first-child {
    border-top: 0;
}

.kreator-krok[b-75l1njw76f]  .kreator-podsumowanie li::before {
    content: "";
    position: absolute;
    left: 0.9rem;
    top: 50%;
    width: 0.8rem;
    height: 0.8rem;
    margin-top: -0.4rem;
    border-radius: 50%;
    border: 2px solid var(--line-faint);
}

.kreator-krok[b-75l1njw76f]  .kreator-podsumowanie li.zrobiony::before {
    border-color: var(--p1);
    background: var(--p1);
}

.kreator-krok[b-75l1njw76f]  .kreator-podsumowanie-nazwa {
    font-weight: 600;
    color: var(--text);
    min-width: 0;
}

.kreator-krok[b-75l1njw76f]  .kreator-podsumowanie-stan {
    color: var(--text-soft);
    font-size: 0.875rem;
}

.kreator-krok[b-75l1njw76f]  .kreator-pozniej {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.7;
}

/* Przyciski na dole kroku */
.kreator-krok[b-75l1njw76f]  .kreator-akcje {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.kreator-krok[b-75l1njw76f]  .kreator-przejscie {
    display: inline-flex;
    margin: 0;
}

/* ── Telefon: trasa zamienia się w rząd znaczników nad krokiem ── */
@media (max-width: 768px) {
    .kreator-uklad[b-75l1njw76f] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .kreator-trasa[b-75l1njw76f] {
        position: static;
    }

    .kreator-trasa ol[b-75l1njw76f] {
        flex-direction: row;
        justify-content: space-between;
        background: linear-gradient(var(--line-strong), var(--line-strong)) no-repeat 0 50% / 100% 2px;
    }

    .kreator-trasa a[b-75l1njw76f] {
        padding: 0.25rem;
        background: transparent;
    }

    .kreator-trasa li.biezacy a[b-75l1njw76f] {
        background: transparent;
    }

    /* Nazwa kroku jest w nagłówku karty — na wąskim ekranie zostają same znaczniki. */
    .kreator-trasa-nazwa[b-75l1njw76f] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .kreator-krok[b-75l1njw76f] {
        padding: 1rem;
    }

    .kreator-krok[b-75l1njw76f]  .kreator-drogi {
        grid-template-columns: minmax(0, 1fr);
    }

    .kreator-krok[b-75l1njw76f]  .kreator-podsumowanie li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .kreator-krok[b-75l1njw76f]  .kreator-podsumowanie-stan {
        grid-column: 1;
        grid-row: 2;
    }

    .kreator-krok[b-75l1njw76f]  .kreator-akcje {
        justify-content: stretch;
    }

    .kreator-krok[b-75l1njw76f]  .kreator-akcje > .btn,
    .kreator-krok[b-75l1njw76f]  .kreator-akcje .kreator-przejscie,
    .kreator-krok[b-75l1njw76f]  .kreator-akcje .kreator-przejscie .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}
/* /Components/Pages/Tasks/TaskBulkReplyModal.razor.rz.scp.css */
/* Okno „Odpowiedz zbiorczo” — podgląd wysyłki + jedna treść dla wszystkich wątków. */

/* Szkielet okna (`task-modal*`: nagłówek, treść, stopka) stoi w app.css, sekcja „Okna zadań” —
   jest wspólny z oknem edycji zadania. Tu tylko to, co ma wyłącznie okno wysyłki. */

.tbr-dialog[b-71hov3rcon] {
    max-width: 720px;
    width: min(720px, 94vw);
}

/* Telefon: okno jest pełnoekranowe (reguła `.modal-dialog` w app.css), a reguła wyżej — mocniejsza
   przez atrybut zakresu — zwężałaby je do 94% i zostawiała po bokach paski tła. */
@media (max-width: 640px) {
    .tbr-dialog[b-71hov3rcon] {
        max-width: 100%;
        width: 100%;
    }
}

.tbr-lead[b-71hov3rcon] {
    margin: 0 0 0.75rem;
    font-size: 13px;
    color: var(--text-soft);
    line-height: 1.5;
}

/* Zdanie „Poleci N wiadomości" — najważniejsza informacja w oknie, więc czytelniejsza niż plakietki. */
.tbr-ile[b-71hov3rcon] {
    margin: 0 0 0.6rem;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
}

/* Ostrzeżenie „z tego zadania już wychodziła wiadomość". */
.tbr-bylo[b-71hov3rcon] {
    display: block;
    margin-bottom: 0.6rem;
    line-height: 1.45;
    white-space: normal;
    text-align: left;
}

/* Rozbicie „ile nie wyjdzie i dlaczego". */
.tbr-powody[b-71hov3rcon] {
    margin: -0.4rem 0 0.75rem;
    padding-left: 1.1rem;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-soft);
}

/* Haczyk „wyślij także do spraw już zamkniętych (N)". */
.tbr-zamkniete[b-71hov3rcon] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
    cursor: pointer;
}

.tbr-zamkniete input[b-71hov3rcon] { margin-top: 0.15rem; flex: none; }

/* Potwierdzenie ponownej wysyłki — ma zatrzymać rękę, więc stoi nad przyciskami i jest widoczne. */
.tbr-potwierdzenie[b-71hov3rcon] {
    margin: 0.75rem 0 0;
    padding: 0.75rem;
    border: 1px solid var(--global-palette5, #e0a800);
    border-radius: 8px;
    background: rgba(255, 193, 7, 0.08);
}

.tbr-potwierdzenie p[b-71hov3rcon] {
    margin: 0 0 0.6rem;
    font-size: 13px;
    line-height: 1.5;
}

.tbr-potwierdzenie-akcje[b-71hov3rcon] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.tbr-summary[b-71hov3rcon],
.tbr-wynik[b-71hov3rcon] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.tbr-klienci[b-71hov3rcon] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
}

/* Lista zgłoszeń: przy 200 pozycjach okno nie może rosnąć w nieskończoność — przewijamy w środku. */
/* ⚠ `flex: none`: treść okna jest kolumną flex z własnym przewijaniem, a element z `overflow`
   nie ma w niej dolnej granicy wysokości — przy długiej treści (telefon) lista zostałaby
   ściśnięta do zera zamiast przewijać się razem z resztą. */
.tbr-lista[b-71hov3rcon] {
    flex: none;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.35rem;
    margin-bottom: 0.75rem;
}

.tbr-wiersz[b-71hov3rcon] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.3rem 0.35rem;
    border-radius: 6px;
    font-size: 12px;
}

.tbr-wiersz + .tbr-wiersz[b-71hov3rcon] { border-top: 1px solid var(--line); }

.tbr-wiersz-pominiety[b-71hov3rcon] { opacity: 0.62; }

.tbr-klient[b-71hov3rcon] {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 8rem;
}

.tbr-stan[b-71hov3rcon] { color: var(--text-soft); }

.tbr-werdykt[b-71hov3rcon] {
    margin-left: auto;
    font-size: 11px;
    white-space: nowrap;
}

.tbr-idzie[b-71hov3rcon] { color: var(--global-palette1); font-weight: 600; }
.tbr-pominiete[b-71hov3rcon] { color: var(--warn); }

.tbr-wzorce[b-71hov3rcon] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.tbr-tresc[b-71hov3rcon] {
    flex: none;   /* jak lista wyżej: pole treści nie może się kurczyć, gdy okno się przewija */
    width: 100%;
    resize: vertical;
    font-family: inherit;
}

.tbr-podpowiedz[b-71hov3rcon] {
    margin: 0.35rem 0 0;
    font-size: 11px;
    color: var(--text-soft);
}

.tbr-wstawka[b-71hov3rcon] {
    background: none;
    border: 1px dashed var(--line);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 11px;
    color: var(--text-soft);
    cursor: pointer;
}

.tbr-wstawka:hover[b-71hov3rcon] { color: var(--global-palette1); border-color: var(--global-palette1); }

/* Postęp — przy dwustu zgłoszeniach człowiek musi widzieć, że coś się dzieje. */
.tbr-postep[b-71hov3rcon] {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.tbr-postep-pasek[b-71hov3rcon] {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: var(--cream-2);
    overflow: hidden;
}

.tbr-postep-pasek span[b-71hov3rcon] {
    display: block;
    height: 100%;
    background: var(--global-palette1);
    transition: width 0.2s ease;
}

.tbr-postep-opis[b-71hov3rcon] {
    font-size: 12px;
    color: var(--text-soft);
    white-space: nowrap;
}

.tbr-blad[b-71hov3rcon] {
    margin: 0.2rem 0 0;
    font-size: 12px;
    color: var(--danger);
}

/* Dwa pytania mieszczą się także na telefonie. */
.tbr-potwierdzenie-akcje[b-71hov3rcon] { flex-wrap: wrap; }
@media (max-width: 768px) {
    .tbr-potwierdzenie-akcje .btn[b-71hov3rcon] { width: 100%; }
}
/* /Components/Pages/Tasks/TaskDetailPage.razor.rz.scp.css */
/* ── Powrót ──
   W nagłówku zadania to sama strzałka w tym samym wierszu co tytuł (12.10.2026); z napisem
   „Zadania” zostaje tylko w stanie „wczytuję” (`.task-back-stan`), gdzie tytułu jeszcze nie ma. */
.task-back[b-0zau9n34jo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-soft);
    text-decoration: none;
    transition: color 0.14s, background 0.14s;
}

.task-back:hover[b-0zau9n34jo] { color: var(--p1); background: var(--cream-2); }
.task-back:focus-visible[b-0zau9n34jo] { outline: 2px solid var(--p1); outline-offset: 2px; }

.task-back svg[b-0zau9n34jo] {
    width: 17px; height: 17px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.task-back-stan[b-0zau9n34jo] {
    width: auto;
    height: auto;
    border-radius: 0;
    align-self: flex-start;
}
.task-back-stan:hover[b-0zau9n34jo] { background: transparent; }

.task-detail-loading[b-0zau9n34jo],
.task-detail-missing[b-0zau9n34jo] {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-faint);
    font-size: 14px;
}

/* Nagłówek stanu przejściowego i stanu „nie ma czego pokazać". Rozmiar i waga wpisane WPROST,
   bo to jest `h1` — bez tego globalna reguła dałaby mu domyślne 2em i stan „wczytuję" krzyczałby
   głośniej niż samo zadanie. */
.task-detail-state-title[b-0zau9n34jo] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-soft);
    margin: 0 0 0.3rem;
}

.task-detail-missing .btn[b-0zau9n34jo] { margin-top: 0.8rem; }

/* ── Kontener zadania: pełna szerokość (jak konwersacje), sidebar trzyma balans ── */
.td-wrap[b-0zau9n34jo] { width: 100%; }

/* ── Nagłówek: JEDEN wiersz — powrót, tytuł, status (12.10.2026) ──
   Przed zmianą nagłówek miał cztery piętra (odnośnik „← Zadania”, nadtytuł „ZADANIE”, tytuł,
   dwuwierszowy akapit) i kończył się na 236. pikselu okna 1440×900. Tytuł jest pierwszą rzeczą
   pod paskiem aplikacji; wszystko, co stało nad nim i pod nim, zeszło z ekranu. */
.td-head[b-0zau9n34jo] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.6rem;
}
.td-head-titles[b-0zau9n34jo] { flex: 1; min-width: 0; }
/* To jest `h1` (patrz komentarz w TaskDetailPage.razor). `margin: 0` i `font-weight: 400`
   zdejmują to, co globalna reguła dokłada nagłówkom — wiersz ma wyglądać dokładnie tak, jak
   wyglądał jako `div`. Rozmiar pisma siedzi niżej, na dzieciach. */
.td-title-row[b-0zau9n34jo] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    margin: 0;
    font-weight: 400;
}

.task-prio-dot[b-0zau9n34jo] {
    width: 11px; height: 11px;
    border-radius: 50%;
    flex: none;
}
.td-title-input[b-0zau9n34jo],
.td-title-static[b-0zau9n34jo] {
    flex: 1;
    min-width: 0;
    font-family: 'Instrument Serif', Georgia, serif;
    /* Było clamp(1.9rem, 3vw, 2.5rem): tytuł sam brał 45 px wysokości. Nadal największy napis
       ekranu i nadal krojem nagłówków — ale w wierszu, który mieści też powrót i status. */
    font-size: clamp(1.5rem, 2.1vw, 1.85rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0;
}
.td-title-input[b-0zau9n34jo] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0.1rem 0.5rem;
    margin: -0.1rem -0.5rem;
    text-overflow: ellipsis;
    transition: border-color 0.14s, background 0.14s;
}
.td-title-input:hover[b-0zau9n34jo] { border-color: var(--line); }
.td-title-input:focus[b-0zau9n34jo] { outline: none; border-color: var(--p1); background: var(--paper); }
.td-title-input[b-0zau9n34jo]::placeholder { color: var(--text-faint); font-style: italic; }

.td-status[b-0zau9n34jo] {
    flex: none;
    font-size: 12px;
    padding: 3px 12px;
}
.td-side-title[b-0zau9n34jo] { font-size: 1.15rem; }

/* ── Tagi zadania (chipy .tag globalne + picker globalny) ── */
.td-tags-head[b-0zau9n34jo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.td-tags-list[b-0zau9n34jo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

/* ── Grid 2 kolumny ── */
/* Prawa kolumna 340 px (było 360) i ciaśniejsze odstępy — oddane miejsce bierze dyskusja. */
.task-detail-grid[b-0zau9n34jo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.1rem;
    align-items: stretch;
}

.task-detail-main[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.task-detail-side[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
}

/* Przełącznik statusu w nagłówku — TYLKO na wąskim ekranie. Na dużym stoi w panelu obok treści
   i tam zostaje; dwa te same przełączniki widoczne naraz to dwa miejsca do kliknięcia i pytanie,
   czym się różnią. */
.td-status-wybor[b-0zau9n34jo] { display: none; }
.td-status-wybor select[b-0zau9n34jo] { min-width: 9.5rem; }

@media (max-width: 900px) {
    .task-detail-grid[b-0zau9n34jo] { grid-template-columns: 1fr; }

    /* Zmierzone na pokazie (390×844): przełącznik w panelu leżał 892 px w dół, na stronie wysokiej
       2254 px. Tu jest od razu pod tytułem, a plakietka (powtórka tego samego stanu) schodzi.
       Od 12.10.2026 stoi w DRUGIM wierszu nagłówka: obok tytułu zabierał mu na telefonie ponad
       połowę szerokości (z 390 px na tytuł zostawało ok. 150). */
    .td-head[b-0zau9n34jo] { flex-wrap: wrap; row-gap: 0.45rem; }
    .td-head-titles[b-0zau9n34jo] { flex: 1 1 0; }
    .td-status-wybor[b-0zau9n34jo] { display: flex; flex: 1 1 100%; }
    /* 40 px wysokości: to pole zmienia się na telefonie najczęściej, a 29 px to cel dla myszy. */
    .td-status-wybor select[b-0zau9n34jo] { width: 100%; min-height: 40px; }
    .td-status[b-0zau9n34jo] { display: none; }
}

/* ── Opis: blok prozy pod tytułem, nie karta i nie pudełko formularza (12.10.2026) ──
   Pusty = JEDEN wiersz z podpowiedzią. Wypełniony rośnie z treścią. Sufit to ok. 30% wysokości
   okna — powyżej opis przewija się sam, żeby długi opis nie zjadł dyskusji (to ona i opis są na
   tym ekranie najważniejsze, ale dyskusja jest tym, co żyje).

   ⚠ `display: block` na polu: `textarea` jest elementem liniowym i bez tego dokłada pod sobą
     kilka pikseli na „ogonki” wiersza — blok byłby wyższy niż jego treść. */
.td-opis[b-0zau9n34jo] { min-width: 0; }

.td-desc-input[b-0zau9n34jo],
.task-desc-static[b-0zau9n34jo] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    max-height: 30vh;
    overflow-y: auto;
    font: inherit;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0.35rem 0.6rem;
    margin: 0;
}

.td-desc-input[b-0zau9n34jo] {
    resize: none;
    field-sizing: content;       /* rośnie z treścią; przeglądarka bez tej własności — reguła @supports niżej */
    background: transparent;
    transition: border-color 0.14s, background 0.14s;
}
.td-desc-input:hover[b-0zau9n34jo] { border-color: var(--line); background: var(--cream); }
.td-desc-input:focus[b-0zau9n34jo] { outline: none; border-color: var(--p1); background: var(--paper); }
.td-desc-input[b-0zau9n34jo]::placeholder { color: var(--text-faint); }

/* Przeglądarka, która nie umie dopasować pola do treści, dostaje to, co było przed zmianą:
   trzy wiersze i uchwyt do rozciągania. Jeden wiersz z paskiem przewijania byłby tam gorszy
   niż strata 40 px. */
@supports not (field-sizing: content) {
    .td-desc-input[b-0zau9n34jo] { min-height: 5rem; resize: vertical; }
}

.task-desc-static[b-0zau9n34jo] {
    white-space: pre-wrap;
    word-break: break-word;
}
.task-desc-static:focus-visible[b-0zau9n34jo] { outline: 2px solid var(--p1); outline-offset: 1px; }

.task-desc-empty[b-0zau9n34jo] {
    font-size: 13px;
    color: var(--text-faint);
    margin: 0;
    padding: 0.35rem 0.6rem;
}

/* Nagłówek karty dyskusji — niższy niż zwykły nagłówek karty (1,1 rem dopłaty u góry): każdy
   piksel tej karty powyżej wątku to piksel zabrany wątkowi. */
.td-disc-head[b-0zau9n34jo] {
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem 0.4rem 1rem;
    border-bottom: 1px solid var(--line);
}
.td-disc-head .card-title[b-0zau9n34jo] { font-size: 1.2rem; }
.td-disc-odstep[b-0zau9n34jo] { flex: 1 1 auto; }

/* ── Dyskusja ── */
.task-disc-card[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    flex: 1;                     /* dyskusja rośnie, wyrównując lewą kolumnę do sidebara */
}

.task-disc-count[b-0zau9n34jo] {
    font-size: 11px;
    color: var(--text-soft);
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 0 7px;
    line-height: 18px;
}

.task-disc-stream[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
    min-height: 150px;

    /* ⚠ SUFIT WYSOKOŚCI jest tu obowiązkowy, a nie kosmetyczny.
       Do 11.08.2026 stało tu samo `flex: 1` + `overflow-y: auto` — i wyglądało poprawnie,
       bo `overflow-y` sugeruje, że coś się przewija. Nie przewijało się nic: żaden rodzic
       (.task-detail-main → .task-disc-card) nie ma ograniczonej wysokości, więc `flex: 1`
       rośnie do wysokości treści, a przewijanie nie ma czego uciąć. Przy dwóch wpisach
       nie widać różnicy; przy trzydziestu dyskusja wypychała stronę daleko poza ekran,
       a pole do pisania uciekało pod dolną krawędź.
       Sufit liczony od okna, nie od piksela: ma się mieścić na jednym ekranie tak samo
       jak strumień w panelu rozmowy. */
    max-height: clamp(220px, 46vh, 560px);
    overflow-y: auto;
    padding: 0.9rem 1rem;
}

.task-disc-empty[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 1.6rem 0.75rem;
    font-size: 12.5px;
    color: var(--text-faint);
    line-height: 1.5;
}

.task-disc-empty-ico[b-0zau9n34jo] {
    width: 32px; height: 32px;
    stroke: var(--line-strong); fill: none;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.task-disc-msg[b-0zau9n34jo] {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    max-width: 90%;
    align-self: flex-start;
}

.task-disc-msg.mine[b-0zau9n34jo] { align-self: flex-end; }

.task-disc-ava[b-0zau9n34jo] {
    margin-top: 1px;
    width: 28px; height: 28px;
    font-size: 10.5px;
    flex: none;
}

.task-disc-bubble[b-0zau9n34jo] {
    min-width: 0;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.45rem 0.65rem;
}

.task-disc-msg.mine .task-disc-bubble[b-0zau9n34jo] {
    background: color-mix(in srgb, var(--p1) 12%, var(--paper));
    border-color: color-mix(in srgb, var(--p1) 30%, var(--line));
}

.task-disc-msg-head[b-0zau9n34jo] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 2px;
}

.task-disc-author[b-0zau9n34jo] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
}

.task-disc-time[b-0zau9n34jo] {
    font-size: 10px;
    color: var(--text-soft);
    white-space: nowrap;
}

.task-disc-body[b-0zau9n34jo] {
    font-size: 13px;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

.task-disc-composer[b-0zau9n34jo] {
    display: flex;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--line);
    align-items: flex-end;
    position: relative;   /* kotwica dla pickera @wzmianek */
}

/* ── @wzmianki: podpowiadacz w composerze + chip w treści ── */
.task-mention-picker[b-0zau9n34jo] {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: calc(100% - 0.35rem);
    z-index: 30;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 240px;
    overflow-y: auto;
    padding: 0.25rem;
}

.task-mention-hint[b-0zau9n34jo] {
    font-size: 10.5px;
    color: var(--text-soft);
    padding: 0.3rem 0.55rem 0.4rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.2rem;
    font-family: 'Geist Mono', monospace;
    letter-spacing: 0.02em;
}

.task-mention-item[b-0zau9n34jo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: var(--text);
}

.task-mention-item:hover[b-0zau9n34jo] {
    background: var(--cream-2, #f8f3e8);
}

.task-mention-ava[b-0zau9n34jo] {
    width: 22px;
    height: 22px;
    font-size: 10px;
    flex: 0 0 auto;
}

.task-mention-name[b-0zau9n34jo] {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-mention-handle[b-0zau9n34jo] {
    font-size: 12px;
    color: var(--text-faint);
    margin-left: auto;
    flex: 0 0 auto;
}

.task-mention-chip[b-0zau9n34jo] {
    color: var(--global-palette1, #009244);
    font-weight: 600;
    background: color-mix(in srgb, var(--global-palette1, #009244) 12%, transparent);
    border-radius: 4px;
    padding: 0 0.15rem;
}

.task-disc-input[b-0zau9n34jo] {
    flex: 1;
    resize: none;
    font: inherit;
    font-size: 13px;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--text);
}

.task-disc-input:focus[b-0zau9n34jo] { outline: none; border-color: var(--p1); }

.task-disc-send[b-0zau9n34jo] { white-space: nowrap; }

/* ── Sidebar ── */
.task-side-card[b-0zau9n34jo] { padding: 0; }

.task-side-body[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.task-side-field[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.task-side-label[b-0zau9n34jo] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
    font-weight: 600;
}

.task-side-value[b-0zau9n34jo] {
    font-size: 13px;
    color: var(--text);
}

.task-side-sub[b-0zau9n34jo] {
    font-size: 11px;
    color: var(--text-soft);
}

/* `.task-side-muted` stoi w app.css (sekcja „Okna zadań”) — używa jej też okno wysyłki zbiorczej. */

.task-prio-inline[b-0zau9n34jo] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 13px;
}

/* ── Osoba (wykonawca / uczestnik) ── */
.task-person[b-0zau9n34jo] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-size: 13px;
}

.task-person-row[b-0zau9n34jo] {
    display: flex;
    width: 100%;
}

.task-person-name[b-0zau9n34jo] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Krzyżyk usuwania (uczestnik, powiązane zgłoszenie) — z obwódką, żeby było go WIDAĆ bez najechania
   (W-14 właściciela, 19.09.2026: „przycisk zamykania widać dopiero po najechaniu"). Najechanie = czerwień. */
.task-person-remove[b-0zau9n34jo] {
    flex: none;
    width: 22px; height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1;
    border: 1px solid var(--line);
    cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.task-person-remove:hover[b-0zau9n34jo] { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* ── Dodawanie uczestnika ── */
.task-add-participant[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--line);
}

.task-add-participant-row[b-0zau9n34jo] {
    display: flex;
    gap: 0.4rem;
}

.task-add-participant-row select[b-0zau9n34jo] { flex: 1; min-width: 0; }
.task-add-participant-row .btn[b-0zau9n34jo] { flex: none; }

/* ── Termin po terminie ── */
.tasks-due-over[b-0zau9n34jo] { color: var(--danger); font-weight: 600; }

.task-overdue-tag[b-0zau9n34jo] {
    display: inline-block;
    margin-top: 0.15rem;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 600;
    color: var(--danger);
    background: var(--danger-bg);
    border-radius: 999px;
    padding: 1px 7px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Link do zgłoszenia ── */
.task-conv-link[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
    color: var(--text);
}

/* `.task-conv-num` stoi w app.css (sekcja „Okna zadań”) — używa jej też okno wysyłki zbiorczej. */

.task-conv-link:hover .task-conv-num[b-0zau9n34jo] { text-decoration: underline; }

.task-conv-subj[b-0zau9n34jo] {
    font-size: 12px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Powiązane zgłoszenia (lista wielu + picker) ── */
.td-conv-list[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.td-conv-row[b-0zau9n34jo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.td-conv-row .task-conv-link[b-0zau9n34jo] { flex: 1 1 auto; min-width: 0; }

.td-conv-hint[b-0zau9n34jo] {
    display: block;
    padding: 0.35rem 0.5rem;
    font-size: 12px;
}

/* Wynik wyszukiwania w pickerze: numer + temat + klient w jednym wierszu. */
.td-conv-result[b-0zau9n34jo] {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    width: 100%;
    text-align: left;
}

.td-conv-result-text[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.td-conv-result-cust[b-0zau9n34jo] {
    font-size: 11px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Klient / kanal / stan przy podpietym zgloszeniu — bez nich lista mowila tylko „ile”. */
.td-conv-meta[b-0zau9n34jo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.td-conv-cust[b-0zau9n34jo] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

.td-conv-chan[b-0zau9n34jo] { font-size: 10px; }

.td-conv-state[b-0zau9n34jo] {
    font-size: 11px;
    color: var(--text-soft);
}

/* Klienci, ktorych sprawa dotyczy — „potem wiemy kto”. */
.td-klienci[b-0zau9n34jo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* Pasek z akcjami zbiorczymi nad lista zgloszen. */
.td-bulk-bar[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0 1rem 0.5rem;
}

.td-bulk-bar .btn[b-0zau9n34jo] { width: 100%; }

/* Slad „Powiadomiono N zgloszen, data" — zeby nikt nie wyslal tego samego drugi raz. */
.td-bulk-slad[b-0zau9n34jo] {
    margin: 0 1rem 0.6rem;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    background: var(--cream-2);
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-soft);
}

/* ── Historia (oś czasu) ── */
/* Toolbar filtra historii — przełącznik szumu (comment_added/mentioned). */
.task-log-toolbar[b-0zau9n34jo] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}
.task-log-filter[b-0zau9n34jo] {
    font-family: inherit;
    font-size: 11px;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.task-log-filter:hover[b-0zau9n34jo] { background: var(--cream-2); color: var(--text-soft); }
.task-log-filter.on[b-0zau9n34jo] {
    background: var(--cream-2);
    color: var(--text);
    border-color: var(--line-strong);
}

.task-log[b-0zau9n34jo] {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* pionowa linia łącząca kropki */
.task-log[b-0zau9n34jo]::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--line);
}

.task-log-item[b-0zau9n34jo] {
    position: relative;
    display: flex;
    gap: 0.6rem;
    padding: 0.35rem 0 0.35rem 0;
}

.task-log-dot[b-0zau9n34jo] {
    position: relative;
    z-index: 1;
    flex: none;
    width: 9px;
    height: 9px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--line-strong);
    box-shadow: 0 0 0 3px var(--paper);   /* przykrywa linię pod kropką */
}

.task-log-ok[b-0zau9n34jo]      { background: var(--p1); }
.task-log-info[b-0zau9n34jo]    { background: var(--info); }
.task-log-warn[b-0zau9n34jo]    { background: var(--warn); }
.task-log-danger[b-0zau9n34jo]  { background: var(--danger); }
.task-log-accent[b-0zau9n34jo]  { background: var(--global-palette2, #c1d11c); }
.task-log-muted[b-0zau9n34jo]   { background: var(--line-strong); }

.task-log-content[b-0zau9n34jo] { min-width: 0; }

.task-log-summary[b-0zau9n34jo] {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.4;
    word-break: break-word;
}

.task-log-meta[b-0zau9n34jo] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 1px;
}

.task-log-actor[b-0zau9n34jo] {
    font-size: 11px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-log-time[b-0zau9n34jo] {
    font-size: 10px;
    color: var(--text-soft);
    white-space: nowrap;
    flex: none;
}

/* ── Usuń ── */
.task-delete-btn[b-0zau9n34jo] { align-self: flex-start; }

/* ── Cele dotykowe ────────────────────────────────────────────────────────────
   Przejazd 18.08.2026: odnośnik „Zadania" 66×19, krzyżyk przy osobie 20×20,
   filtr dziennika ~21 px wysokości — palec trafia obok.

   ⚠ REALNY ROZMIAR, NIE WARSTWA `::after`: sonda zalicza cel po rozmiarze (≥32×32) albo
   po czterech punktach szesnaście pikseli od środka — a druga droga działa wyłącznie dla
   elementów w widocznym kadrze. Panel boczny zadania i dziennik zmian leżą pod zgięciem
   strony, więc warstwa nic by tam nie dała.

   Klasy WSPÓŁDZIELONE („+ tag", „+ zgłoszenie", kosz przy załączniku) mają swoje reguły
   w `app.css` — tutaj byłyby zakresowe, czyli nie objęłyby okna tagów rozmowy ani
   komponentu załączników. */
@media (pointer: coarse) {
    .task-back[b-0zau9n34jo] { min-height: 40px; min-width: 44px; height: 40px; width: 44px; }
    .task-back-stan[b-0zau9n34jo] { height: auto; width: auto; }

    .task-person-remove[b-0zau9n34jo] { width: 40px; height: 40px; }

    .task-log-filter[b-0zau9n34jo] {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 40px; min-width: 44px;
        padding: 0.15rem 0.85rem;
    }

    /* Odnośnik do powiązanego zgłoszenia — dwie linijki tekstu, ale bez własnej wysokości. */
    .task-conv-link[b-0zau9n34jo] { justify-content: center; min-height: 40px; }
}

/* Przyciski przy tytule — widoczne dopiero, gdy tytul sie zmienil. Nie rozpychaja naglowka,
   bo stoja w tym samym rzedzie flex co pole. */
.td-title-zapisz[b-0zau9n34jo] { flex: none; }

/* ⚠ Blok układu komputera stoi NA KOŃCU arkusza (przeniesiony 12.10.2026). Do tej pory stał w połowie pliku,
   PRZED regułami podstawowymi `.task-disc-stream` i `.task-disc-card` — a przy tej samej wadze selektora wygrywa
   reguła późniejsza. `max-height: none` z tego bloku nigdy więc nie zadziałało: wątek dalej miał sufit „46% okna”.
   Nie było tego widać, bo przy starym, wysokim nagłówku wątek i tak nie dorastał do sufitu (354 px przy suficie
   414 px na 1440×900). Po zwarciu nagłówka dorósł — i pole komentarza odkleiło się od dolnej krawędzi (673 px
   zamiast ok. 880). Reguły tego bloku muszą stać PO regułach, które nadpisują. */
/* ── KOMPUTER: ekran zadania ma wysokość okna, a przewijają się KOLUMNY, nie strona ──────────────────
   (11.10.2026, zrzut właściciela z produkcji: „całe okno jest źle zrobione… powinien się przewijać pewnie
   tylko ten panel po prawej”.)

   Co było (zmierzone 1440×900 na zadaniu z 30 komentarzami): przewijała się cała strona (900 px okna,
   1469 px treści), bo wysokość ekranu wyznaczała prawa kolumna — 1185 px pól, tagów, zespołu, czasu
   i powiązań. Lewa kolumna rozciągała się do tej samej wysokości, ale wątek dyskusji miał sufit 46% okna,
   więc pole „Napisz komentarz…” stało w połowie ekranu, a pod nim zostawała pustka. Przy przewinięciu
   w dół do „Powiązań” pole komentarza i sam wątek uciekały w górę.

   Co jest: obudowa ekranu wypełnia miejsce pod paskiem górnym (te same klocki co układ aplikacji:
   `main` ma wysokość okna, `.content-wrapper` jest kolumną elastyczną z `min-height: 0`) i niczego nie
   wypuszcza poza siebie. Lewa kolumna: opis ma swoją wysokość, karta dyskusji bierze resztę, wątek
   przewija się sam, pole komentarza stoi przy dolnej krawędzi. Prawa kolumna przewija się niezależnie.

   ⚠ Tylko gdy okno ma na to miejsce: szerokość powyżej progu jednej kolumny (900 px) i co najmniej
     620 px wysokości. W niższym oknie tytuł, opis i pole komentarza zjadłyby cały wątek — tam zostaje
     dotychczasowy, zwykły przewijany słupek. Telefon tej reguły nie widzi wcale.
   ⚠ Prawa kolumna jest tu SIATKĄ, nie kolumną elastyczną: elementy kolumny elastycznej o ograniczonej
     wysokości kurczą się (karty zgniatałyby się zamiast przewijać), a wiersze siatki `max-content` — nie. */
@media (min-width: 901px) and (min-height: 620px) {
    /* Dopłaty u góry i u dołu mniejsze niż na zwykłym ekranie (1,5 rem / 3 rem): ten ekran się nie
       przewija, więc dolny zapas „na oddech po ostatniej karcie” był czystą stratą wysokości wątku. */
    .content[b-0zau9n34jo] {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding-top: 0.8rem;
        padding-bottom: 1.1rem;
    }
    .td-wrap[b-0zau9n34jo] {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .td-head[b-0zau9n34jo] { flex: none; }

    .task-detail-grid[b-0zau9n34jo] {
        flex: 1 1 0;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr);
    }
    .task-detail-main[b-0zau9n34jo] { min-height: 0; }
    /* Opis ma wysokość swojej treści (do sufitu z reguły `.td-desc-input`) i się nie kurczy —
       resztę kolumny bierze karta dyskusji. */
    .td-opis[b-0zau9n34jo] { flex: none; }
    .task-disc-card[b-0zau9n34jo] { flex: 1 1 0; min-height: 0; }
    /* Sufit „46% okna” był protezą na brak ograniczonej wysokości u rodziców (patrz komentarz przy
       .task-disc-stream). Tutaj rodzice ją mają, więc wątek bierze całą resztę karty. */
    .task-disc-stream[b-0zau9n34jo] { flex: 1 1 0; min-height: 0; max-height: none; }
    .task-disc-composer[b-0zau9n34jo] { flex: none; }

    .task-detail-side[b-0zau9n34jo] {
        display: grid;
        grid-auto-rows: max-content;
        align-content: start;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Miejsce na własny pasek przewijania — bez tego pasek leżałby na prawej krawędzi kart. */
        padding-right: 0.4rem;
        scrollbar-gutter: stable;
    }
}
/* /Components/Pages/Tasks/TaskEditModal.razor.rz.scp.css */
/* ⚠ Tu stoją WYŁĄCZNIE reguły pól, których używa samo okno edycji zadania. Szkielet okna
   (`task-modal`, `-head`, `-title`, `-body`, `-label`, `-error`, `-foot`, `-spacer`) jest wspólny
   z oknem wysyłki zbiorczej i mieszka w `app.css`, sekcja „Okna zadań”. Arkusz zakresowy nie
   sięga do znacznika innego komponentu — gdy szkielet stał tutaj, okno „Powiadom wszystkich —
   załatwione” wychodziło bez żadnych odstępów (zgłoszenie właściciela, 11.10.2026). */

.task-modal-textarea[b-c37nb0nvnq] {
    resize: vertical;
    min-height: 60px;
}

.task-modal-row[b-c37nb0nvnq] {
    display: flex;
    gap: 0.75rem;
}

.task-modal-field[b-c37nb0nvnq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.task-modal-linkchip[b-c37nb0nvnq] {
    align-self: flex-start;
    margin-bottom: 0.4rem;
}

/* Zdanie przy wygaszonym „Zapisz”: czego brakuje. Ciche — to podpowiedź, nie błąd. */
.task-modal-brak[b-c37nb0nvnq] {
    font-size: 12px;
    color: var(--text-soft);
}

@media (max-width: 560px) {
    .task-modal-row[b-c37nb0nvnq] {
        flex-direction: column;
        gap: 0.35rem;
    }
}
/* /Components/Pages/Tasks/TaskLinkTicketsModal.razor.rz.scp.css */
.tlt-dialog[b-makxvbm5ip] { width: min(900px, 94vw); max-width: 900px; }
/* Telefon: okno jest pełnoekranowe (reguła `.modal-dialog` w app.css), a reguła wyżej — mocniejsza przez atrybut
   zakresu — zwężała je do 94% i zostawiała po bokach paski tła (próba końcowa 12.10.2026; tak samo jak .tbr-dialog). */
@media (max-width: 640px) {
    .tlt-dialog[b-makxvbm5ip] { width: 100%; max-width: 100%; }
}
.tlt-filtry[b-makxvbm5ip] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.tlt-filtry .modern-input[b-makxvbm5ip] { width: 100%; }
.tlt-pomoc[b-makxvbm5ip] { color: var(--text-soft); font-size: .8rem; line-height: 1.5; }
.tlt-wyniki[b-makxvbm5ip] { margin-top: 1rem; border: 1px solid var(--line); border-radius: 8px; }
.tlt-wiersz[b-makxvbm5ip] { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem; cursor: pointer; }
.tlt-wiersz + .tlt-wiersz[b-makxvbm5ip] { border-top: 1px solid var(--line); }
.tlt-wiersz input[b-makxvbm5ip] { flex: none; margin-top: .3rem; }
.tlt-opis[b-makxvbm5ip] { display: flex; flex-direction: column; gap: .25rem; min-width: 0; overflow-wrap: anywhere; flex: 1; }
.tlt-foot[b-makxvbm5ip] { flex-wrap: wrap; }
@media (max-width: 768px) {
    .tlt-filtry[b-makxvbm5ip] { grid-template-columns: minmax(0, 1fr); }
    .tlt-wiersz[b-makxvbm5ip] { flex-wrap: wrap; }
    .tlt-foot .btn[b-makxvbm5ip] { width: 100%; }
}
/* /Components/Pages/Tasks/TasksPage.razor.rz.scp.css */
.tasks-head[b-hei3780ofq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* ⚠ Kolumna z tytułem musi mieć `min-width: 0`, inaczej na telefonie przyciski o stałej
   szerokości spychają ją do ~200 px i podtytuł łamie się na cztery linijki, mając obok
   pół ekranu pustego miejsca. Domyślne `min-width: auto` na elemencie flex tego nie puszcza. */
.tasks-head > :first-child[b-hei3780ofq] {
    min-width: 0;
    flex: 1 1 auto;
}

/* Akcje nagłówka: przełącznik widoku (Tabela/Tablica) + „Nowe zadanie". */
.tasks-head-actions[b-hei3780ofq] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
}

/* Na wąskim ekranie przyciski schodzą pod tytuł — inaczej zabierają mu połowę szerokości.
   Od K6 (03.10.2026) w rzędzie stoi też przycisk „Statusy” (panel lewej kolumny) — trzy przyciski nie mieszczą się
   w 390 px w jednym rzędzie, więc mogą się złamać, zamiast wypchnąć stronę w bok. */
@media (max-width: 560px) {
    .tasks-head[b-hei3780ofq] { flex-wrap: wrap; }
    .tasks-head-actions[b-hei3780ofq] { width: 100%; flex-wrap: wrap; }
}

/* Widok Tablica potrzebuje pełnej szerokości (kolumny Kanban) — zdejmij ograniczenie .content. */
.content.tasks-board-view[b-hei3780ofq] {
    max-width: none;
}

/* Toolbar filtrów przebudowany na wspólne klasy z app.css:
   .inbox-search (szukajka) + .filter-bar / .ms-dropdown / .f-chip / .f-sep (filtry).
   Przełącznik Tabela/Tablica → wspólny <ViewToggle />. Dawne .tasks-toolbar / .tasks-search* /
   .tfilter* / .seg* / .tasks-filters-sep usunięte (kontrolki zastąpione, .seg był duplikatem). */

/* Licznik pod wyszukiwarką — ta sama rola co „N w tym widoku" w skrzynce. */
.tasks-licznik[b-hei3780ofq] {
    margin: 0.35rem 0 0.5rem;
    font-size: 12px;
    color: var(--text-soft);
}

/* ── Empty state ── */
.tasks-empty[b-hei3780ofq] {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-faint);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.tasks-empty-ico[b-hei3780ofq] {
    width: 40px;
    height: 40px;
    stroke: var(--line-strong);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 0.35rem;
}

.tasks-empty-title[b-hei3780ofq] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-soft);
}

.tasks-empty-sub[b-hei3780ofq] {
    font-size: 13px;
    color: var(--text-faint);
    margin-bottom: 0.6rem;
}

/* ── Table ── */
.tasks-table-card[b-hei3780ofq] {
    padding: 0;
    overflow: hidden;
}

.tasks-table[b-hei3780ofq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.tasks-table thead th[b-hei3780ofq] {
    background: var(--cream);
    text-align: left;
    padding: 0.65rem 1rem;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
}

.tasks-table td[b-hei3780ofq] {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.tasks-table tbody tr:last-child td[b-hei3780ofq] {
    border-bottom: none;
}

.tasks-row[b-hei3780ofq] {
    cursor: pointer;
    transition: background 0.12s;
}

.tasks-row:hover[b-hei3780ofq] {
    background: var(--cream);
}

/* Tytuł jest odnośnikiem (żeby dało się otworzyć zadanie w nowej karcie i dojść do niego
   klawiaturą), ale MA WYGLĄDAĆ jak zwykły tekst w wierszu — podkreślenie i kolor odnośnika
   zmieniłyby wygląd listy. Podświetlenie ostrości zostawiamy: bez niego droga klawiaturą
   istnieje, ale nie widać, gdzie się jest. */
.tasks-title[b-hei3780ofq] {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    display: block;
}

.tasks-title:hover[b-hei3780ofq] {
    text-decoration: underline;
}

.tasks-title:focus-visible[b-hei3780ofq] {
    outline: 2px solid var(--global-palette1, #009244);
    outline-offset: 2px;
    border-radius: 3px;
}

.tasks-desc[b-hei3780ofq] {
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 2px;
}

/* Priorytet — kolorowa kropka + etykieta (lekki „legend" znacznik). */
.tasks-prio[b-hei3780ofq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.tasks-prio-dot[b-hei3780ofq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

/* Wykonawca — awatar + nazwa. */
.tasks-assignee[b-hei3780ofq] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.tasks-assignee > span:last-child[b-hei3780ofq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tasks-due-over[b-hei3780ofq] {
    color: var(--danger);
    font-weight: 600;
}

.tasks-overdue-tag[b-hei3780ofq] {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 10px;
    font-weight: 600;
    color: var(--danger);
    background: var(--danger-bg);
    border-radius: 999px;
    padding: 1px 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.tasks-conv-link[b-hei3780ofq] {
    color: var(--p1);
    text-decoration: none;
}

.tasks-conv-link:hover[b-hei3780ofq] {
    text-decoration: underline;
}

.tasks-standalone[b-hei3780ofq] {
    color: var(--text-faint);
    font-size: 12px;
}

/* ── Mobile cards ── */
.tasks-mcard[b-hei3780ofq] {
    position: relative;
    cursor: pointer;
    padding-left: 1rem;
    overflow: hidden;
}

.tasks-mcard[b-hei3780ofq]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent, var(--line-strong));
}

/* Tytuł zadania — pełna szerokość, zawija się naturalnie (nie ściska statusu w prawy róg). */
.tasks-mcard-title[b-hei3780ofq] {
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Meta: status · priorytet · wykonawca · termin — chipy w jednym zawijanym rzędzie pod tytułem. */
.tasks-mcard-meta[b-hei3780ofq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.55rem;
    font-size: 12.5px;
    color: var(--text-soft);
}

/* Status jako pełnoprawny chip w rzędzie meta — nie zawija się w środku etykiety. */
.tasks-mcard-status[b-hei3780ofq] {
    flex: none;
    white-space: nowrap;
}

/* Belka stronicowania listy zadań. Zakres i liczba całkowita muszą być widoczne — bez nich
   użytkownik nie odróżnia „to wszystko" od „to pierwsza strona z dwudziestu". */
.tasks-strony[b-hei3780ofq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
    padding: 0.55rem 0.2rem;
    font-size: 12.5px;
    color: var(--text-soft);
}

.tasks-strony-btn[b-hei3780ofq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.tasks-strony-nr[b-hei3780ofq] {
    font-variant-numeric: tabular-nums;
    min-width: 4.5rem;
    text-align: center;
}

.tasks-strony-info[b-hei3780ofq] {
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Vault/VaultPage.razor.rz.scp.css */
/* Sejf firmowy — style ekranu.
   Motyw: dokument z redakcją. Wartość nigdy nie udaje kropek — jest zaczerniona paskiem tuszu,
   a odsłonięcie to zdarzenie (pasek się cofa, biegnie lont), nie przełącznik.
   ⚠ To jest CSS SCOPED — działa wyłącznie w tym komponencie. */

/* ─────────────── Nagłówek ─────────────── */
.vault-head[b-f9vxsmtd1u] { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.vault-sub[b-f9vxsmtd1u] { color: var(--text-soft); font-size: 12.5px; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.vault-actions[b-f9vxsmtd1u] { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.state-pill[b-f9vxsmtd1u] {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 3px 10px 3px 7px; border-radius: 999px;
    background: var(--ok-bg); color: var(--p1);
    font-size: 11.5px; font-weight: 500;
}
.state-pill svg[b-f9vxsmtd1u] { width: 13px; height: 13px; }

.vault-error[b-f9vxsmtd1u] {
    background: var(--danger-bg); color: var(--danger);
    border-radius: var(--radius); padding: 0.6rem 0.85rem;
    font-size: 12.5px; margin-bottom: 1rem;
}

/* ─────────────── Układ ─────────────── */
.vault-grid[b-f9vxsmtd1u] { display: grid; grid-template-columns: 214px 1fr; gap: 1.25rem; align-items: start; }

.rail[b-f9vxsmtd1u] {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: 0.5rem; position: sticky; top: 1rem;
}
.rail-label[b-f9vxsmtd1u] { padding: 0.4rem 0.6rem 0.5rem; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-soft); font-weight: 600; }
.fold[b-f9vxsmtd1u] {
    display: flex; align-items: center; gap: 0.5rem;
    width: 100%; text-align: left; border: none; background: none; cursor: pointer;
    padding: 0.42rem 0.55rem; margin-bottom: 1px;
    border-radius: 6px; font-size: 12.5px; font-family: inherit; color: var(--text-soft);
    transition: background 0.13s, color 0.13s;
}
.fold:hover[b-f9vxsmtd1u] { background: var(--cream-2); color: var(--text); }
.fold.active[b-f9vxsmtd1u] { background: var(--p4); color: #fff; font-weight: 500; }
.fold.root[b-f9vxsmtd1u] { font-weight: 500; color: var(--text); }
.fold .fname[b-f9vxsmtd1u] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold .fico[b-f9vxsmtd1u] { width: 14px; height: 14px; flex: none; opacity: 0.55; }
.fold.active .fico[b-f9vxsmtd1u] { opacity: 0.9; }

/* Prowadnica drzewa — jedna kreska na poziom. Bez niej dwa podfoldery obok siebie
   wygladaja jak rodzenstwo tego samego rodzica, choc nimi nie sa. */
.fold .tree-guide[b-f9vxsmtd1u] {
    width: 11px; flex: none; align-self: stretch;
    border-left: 1px solid var(--line-strong);
    margin-left: 3px;
}
.fold.active .tree-guide[b-f9vxsmtd1u] { border-left-color: rgba(255, 255, 255, 0.28); }
.fold .n[b-f9vxsmtd1u] { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; opacity: 0.55; }
.fold.active .n[b-f9vxsmtd1u] { opacity: 0.85; }
.rail-sep[b-f9vxsmtd1u] { height: 1px; background: var(--line); margin: 0.5rem 0.3rem; }
.rail-foot[b-f9vxsmtd1u] { padding: 0.35rem 0.6rem 0.2rem; }
.rail-foot button[b-f9vxsmtd1u] { border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--p1); font-weight: 500; padding: 0; }
.rail-foot button:hover[b-f9vxsmtd1u] { text-decoration: underline; }
.rail-foot button.danger[b-f9vxsmtd1u] { color: var(--danger); display: block; margin-top: 0.35rem; }

/* ─────────────── Pasek narzędzi ─────────────── */
.vtoolbar[b-f9vxsmtd1u] { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.85rem; flex-wrap: wrap; }
.vsearch input[b-f9vxsmtd1u] {
    height: 34px; width: 280px; padding: 0 0.7rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    font-family: inherit; font-size: 12.5px; background: var(--paper); color: var(--text);
}
.vsearch input:focus[b-f9vxsmtd1u] { outline: none; border-color: var(--p1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--global-palette1) 12%, transparent); }
.fchips[b-f9vxsmtd1u] { display: flex; gap: 0.3rem; }
.fchip[b-f9vxsmtd1u] {
    border: none; cursor: pointer; font-family: inherit;
    font-size: 12px; padding: 5px 11px; border-radius: 999px;
    background: var(--cream-2); color: var(--text-soft); font-weight: 500;
    transition: background 0.13s, color 0.13s;
}
.fchip:hover[b-f9vxsmtd1u] { background: var(--line); }
.fchip.active[b-f9vxsmtd1u] { background: var(--p4); color: #fff; }

/* ─────────────── Tabela ─────────────── */
.tbl-wrap[b-f9vxsmtd1u] { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.vtbl[b-f9vxsmtd1u] { width: 100%; border-collapse: collapse; }
.vtbl thead th[b-f9vxsmtd1u] {
    text-align: left; padding: 0.65rem 1rem;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--text-soft); font-weight: 600;
    border-bottom: 1px solid var(--line); background: var(--cream);
}
.vtbl tbody tr[b-f9vxsmtd1u] { border-bottom: 1px solid var(--line); cursor: pointer; transition: background 0.14s; }
.vtbl tbody tr:last-child[b-f9vxsmtd1u] { border-bottom: none; }
.vtbl tbody tr:hover[b-f9vxsmtd1u] { background: var(--cream); }
.vtbl td[b-f9vxsmtd1u] { padding: 0.7rem 1rem; vertical-align: middle; }

.vname[b-f9vxsmtd1u] { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 0.4rem; color: var(--text); }
.vname .locknote[b-f9vxsmtd1u] { color: var(--warn); font-size: 10px; }
.vdesc[b-f9vxsmtd1u] { font-size: 11.5px; color: var(--text-soft); margin-top: 1px; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ Pasek tuszu — sygnatura ekranu ══ */
.secret[b-f9vxsmtd1u] { display: flex; align-items: center; gap: 0.6rem; }
.kind[b-f9vxsmtd1u] {
    font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--text-soft); width: 5.2rem; flex: none;
}
.ink[b-f9vxsmtd1u] { position: relative; width: 134px; height: 19px; flex: none; display: flex; align-items: center; }
.ink .val[b-f9vxsmtd1u] {
    font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px;
    color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
    opacity: 0; transition: opacity 0.15s 0.1s;
}
/* Szerokość paska jest STAŁA — długość hasła też jest informacją. */
.ink .bar[b-f9vxsmtd1u] {
    position: absolute; inset: 0; background: var(--p3); border-radius: 2px;
    transform-origin: right center; transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.ink.open .bar[b-f9vxsmtd1u] { transform: scaleX(0); }
.ink.open .val[b-f9vxsmtd1u] { opacity: 1; }
.ink .fuse[b-f9vxsmtd1u] { position: absolute; left: 0; bottom: -4px; height: 2px; background: var(--p1); border-radius: 2px; width: 0; opacity: 0; }
.ink.open .fuse[b-f9vxsmtd1u] { width: 100%; opacity: 1; animation: vault-burn-b-f9vxsmtd1u 30s linear forwards; }
@keyframes vault-burn-b-f9vxsmtd1u { to { width: 0; } }

.secret-actions[b-f9vxsmtd1u] { display: flex; gap: 0.15rem; align-items: center; }
.mini-act[b-f9vxsmtd1u] {
    width: 28px; height: 28px; display: grid; place-items: center;
    border: none; background: none; cursor: pointer; font-size: 13px;
    border-radius: 6px; color: var(--text-faint); transition: background 0.13s, color 0.13s;
}
.mini-act:hover[b-f9vxsmtd1u] { background: var(--cream-2); color: var(--p1); }
.mini-act.on[b-f9vxsmtd1u] { color: var(--p1); background: var(--ok-bg); }

/* ⚠ `avatar-circle`, NIE `avatar` (20.09.2026, właściciel: „w sejfie to słabo wygląda").
   Znacznik nadawał klasę `avatar`, a takiej reguły NIE MA w całym projekcie — kształt, rozmiar,
   tło i wyśrodkowanie niesie `avatar-circle` z `app.css`. Kółka więc nie powstawały, zostawały
   same inicjały, a nasunięcie `-6px` z tej reguły kładło je JEDEN NA DRUGIM: na ekranie było
   „AIGPW" zamiast trzech twarzy. Selektor poniżej też musiał się zmienić, inaczej nasunięcie
   przestałoby działać razem z poprawką znacznika. */
.faces[b-f9vxsmtd1u] { display: flex; align-items: center; }
.faces .avatar-circle[b-f9vxsmtd1u] { margin-left: -6px; box-shadow: 0 0 0 2px var(--paper); }
.faces .avatar-circle:first-child[b-f9vxsmtd1u] { margin-left: 0; }
.faces .more[b-f9vxsmtd1u] {
    margin-left: -6px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--cream-2); color: var(--text-soft);
    display: grid; place-items: center; font-size: 9.5px; font-weight: 600;
    box-shadow: 0 0 0 2px var(--paper);
}

.td-when[b-f9vxsmtd1u] { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; color: var(--text-soft); }
.td-when small[b-f9vxsmtd1u] { display: block; color: var(--text-soft); font-size: 10.5px; font-family: inherit; }

.vault-empty[b-f9vxsmtd1u] { color: var(--text-soft); font-size: 13px; line-height: 1.7; }
.vault-empty strong[b-f9vxsmtd1u] { color: var(--text); }

/* ─────────────── Szuflada ─────────────── */
.drawer-backdrop[b-f9vxsmtd1u] { position: fixed; inset: 0; background: rgba(17, 19, 23, 0.5); z-index: 150; }
/* Szeroka szuflada — klucz prywatny albo procedura na 40 linii potrzebuje miejsca.
   Waska kolumna zamieniala je w niekonczace sie przewijanie. */
.drawer[b-f9vxsmtd1u] {
    position: fixed; right: 0; top: 0; height: 100vh; width: min(980px, 96vw);
    background: var(--paper); border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg); z-index: 200;
    display: flex; flex-direction: column;
    animation: vault-slide-b-f9vxsmtd1u 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes vault-slide-b-f9vxsmtd1u { from { transform: translateX(100%); } to { transform: none; } }
.drawer-head[b-f9vxsmtd1u] { padding: 1.1rem 1.25rem 0.9rem; border-bottom: 1px solid var(--line); }
.dh-top[b-f9vxsmtd1u] { display: flex; align-items: flex-start; gap: 0.75rem; }
.drawer-title[b-f9vxsmtd1u] { font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.01em; flex: 1; margin: 0; }
.drawer-close[b-f9vxsmtd1u] { width: 30px; height: 30px; border: none; background: none; cursor: pointer; font-size: 20px; line-height: 1; border-radius: 6px; color: var(--text-faint); flex: none; }
.drawer-close:hover[b-f9vxsmtd1u] { background: var(--cream-2); color: var(--text); }
.drawer-meta[b-f9vxsmtd1u] { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; }
.drawer-body[b-f9vxsmtd1u] { flex: 1; overflow-y: auto; padding: 1.1rem 1.5rem 2rem; }

.drawer-cols[b-f9vxsmtd1u] { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
/* ⚠ min-width:0 na kolumnach siatki — bez tego długa linia klucza rozpycha kolumnę i psuje układ. */
.dcol[b-f9vxsmtd1u] { min-width: 0; }
.dcol-side[b-f9vxsmtd1u] { border-left: 1px solid var(--line); padding-left: 1.5rem; }

.dsec[b-f9vxsmtd1u] { margin-bottom: 1.5rem; }
.dsec-title[b-f9vxsmtd1u] { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-soft); font-weight: 600; margin-bottom: 0.6rem; }
.dsec-actions[b-f9vxsmtd1u] { display: flex; gap: 0.4rem; margin-top: 0.8rem; }
.dsec-actions .danger[b-f9vxsmtd1u] { color: var(--danger); }

.big-secret[b-f9vxsmtd1u] { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem; }
.big-ink[b-f9vxsmtd1u] { position: relative; min-height: 42px; display: flex; align-items: center; }
.big-ink .bval[b-f9vxsmtd1u] {
    font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; line-height: 1.55;
    word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--text);
    opacity: 0; transition: opacity 0.15s 0.1s;
    /* Długa notatka nie może rozpychać szuflady w nieskończoność — dostaje własne przewijanie. */
    max-height: 52vh; overflow-y: auto; width: 100%;
}
.big-ink .bbar[b-f9vxsmtd1u] {
    position: absolute; inset: 0; background: var(--p3); border-radius: 4px;
    transform-origin: right center; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: grid; place-items: center;
}
.big-ink .bbar span[b-f9vxsmtd1u] { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; color: rgba(255, 255, 255, 0.42); letter-spacing: 0.1em; text-transform: uppercase; }
.big-ink.open .bbar[b-f9vxsmtd1u] { transform: scaleX(0); }
.big-ink.open .bval[b-f9vxsmtd1u] { opacity: 1; }
.big-actions[b-f9vxsmtd1u] { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.7rem; flex-wrap: wrap; }
.big-actions .sp[b-f9vxsmtd1u] { margin-left: auto; }
.logged-note[b-f9vxsmtd1u] { font-size: 11px; color: var(--text-soft); }

.dfields[b-f9vxsmtd1u] { display: grid; gap: 0.7rem; }
.dfield[b-f9vxsmtd1u] { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.6rem; align-items: baseline; font-size: 12.5px; }
.dfield .dl[b-f9vxsmtd1u] { color: var(--text-soft); font-size: 11.5px; }
.dfield .dv[b-f9vxsmtd1u] { color: var(--text); word-break: break-word; }
.dfield .dv.mono[b-f9vxsmtd1u] { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; }
.file-link[b-f9vxsmtd1u] { color: var(--p1); font-weight: 500; }

.acl-row[b-f9vxsmtd1u] { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.acl-row:last-of-type[b-f9vxsmtd1u] { border-bottom: none; }
.acl-who[b-f9vxsmtd1u] { flex: 1; min-width: 0; }
.acl-who .an[b-f9vxsmtd1u] { display: block; font-size: 12.5px; font-weight: 500; }
.acl-who .aw[b-f9vxsmtd1u] { display: block; font-size: 11px; color: var(--text-soft); margin-top: 1px; }
.acl-tag[b-f9vxsmtd1u] { font-size: 10.5px; padding: 1px 7px; border-radius: 4px; background: var(--cream-2); color: var(--text-soft); font-weight: 500; white-space: nowrap; }
.acl-tag.inherit[b-f9vxsmtd1u] { background: var(--info-bg); color: var(--info); }
.acl-tag.extra[b-f9vxsmtd1u] { background: var(--ok-bg); color: var(--p1); }
.acl-tag.denied[b-f9vxsmtd1u] { background: var(--danger-bg); color: var(--danger); }
.acl-add[b-f9vxsmtd1u] { display: flex; gap: 0.4rem; margin-top: 0.75rem; }
.acl-add select[b-f9vxsmtd1u] { flex: 1; }
.acl-hint[b-f9vxsmtd1u] { font-size: 11px; color: var(--text-soft); margin-top: 0.5rem; line-height: 1.5; }

.hist[b-f9vxsmtd1u] { display: grid; }
.hrow[b-f9vxsmtd1u] { display: flex; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.hrow:last-child[b-f9vxsmtd1u] { border-bottom: none; }
.hdot[b-f9vxsmtd1u] { width: 7px; height: 7px; border-radius: 50%; background: var(--line-faint); margin-top: 0.4rem; flex: none; }
.hdot.reveal[b-f9vxsmtd1u] { background: var(--warn); }
.hdot.edit[b-f9vxsmtd1u] { background: var(--info); }
.hdot.create[b-f9vxsmtd1u] { background: var(--p1); }
.hdot.denied[b-f9vxsmtd1u] { background: var(--danger); }
.hbody[b-f9vxsmtd1u] { flex: 1; min-width: 0; }
.hbody .hw[b-f9vxsmtd1u] { font-weight: 500; }
.hbody .hd[b-f9vxsmtd1u] { color: var(--text-soft); font-size: 11.5px; }
.htime[b-f9vxsmtd1u] { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; color: var(--text-soft); white-space: nowrap; }

/* ─────────────── Ekran blokady ───────────────
   ⚠ NIE `position: fixed` (30.08.2026). Zamek jest zwykłą kartą wewnątrz strony, więc boczne menu
   i górny pasek zostają na miejscu — z zamkniętego sejfu da się odejść klikiem, nie tylko strzałką
   „wstecz". Sejf jest zamknięty przy każdym wejściu, więc to jest widok domyślny tego ekranu. */
.lock-page-head[b-f9vxsmtd1u] { margin-bottom: 1.25rem; }
.lockscreen[b-f9vxsmtd1u] {
    background: var(--cream);
    background-image:
        radial-gradient(at 15% 10%, color-mix(in srgb, var(--global-palette1) 8%, transparent) 0, transparent 45%),
        radial-gradient(at 85% 90%, rgba(193, 209, 28, 0.07) 0, transparent 45%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    min-height: min(58vh, 520px);
    display: grid; place-items: center; padding: 2.5rem 1.5rem;
}
.lock-exit[b-f9vxsmtd1u] { margin-top: 1.1rem; font-size: 12px; display: flex; gap: 0.5rem; justify-content: center; align-items: center; }
.lock-exit a[b-f9vxsmtd1u] { color: var(--text-soft); }
.lock-exit a:hover[b-f9vxsmtd1u] { color: var(--p1); }
.lock-exit span[b-f9vxsmtd1u] { color: var(--text-faint); }
.lockbox[b-f9vxsmtd1u] { width: min(430px, 100%); text-align: center; }
.lock-mark[b-f9vxsmtd1u] {
    width: 54px; height: 54px; margin: 0 auto 1.25rem;
    border-radius: 14px; background: var(--grad-dark);
    display: grid; place-items: center;
    box-shadow: 0 8px 24px rgba(2, 44, 50, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.lock-mark svg[b-f9vxsmtd1u] { width: 24px; height: 24px; color: var(--p2); }
.lock-title[b-f9vxsmtd1u] { font-size: 2.1rem; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.lock-title em[b-f9vxsmtd1u] { font-style: italic; color: var(--p1); margin-left: 0.12em; }
.lock-sub[b-f9vxsmtd1u] { color: var(--text-soft); font-size: 13px; margin-top: 0.6rem; line-height: 1.6; }
.lock-form[b-f9vxsmtd1u] { margin-top: 1.5rem; display: grid; gap: 0.6rem; }
.lock-form input[b-f9vxsmtd1u] { height: 44px; text-align: center; font-size: 14px; }
.lock-form .btn[b-f9vxsmtd1u] { height: 44px; justify-content: center; }
.lock-error[b-f9vxsmtd1u] { margin-top: 0.9rem; font-size: 12.5px; color: var(--danger); }
.lock-foot[b-f9vxsmtd1u] { margin-top: 1.25rem; font-size: 11.5px; color: var(--text-soft); line-height: 1.6; }

/* ─────────────── Formularz wpisu ─────────────── */
.vault-modal[b-f9vxsmtd1u] { max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; }
.vault-form[b-f9vxsmtd1u] { display: grid; gap: 0.95rem; }
.field label[b-f9vxsmtd1u] { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-soft); font-weight: 600; margin-bottom: 0.35rem; }
.field textarea[b-f9vxsmtd1u] { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; line-height: 1.55; resize: vertical; }
.field .hint[b-f9vxsmtd1u] { font-size: 11px; color: var(--text-soft); margin-top: 0.3rem; }
.field .hint.danger[b-f9vxsmtd1u] { color: var(--danger); }

.seg[b-f9vxsmtd1u] { display: flex; gap: 0.25rem; background: var(--cream-2); padding: 3px; border-radius: var(--radius); }
.seg button[b-f9vxsmtd1u] { flex: 1; border: none; cursor: pointer; font-family: inherit; padding: 0.4rem 0.5rem; border-radius: 6px; font-size: 12px; background: none; color: var(--text-soft); font-weight: 500; }
.seg button.active[b-f9vxsmtd1u] { background: var(--paper); color: var(--text); box-shadow: var(--shadow-sm); }

.gen-row[b-f9vxsmtd1u] { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.45rem; flex-wrap: wrap; }
.gen-row .sp[b-f9vxsmtd1u] { margin-left: auto; }
.strength[b-f9vxsmtd1u] { display: flex; align-items: center; gap: 0.4rem; font-size: 11px; color: var(--text-soft); }
.sbar[b-f9vxsmtd1u] { width: 68px; height: 4px; border-radius: 999px; background: var(--cream-2); overflow: hidden; }
.sbar i[b-f9vxsmtd1u] { display: block; height: 100%; border-radius: 999px; transition: width 0.25s, background 0.25s; }
.inline-check[b-f9vxsmtd1u] { display: flex; align-items: center; gap: 0.35rem; font-size: 12px; color: var(--text-soft); text-transform: none; letter-spacing: 0; font-weight: 400; margin: 0; }
.inline-check input[b-f9vxsmtd1u] { width: auto; }

.vault-toast[b-f9vxsmtd1u] {
    position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
    background: var(--p3); color: #fff; padding: 0.6rem 1rem;
    border-radius: var(--radius); font-size: 12.5px; z-index: 900;
    box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
    .ink .bar[b-f9vxsmtd1u], .big-ink .bbar[b-f9vxsmtd1u], .drawer[b-f9vxsmtd1u] { transition: none; animation: none; }
    .ink.open .fuse[b-f9vxsmtd1u] { animation: none; width: 100%; }
}

/* Wąski ekran — szuflada wraca do jednej kolumny (kreska pionowa nie ma czego oddzielać). */
@media (max-width: 900px) {
    .drawer-cols[b-f9vxsmtd1u] { grid-template-columns: 1fr; gap: 0; }
    .dcol-side[b-f9vxsmtd1u] { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.25rem; }
    .big-ink .bval[b-f9vxsmtd1u] { max-height: 40vh; }
}

@media (max-width: 1150px) {
    .vault-grid[b-f9vxsmtd1u] { grid-template-columns: 1fr; }
    .rail[b-f9vxsmtd1u] { position: static; display: flex; gap: 0.3rem; overflow-x: auto; padding: 0.4rem; }
    .rail-label[b-f9vxsmtd1u], .rail-sep[b-f9vxsmtd1u], .rail-foot[b-f9vxsmtd1u] { display: none; }
    .fold[b-f9vxsmtd1u] { width: auto; white-space: nowrap; }
    /* W poziomej szynie drzewo nie ma sensu — prowadnice i tak nie pokazywalyby zagniezdzenia. */
    .fold .tree-guide[b-f9vxsmtd1u] { display: none; }
}
@media (max-width: 900px) {
    .vsearch[b-f9vxsmtd1u] { flex: 1; }
    .vsearch input[b-f9vxsmtd1u] { width: 100%; }
    .vtbl thead[b-f9vxsmtd1u] { display: none; }
    .vtbl tbody tr[b-f9vxsmtd1u] { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem; padding: 0.75rem 1rem; }
    .vtbl td[b-f9vxsmtd1u] { padding: 0; }
    .vtbl td:nth-child(4)[b-f9vxsmtd1u], .vtbl td:nth-child(5)[b-f9vxsmtd1u] { text-align: left; }
}
/* /Components/Pages/Wiedza/Artykul.razor.rz.scp.css */
.wiedza[b-s4xfipx8ch] { padding-block: 2rem 4rem; }
.wiedza-okruszki[b-s4xfipx8ch] { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .9rem; margin-bottom: 2rem; color: var(--global-palette6); overflow-wrap: anywhere; }
.wiedza-naglowek[b-s4xfipx8ch] { max-width: 75ch; margin-bottom: 2.5rem; }
.wiedza-naglowek h1[b-s4xfipx8ch] { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; color: var(--global-palette3); }
.wiedza-data[b-s4xfipx8ch], .wiedza-zrodlo[b-s4xfipx8ch] { color: var(--global-palette6); font-size: .9rem; }
.wiedza-wstep[b-s4xfipx8ch] { font-size: 1.2rem; line-height: 1.7; }
.wiedza-uklad[b-s4xfipx8ch] { display: grid; grid-template-columns: minmax(12rem, 17rem) minmax(0, 75ch); gap: 3rem; align-items: start; }
.wiedza-spis[b-s4xfipx8ch] { position: sticky; top: 6rem; border-left: 3px solid var(--global-palette1); padding-left: 1.25rem; }
.wiedza-spis h2[b-s4xfipx8ch] { font-size: 1.1rem; }
.wiedza-spis ol[b-s4xfipx8ch] { list-style: none; padding-left: 0; }
.wiedza-spis li[b-s4xfipx8ch] { margin-block: .65rem; }
.wiedza-tresc[b-s4xfipx8ch] { line-height: 1.8; overflow-wrap: anywhere; }
.wiedza-tresc section[b-s4xfipx8ch] { margin-bottom: 2.5rem; scroll-margin-top: 6rem; }
.wiedza-tresc h2[b-s4xfipx8ch] { font-size: clamp(1.35rem, 2vw, 1.65rem); line-height: 1.35; margin-bottom: 1rem; color: var(--global-palette3); }
.wiedza-tresc p[b-s4xfipx8ch] { margin-bottom: 1.1rem; }
.wiedza-tresc li[b-s4xfipx8ch] { margin-bottom: .6rem; }
.wiedza-zrodla[b-s4xfipx8ch] { padding-left: 1.25rem; }
.wiedza-dalej[b-s4xfipx8ch] { margin-top: 3rem; }
.wiedza a:focus-visible[b-s4xfipx8ch] { outline: 2px solid var(--global-palette1); outline-offset: 4px; }
@media (max-width: 768px) {
    .wiedza[b-s4xfipx8ch] { padding-block: 1.5rem 3rem; }
    .wiedza-uklad[b-s4xfipx8ch] { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .wiedza-spis[b-s4xfipx8ch] { position: static; }
    .wiedza-naglowek[b-s4xfipx8ch] { margin-bottom: 1.5rem; }
}
/* /Components/Pages/Wiedza/Index.razor.rz.scp.css */
.wiedza-indeks[b-jfihdmy5dz] { padding-block: 2rem 4rem; }
.wiedza-okruszki[b-jfihdmy5dz] { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; font-size: .9rem; color: var(--global-palette6); }
.wiedza-indeks header[b-jfihdmy5dz] { max-width: 75ch; margin-bottom: 2rem; line-height: 1.7; }
.wiedza-indeks h1[b-jfihdmy5dz] { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; color: var(--global-palette3); }
.wiedza-lista[b-jfihdmy5dz] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.wiedza-lista h3[b-jfihdmy5dz] { font-size: 1.4rem; line-height: 1.35; }
.wiedza-lista p[b-jfihdmy5dz] { line-height: 1.7; }
.wiedza-indeks a:focus-visible[b-jfihdmy5dz] { outline: 2px solid var(--global-palette1); outline-offset: 4px; }
@media (max-width: 768px) { .wiedza-lista[b-jfihdmy5dz] { grid-template-columns: minmax(0, 1fr); } }

.wiedza-kategorie[b-jfihdmy5dz] { display:flex; flex-wrap:wrap; gap:.75rem 1.4rem; margin:1.5rem 0 2.5rem; }
.wiedza-grupa[b-jfihdmy5dz] { scroll-margin-top:6rem; margin-bottom:3rem; }
.wiedza-grupa > h2[b-jfihdmy5dz] { font-size:1.8rem; color:var(--global-palette3); margin-bottom:1.25rem; }
/* /Components/Shared/DateRangeFilter.razor.rz.scp.css */
/* Zakres dat w pasku filtrów — ten sam język wizualny co .f-sort (editorial-utility). */
.date-range[b-wfc2lv4szq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.35rem 0.1rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    background: transparent;
    transition: all 0.12s;
}

.date-range:hover[b-wfc2lv4szq] { background: var(--cream-2); color: var(--text); }

/* Zakres ustawiony = widać to bez czytania dat (spójne z .f-chip.active). */
.date-range.has-value[b-wfc2lv4szq] { border-color: var(--p1); color: var(--text); }
.date-range.has-value .date-range-ico[b-wfc2lv4szq] { color: var(--p1); }

.date-range-ico[b-wfc2lv4szq] { flex: none; color: var(--text-faint); }

.date-range-label[b-wfc2lv4szq] {
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

.date-range-input[b-wfc2lv4szq] {
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    padding: 0.25rem 0.1rem;
    /* Bez tego pole daty rozpycha pasek do własnej szerokości natywnej. */
    min-width: 0;
    width: 8.4rem;
}

.date-range-input:focus[b-wfc2lv4szq] { outline: none; }

.date-range-sep[b-wfc2lv4szq] { color: var(--text-faint); font-size: 12.5px; }

.date-range-clear[b-wfc2lv4szq] {
    border: none;
    background: transparent;
    color: var(--danger);
    font-size: 15px;
    line-height: 1;
    padding: 0 0.2rem;
    cursor: pointer;
    font-family: inherit;
}

@media (max-width: 768px) {
    /* Na wąskim ekranie zakres bierze całą szerokość paska zamiast łamać się w pół daty. */
    .date-range[b-wfc2lv4szq] { width: 100%; }
    .date-range-input[b-wfc2lv4szq] { flex: 1 1 auto; width: auto; }
}
/* /Components/Shared/KanbanBoard.razor.rz.scp.css */
.kanban[b-ggpoluqmxj] {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

/* ── Grupy statusów (K5, tablica zgłoszeń w statusach firmy) ─────────────────────────────────────────
   Ten sam wzór co nagłówek grupy w lewej kolumnie i w Ustawienia → Statusy: pas 4 px w kolorze grupy po lewej
   i tło 12 % koloru (w ciemnym 22 %). Napis w kolorze motywu — kontrast nie zależy od koloru, który wybrała firma.
   Dużo statusów: tablica przewija się w poziomie WEWNĄTRZ siebie (overflow-x na .kanban), strona nie. */
.kanban-z-grupami[b-ggpoluqmxj] { gap: 0.85rem; scroll-snap-type: x proximity; }
.kanban-grupa[b-ggpoluqmxj] {
    --grupa-kolor: var(--line-strong);
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: min-content;
    scroll-snap-align: start;
}
.kanban-grupa-naglowek[b-ggpoluqmxj] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 30px;
    padding: 0.2rem 0.7rem 0.2rem 0.6rem;
    border: 0;
    border-radius: 8px;
    background: var(--cream-2);
    box-shadow: inset 4px 0 0 var(--grupa-kolor);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}
.kanban-grupa.z-kolorem-grupy .kanban-grupa-naglowek[b-ggpoluqmxj] {
    background: color-mix(in srgb, var(--grupa-kolor) 12%, var(--paper));
}
.kanban-grupa-naglowek:hover[b-ggpoluqmxj] { background: color-mix(in srgb, var(--grupa-kolor) 20%, var(--paper)); }
.kanban-grupa-naglowek:focus-visible[b-ggpoluqmxj] { outline: 2px solid var(--p1); outline-offset: 2px; }
.kanban-grupa-strzalka[b-ggpoluqmxj] {
    width: 14px; height: 14px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    color: var(--text-soft);
    transition: transform 0.15s;
}
.kanban-grupa.zwinieta .kanban-grupa-strzalka[b-ggpoluqmxj] { transform: rotate(-90deg); }
.kanban-grupa-nazwa[b-ggpoluqmxj] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: auto; }
.kanban-grupa-suma[b-ggpoluqmxj] { flex: none; font-size: 11.5px; color: var(--text-soft); }
.kanban-grupa-kolumny[b-ggpoluqmxj] { display: flex; gap: 0.85rem; align-items: flex-start; }
.kanban-z-grupami .kanban-col[b-ggpoluqmxj] { min-width: 236px; max-height: calc(100vh - 260px); }

/* Zwinięta grupa: wąski pasek z nazwami statusów i liczbami — grupa nie zabiera tablicy miejsca, a liczby zostają. */
.kanban-grupa.zwinieta[b-ggpoluqmxj] { flex: 0 0 172px; min-width: 172px; }
.kanban-grupa-pasek[b-ggpoluqmxj] {
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 12px);
}
.kanban-grupa-pasek-poz[b-ggpoluqmxj] {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.25rem 0.4rem;
    font-size: 12px;
}
.kanban-grupa-pasek-nazwa[b-ggpoluqmxj] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: auto; }
.kanban-grupa-pasek-liczba[b-ggpoluqmxj] { flex: none; font-size: 11.5px; color: var(--text-soft); }

/* Status schowany z wyboru: zgłoszenia w nim stoją, nowych tam nie przeniesiesz — kolumna przygaszona. */
.kanban-col.bez-upuszczania[b-ggpoluqmxj] { opacity: 0.82; }
.kanban.is-dragging .kanban-col.bez-upuszczania[b-ggpoluqmxj] { border-style: dashed; }

[data-theme="dark"] .kanban-grupa.z-kolorem-grupy .kanban-grupa-naglowek[b-ggpoluqmxj] { background: color-mix(in srgb, var(--grupa-kolor) 22%, var(--paper)); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .kanban-grupa.z-kolorem-grupy .kanban-grupa-naglowek[b-ggpoluqmxj] {
        background: color-mix(in srgb, var(--grupa-kolor) 22%, var(--paper));
    }
}
@media (prefers-reduced-motion: reduce) { .kanban-grupa-strzalka[b-ggpoluqmxj] { transition: none; } }

.kanban-col[b-ggpoluqmxj] {
    flex: 1 1 0;
    min-width: 250px;
    max-width: 380px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-top: 2px solid var(--col-accent, var(--line-strong));
    border-radius: var(--radius-lg, 12px);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

/* Trwa ciągnięcie — wszystkie kolumny sygnalizują, że są strefami zrzutu. */
.kanban.is-dragging .kanban-col[b-ggpoluqmxj] {
    border-color: var(--line-strong);
}

/* Kolumna pod kursorem — akcent statusu, delikatne uniesienie.
   ⚠ Znak `data-nad-karta` stawia PRZEGLĄDARKA (wwwroot/js/abc-kanban.js), nie Blazor (11.10.2026, pkt 17). Do tej pory
   była to klasa `drop-over` ustawiana z serwera przy każdym `dragover` — setki wiadomości na minutę z jednej karty.
   Atrybut, nie klasa: atrybut `class` rysuje Blazor i klasę dopisaną ze skryptu by starł. */
.kanban-col[data-nad-karta][b-ggpoluqmxj] {
    background: color-mix(in srgb, var(--col-accent, var(--p1)) 9%, var(--cream));
    border-color: var(--col-accent, var(--p1));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--col-accent, var(--p1)) 20%, transparent);
}

/* ── Kolumna ukryta filtrem (11.10.2026, pkt 16) ─────────────────────────────────────────────────────
   Status, którego filtr ekranu nie obejmuje: kart nie pokazujemy (nikt ich nie wczytał), zostaje miejsce
   upuszczenia. Węższa i bez tła — nie udaje kolumny z kartami i nie zabiera miejsca tym, które je mają;
   przerywana ramka mówi „tu się upuszcza” jeszcze przed podniesieniem karty. W miejscu licznika stoi napis,
   nie liczba: „0” twierdziłoby, że w tym statusie nic nie ma. */
.kanban .kanban-col.ukryta-filtrem[b-ggpoluqmxj] {
    flex: 0 1 190px;
    min-width: 168px;
    background: transparent;
    border-style: dashed;
    border-top-style: solid;
}
.kanban .kanban-col.ukryta-filtrem[data-nad-karta][b-ggpoluqmxj] {
    background: color-mix(in srgb, var(--col-accent, var(--p1)) 9%, var(--cream));
}
.kanban-col.ukryta-filtrem .kanban-col-head[b-ggpoluqmxj] { border-bottom-style: dashed; }
.kanban-col.ukryta-filtrem .kanban-col-body[b-ggpoluqmxj] { min-height: 0; }
.kanban-col-ukryte[b-ggpoluqmxj] {
    flex: none;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-soft);
    white-space: nowrap;
}

.kanban-col-head[b-ggpoluqmxj] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: inherit;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
    z-index: 1;
}

.kanban-col-dot[b-ggpoluqmxj] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--col-accent, var(--line-faint));
    flex: none;
}

/* min-width:0 + ellipsis: element flex domyślnie nie kurczy się poniżej treści, więc długa nazwa
   statusu wypychała licznik poza kolumnę. Licznik ma pierwszeństwo — jest teraz dłuższy („100 z 1 240"). */
.kanban-col-title[b-ggpoluqmxj] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
    margin-right: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-col-count[b-ggpoluqmxj] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-soft);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 0 8px;
    line-height: 18px;
    min-width: 24px;
    text-align: center;
    flex: none;
    white-space: nowrap;
}

/* Stopka kolumny: doładowanie następnej porcji + ile jeszcze zostało. */
.kanban-col-more[b-ggpoluqmxj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0 0.1rem;
    flex: 0 0 auto;
}

.kanban-more-btn[b-ggpoluqmxj] {
    width: 100%;
    min-height: 34px;
    padding: 0 0.7rem;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    background: var(--paper);
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.kanban-more-btn:hover:not(:disabled)[b-ggpoluqmxj] {
    background: var(--cream-2);
    color: var(--text);
    border-color: var(--col-accent, var(--line-strong));
}

.kanban-more-btn:disabled[b-ggpoluqmxj] {
    opacity: 0.55;
    cursor: default;
}

.kanban-more-rest[b-ggpoluqmxj] {
    font-size: 11px;
    color: var(--text-soft);
}

.kanban-col-body[b-ggpoluqmxj] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.6rem;
    overflow-y: auto;
    flex: 1;
    min-height: 80px;
}

.kanban-col-empty[b-ggpoluqmxj] {
    font-size: 11.5px;
    color: var(--text-soft);
    text-align: center;
    padding: 1.2rem 0.5rem;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.kanban-col[data-nad-karta] .kanban-col-empty[b-ggpoluqmxj] {
    border-color: var(--col-accent, var(--p1));
    color: var(--col-accent, var(--text-soft));
    background: color-mix(in srgb, var(--col-accent, var(--p1)) 6%, transparent);
}

/* Pole upuszczenia kolumny ukrytej filtrem: przerywaną ramkę ma już sama kolumna, druga w środku byłaby szumem.
   Napis mieści się w wąskiej kolumnie w dwóch liniach. Stoi PO regule `.kanban-col-empty` — ta sama waga selektora. */
.kanban-col.ukryta-filtrem .kanban-col-empty[b-ggpoluqmxj] {
    border: 0;
    padding: 0.5rem 0.35rem 0.85rem;
    line-height: 1.4;
    background: none;
}

/* Karta full-bleed — padding=0, aby szablon karty rysował grzbiet akcentu flush do krawędzi. */
.kanban-card[b-ggpoluqmxj] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
    cursor: grab;
    transition: box-shadow 0.14s, transform 0.14s, opacity 0.14s;
    /* NIE kurcz i NIE rozciągaj karty w gęstej kolumnie — każda zachowuje naturalną
       wysokość, a kolumna (overflow-y:auto) się przewija. min-height gwarantuje
       czytelny kafelek nawet gdy część pól jest pusta. flex-column + stretch dziecka
       (.bcard flex:1) sprawia, że grzbiet akcentu sięga do dolnej krawędzi karty. */
    flex: 0 0 auto;
    min-height: 120px;
    display: flex;
    flex-direction: column;
}

.kanban-card:hover[b-ggpoluqmxj] {
    box-shadow: 0 4px 14px rgba(17,19,23,0.10);
    transform: translateY(-1px);
    border-color: var(--line-strong);
}

.kanban-card:active[b-ggpoluqmxj] {
    cursor: grabbing;
}

.kanban-card.dragging[b-ggpoluqmxj] {
    opacity: 0.35;
    border-style: dashed;
    box-shadow: none;
    transform: none;
}

/* Przeniesienie karty na telefonie (09.09.2026, przegląd UX poz. 7) — powód przy znaczniku
   w KanbanBoard.razor. Pasek stoi POD treścią karty i jest oddzielony linią, żeby nie czytał się
   jak część zgłoszenia.
   ⚠ Widoczność załatwia GLOBALNA klasa `.mobile-only` z app.css — reguły zakresowej nie da się
   tu użyć, bo `.mobile-only` musi znaczyć to samo na wszystkich ekranach. */
.kanban-card-przenies[b-ggpoluqmxj] {
    border-top: 1px solid var(--line);
    padding: 0.4rem 0.5rem;
    background: var(--cream-2, #f8f3e8);
    flex: 0 0 auto;
}
.kanban-przenies-select[b-ggpoluqmxj] {
    width: 100%;
    min-height: 40px;          /* cel dotyku — palec, nie kursor */
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
}
/* /Components/Shared/KolumnaStatusow.razor.rz.scp.css */
/* Lewa kolumna listy — „ile czego jest w jakim statusie”, pozycje z liczbami w grupach.
   Wspólna dla ekranów z listą (KolumnaStatusow.razor): lista zgłoszeń, „W serwisie”, lista zadań.

   ⚠ Ten arkusz jest zakresowy dla SAMEGO komponentu, więc działa na każdym ekranie, który go użyje.
   Układ „kolumna + lista” to znaczniki EKRANU — jego reguły stoją w app.css (`.uklad-kolumny`), bo arkusz
   zakresowy ekranu nie sięgnie drugiego ekranu. Tam też dymek pasa (`.kol-dymek`): rysuje go skrypt
   (wwwroot/js/abc-kolumna.js) poza komponentem, więc arkusz zakresowy by go nie dosięgnął.

   Ma wyglądać jak RODZEŃSTWO tabeli obok, nie jak doklejony panel: ta sama karta (papier, linia,
   promień, cień), a nagłówki sekcji są tym samym paskiem co nagłówek kolumn tabeli (`.t-head`).
   Liczba idzie PIERWSZA i krojem maszynowym o stałej szerokości cyfr — to ona jest tu treścią,
   nazwa ją tylko podpisuje.

   KOLOR (03.10.2026, właściciel: „niech one mają swój kolor”). Liczba stoi na PŁYTCE w kolorze statusu —
   tej samej, co plakietka statusu w wierszu listy (PlakietkaStatusu): tło = dokładnie kolor z ustawień,
   napis czarny albo biały, zależnie od tego, który daje większy kontrast (KolorStatusu). Do 03.10 kolor
   był bladym odcieniem z kreską 3 px — na zrzucie właściciela kolumna wyglądała na bezbarwną. Napis NAZWY
   zostaje w kolorze tekstu: kolory wybiera firma i jako kolor napisu bywałyby nieczytelne.

   GĘSTOŚĆ (03.10.2026, właściciel: „za dużo miejsca tracimy na margin/padding”). Zmierzone przed zmianą przy
   1440×900: wiersz 31 px, nagłówek sekcji 34 px, nagłówek grupy 27 px — w oknie mieściło się 14 z 23 pozycji
   listy zgłoszeń. Teraz wiersz 26 px pod myszą; pod palcem (ekran dotykowy) cel ma co najmniej 34 px. */

.kol[b-wlo9hedede] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    min-width: 0;
    /* Kolumna zostaje w oknie przy przewijaniu długiej listy; górny pasek aplikacji jest przyklejony,
       więc odsuwamy się o jego wysokość. Przy długim słowniku tagów przewija się SAMA kolumna. */
    position: sticky;
    top: calc(var(--topbar-h) + 0.75rem);
    max-height: calc(100dvh - var(--topbar-h) - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Schowana przez człowieka — dotyczy szerokiego ekranu (niżej, w trybie panelu, rządzi `panel-otwarty`). */
.kol.schowana[b-wlo9hedede] { display: none; }

/* ── Nagłówek kolumny: nazwa + przycisk chowania („daj go bliżej statusów”) ─────────────────────────── */
.kol-glowka[b-wlo9hedede] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    min-height: 32px;
    padding: 0.15rem 0.25rem 0.15rem 0.7rem;
    border-bottom: 1px solid var(--line);
}
.kol-glowka-nazwa[b-wlo9hedede] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}
.kol-glowka-przycisk[b-wlo9hedede] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
}
.kol-glowka-przycisk:hover[b-wlo9hedede] { color: var(--text); background: var(--cream-2); }
.kol-glowka-przycisk:focus-visible[b-wlo9hedede] { outline: 2px solid var(--p1); outline-offset: -2px; }

.kol-ikona[b-wlo9hedede] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kol-sekcja + .kol-sekcja[b-wlo9hedede] { border-top: 1px solid var(--line); }

/* ── Nagłówek sekcji = nagłówek tabeli obok (te same barwy co `.t-head`), ale klikany: zwija sekcję ── */
.kol-tytul[b-wlo9hedede] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.3rem 0.7rem 0.3rem 0.7rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: var(--cream);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-soft);
    cursor: pointer;
}
.kol-tytul:hover[b-wlo9hedede] { color: var(--text); background: var(--cream-2); }
.kol-tytul:focus-visible[b-wlo9hedede] { outline: 2px solid var(--p1); outline-offset: -2px; }
.kol-sekcja.zwinieta .kol-tytul[b-wlo9hedede] { border-bottom: 0; }
.kol-tytul-strzalka[b-wlo9hedede] {
    flex: none;
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.12s;
}
.kol-sekcja.zwinieta .kol-tytul-strzalka[b-wlo9hedede] { transform: rotate(-90deg); }
.kol-tytul-nazwa[b-wlo9hedede] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* „wybrane: 2” — filtr z tej sekcji działa (sekcja zwinięta albo kilka pozycji naraz). Kolor akcentu = ten sam
   znak co wybrana pozycja. */
.kol-tytul-wybrane[b-wlo9hedede] {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0 0.4rem 0 0.3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--p1) 12%, var(--paper));
    color: var(--p1);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
}
.kol-tytul-wybrane svg[b-wlo9hedede] {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Napis dla czytnika ekranu, niewidoczny dla oka. */
.kol-ukryte[b-wlo9hedede] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.kol-lista[b-wlo9hedede] {
    list-style: none;
    margin: 0;
    padding: 0.15rem 0.25rem;
    display: flex;
    flex-direction: column;
}
.kol-lista.w-grupie[b-wlo9hedede] { padding-top: 0; }

.kol-poz[b-wlo9hedede] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    min-height: 26px;
    padding: 0.1rem 0.4rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
    /* Ctrl/Shift + klik nie ma zaznaczać napisu pozycji. */
    user-select: none;
    -webkit-user-select: none;
}
.kol-poz:hover[b-wlo9hedede] { background: var(--cream-2); }
.kol-poz:focus-visible[b-wlo9hedede] { outline: 2px solid var(--p1); outline-offset: -2px; }

/* Bieżący filtr: tło w akcencie i znacznik z lewej — ten sam język co zaznaczony wiersz listy
   (`.t-row.selected`: tło + 3 px akcentu przy krawędzi). */
.kol-poz.wybrana[b-wlo9hedede] {
    background: color-mix(in srgb, var(--p1) 10%, var(--paper));
    box-shadow: inset 3px 0 0 var(--p1);
    font-weight: 600;
}
.kol-poz.wybrana:hover[b-wlo9hedede] { background: color-mix(in srgb, var(--p1) 15%, var(--paper)); }

/* Płytka z liczbą. Stała najmniejsza szerokość — liczby stoją w jednej kolumnie i nazwy
   zaczynają się od tej samej pionowej linii niezależnie od liczby cyfr. */
.kol-liczba[b-wlo9hedede] {
    flex: none;
    min-width: 2.6em;
    padding: 0 0.3rem;
    border: 1px solid transparent;
    border-radius: 5px;
    background: var(--cream-2);
    color: var(--text);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
/* Kolor statusu: płytka jak plakietka statusu w wierszu (PlakietkaStatusu) — tło dokładnie w kolorze z ustawień. */
.kol-liczba.z-kolorem[b-wlo9hedede] {
    background: var(--kol-kolor);
    border-color: color-mix(in srgb, var(--kol-kolor) 78%, var(--global-palette3));
}
.kol-liczba.napis-ciemny[b-wlo9hedede] { color: var(--napis-na-kolorze); }
.kol-liczba.napis-jasny[b-wlo9hedede] { color: var(--text-light); }
/* Kolor, który nie jest #rrggbb (zmienna motywu) — napisu nie da się dobrać, więc sam odcień i kreska. */
.kol-liczba.z-odcieniem[b-wlo9hedede] {
    background: color-mix(in srgb, var(--kol-kolor) 18%, var(--paper));
    box-shadow: inset 3px 0 0 var(--kol-kolor);
}
/* Ciemny motyw: ta sama płytka, obrys rozjaśniony — ciemny kolor statusu nie zlewa się z ciemnym tłem (jak w plakietce).
   Przodek w selektorze nie dostaje znacznika zakresu — Blazor dokleja go tylko do ostatniego członu. */
[data-theme="dark"] .kol-liczba.z-kolorem[b-wlo9hedede] {
    border-color: color-mix(in srgb, var(--kol-kolor) 70%, var(--text-light));
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .kol-liczba.z-kolorem[b-wlo9hedede] {
        border-color: color-mix(in srgb, var(--kol-kolor) 70%, var(--text-light));
    }
}

.kol-nazwa[b-wlo9hedede] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Zero w tym widoku: pozycja ZOSTAJE (znikający tag wyglądałby jak skasowany), tylko cichnie. Kolor statusu
   zostaje jako kreska przy płytce — pozycję dalej da się rozpoznać po kolorze, także w pasie. */
.kol-poz.zero[b-wlo9hedede] { color: var(--text-faint); }
.kol-poz.zero .kol-liczba[b-wlo9hedede] {
    background: transparent;
    border-color: var(--line);
    color: var(--text-faint);
    font-weight: 500;
}
.kol-poz.zero .kol-liczba.z-kolorem[b-wlo9hedede],
.kol-poz.zero .kol-liczba.z-odcieniem[b-wlo9hedede] {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--kol-kolor) 75%, transparent);
}

/* Nagłówek grupy: [nazwa (suma)] … [wszystkie] [strzałka].
   Trzy osobne cele kliknięcia: nazwa z sumą (dwuklik = lista z całej grupy, jedno kliknięcie = zwiń/rozwiń),
   „wszystkie” (to samo co dwuklik — dla dotyku) i strzałka (zwiń/rozwiń od razu). */
.kol-grupa[b-wlo9hedede] {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    min-width: 0;
    padding: 0.15rem 0.3rem 0 0.25rem;
}
.kol-grupa.zwinieta[b-wlo9hedede] { padding-bottom: 0.15rem; }

.kol-grupa-naglowek[b-wlo9hedede] {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.14rem 0.45rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-soft);
    text-align: left;
    cursor: pointer;
    /* Dwuklik nie ma zaznaczać tekstu nagłówka. */
    user-select: none;
    -webkit-user-select: none;
}
.kol-grupa-naglowek:hover[b-wlo9hedede] { color: var(--text); background: var(--cream-2); }
.kol-grupa-naglowek:focus-visible[b-wlo9hedede] { outline: 2px solid var(--p1); outline-offset: -2px; }
/* Cała grupa jest bieżącym filtrem listy — ten sam znak co wybrana pozycja. */
.kol-grupa.wybrana .kol-grupa-naglowek[b-wlo9hedede] {
    color: var(--text);
    background: color-mix(in srgb, var(--p1) 10%, var(--paper));
    box-shadow: inset 3px 0 0 var(--p1);
}
.kol-grupa-nazwa[b-wlo9hedede] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kol-grupa-suma[b-wlo9hedede] { flex: none; font-size: 10.5px; font-weight: 500; color: var(--text-faint); }

/* Kolor GRUPY statusów (03.10.2026, wzmocniony wieczorem: „dalej nie widzę kolorów grup statusów” — sama kropka 8 px
   była niewidoczna). Nagłówek grupy to teraz PASMO na całą szerokość kolumny: pas 4 px w kolorze grupy z lewej i delikatne
   tło (12% koloru na tle kolumny; w ciemnym motywie 22%) — tak samo jak nagłówek grupy w Ustawienia → Statusy. Pozycje grupy
   mają przy lewej krawędzi cienką kreskę w tym kolorze, więc po przewinięciu widać, do której grupy należą.
   Napis zostaje w kolorach MOTYWU (`--text`, suma `--text-soft`), nie w kolorze firmy: tło jest tylko lekkim odcieniem,
   więc kontrast napisu ≥ 4,5 nie zależy od wybranego koloru (sprawdza to scenariusz abcare-uklad-list-0310, krok kolory). */
.kol-blok[b-wlo9hedede] { --grupa-kolor: transparent; }   /* zapas; znacznik bloku nadpisuje, gdy grupa ma kolor */
.kol-grupa-znak[b-wlo9hedede] {
    flex: none;
    align-self: center;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--grupa-kolor);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent);
}
.kol-grupa.z-kolorem-grupy[b-wlo9hedede] {
    padding-left: 0.5rem;
    padding-bottom: 0.15rem;
    background: color-mix(in srgb, var(--grupa-kolor) 12%, var(--paper));
    box-shadow: inset 4px 0 0 var(--grupa-kolor);
    border-bottom: 1px solid color-mix(in srgb, var(--grupa-kolor) 28%, transparent);
}
.kol-grupa.z-kolorem-grupy .kol-grupa-naglowek[b-wlo9hedede] { color: var(--text); }
.kol-grupa.z-kolorem-grupy .kol-grupa-suma[b-wlo9hedede] { color: var(--text-soft); }
.kol-grupa.z-kolorem-grupy .kol-grupa-naglowek:hover[b-wlo9hedede],
.kol-grupa.z-kolorem-grupy .kol-grupa-wszystkie:hover[b-wlo9hedede],
.kol-grupa.z-kolorem-grupy .kol-grupa-strzalka:hover[b-wlo9hedede] {
    background: color-mix(in srgb, var(--grupa-kolor) 22%, var(--paper));
}
.kol-blok.z-kolorem-grupy > .kol-lista[b-wlo9hedede] {
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--grupa-kolor) 60%, transparent);
}
/* Ciemny motyw: tło kolumny jest ciemne, więc ten sam kolor potrzebuje mocniejszego odcienia, żeby pasmo było widać. */
[data-theme="dark"] .kol-grupa.z-kolorem-grupy[b-wlo9hedede] { background: color-mix(in srgb, var(--grupa-kolor) 22%, var(--paper)); }
[data-theme="dark"] .kol-grupa.z-kolorem-grupy .kol-grupa-naglowek:hover[b-wlo9hedede],
[data-theme="dark"] .kol-grupa.z-kolorem-grupy .kol-grupa-wszystkie:hover[b-wlo9hedede],
[data-theme="dark"] .kol-grupa.z-kolorem-grupy .kol-grupa-strzalka:hover[b-wlo9hedede] { background: color-mix(in srgb, var(--grupa-kolor) 32%, var(--paper)); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .kol-grupa.z-kolorem-grupy[b-wlo9hedede] { background: color-mix(in srgb, var(--grupa-kolor) 22%, var(--paper)); }
}

.kol-grupa-wszystkie[b-wlo9hedede],
.kol-grupa-strzalka[b-wlo9hedede] {
    flex: none;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: inherit;
    color: var(--text-faint);
    cursor: pointer;
}
.kol-grupa-wszystkie:hover[b-wlo9hedede],
.kol-grupa-strzalka:hover[b-wlo9hedede] { color: var(--text); background: var(--cream-2); }
.kol-grupa-wszystkie:focus-visible[b-wlo9hedede],
.kol-grupa-strzalka:focus-visible[b-wlo9hedede] { outline: 2px solid var(--p1); outline-offset: -2px; }

.kol-grupa-wszystkie[b-wlo9hedede] {
    padding: 0.14rem 0.35rem;
    font-size: 10.5px;
    line-height: 1.4;
    /* Na komputerze pojawia się pod kursorem albo gdy grupa jest wybrana („zdejmij”) — dwuklik robi to samo,
       więc stały napis przy każdej grupie byłby szumem. Miejsce zajmuje zawsze, żeby nagłówek nie skakał. */
    visibility: hidden;
}
.kol-grupa:hover .kol-grupa-wszystkie[b-wlo9hedede],
.kol-grupa:focus-within .kol-grupa-wszystkie[b-wlo9hedede],
.kol-grupa.wybrana .kol-grupa-wszystkie[b-wlo9hedede] { visibility: visible; }

.kol-grupa-strzalka[b-wlo9hedede] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
}
.kol-grupa-strzalka svg[b-wlo9hedede] { transition: transform 0.12s; }
.kol-grupa.zwinieta .kol-grupa-strzalka svg[b-wlo9hedede] { transform: rotate(-90deg); }

/* Pod kreską (K3): pozycje sekcji, które nie liczą się do sum grup — np. status „kończy serwis” (towar wrócił).
   Kreska przerywana mówi „to już poza bieżącą pracą”, ale pozycja dalej jest przyciskiem z liczbą. */
.kol-pod-kreska[b-wlo9hedede] {
    margin: 0.25rem 0.5rem 0;
    border-top: 1px dashed var(--line-strong);
}
.kol-pod-kreska .kol-lista[b-wlo9hedede] { padding-left: 0; padding-right: 0; }
.kol-pod-kreska-podpis[b-wlo9hedede] {
    padding: 0.25rem 0.4rem 0;
    font-size: 10.5px;
    color: var(--text-faint);
}

/* ── Uchwyt schowanej kolumny ──────────────────────────────────────────────────────────────────────────
   Wąski pionowy pasek w miejscu kolumny: przycisk „pokaż” zostaje przy statusach (właściciel: „daj go bliżej
   statusów”), a lista dostaje prawie całą szerokość. Napis czyta się od dołu do góry, jak grzbiet segregatora. */
.kol-uchwyt[b-wlo9hedede] {
    position: sticky;
    top: calc(var(--topbar-h) + 0.75rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    padding: 0.45rem 0 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-soft);
    cursor: pointer;
}
.kol-uchwyt:hover[b-wlo9hedede] { color: var(--text); border-color: var(--line-strong); background: var(--cream); }
.kol-uchwyt:focus-visible[b-wlo9hedede] { outline: 2px solid var(--p1); outline-offset: 2px; }
.kol-uchwyt-napis[b-wlo9hedede] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Ekran dotykowy nie ma ani kursora, ani dwukliku — tam „wszystkie” widać zawsze, a cele są wysokie na palec
   (co najmniej 34 px). Stoi PO regułach podstawowych: przy tej samej wadze selektora wygrywa późniejsza. */
@media (hover: none) {
    .kol-grupa-wszystkie[b-wlo9hedede] { visibility: visible; min-height: 34px; padding: 0.4rem 0.55rem; }
    .kol-grupa-strzalka[b-wlo9hedede] { min-width: 34px; min-height: 34px; padding: 0.5rem; }
    .kol-poz[b-wlo9hedede] { min-height: 36px; }
    .kol-tytul[b-wlo9hedede] { min-height: 34px; }
    .kol-grupa-naglowek[b-wlo9hedede] { min-height: 34px; align-items: center; }
    .kol-glowka-przycisk[b-wlo9hedede] { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .kol-poz[b-wlo9hedede], .kol-grupa-strzalka svg[b-wlo9hedede], .kol-tytul-strzalka[b-wlo9hedede] { transition: none; }
}

/* ── PAS — „chowamy do samych kolorów i liczb” (szeroki ekran) ─────────────────────────────────────────
   Ten sam znacznik co pełna kolumna, inny wygląd: zostają płytki z liczbami w kolorach statusów, nazwy znikają
   z oczu (zostają dla czytnika ekranu i w dymku — abc-kolumna.js), nagłówki sekcji stają się cienkimi
   przegródkami, a grupy — odstępem. Jeden znacznik = liczby w pasie nie mogą rozjechać się z pełną kolumną.
   Wzór: menu zwinięte do pasa ikon (MainLayout, NavMenu). Poniżej 1201 px pasa nie ma — tam kolumna jest
   panelem nad listą i rysuje się w pełni. */
@media (min-width: 1201px) {
    .kol.pas .kol-glowka[b-wlo9hedede] {
        flex-direction: column;
        justify-content: center;
        gap: 0.1rem;
        padding: 0.25rem 0;
    }

    /* Napisy niewidoczne dla oka, obecne dla czytnika ekranu (nazwa przycisku). */
    .kol.pas .kol-nazwa[b-wlo9hedede],
    .kol.pas .kol-grupa-nazwa[b-wlo9hedede],
    .kol.pas .kol-tytul-nazwa[b-wlo9hedede],
    .kol.pas .kol-tytul-wybrane[b-wlo9hedede],
    .kol.pas .kol-pod-kreska-podpis[b-wlo9hedede] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .kol.pas .kol-lista[b-wlo9hedede] { padding: 0.15rem 0.2rem; }
    .kol.pas .kol-poz[b-wlo9hedede] {
        position: relative;
        justify-content: center;
        gap: 0;
        padding: 0.1rem 0.2rem 0.1rem 0.3rem;
    }
    .kol.pas .kol-liczba[b-wlo9hedede] {
        width: 100%;
        min-width: 0;
        padding: 0 0.15rem;
    }

    /* Sekcja: cienka przegródka ze strzałką (zwija i rozwija, jak w pełnej kolumnie); nazwa w dymku. */
    .kol.pas .kol-tytul[b-wlo9hedede] {
        position: relative;
        justify-content: center;
        min-height: 0;
        padding: 0.2rem 0;
        border-bottom: 0;
        background: transparent;
        color: var(--text-faint);
    }
    .kol.pas .kol-sekcja.zwinieta.ma-wybrane .kol-tytul[b-wlo9hedede] { color: var(--p1); }

    /* Grupy: rozwinięta — sam odstęp z kreską; zwinięta — obrysowana płytka z sumą (klik ją rozwija). */
    .kol.pas .kol-grupa[b-wlo9hedede] { display: none; }
    .kol.pas .kol-grupa.zwinieta[b-wlo9hedede] {
        display: flex;
        padding: 0.1rem 0.2rem 0.1rem 0.3rem;
    }
    .kol.pas .kol-grupa.zwinieta .kol-grupa-naglowek[b-wlo9hedede] {
        position: relative;
        justify-content: center;
        align-items: center;
        min-height: 20px;
        padding: 0;
        border: 1px dashed var(--line-strong);
        border-radius: 5px;
    }
    /* Zwinięta grupa z kolorem: obrys płytki z sumą w kolorze grupy (ciągły zamiast przerywanego) i pas z lewej —
       napis sumy zostaje w kolorze motywu, tło przezroczyste, więc kontrast liczby się nie zmienia. */
    .kol.pas .kol-grupa.zwinieta.z-kolorem-grupy .kol-grupa-naglowek[b-wlo9hedede] {
        border: 1.5px solid var(--grupa-kolor);
        box-shadow: inset 3px 0 0 var(--grupa-kolor);
    }
    .kol.pas .kol-grupa-znak[b-wlo9hedede] { display: none; }
    /* Rozwinięta grupa z kolorem: kreska nad nią w kolorze grupy — w pasie widać, gdzie zaczyna się grupa. */
    .kol.pas .kol-blok + .kol-blok.z-kolorem-grupy[b-wlo9hedede]::before { height: 2px; background: var(--grupa-kolor); }
    .kol.pas .kol-grupa-wszystkie[b-wlo9hedede],
    .kol.pas .kol-grupa-strzalka[b-wlo9hedede] { display: none; }
    .kol.pas .kol-blok + .kol-blok[b-wlo9hedede]::before {
        content: '';
        display: block;
        height: 1px;
        margin: 0.15rem 0.55rem;
        background: var(--line);
    }
    .kol.pas .kol-blok.kol-pod-kreska[b-wlo9hedede]::before { content: none; }
    .kol.pas .kol-pod-kreska[b-wlo9hedede] { margin: 0.2rem 0.45rem 0; }
}

/* ── UKŁAD JAK W POCZCIE (03.10.2026 wieczór) — szeroki ekran ────────────────────────────────────────────────
   Kolumna nie jest już kartą w obszarze treści, tylko PASEM przy lewej krawędzi: bez obramowania, promienia i cienia,
   bez odstępu od menu i od góry. Tło i kreskę z prawej daje siatka układu (app.css, `.uklad-kolumny`), bo pas ma sięgać dołu
   strony także przy krótkiej kolumnie. Kolumna przykleja się tuż pod paskiem górnym i przewija się sama (`max-height`
   = reszta okna). Wzór: `.mbox-rail` w Poczcie. Poniżej 1201 px kolumna jest panelem-kartą (blok niżej). */
@media (min-width: 1201px) {
    .kol[b-wlo9hedede] {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        top: var(--topbar-h);
        max-height: var(--kol-okno, calc(100dvh - var(--topbar-h)));   /* --kol-okno liczy abc-kolumna.js */
        scrollbar-width: thin;
    }
    .kol-uchwyt[b-wlo9hedede] {
        top: var(--topbar-h);
        height: var(--kol-okno, calc(100dvh - var(--topbar-h)));
        padding-top: 0.7rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .kol-uchwyt:hover[b-wlo9hedede] { background: var(--cream); }

    /* W pasie nagłówek grupy to tylko kreska nad grupą albo obrysowana płytka zwiniętej — pasmo tu niczego nie wnosi. */
    .kol.pas .kol-grupa.z-kolorem-grupy[b-wlo9hedede] {
        background: transparent;
        box-shadow: none;
        border-bottom: 0;
        padding-left: 0.3rem;
    }
}

/* ── Wąski ekran: kolumna staje się PANELEM nad listą, otwieranym przyciskiem z nagłówka ekranu.
   Próg 1200 px — ten sam, przy którym tabele list chowają swoje kolumny: niżej nie ma już miejsca
   na listę i kolumnę obok siebie.
   Sekcje stają obok siebie i same się łamią (na telefonie jedna pod drugą); sekcja z grupami jest
   szersza i rozkłada grupy na szpalty, żeby panel nie był jedną wysoką wstęgą z pustą resztą szerokości.
   Nic nie ma sztywnej szerokości większej niż okno telefonu — strona nie dostaje poziomego przewijaka. */
@media (max-width: 1200px) {
    .kol[b-wlo9hedede],
    .kol.schowana[b-wlo9hedede] { display: none; }

    .kol.panel-otwarty[b-wlo9hedede] {
        display: flex;
        flex-wrap: wrap;
        position: static;
        max-height: none;
        overflow: hidden;
        margin-bottom: 1rem;
    }
    /* Nagłówka kolumny i uchwytu tu nie ma — panel otwiera i zamyka przycisk nad listą. */
    .kol-glowka[b-wlo9hedede],
    .kol-uchwyt[b-wlo9hedede] { display: none; }
    .kol-sekcja + .kol-sekcja[b-wlo9hedede] { border-top: 0; }
    .kol-sekcja[b-wlo9hedede] { flex: 1 1 240px; min-width: 0; border-bottom: 1px solid var(--line); }
    .kol-sekcja.z-grupami[b-wlo9hedede] { flex: 3 1 420px; }
    /* Pozycje zbiorcze („Wszystkie”…) nie mają nagłówka: idą na całą szerokość jako jeden rząd. */
    .kol-zbiorcze[b-wlo9hedede] { flex: 1 1 100%; }
    .kol-zbiorcze .kol-lista[b-wlo9hedede] { flex-direction: row; flex-wrap: wrap; }
    .kol-zbiorcze .kol-lista li[b-wlo9hedede] { flex: 0 1 220px; min-width: 0; }
    /* Szpalty: grupa (nagłówek + jej pozycje) nie łamie się między szpaltami; lista bez grup łamie się
       między pozycjami. */
    .kol-tresc[b-wlo9hedede] { columns: 200px; column-gap: 0; }
    .kol-blok[b-wlo9hedede] { break-inside: avoid; }
    .kol-blok.plaski[b-wlo9hedede] { break-inside: auto; }
    .kol-blok.plaski li[b-wlo9hedede] { break-inside: avoid; }
}
/* /Components/Shared/Pager.razor.rz.scp.css */
.pager[b-mhwh0keb2i] {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--line);
    background: var(--cream-2);
}

.pager-btn[b-mhwh0keb2i] {
    min-width: 32px;
    height: 32px;
    padding: 0 0.55rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--text-soft);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.12s;
}

.pager-btn:hover:not(:disabled)[b-mhwh0keb2i] {
    background: var(--cream);
    color: var(--text);
    border-color: var(--line-strong);
}

.pager-btn.active[b-mhwh0keb2i] {
    background: var(--p1);
    color: #fff;
    border-color: var(--p1);
}

.pager-btn:disabled[b-mhwh0keb2i] {
    opacity: 0.35;
    cursor: not-allowed;
}

.pager-ellipsis[b-mhwh0keb2i] {
    color: var(--text-faint);
    padding: 0 0.4rem;
    font-size: 12.5px;
}

.pager-meta[b-mhwh0keb2i] {
    margin-left: auto;
    color: var(--text-soft);
    font-size: 12.5px;
}

/* Na dotyku strzalki i numery stron maja 40 px. Zmierzone przyrzadem Q (21.09.2026):
   32x40 — wysokosc juz z reguly ogolnej, szerokosc nie. To wlasnie w te strone chybia palec,
   bo numery stoja w rzedzie tuz obok siebie. */
@media (pointer: coarse) {
    .pager-btn[b-mhwh0keb2i] { min-width: 40px; min-height: 40px; }
}
/* /Components/Shared/PlakietkaStatusu.razor.rz.scp.css */
/* Plakietka statusu — płytka w kolorze statusu z listy firmy (zmienna --ps-kolor wpisana w znacznik:
   jedyny kolor spoza palety na ekranie). Kształt „płytki”, nie pigułki: tagi i znaczniki w aplikacji są
   okrągłymi pigułkami, a status jest polem, które się ZMIENIA — ma czytać się jak przełącznik, nie jak etykietka.
   Klasa .chip zostaje na elemencie (patrz komentarz w .razor) — dlatego każda reguła stoi na .chip.plakietka-statusu. */

.chip.plakietka-statusu[b-ynj8jeugvf] {
    /* Wartość zapasowa — prawdziwą wpisuje znacznik (style="--ps-kolor:#…", KolorStatusu.Styl), a styl
       wpisany w element wygrywa z arkuszem. Bez niej plakietka bez koloru straciłaby tło całkiem. */
    --ps-kolor: var(--line-strong);
    --ps-wnek: color-mix(in srgb, currentColor 16%, transparent);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    min-width: 0;
    background: var(--ps-kolor);
    border: 1px solid color-mix(in srgb, var(--ps-kolor) 78%, var(--global-palette3));
    border-radius: 7px;
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    box-sizing: border-box;
}

/* Napis: ten z dwóch, który na tym kolorze ma większy kontrast (KolorStatusu.KlasaNapisu). */
.chip.plakietka-statusu.napis-ciemny[b-ynj8jeugvf] { color: var(--napis-na-kolorze); }
.chip.plakietka-statusu.napis-jasny[b-ynj8jeugvf]  { color: var(--text-light); }

/* ── Rozmiary ─────────────────────────────────────────────────────────────────────────────────────
   „duza” — nagłówek zgłoszenia: wyraźnie wyższa od zwykłych plakietek (24 px) i równa przyciskom obok. */
.chip.plakietka-statusu.ps-duza[b-ynj8jeugvf]    { height: 30px; padding: 0 0.7rem; font-size: 13px; }
.chip.plakietka-statusu.ps-srednia[b-ynj8jeugvf] { height: 26px; padding: 0 0.6rem; font-size: 12.5px; }
.chip.plakietka-statusu.ps-mala[b-ynj8jeugvf]    { height: 20px; padding: 0 0.45rem; font-size: 11.5px; gap: 0.3rem; border-radius: 5px; }

.ps-kropka[b-ynj8jeugvf] {
    width: 7px; height: 7px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}
.ps-ikona[b-ynj8jeugvf] {
    width: 14px; height: 14px;
    flex: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    opacity: 0.85;
}
.ps-mala .ps-ikona[b-ynj8jeugvf] { width: 12px; height: 12px; }

.ps-nazwa[b-ynj8jeugvf] { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* „12 dni” — osobna wnęka: liczba dni to druga informacja, czytana osobno od nazwy etapu. */
.ps-dopisek[b-ynj8jeugvf] {
    flex: none;
    margin-right: -0.25rem;
    padding: 0.18rem 0.42rem;
    border-radius: 5px;
    background: var(--ps-wnek);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ps-mala .ps-dopisek[b-ynj8jeugvf] { padding: 0.08rem 0.3rem; margin-right: -0.15rem; }

/* Strzałka za kreską — mówi „to się rozwija”, osobno od nazwy. */
.ps-strzalka[b-ynj8jeugvf] {
    width: 14px; height: 14px;
    flex: none;
    margin-left: 0.05rem;
    padding-left: 0.4rem;
    border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    box-sizing: content-box;
    fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    opacity: 0.8;
}
.ps-ze-strzalka.ps-duza[b-ynj8jeugvf] { padding-right: 0.55rem; }

/* Kolor GRUPY (03.10.2026): pionowy pasek tuż przed płytką, z odstępem — osobny od koloru statusu, żeby
   dwa kolory nie zlewały się w jeden. Kolor przychodzi zmienną --grupa-kolor (KolorStatusu.StylGrupy);
   plakietka statusu z grupy bez koloru wygląda jak dotąd. */
.chip.plakietka-statusu[b-ynj8jeugvf] { --grupa-kolor: transparent; }   /* zapas; znacznik nadpisuje, gdy grupa ma kolor */
.chip.plakietka-statusu.ps-z-grupa[b-ynj8jeugvf] {
    position: relative;
    margin-left: 7px;
}
.chip.plakietka-statusu.ps-z-grupa[b-ynj8jeugvf]::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 1px;
    bottom: 1px;
    width: 4px;
    border-radius: 2px;
    background: var(--grupa-kolor);
}

/* Ciemny motyw: ta sama płytka (kolor statusu się nie zmienia), tylko obrys rozjaśniony, żeby ciemny kolor
   statusu nie zlewał się z ciemnym tłem strony. */
[data-theme="dark"] .chip.plakietka-statusu[b-ynj8jeugvf] {
    border-color: color-mix(in srgb, var(--ps-kolor) 70%, var(--text-light));
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .chip.plakietka-statusu[b-ynj8jeugvf] {
        border-color: color-mix(in srgb, var(--ps-kolor) 70%, var(--text-light));
    }
}
/* /Components/Shared/PrzejdzDoFirmy.razor.rz.scp.css */
/* Formularz jest tylko nośnikiem przycisku — nie ma własnego odstępu ani wyglądu.
   Reguła stoi tutaj (zakresowo), bo dotyczy znacznika, który rysuje TEN komponent; wygląd
   przycisku należy do rodzica, który go podaje. */
.przejdz-do-firmy[b-3pf15geseo] { margin: 0; }
/* /Components/Shared/TagChips.razor.rz.scp.css */
/* ── Rząd chipów z tagami (TagChips) ──────────────────────────────────────────
   Zakresowy CSS, bo wszystkie te znaczniki rysuje SAM ten komponent — dlatego
   reguły docierają do lista zadań / karty na tablicy / karty na telefonie tak samo.
   (Wspólna klasa pisana w .razor.css RODZICA do dziecka by nie doszła.)         */

.tag-chips[b-zrmxythrkx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    min-width: 0;

    /* Sufit szerokości rzędu. Bez niego kolumna „Zadanie” w tabeli liczy sobie
       szerokość z całego rzędu chipów w JEDNEJ linii i wypycha pozostałe kolumny
       (układ tabeli jest automatyczny). Z sufitem chipy się zawijają, a kolumna
       nie rośnie ponad ~22rem. Węższe pudełka (karta na tablicy, telefon) i tak
       dostają mniej miejsca — tam sufit nic nie zmienia. */
    max-width: 22rem;
}

/* Kolor i kształt chipa są globalne (.tag w app.css) — tu tylko to, co pilnuje
   szerokości: jedna długa nazwa tagu nie może rozciągnąć wiersza. */
.tag-chips .tag[b-zrmxythrkx] {
    max-width: 11rem;
    min-width: 0;
}

.tag-chips-label[b-zrmxythrkx] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Licznik zwiniętej reszty. Celowo NIE wygląda jak tag — to nie jest tag,
   tylko informacja, że tagów jest więcej (pełna lista w podpowiedzi). */
.tag-chips-more[b-zrmxythrkx] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-soft);
    white-space: nowrap;
    cursor: default;
}
/* /Components/Shared/TaskBoardCard.razor.rz.scp.css */
/* ── Karta zadania na tablicy Kanban (scoped, wspólna dla BoardPage + Zadań) ── */
.bcard[b-l43gvl73cq] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
    padding: 0.55rem 0.7rem 0.6rem 0.85rem;
}

/* Grzbiet akcentu — priorytet — flush do lewej krawędzi karty. */
.bcard[b-l43gvl73cq]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent, var(--line-strong));
}

.bcard-grow[b-l43gvl73cq] {
    flex: 1 1 auto;
}

.bcard-subject[b-l43gvl73cq] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bcard-due[b-l43gvl73cq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    font-size: 11px;
    color: var(--text-soft);
}

.bcard-due-ico[b-l43gvl73cq] {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bcard-due.overdue[b-l43gvl73cq] {
    color: var(--danger);
    font-weight: 600;
}

/* Rząd tagów rysuje wspólny komponent TagChips (styl w TagChips.razor.css) —
   ten sam co na liście zadań, żeby chip na tablicy i chip w tabeli wyglądały tak samo. */

.bcard-foot[b-l43gvl73cq] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* auto = dosuń stopkę do dołu, by zadanie z małą liczbą pól wypełniało kartę
       (min-height 120px) czysto, bez pustej przestrzeni na dole. */
    margin-top: auto;
    padding-top: 0.6rem;
}

.bcard-unassigned[b-l43gvl73cq] {
    font-size: 11px;
    color: var(--text-soft);
    font-style: italic;
}

/* Odnośnik do powiązanego zgłoszenia — klikany <span> wewnątrz karty-linku. */
.bcard-conv[b-l43gvl73cq] {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 11px;
    color: var(--p1);
    text-decoration: none;
    cursor: pointer;
}

.bcard-conv:hover[b-l43gvl73cq] {
    text-decoration: underline;
}
/* /Components/Shared/TaskTimeBilling.razor.rz.scp.css */
/* Sekcja „Doliczony czas" na karcie zadania + modal doliczania. Scoped CSS. */

.ttb-list[b-vm86m1h4um] {
    list-style: none;
    margin: 0 0 0.4rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ttb-list li[b-vm86m1h4um] {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 11.5px;
    min-width: 0;
}

.ttb-time[b-vm86m1h4um] { font-weight: 600; white-space: nowrap; }
.ttb-client[b-vm86m1h4um] { color: var(--text-soft); white-space: nowrap; }

.ttb-what[b-vm86m1h4um] {
    color: var(--text-faint);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ttb-total[b-vm86m1h4um] {
    font-size: 11.5px;
    color: var(--text-soft);
    margin: 0;
    padding-top: 0.35rem;
    border-top: 1px solid var(--line);
}

.ttb-picked[b-vm86m1h4um] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 13px;
}

.ttb-results[b-vm86m1h4um] {
    display: flex;
    flex-direction: column;
    margin-top: 0.35rem;
    max-height: 11rem;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.ttb-result[b-vm86m1h4um] {
    text-align: left;
    padding: 0.4rem 0.6rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    cursor: pointer;
}

.ttb-result:last-child[b-vm86m1h4um] { border-bottom: none; }
.ttb-result:hover[b-vm86m1h4um] { background: var(--cream); }

/* ── Czas w dwóch polach (20.09.2026) ────────────────────────────────────────────────────────
   Te same wymiary i to samo zachowanie, co w rejestrze czasu (`.pc-time-pair` w PanelWpisuCzasu):
   doliczanie czasu z zadania ma wyglądać i działać tak samo, jak wpisywanie go w rejestrze —
   inaczej człowiek uczy się dwóch sposobów na tę samą rzecz. Liczby do prawej i w tabelarycznych
   cyfrach, żeby kolumna godzin się nie kołysała przy wpisywaniu. */
.ttb-time-pair[b-vm86m1h4um] { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; }
.ttb-unit[b-vm86m1h4um] { display: inline-flex; align-items: baseline; gap: 0.25rem; flex: 1; min-width: 0; }
.ttb-unit input[b-vm86m1h4um] { text-align: right; font-variant-numeric: tabular-nums; }
.ttb-unit-label[b-vm86m1h4um] { font-size: 11.5px; color: var(--text-soft); flex: none; }
/* /Components/Shared/TicketBoardCard.razor.rz.scp.css */
/* ── Karta zgłoszenia na tablicy Kanban (scoped, wspólna dla BoardPage + Skrzynki) ── */
.bcard[b-mlqiu8imxu] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
    padding: 0.55rem 0.7rem 0.6rem 0.85rem;
}

/* Grzbiet akcentu — pilność SLA — flush do lewej krawędzi karty. */
.bcard[b-mlqiu8imxu]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent, var(--line-strong));
}

/* ── Nieprzeczytane ──
   Ta sama kropka co w widoku tabeli (.unread-dot w Inbox.razor.css) — jeden nawyk wzrokowy
   w obu widokach. Do tego delikatne podbarwienie całej karty: na tablicy temat jest pogrubiony
   ZAWSZE, więc pogrubienie samo w sobie niczego nie odróżnia. */
.unread-dot[b-mlqiu8imxu] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--p1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--global-palette1) 18%, transparent);
    flex: none;
}

/* Karta nieprzeczytana musi być rozpoznawalna z drugiego końca ekranu, bez czytania.
   Pierwsza wersja (delikatny gradient) ginęła na tle — stąd pełne tło, wyraźniejsza ramka
   i mocniejszy temat. Przeczytane trzymamy w tonie stonowanym, żeby różnica działała
   w OBIE strony: nie tylko „ta jest podświetlona", ale i „tamte są wyciszone". */
.bcard.unread[b-mlqiu8imxu] {
    /* ⚠ Było #eaf5ee — jasnozielony wpisany hexem, więc motyw ciemny nie miał czym go podmienić.
       Zmierzone na /board w motywie ciemnym: temat zgłoszenia rgb(232,229,219) na tym tle to
       1,13 : 1, klient rgb(168,172,179) — 2,04 : 1. Karta nieprzeczytana, czyli dokładnie ta,
       którą trzeba przeczytać najpilniej, była nieczytelna. `--ok-bg` to ten sam ton w motywie
       jasnym (#e3f4eb) i ma swój odpowiednik w ciemnym. */
    background: var(--ok-bg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--global-palette1) 28%, transparent);
}

.bcard.unread .bcard-subject[b-mlqiu8imxu] {
    font-weight: 700;
    color: var(--text);
}

.bcard.unread .bcard-cust[b-mlqiu8imxu],
.bcard.unread .bcard-preview[b-mlqiu8imxu] {
    color: var(--text-soft);
}

.bcard:not(.unread) .bcard-subject[b-mlqiu8imxu] {
    font-weight: 500;
    color: var(--text-soft);
}

.bcard-top[b-mlqiu8imxu] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.bcard-grow[b-mlqiu8imxu] {
    flex: 1 1 auto;
}

.bcard-num[b-mlqiu8imxu] {
    font-size: 11px;
    color: var(--text-soft);
    font-weight: 600;
}

.bcard-sla[b-mlqiu8imxu] {
    font-size: 10px;
    padding: 1px 7px;
}

.bcard-subject[b-mlqiu8imxu] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Nazwa klienta — JEDNA linia.
   ⚠ Do 03.09.2026 jedyna linia tekstu na karcie bez ograniczenia. Temat ma dwie linie, zajawka
   jedną, a nazwa rosła bez granicy: na stanowisku dwie karty w kolumnie ZAMKNIĘTE były trzy razy
   wyższe od reszty. Nie trzeba do tego śmieciowych danych — „Przedsiębiorstwo Wielobranżowe …
   Spółka z ograniczoną odpowiedzialnością Sp.k." wystarczy. Kolumna z kartą wysoką na pół ekranu
   przestaje nadawać się do przeglądania, a tablica służy wyłącznie do przeglądania. */
.bcard-cust[b-mlqiu8imxu] {
    font-size: 11.5px;
    color: var(--text-soft);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Podgląd ostatniej wiadomości — jedna linia, dyskretny szary. */
.bcard-preview[b-mlqiu8imxu] {
    font-size: 11px;
    color: var(--text-soft);
    line-height: 1.35;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rząd tagów konwersacji — te same chipy .tag co w liście Skrzynki. */
.bcard-tags[b-mlqiu8imxu] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 0.5rem;
}

.bcard-tags-more[b-mlqiu8imxu] {
    font-size: 11px;
    color: var(--text-soft);
    align-self: center;
}

.bcard-foot[b-mlqiu8imxu] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* auto = dosuń stopkę do dołu, gdy karta jest wyższa niż jej treść (rzadkie pola). */
    margin-top: auto;
    padding-top: 0.6rem;
}

/* Licznik wiadomości — dyskretny, wyrównany do prawej krawędzi stopki. */
.bcard-msgs[b-mlqiu8imxu] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 11px;
    color: var(--text-soft);
}

.bcard-msgs-ico[b-mlqiu8imxu] {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bcard-agent[b-mlqiu8imxu] {
    font-size: 11.5px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcard-unassigned[b-mlqiu8imxu] {
    font-size: 11px;
    color: var(--text-soft);
    font-style: italic;
}
/* /Components/Shared/ViewToggle.razor.rz.scp.css */
/* Ikonkowy segmented control (Tabela / Tablica). Jedno źródło stylu — zastępuje
   zduplikowane .seg w Inbox.razor.css i TasksPage.razor.css. */
.view-toggle[b-g4jlwhoipj] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    flex: 0 0 auto;
}

.vt-btn[b-g4jlwhoipj] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 30px;
    padding: 0 0.8rem;
    border: none;
    background: none;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-soft);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.14s, background 0.14s, box-shadow 0.14s;
    font-family: inherit;
}

.vt-btn:hover[b-g4jlwhoipj] {
    color: var(--text);
}

.vt-btn.vt-on[b-g4jlwhoipj] {
    background: var(--paper);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
}

.vt-ico[b-g4jlwhoipj] {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
    color: var(--text-faint);
}

.vt-btn:hover .vt-ico[b-g4jlwhoipj] {
    color: var(--text-soft);
}

/* Aktywny segment — akcent marki na ikonie (spójne z .ms-dropdown.has-selection). */
.vt-btn.vt-on .vt-ico[b-g4jlwhoipj] {
    color: var(--p1);
}

/* Bardzo wąskie ekrany — sam ikonki, bez etykiet (przełącznik zostaje kompaktowy). */
@media (max-width: 560px) {
    .vt-label[b-g4jlwhoipj] {
        display: none;
    }

    .vt-btn[b-g4jlwhoipj] {
        padding: 0 0.6rem;
    }
}

/* 32x30 to ponizej progu dotyku — przelacznik widoku stoi w pasku akcji na kazdej liscie. */
@media (pointer: coarse) {
    .vt-btn[b-g4jlwhoipj] { min-width: 38px; min-height: 38px; }
}

/* Na dotyku 38x38 to o dwa piksele za malo, a przelacznik stoi w rzedzie z innymi
   przyciskami paska. Zmierzone przyrzadem Q (21.09.2026). */
@media (pointer: coarse) {
    .vt-btn[b-g4jlwhoipj] { min-width: 40px; min-height: 40px; }
}
/* /Components/Shared/WyborFunkcji.razor.rz.scp.css */
/* Pytanie Tak/Nie o funkcję firmy. Dwie duże odpowiedzi obok siebie — wybiera się całą kartę,
   nie malutkie kółko. Kolory wyłącznie ze zmiennych palety (app.css), także w trybie ciemnym. */

.wybor-funkcji-pole[b-cmw5n8jom7] {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.wybor-funkcji-pytanie[b-cmw5n8jom7] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.35rem;
    padding: 0;
}

.wybor-funkcji-wyjasnienie[b-cmw5n8jom7] {
    color: var(--text-soft);
    font-size: 0.9rem;
    margin: 0 0 1rem;
    max-width: 62ch;
}

.wybor-funkcji-opcje[b-cmw5n8jom7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.wybor-funkcji-opcja[b-cmw5n8jom7] {
    position: relative;
    display: block;
    cursor: pointer;
    min-width: 0;
}

/* Samo pole wyboru zostaje w dokumencie (klawiatura, czytnik ekranu), ale nie jest widoczne —
   stan pokazuje karta obok. */
.wybor-funkcji-opcja input[b-cmw5n8jom7] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.wybor-funkcji-karta[b-cmw5n8jom7] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    height: 100%;
    padding: 1rem 1.1rem 1rem 2.6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper);
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Kółko odpowiedzi rysowane obok tytułu — pełne, gdy wybrane. */
.wybor-funkcji-karta[b-cmw5n8jom7]::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 1.15rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--line-faint);
    background: var(--paper);
}

.wybor-funkcji-opcja:hover .wybor-funkcji-karta[b-cmw5n8jom7] {
    border-color: var(--p1);
}

.wybor-funkcji-opcja input:checked + .wybor-funkcji-karta[b-cmw5n8jom7] {
    border-color: var(--p1);
    box-shadow: inset 0 0 0 1px var(--p1);
    background: var(--ok-bg);
}

.wybor-funkcji-opcja input:checked + .wybor-funkcji-karta[b-cmw5n8jom7]::before {
    border-color: var(--p1);
    background: var(--p1);
    box-shadow: inset 0 0 0 3px var(--paper);
}

.wybor-funkcji-opcja input:focus-visible + .wybor-funkcji-karta[b-cmw5n8jom7] {
    outline: 2px solid var(--p1);
    outline-offset: 2px;
}

.wybor-funkcji-pole:disabled .wybor-funkcji-opcja[b-cmw5n8jom7] {
    cursor: not-allowed;
    opacity: 0.75;
}

.wybor-funkcji-tytul[b-cmw5n8jom7] {
    font-weight: 600;
    color: var(--text);
}

.wybor-funkcji-opis[b-cmw5n8jom7] {
    font-size: 0.875rem;
    color: var(--text-soft);
    line-height: 1.45;
}

.wybor-funkcji-akcje[b-cmw5n8jom7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

@media (max-width: 768px) {
    .wybor-funkcji-opcje[b-cmw5n8jom7] {
        grid-template-columns: minmax(0, 1fr);
    }

    .wybor-funkcji-akcje[b-cmw5n8jom7] {
        justify-content: stretch;
    }

    .wybor-funkcji-akcje .btn[b-cmw5n8jom7] {
        flex: 1 1 auto;
        justify-content: center;
    }
}
/* /Components/Shared/WyborStatusu.razor.rz.scp.css */
/* Lista wyboru statusu. Wygląd panelu i pozycji idzie z menu aplikacji (.snooze-list / .snooze-item /
   .snooze-section w app.css) — tu tylko to, czego tamte nie mają: próbka koloru, znacznik wybranego,
   rozwijane pory odłożenia i dyskretne „+ Serwis”. */

.ws[b-053qjlxcir] { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
.ws > summary[b-053qjlxcir] { list-style: none; cursor: pointer; display: inline-flex; min-width: 0; max-width: 100%; border-radius: 8px; }
.ws > summary[b-053qjlxcir]::-webkit-details-marker { display: none; }
.ws > summary:hover[b-053qjlxcir]  .plakietka-statusu,
.ws[open] > summary[b-053qjlxcir]  .plakietka-statusu { filter: brightness(0.94) saturate(1.05); }
.ws > summary:focus-visible[b-053qjlxcir] { outline: 2px solid var(--info); outline-offset: 2px; }

/* „+ Serwis” — przycisk-zaproszenie, nie stan: przerywana ramka jak „+ tag”, ta sama wysokość co plakietka obok. */
.ws-pusty[b-053qjlxcir] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 30px;
    padding: 0 0.7rem;
    border: 1px dashed var(--line-strong);
    border-radius: 7px;
    color: var(--text-soft);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    box-sizing: border-box;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.ws-srednia .ws-pusty[b-053qjlxcir] { height: 26px; padding: 0 0.6rem; font-size: 12px; }
.ws-mala .ws-pusty[b-053qjlxcir] { height: 20px; padding: 0 0.45rem; font-size: 11px; border-radius: 5px; }
.ws > summary:hover .ws-pusty[b-053qjlxcir],
.ws[open] > summary .ws-pusty[b-053qjlxcir] { border-style: solid; color: var(--text); background: var(--cream-2); }

/* ── Panel ─────────────────────────────────────────────────────────────────────────────────────── */
.ws-panel[b-053qjlxcir] {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 50;
    min-width: 250px;
    max-width: min(340px, calc(100vw - 1.5rem));
    padding: 0.35rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    color: var(--text);
}

.ws-naglowek[b-053qjlxcir] {
    padding: 0.35rem 0.7rem 0.4rem;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.2rem;
}

/* Nagłówek grupy — ten sam wygląd co sekcje innych menu; tu bez kreski nad pierwszą grupą pod nagłówkiem. */
.ws-grupa[b-053qjlxcir] { margin-top: 0.15rem; }
.ws-naglowek + .ws-grupa[b-053qjlxcir] { border-top: none; margin-top: 0; }

.ws-pozycja[b-053qjlxcir] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 32px;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.ws-pozycja:hover[b-053qjlxcir] { background: var(--cream-2); }
.ws-pozycja[disabled][b-053qjlxcir] { opacity: 0.5; cursor: not-allowed; }
.ws-pozycja:focus-visible[b-053qjlxcir], .ws-pora:focus-visible[b-053qjlxcir], .ws-zdejmij:focus-visible[b-053qjlxcir] { outline: 2px solid var(--info); outline-offset: -2px; }

/* Wybrany: pogrubiony, na tle zaznaczenia i ze znacznikiem — trzy sygnały, żaden nie opiera się na samym kolorze. */
.ws-wybrany[b-053qjlxcir] { font-weight: 600; background: var(--cream-2); }

.ws-probka[b-053qjlxcir] {
    --ps-kolor: var(--line-strong);   /* zapasowa — prawdziwą wpisuje znacznik (KolorStatusu.Styl) */
    width: 12px; height: 12px;
    flex: none;
    border-radius: 3px;
    background: var(--ps-kolor);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ps-kolor) 70%, var(--global-palette3));
}
.ws-nazwa[b-053qjlxcir] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-uwaga[b-053qjlxcir] { flex: none; font-size: 11px; font-weight: 400; color: var(--text-soft); }
.ws-znacznik[b-053qjlxcir] {
    width: 15px; height: 15px; flex: none;
    fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.ws-rozwin-ikona[b-053qjlxcir] {
    width: 14px; height: 14px; flex: none;
    fill: none; stroke: var(--text-soft); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.15s;
}
.ws-rozwin-ikona.otwarte[b-053qjlxcir] { transform: rotate(90deg); }

/* Pory odłożenia — wcięte pod statusem, który je rozwinął, z kreską po lewej: widać, do czego należą. */
.ws-pory[b-053qjlxcir] {
    margin: 0.1rem 0 0.25rem 1.45rem;
    padding-left: 0.4rem;
    border-left: 2px solid var(--line);
}
.ws-pora[b-053qjlxcir] { font-size: 12.5px; }

.ws-kreska[b-053qjlxcir] { height: 1px; margin: 0.3rem 0.2rem; background: var(--line); }
.ws-zdejmij[b-053qjlxcir] { color: var(--text-soft); font-size: 12.5px; }
.ws-zdejmij:hover[b-053qjlxcir] { color: var(--text); }

/* Telefon i ekran dotykowy — cel palca 40 px, jak reszta menu aplikacji. */
@media (pointer: coarse) {
    .ws-pozycja[b-053qjlxcir], .ws-pora[b-053qjlxcir], .ws-zdejmij[b-053qjlxcir] { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-rozwin-ikona[b-053qjlxcir] { transition: none; }
}