/* /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;
}
.sidebar[b-2kqggoasz4]::-webkit-scrollbar {
    width: 8px;
}
.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;
}

.nav-section[b-9lrca5jz97]  .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.75rem;
    margin: 1px 0;
    height: 2.2rem;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.18s;
}
.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;
}

/* Licznik nieprzeczytanej poczty przy pozycji "Poczta".
   Tresc dopisuje przegladarka (abc-realtime.js) po zdarzeniu o nowej poczcie - menu jest rysowane
   statycznie, wiec bez tego licznik ruszalby dopiero po odswiezeniu strony. */
/* 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);
}

/* ⚠ 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; }
    /* 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/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;
}
.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; }
.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-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 „⋮". */
.pliki-modal[b-ayj7cev44r] {
    width: min(720px, 100%);
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
/* Panel jest jedyną treścią okna, więc to ON się przewija — okno ma stałą ramę.
   Bez `min-height: 0` element nie zejdzie poniżej wysokości własnej treści i zamiast paska
   przewijania wróciłoby rozpychanie okna poza ekran. */
.pliki-modal[b-ayj7cev44r]  .abc-pliki-panel {
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* 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; }

/* ── 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).
   ══════════════════════════════════════════════════════════════════════ */

.email-page[b-htpzkw8q8z] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;

    /* Wysokość wizytówki — potrzebna szufladzie skrzynek na telefonie (patrz koniec pliku).
       Trzymamy ją w zmiennej, żeby dwa miejsca nie rozjechały się przy pierwszej zmianie
       odstępu: pasek jest jedyną rzeczą, która przesuwa nagłówek listy w dół. */
    --wizytowka-h: 36px;
}

/* ── Wizytówka ekranu ──────────────────────────────────────────────────────────────────────
   Jedyne miejsce widoczne w KAŻDYM stanie poczty i na KAŻDEJ szerokości — dlatego stoi tu
   jedyny `h1` tego ekranu. Uzasadnienie miejsca: komentarz nad znacznikiem w Email.razor. */
/* „?" stoi TUŻ przy nazwie, nie na drugim końcu paska. Przy `space-between` odjeżdżał o całą
   szerokość okna od nagłówka, którego dotyczy — czytał się wtedy jak pomoc do paska górnego,
   a nie do poczty. Tak samo jak na /vault czy /reports/sla, gdzie stoi wewnątrz `h1`. */
.email-nameplate[b-htpzkw8q8z] {
    flex: none;
    height: var(--wizytowka-h);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.email-nameplate h1[b-htpzkw8q8z] {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.2rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
    min-width: 0;
}

/* Stan przejściowy i stan „nie ma czego pokazać" — wypełniają resztę wysokości pod wizytówką. */
.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;
}

.none-card[b-htpzkw8q8z] {
    max-width: 520px;
    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" z wizytówki, 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%; }
}

.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 już własnego nagłówka („Skrzynki" + „?") — obie te rzeczy przeniosły się do
   wizytówki ekranu, bo tamta jest widoczna także przy zwiniętej szynie. Odstęp od góry, który
   dawał tamten wiersz, bierze na siebie pierwsza grupa. */
.mbox-group[b-htpzkw8q8z] { padding: 0.5rem 0.6rem; }
.mbox-group-foot[b-htpzkw8q8z] { margin-top: auto; }
.mbox-group-label[b-htpzkw8q8z] {
    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] {
    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] { 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; }

.mbox-dot[b-htpzkw8q8z] { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mbox-dot.ring[b-htpzkw8q8z] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-faint); }
.mbox-item .lbl[b-htpzkw8q8z] { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbox-item .cnt[b-htpzkw8q8z] { font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--text-soft); }
.mbox-item .cnt.hot[b-htpzkw8q8z] { 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); }

/* ── 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.drag-over[b-htpzkw8q8z] { background: var(--ok-bg); box-shadow: inset 0 0 0 1.5px var(--p1); }
.fold-item.drag-over .lbl[b-htpzkw8q8z] { color: var(--text); font-weight: 600; }
.fold-item.drag-over .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;
    gap: 0.6rem;
    min-height: 24px;

    /* ⚠ NA TELEFONIE OSTATNI PRZYCISK BYŁ NIEOSIĄGALNY (26.08.2026). Rząd jest elastyczny,
       ale nie miał ani zawijania, ani przewijania — przy 390 px „Odczytaj wszystkie" wychodził
       145 px poza kontener i nie dało się do niego dotrzeć ŻADNYM gestem. Nie chodziło więc
       o wygląd, tylko o funkcję, której na telefonie po prostu nie ma.
       Poziome przewijanie, a nie zawijanie: te elementy to jeden ciąg filtrów i akcji,
       a zawinięcie ich do drugiej linii spycha listę wątków niżej na każdym ekranie.
       Znalezione przeglądem ekranów, nie okiem. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.tl-head-bottom[b-htpzkw8q8z]::-webkit-scrollbar { display: none; }
/* Elastyczne dzieci domyślnie kurczą się do zera i tekst łamie się na literach — tu mają
   zachować swoją szerokość i wyjechać poza ekran, bo od tego jest przewijanie wyżej. */
.tl-head-bottom > *[b-htpzkw8q8z] { flex-shrink: 0; }
.tl-title[b-htpzkw8q8z] { font-weight: 600; font-size: 14px; }
.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); }
/* 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 */
.bulk-bar[b-htpzkw8q8z] { flex: 1; display: flex; align-items: center; gap: 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); } }

/* ── 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; }
.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;
    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; }
.tagfilter-cnt[b-htpzkw8q8z] {
    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;
}
.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.over[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.

           ⚠ Wizytówka ekranu (01.09.2026) przesunęła ten wiersz o SWOJĄ wysokość w dół —
             gdyby próg został na 100 px, szuflada wróciłaby nad przełącznik i dotknięcie
             miejsca, w którym widać jej zamknięcie, znowu uruchamiałoby pobieranie skrzynki.
             To jest dokładnie usterka naprawiona 29.08.2026, więc próg liczy się z paska. */
        --szuflada-od-gory: calc(100px + var(--wizytowka-h));
    }

    .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" STAŁO POZA EKRANEM (20.09.2026, przegląd list na telefonie).
       Pasek filtrów przewija się w poziomie, a ten przycisk ma `margin-left: auto`, więc auto-margines
       odsuwał go na koniec TREŚCI, nie okna: zmierzone na 390 px — lewa krawędź na 505 px, czyli
       poza ekranem, i nie było jak go zobaczyć bez przesuwania paska w bok.
       `sticky` trzyma go przy prawej krawędzi okna, a cień oddziela od chipów, które pod nim jadą. */
    .tl-readall[b-htpzkw8q8z] {
        position: sticky;
        right: 0;
        z-index: 2;
        background: var(--paper);
        box-shadow: -10px 0 8px -6px rgba(0, 0, 0, 0.12);
    }

    .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" */
    /* ⚠ 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/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;
}

/* 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 ── */
.reader-head[b-g4ufztonjl] {
    padding: 1rem 1.4rem 0.85rem;
    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;
}
.rh-top[b-g4ufztonjl] { display: flex; align-items: flex-start; gap: 1rem; }
/* ⚠ `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.5rem;
    font-weight: 400;
    line-height: 1.15;
    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.4rem; 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; }

/* ── #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-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); }
}

/* 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ć. */
}

.rh-meta[b-g4ufztonjl] { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; 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) */
.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: #8a6512; border: 1px solid #f0d9a8;
    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) ── */
.rh-tags[b-g4ufztonjl] { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.1rem; }
.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;
}
.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. Rozwinięta i tak ma wewnętrzny cap 40vh w bąblu. */
    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ęta wiadomość: tyle ile tekstu, ale MAX 40vh — i scrolluje w SWOIM bąblu.
   Jedna długa wiadomość nie rozpycha całego wątku i zawsze da się ją przeczytać. */
.msg-frame-scroll[b-g4ufztonjl] { max-height: 40vh; overflow-y: auto; }
.msg-body-html[b-g4ufztonjl] { max-height: 40vh; overflow-y: auto; }
.msg-body-text[b-g4ufztonjl] { max-height: 40vh; overflow-y: auto; }
.msg-frame-scroll[b-g4ufztonjl]::-webkit-scrollbar, .msg-body-html[b-g4ufztonjl]::-webkit-scrollbar, .msg-body-text[b-g4ufztonjl]::-webkit-scrollbar { width: 8px; }
.msg-frame-scroll[b-g4ufztonjl]::-webkit-scrollbar-thumb, .msg-body-html[b-g4ufztonjl]::-webkit-scrollbar-thumb, .msg-body-text[b-g4ufztonjl]::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

/* 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);
    }
}

/* Pasek „zablokowano obrazki" */
.img-bar[b-g4ufztonjl] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.6rem;
    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; }

/* ── #8 — pasek akcji pod wątkiem (TYLKO mobile; desktop ma kompozytor inline i go nie potrzebuje) ── */
.reader-actionbar[b-g4ufztonjl] { display: none; }

/* „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 — propozycja zablokowania nadawcy tuż po oznaczeniu. Siedzi nad kompozytorem, żeby user
   zobaczył ją bez przewijania, i znika po wyborze (albo gdy adres jest już zablokowany). */
.spam-prompt[b-g4ufztonjl] {
    display: flex; align-items: center; gap: 0.55rem; flex: none;
    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 auto; 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;
}
.sp-yes[b-g4ufztonjl] { background: var(--danger); border-color: transparent; color: #fff; }

/* 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; }

    /* 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; }

/* 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;
}

.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/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.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── 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;
}

/* ── Uklad: co wpisujesz | co ustawiamy za Ciebie ──────────────────────────────────
   `minmax(0, …)` na OBU kolumnach, a nie samo `1fr`: bez tego dlugi adres serwera albo
   dluga nazwa uzytkownika rozpychaja sciezke siatki i cala strona zaczyna przewijac sie
   w bok. To ten sam blad, co element siatki bez `min-width: 0`. */

.skrz-uklad[b-tss4ekv6bi] {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 22rem);
    gap: 2.25rem;
    /* Tabliczka w prawej kolumnie jest ELEMENTEM SIATKI, nie zawartoscia opakowania — dzieki
       temu jej blokiem odniesienia jest cale pole siatki (wysokie jak lewa kolumna) i ma po
       czym jechac przy przewijaniu. Opakowana w `div` kurczacy sie do jej wlasnej wysokosci
       nie mialaby zapasu ani na piksel i `position: sticky` nie robiloby nic. */
    align-items: start;
    margin-bottom: 2.25rem;
}

.skrz-kroki[b-tss4ekv6bi] {
    display: flex;
    flex-direction: column;
    gap: 1.9rem;
    min-width: 0;
}

.skrz-kroki-szerokie[b-tss4ekv6bi] { margin-bottom: 2rem; }

@media (max-width: 1180px) {
    .skrz-uklad[b-tss4ekv6bi] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }
}

/* ── Pola formularza ──────────────────────────────────────────────────────────────── */

.pole[b-tss4ekv6bi] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.podpowiedz[b-tss4ekv6bi] {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-soft);
}

.podpowiedz strong[b-tss4ekv6bi] { color: var(--text-soft); }

.skrz-data[b-tss4ekv6bi] { margin-top: 0.15rem; }

.ptaszek[b-tss4ekv6bi] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text);
    cursor: pointer;
}

.ptaszek input[type="checkbox"][b-tss4ekv6bi] {
    margin-top: 0.15rem;
    accent-color: var(--p1);
    flex: none;
}

.ptaszek-samodzielny[b-tss4ekv6bi] {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--cream);
}

.rola[b-tss4ekv6bi] { color: var(--text-faint); }

.pusto[b-tss4ekv6bi] {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-faint);
}

/* Lista osob potrafi urosnac do kilkudziesieciu wierszy — wtedy przewija sie u siebie,
   zamiast rozciagac kolumne na dwa ekrany. */
.lista-osob[b-tss4ekv6bi] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 13rem;
    overflow-y: auto;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
}

/* ── Trzy decyzje kroku „co sie stanie po zapisaniu" obok siebie ───────────────────── */

.trojka[b-tss4ekv6bi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.1rem;
    align-items: start;
}

/* ── Uwagi: ostrzegawcza, zakazujaca, informacyjna ─────────────────────────────────── */

.uwaga[b-tss4ekv6bi] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    min-width: 0;
}

.uwaga-znak[b-tss4ekv6bi] {
    flex: none;
    font-size: 15px;
    line-height: 1.3;
}

.uwaga-tresc[b-tss4ekv6bi] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.uwaga-tresc > strong[b-tss4ekv6bi] {
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--text);
}

.uwaga-tresc > span[b-tss4ekv6bi] {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-soft);
    overflow-wrap: anywhere;
}

.uwaga-tresc code[b-tss4ekv6bi] {
    font-size: 11px;
    color: var(--text);
    overflow-wrap: anywhere;
}

.uwaga-ostrzezenie[b-tss4ekv6bi] { border-color: var(--warn); background: var(--warn-bg); }

.uwaga-zakaz[b-tss4ekv6bi] { border-width: 1.5px; border-color: var(--danger); background: var(--danger-bg); }
.uwaga-zakaz .uwaga-tresc > strong[b-tss4ekv6bi] { color: var(--danger); }
.uwaga-zakaz .uwaga-tresc > span[b-tss4ekv6bi] { color: var(--text); }

.uwaga-info[b-tss4ekv6bi] { border-color: var(--line); background: var(--cream-2); }

/* 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; }

.dwie-uwagi[b-tss4ekv6bi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: 0.85rem;
    align-items: start;
}

.domknij[b-tss4ekv6bi] {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-soft);
    max-width: 78ch;
}

/* ── Ustawienia zaawansowane ───────────────────────────────────────────────────────── */

.zaawansowane[b-tss4ekv6bi] {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    overflow: hidden;
}

.zaawansowane-belka[b-tss4ekv6bi] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    list-style: none;
    background: var(--cream-2);
    transition: background 0.15s;
}

.zaawansowane-belka[b-tss4ekv6bi]::-webkit-details-marker { display: none; }

.zaawansowane-belka:hover[b-tss4ekv6bi] { background: var(--cream); }

/* Strzalka rysowana znakiem, a nie grafika — obraca sie po otwarciu bloku. */
.zaawansowane-tytul[b-tss4ekv6bi] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.zaawansowane-tytul[b-tss4ekv6bi]::before {
    content: '▸';
    color: var(--p1);
    font-size: 11px;
    transition: transform 0.15s;
}

.zaawansowane[open] .zaawansowane-tytul[b-tss4ekv6bi]::before { transform: rotate(90deg); }

/* ── Blok, ktory sie NIE zwija ──────────────────────────────────────────────────────
   „Ustawienia zaawansowane" przestaly byc <details> (01.09.2026, decyzja D8) — belka
   jest tam naglowkiem sekcji, a nie przyciskiem. Zdejmujemy wiec trzy rzeczy, ktore
   obiecuja klikanie: kursor, podswietlenie pod myszka i strzalke. Zostaje dokladnie
   ten sam ksztalt i te same odstepy, zeby oba bloki tego ekranu wygladaly jak rodzenstwo.
   ⚠ Regul wyzej NIE ruszamy: chodzi po nich drugi blok („Co robimy z poczta na Twoim
   serwerze"), ktory zwijany zostaje. */

.zaawansowane-stale > .zaawansowane-belka[b-tss4ekv6bi] { cursor: default; }
.zaawansowane-stale > .zaawansowane-belka:hover[b-tss4ekv6bi] { background: var(--cream-2); }
.zaawansowane-stale .zaawansowane-tytul[b-tss4ekv6bi]::before { content: none; }
.zaawansowane-stale .zaawansowane-opis[b-tss4ekv6bi] { padding-left: 0; max-width: 78ch; }

.zaawansowane-opis[b-tss4ekv6bi] {
    padding-left: 1.05rem;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-soft);
}

.zaawansowane-wnetrze[b-tss4ekv6bi] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 0.9rem 1.1rem;
    border-top: 1px solid var(--line);
}

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

.grupa-tytul[b-tss4ekv6bi] {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
}

/* ── Przystanek „sprawdz polaczenie" ───────────────────────────────────────────────
   Szeroki pas, a nie przycisk obok „Zapisz". To jedyny moment, w ktorym czlowiek
   dowiaduje sie, czy dobrze wpisal serwer, port i haslo — wczesniej wygladalo to na
   akcje drugiej kategorii i ludzie je pomijali. */

.stacja[b-tss4ekv6bi] {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--cream-2);
}

.stacja-lewa[b-tss4ekv6bi] {
    flex: 1 1 22rem;
    min-width: 0;
}

.stacja-zdanie[b-tss4ekv6bi] {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-soft);
    max-width: 68ch;
}

.stacja-przycisk[b-tss4ekv6bi] { flex: none; }

/* ── Pasek akcji przyklejony do dolu ───────────────────────────────────────────────
   Formularz ma kilka ekranow wysokosci; przycisk lezacy na samym koncu znikal z oczu
   po pierwszym przewinieciu. Tlo takie samo jak tlo strony (--cream), zeby pasek nie
   wygladal jak doklejona obca plansza. */

.pasek-akcji[b-tss4ekv6bi] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 0 0.4rem;
    background: var(--cream);
    border-top: 1px solid var(--line);
}

.pasek-przyciski[b-tss4ekv6bi] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Walidacja per-pole ────────────────────────────────────────────────────────────
   Czerwona ramka na blednym polu + komunikat pod polem + podsumowanie w pasku akcji. */

.form-input.input-error[b-tss4ekv6bi] {
    border-color: var(--danger);
    background: color-mix(in oklab, var(--danger) 5%, transparent);
}

.form-input.input-error:focus[b-tss4ekv6bi] {
    outline: none;
    border-color: var(--danger);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--danger) 22%, transparent);
}

.field-error[b-tss4ekv6bi] {
    display: block;
    color: var(--danger);
    font-size: 11px;
    font-weight: 500;
    margin-top: 0.2rem;
}

.form-error-summary[b-tss4ekv6bi] {
    border: 1px solid var(--danger);
    background: color-mix(in oklab, var(--danger) 8%, transparent);
    color: var(--danger);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.8rem;
    font-size: 12.5px;
    font-weight: 500;
}

/* ── 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; }
    .skrz-uklad[b-tss4ekv6bi] { gap: 1.4rem; margin-bottom: 1.6rem; }
    .skrz-kroki[b-tss4ekv6bi] { gap: 1.5rem; }

    .stacja[b-tss4ekv6bi] { padding: 0.85rem 0.9rem; gap: 0.85rem; }
    .stacja-przycisk[b-tss4ekv6bi] { width: 100%; }

    .pasek-przyciski > .btn[b-tss4ekv6bi] { flex: 1 1 auto; justify-content: center; }
}
/* /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; }

.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; }
.integ-tabela td.integ-kol-akcje .btn[b-ij54nucs0t] { display: block; margin: 0 0 .3rem 0; }
.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/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; }
/* /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. */

.tbr-dialog[b-71hov3rcon] {
    max-width: 720px;
    width: min(720px, 94vw);
}

.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. */
.tbr-lista[b-71hov3rcon] {
    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] {
    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);
}
/* /Components/Pages/Tasks/TaskDetailPage.razor.rz.scp.css */
/* ── Powrót ── */
.task-back[b-0zau9n34jo] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-soft);
    text-decoration: none;
    margin-bottom: 0.9rem;
    transition: color 0.14s;
}

.task-back:hover[b-0zau9n34jo] { color: var(--p1); }

.task-back svg[b-0zau9n34jo] {
    width: 15px; height: 15px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.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%; }

/* ── Editorial header ── */
.td-head[b-0zau9n34jo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.td-head-titles[b-0zau9n34jo] { flex: 1; min-width: 0; }
.td-eyebrow[b-0zau9n34jo] { color: var(--text-faint); margin: 0 0 0.3rem; }
/* 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;
}

/* Zdanie wprowadzające pod tytułem — 13 px, jak na pozostałych ekranach szczegółu.
   Globalne `.lede` ma 1,05 rem i 56ch, co pod tytułem zadania czytałoby się jak drugi tytuł. */
.td-lede[b-0zau9n34jo] {
    font-size: 13px;
    margin-top: 0.5rem;
    max-width: 620px;
}
.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;
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    line-height: 1.05;
    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;
    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;
    margin-top: 0.45rem;
    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 ── */
.task-detail-grid[b-0zau9n34jo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.4rem;
    align-items: stretch;
}

.task-detail-main[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
}

.task-detail-side[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    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. */
    .td-status-wybor[b-0zau9n34jo] { display: inline-flex; flex: none; }
    .td-status[b-0zau9n34jo] { display: none; }
}

/* ── Opis: edytowalny blok prozy, nie pudełko formularza ── */
.td-desc-input[b-0zau9n34jo] {
    width: 100%;
    resize: vertical;
    min-height: 3.4rem;
    field-sizing: content;       /* auto-rośnie z treścią (Chromium); rows= to fallback */
    max-height: 420px;
    font: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background: var(--cream);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0.6rem 0.75rem;
    transition: border-color 0.14s, background 0.14s;
}
.td-desc-input:hover[b-0zau9n34jo] { border-color: var(--line); }
.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); }

.task-desc-static[b-0zau9n34jo] {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13.5px;
    color: var(--text);
    margin: 0;
}

.task-desc-empty[b-0zau9n34jo] {
    font-size: 13px;
    color: var(--text-faint);
    margin: 0;
}

/* ── 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[b-0zau9n34jo] {
    font-size: 12.5px;
    color: var(--text-faint);
}

.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[b-0zau9n34jo] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--p1);
}

.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; }

    .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; }
/* /Components/Pages/Tasks/TaskEditModal.razor.rz.scp.css */
.task-modal[b-c37nb0nvnq] {
    max-width: 520px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.task-modal-head[b-c37nb0nvnq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
}

.task-modal-title[b-c37nb0nvnq] {
    margin: 0;
    font-family: 'Instrument Serif', serif;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* Nadpisz globalny .modal-close (biały na ciemnym nagłówku) — tu nagłówek jest jasny. */
.task-modal-head .modal-close[b-c37nb0nvnq] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    color: var(--text-soft);
    transition: background 0.14s, color 0.14s;
}

.task-modal-head .modal-close:hover[b-c37nb0nvnq] {
    background: var(--danger-bg);
    color: var(--danger);
}

.task-modal-head .modal-close svg[b-c37nb0nvnq] {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.task-modal-body[b-c37nb0nvnq] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem 1.25rem;
}

.task-modal-label[b-c37nb0nvnq] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-soft);
    margin: 0.5rem 0 0.1rem;
}

.task-modal-label:first-child[b-c37nb0nvnq] {
    margin-top: 0;
}

.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;
}

.task-modal-error[b-c37nb0nvnq] {
    margin-top: 0.6rem;
    align-self: flex-start;
}

.task-modal-foot[b-c37nb0nvnq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--line);
}

.task-modal-spacer[b-c37nb0nvnq] {
    flex: 1;
}

/* 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/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. */
.kanban-col.drop-over[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);
}

.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.drop-over .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);
}

/* 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/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; }
}