/*
    crm.css - warstwa komponentow DOPISANA do systemu przeniesionego ze starego CRM.

    ZASADA: ten plik NIE redefiniuje zmiennych z site.css i nie nadpisuje jego klas.
    Korzysta z tych samych tokenow (--glass-bg, --border-radius, --primary-gradient...),
    zeby nowe elementy wygladaly jak reszta panelu, a nie jak doklejka.

    Dochodza tu rzeczy, ktorych stary CRM nie mial, bo nie mial zamowien ani etapow:
      - znaczniki stanu zamowienia i etapu projektu,
      - stronicowanie,
      - powiadomienia (komunikaty z TempData),
      - formularz zamowienia z wycena na zywo,
      - blokada pobrania paczki,
      - strona-wzornik.

    Nazwy klas po polsku, tak jak reszta kodu. Klasy odziedziczone po starym CRM
    (.card, .content-box, .admin-table, .btn) zostaja po angielsku - przepisywanie ich
    oznaczaloby przepisanie 10 000 linii CSS i utrate zgodnosci z tamtym projektem.
*/

/* =========================================================================
   1. DOSTEPNOSC - rzeczy, ktorych staremu CRM brakowalo
   ========================================================================= */

/* Skok do tresci: pierwszy Tab na stronie ma prowadzic do tresci, nie przez 12 pozycji menu. */
.skok-do-tresci {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 0.85rem 1.5rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--blue-accent);
    border-radius: var(--border-radius-small);
    font-weight: 600;
}

    .skok-do-tresci:focus {
        left: 1rem;
        top: 1rem;
    }

/*
    Stary CRM ustawial `*:focus { outline: 2px solid }` - obwodka pojawiala sie takze
    po kliknieciu myszka, wiec ludzie prosili o jej usuniecie i konczylo sie
    `outline: none` na wszystkim. :focus-visible pokazuje obwodke tylko przy klawiaturze.
*/
:focus-visible {
    outline: 3px solid var(--cyan-accent);
    outline-offset: 2px;
}

/* Kto wylaczyl animacje w systemie, ten ich nie dostaje. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================================
   2. ZNACZNIKI STANU
   ========================================================================= */

/* Wersaliki zostaja: to mala etykieta stanu, nie zdanie i nie etykieta pola. */
.znacznik {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem; /* bylo 0.35rem 0.9rem */
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1.4;
}

    /* Kropka przed tekstem - dla osob rozrozniajacych stany po ksztalcie, nie po kolorze. */
    .znacznik::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        flex-shrink: 0;
    }

/* --- stany zamowienia (Domain/Zamowienia/StanZamowienia.cs) --- */

.znacznik--robocze {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text-secondary);
}

.znacznik--oczekuje-na-platnosc {
    background: rgba(241, 196, 15, 0.12);
    border-color: rgba(241, 196, 15, 0.4);
    color: #f1c40f;
}

.znacznik--zlozone {
    background: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.45);
    color: #8fa2f5;
}

.znacznik--w-realizacji {
    background: rgba(157, 78, 221, 0.15);
    border-color: rgba(157, 78, 221, 0.45);
    color: #c08cf0;
}

/* Do doplaty = stan, ktory ma rzucac sie w oczy: to tu leza pieniadze firmy. */
.znacznik--do-doplaty {
    background: rgba(233, 69, 96, 0.16);
    border-color: rgba(233, 69, 96, 0.5);
    color: #ff7a90;
}

.znacznik--zakonczone {
    background: rgba(80, 227, 194, 0.14);
    border-color: rgba(80, 227, 194, 0.45);
    color: #50E3C2;
}

.znacznik--anulowane {
    background: rgba(158, 158, 158, 0.12);
    border-color: rgba(158, 158, 158, 0.35);
    color: #b0b0b0;
}

.znacznik--zwrocone {
    background: rgba(255, 152, 0, 0.14);
    border-color: rgba(255, 152, 0, 0.45);
    color: #ffb04d;
}

/* --- etapy projektanta (Domain/Projekty/EtapProjektu.cs) --- */

.znacznik--otrzymano {
    background: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.45);
    color: #8fa2f5;
}

.znacznik--w-trakcie-realizacji {
    background: rgba(240, 147, 251, 0.14);
    border-color: rgba(240, 147, 251, 0.45);
    color: var(--pink-light);
}

.znacznik--zakonczono {
    background: rgba(80, 227, 194, 0.14);
    border-color: rgba(80, 227, 194, 0.45);
    color: #50E3C2;
}

.znacznik--wstrzymano {
    background: rgba(255, 152, 0, 0.14);
    border-color: rgba(255, 152, 0, 0.45);
    color: #ffb04d;
}

/* Znacznik informacyjny bez semantyki stanu (np. "Firma", "Osoba prywatna"). */
.znacznik--neutralny {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--glass-border);
    color: var(--text-secondary);
}

    .znacznik--neutralny::before {
        display: none;
    }

/* =========================================================================
   3. POWIADOMIENIA
   ========================================================================= */

.powiadomienie {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.6rem 0.85rem; /* bylo 1rem 1.25rem */
    border-radius: var(--border-radius-small);
    border: 1px solid transparent;
    border-left-width: 3px;
    margin-bottom: 0.8rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

    .powiadomienie__ikona {
        flex-shrink: 0;
        width: 17px;
        height: 17px;
        margin-top: 0.12rem;
    }

    .powiadomienie__tresc {
        flex: 1;
        min-width: 0;
    }

    .powiadomienie strong {
        display: block;
        margin-bottom: 0.2rem;
        color: var(--text-primary);
    }

.powiadomienie--sukces {
    background: rgba(80, 227, 194, 0.08);
    border-color: rgba(80, 227, 194, 0.35);
    color: #7fecd4;
}

.powiadomienie--informacja {
    background: rgba(102, 126, 234, 0.08);
    border-color: rgba(102, 126, 234, 0.35);
    color: #a8b6f7;
}

.powiadomienie--ostrzezenie {
    background: rgba(255, 152, 0, 0.08);
    border-color: rgba(255, 152, 0, 0.4);
    color: #ffc270;
}

.powiadomienie--blad {
    background: rgba(233, 69, 96, 0.1);
    border-color: rgba(233, 69, 96, 0.45);
    color: #ff8fa3;
}

/* =========================================================================
   4. STRONICOWANIE
   ========================================================================= */

.paginacja {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--glass-border);
}

.paginacja__podsumowanie {
    margin-right: auto;
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* 44 px -> 36 px. Pelne 44 px wraca na ekranach dotykowych - patrz sekcja 11. */
.paginacja__link {
    min-width: 36px;
    min-height: 36px;
    padding: 0 0.6rem;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-small);
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
}

    .paginacja__link:hover {
        border-color: var(--blue-accent);
        background: rgba(102, 126, 234, 0.12);
        color: var(--text-primary);
    }

    .paginacja__link[aria-current="page"] {
        background: linear-gradient(135deg, var(--blue-accent) 0%, var(--purple-medium) 100%);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.35);
    }

    .paginacja__link--nieaktywny {
        opacity: 0.35;
        pointer-events: none;
    }

/* =========================================================================
   5. NAGLOWEK SEKCJI / PASEK NARZEDZI
   ========================================================================= */

.naglowek-sekcji {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 1rem; /* bylo 1.75rem */
}

    .naglowek-sekcji h1,
    .naglowek-sekcji h2 {
        margin-bottom: 0.15rem;
    }

.naglowek-sekcji__opis {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

.pasek-narzedzi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* =========================================================================
   6. SIATKA DANYCH (etykieta + wartosc)
   ========================================================================= */

.siatka-danych {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem; /* bylo 1rem przy kafelkach 210px */
}

.dana {
    padding: 0.55rem 0.75rem; /* bylo 1.1rem 1.25rem */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-small);
}

/* Wersaliki zostaja: to mala etykieta nad wartoscia, nie etykieta pola do wpisania. */
.dana__etykieta {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.dana__wartosc {
    font-size: 0.98rem; /* bylo 1.15rem */
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}

    .dana__wartosc--kwota {
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.5px;
    }

/* Kwoty w tabelach: cyfry o rownej szerokosci, zeby kolumna sie nie "falowala". */
.kwota {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kwota--dodatnia {
    color: #50E3C2;
}

.kwota--zalegla {
    color: #ff7a90;
    font-weight: 600;
}

/* =========================================================================
   7. FORMULARZ ZAMOWIENIA
   ========================================================================= */

.zamowienie-uklad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 1.1rem; /* bylo 2rem przy kolumnie 340px */
    align-items: start;
}

/* Ponizej 900 px wszystko wraca do jednej kolumny - patrz sekcja 11. */
@media (max-width: 900px) {
    .zamowienie-uklad {
        grid-template-columns: 1fr;
    }
}

/*
    Panel wyceny jest przyklejony do gory okna, zeby kwota byla widoczna bez
    przewijania na kazdym etapie wypelniania. max-height + overflow sa po to,
    zeby przy bardzo niskim oknie (np. laptop 768 px w poziomie z paskiem
    zakladek) panel nie wystawal poza ekran - wtedy przewija sie sam, a nie cala
    strona i kwota dalej jest widoczna.
*/
.podsumowanie-wyceny {
    position: sticky;
    top: 0.75rem;
    max-height: calc(100vh - 1.5rem);
    overflow-y: auto;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: var(--border-radius);
    padding: 1rem 1.1rem; /* bylo 1.75rem */
    box-shadow: var(--shadow-card);
}

@media (max-width: 900px) {
    .podsumowanie-wyceny {
        position: static;
        max-height: none;
    }
}

.podsumowanie-wyceny__tytul {
    font-family: 'Orbitron', 'Exo 2', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.6rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-primary);
}

.wiersz-wyceny {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.28rem 0; /* bylo 0.55rem */
    color: var(--text-secondary);
    font-size: 0.86rem;
}

    .wiersz-wyceny--suma {
        margin-top: 0.4rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--glass-border);
        font-size: 1.05rem; /* bylo 1.25rem */
        font-weight: 700;
        color: var(--text-primary);
    }

    .wiersz-wyceny--przedplata {
        color: var(--pink-light);
        font-weight: 600;
    }

.wiersz-wyceny__kwota {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Widoczna informacja, ze cena liczy sie po stronie serwera - zmienia sie po odpowiedzi. */
.podsumowanie-wyceny[data-stan="liczenie"] .wiersz-wyceny__kwota {
    opacity: 0.4;
}

.podsumowanie-wyceny__stopka {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--glass-border);
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.45;
}

/* --- przelacznik firma / osoba prywatna --- */

.przelacznik-segmentowy {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
}

    .przelacznik-segmentowy input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .przelacznik-segmentowy label {
        padding: 0.3rem 0.95rem; /* bylo 0.6rem 1.5rem */
        border-radius: 50px;
        cursor: pointer;
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--text-secondary);
        transition: all var(--transition-fast);
        text-transform: none;
        letter-spacing: 0;
        margin: 0;
        min-height: var(--przycisk-wys-maly);
        display: inline-flex;
        align-items: center;
    }

    .przelacznik-segmentowy input[type="radio"]:checked + label {
        background: linear-gradient(135deg, var(--blue-accent) 0%, var(--purple-medium) 100%);
        color: #fff;
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.35);
    }

    .przelacznik-segmentowy input[type="radio"]:focus-visible + label {
        outline: 3px solid var(--cyan-accent);
        outline-offset: 2px;
    }

/* --- strefa wrzucania planu --- */

.strefa-wrzutu {
    border: 2px dashed rgba(102, 126, 234, 0.4);
    border-radius: var(--border-radius);
    padding: 1rem; /* bylo 2.5rem 1.5rem - sama ramka miala 150 px wysokosci */
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    transition: all var(--transition-fast);
    cursor: pointer;
}

    .strefa-wrzutu:hover,
    .strefa-wrzutu:focus-within,
    .strefa-wrzutu[data-nad-strefa="tak"] {
        border-color: var(--pink-light);
        background: rgba(240, 147, 251, 0.06);
    }

.strefa-wrzutu__ikona {
    width: 28px; /* bylo 48px */
    height: 28px;
    margin: 0 auto 0.35rem;
    color: var(--blue-accent);
}

.strefa-wrzutu__tytul {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.92rem;
    margin-bottom: 0.2rem;
}

.strefa-wrzutu__podpis {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
}

.strefa-wrzutu input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.wybrany-plik {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.6rem;
    padding: 0.4rem 0.75rem;
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: var(--border-radius-small);
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* --- pole z bledem walidacji --- */

.pole {
    margin-bottom: var(--pole-odstep); /* bylo 1.35rem (~22 px) */
}

    /*
        ETYKIETA POLA BEZ WERSALIKOW.
        Bylo: 0.82rem WERSALIKAMI z rozstrzeleniem 0.8px. W polskim "ADRES E-MAIL"
        z rozstrzeleniem czyta sie gorzej niz "Adres e-mail" - wersaliki gubia
        ksztalt wyrazu i ogonki, a przy formularzu zamowienia czyta sie te podpisy
        kilkanascie razy pod rzad. Wersaliki zostaja tam, gdzie sa etykieta,
        a nie tekstem: .znacznik, .dana__etykieta, .wzornik-podpis, naglowki.
    */
    .pole > label {
        display: block;
        margin-bottom: 0.2rem;
        font-weight: 600;
        font-size: var(--etykieta-font);
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-secondary);
    }

.pole__podpowiedz {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.pole__blad {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #ff8fa3;
}

    .pole__blad:empty {
        display: none;
    }

.pole-wymagane::after {
    content: ' *';
    color: var(--pink-medium);
}

/* Zgoda konsumenta - swiadomie wyrozniona ramka, bo od niej zalezy prawo odstapienia. */
.zgoda {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.6rem 0.8rem; /* bylo 1.1rem 1.25rem */
    background: rgba(102, 126, 234, 0.06);
    border: 1px solid rgba(102, 126, 234, 0.28);
    border-radius: var(--border-radius-small);
    margin-bottom: var(--pole-odstep);
}

    .zgoda input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin-top: 0.1rem;
        flex-shrink: 0;
        accent-color: #667eea;
        cursor: pointer;
    }

    .zgoda label {
        font-size: 0.84rem;
        line-height: 1.45;
        color: var(--text-secondary);
        cursor: pointer;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 400;
        margin: 0;
    }

/* Grupa: pole NIP + przycisk "Pobierz dane" */
.pole-z-przyciskiem {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
}

    .pole-z-przyciskiem .form-control {
        flex: 1;
        min-width: 0;
    }

    .pole-z-przyciskiem button {
        flex-shrink: 0;
        white-space: nowrap;
    }

/* =========================================================================
   8. BLOKADA POBRANIA PACZKI
   ========================================================================= */

.blokada-pobrania {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 0.9rem 1rem; /* bylo 1.5rem */
    border-radius: var(--border-radius);
    border: 1px solid rgba(233, 69, 96, 0.35);
    background: rgba(233, 69, 96, 0.07);
}

    .blokada-pobrania__ikona {
        width: 28px; /* bylo 40px */
        height: 28px;
        flex-shrink: 0;
        color: #ff7a90;
    }

    .blokada-pobrania__tytul {
        font-family: 'Orbitron', 'Exo 2', sans-serif;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: #ff8fa3;
        margin-bottom: 0.3rem;
    }

    .blokada-pobrania p {
        margin-bottom: 0.5rem;
        font-size: 0.88rem;
        color: var(--text-secondary);
    }

.pobranie-odblokowane {
    border-color: rgba(80, 227, 194, 0.35);
    background: rgba(80, 227, 194, 0.07);
}

    .pobranie-odblokowane .blokada-pobrania__ikona {
        color: #50E3C2;
    }

    .pobranie-odblokowane .blokada-pobrania__tytul {
        color: #7fecd4;
    }

/* =========================================================================
   9. STRONA-WZORNIK
   ========================================================================= */

.wzornik-nawigacja {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.6rem 0;
    margin-bottom: 1.1rem;
    background: rgba(10, 10, 15, 0.92);
    backdrop-filter: blur(var(--blur-amount));
    border-bottom: 1px solid var(--glass-border);
}

    .wzornik-nawigacja a {
        padding: 0.3rem 0.8rem;
        border-radius: 50px;
        border: 1px solid var(--glass-border);
        font-size: 0.8rem;
        color: var(--text-secondary);
    }

        .wzornik-nawigacja a:hover {
            border-color: var(--blue-accent);
            color: var(--text-primary);
        }

.wzornik-sekcja {
    margin-bottom: 2rem; /* bylo 3.5rem */
    scroll-margin-top: 3.5rem;
}

    .wzornik-sekcja > h2 {
        font-size: 1.15rem;
        padding-bottom: 0.45rem;
        margin-bottom: 0.9rem;
        border-bottom: 1px solid var(--glass-border);
    }

.wzornik-probki {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-small);
}

    .wzornik-probki--kolumna {
        flex-direction: column;
        align-items: stretch;
    }

.wzornik-podpis {
    width: 100%;
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: -0.35rem;
}

.wzornik-paleta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.probka-koloru {
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-small);
    overflow: hidden;
}

    .probka-koloru__plama {
        height: 56px;
    }

    .probka-koloru__opis {
        padding: 0.65rem 0.8rem;
        font-size: 0.78rem;
        line-height: 1.5;
        background: rgba(255, 255, 255, 0.03);
    }

    .probka-koloru__hex {
        display: block;
        font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
        color: var(--text-muted);
        text-transform: uppercase;
    }

/* =========================================================================
   10. DROBIAZGI WSPOLNE
   ========================================================================= */

/* Przycisk-duch: akcja drugorzedna w tabeli, bez ciezaru gradientu. */
.btn-duch {
    padding: 0.3rem 0.75rem; /* bylo 0.55rem 1.1rem */
    min-height: var(--przycisk-wys-maly);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: var(--border-radius-small);
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
}

    .btn-duch:hover {
        border-color: var(--blue-accent);
        color: var(--text-primary);
        background: rgba(102, 126, 234, 0.12);
    }

    .btn-duch:disabled,
    .btn-duch[aria-disabled="true"] {
        opacity: 0.45;
        cursor: not-allowed;
        pointer-events: none;
    }

/* Przycisk glowny wylaczony - bez tego gradient sugeruje, ze da sie kliknac. */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

/* Pusta lista - zamiast surowej pustej tabeli. */
.pusto {
    padding: 1.75rem 1rem; /* bylo 3rem 1.5rem */
    text-align: center;
    color: var(--text-muted);
}

    .pusto__ikona {
        width: 36px; /* bylo 56px */
        height: 36px;
        margin: 0 auto 0.6rem;
        opacity: 0.4;
    }

    .pusto__tytul {
        font-size: 0.98rem;
        color: var(--text-secondary);
        margin-bottom: 0.25rem;
    }

/* Tabela w kontenerze przewijanym w poziomie - na telefonie tabele sa szersze niz ekran. */
.przewijana-w-poziomie {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Pasek filtrow nad lista */
.filtry {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 0.6rem;
    align-items: end;
    margin-bottom: 0.9rem;
}

    .filtry .pole {
        margin-bottom: 0;
    }

/* Ikony SVG uzywane w miejsce Font Awesome (brak zewnetrznego CDN przy ciasnym CSP). */
.ikona {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    vertical-align: -0.18em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ikona--duza {
    width: 1.6em;
    height: 1.6em;
}

/* Menu boczne: ikony SVG zamiast <i class="fas">, ta sama metryka co w starym CRM. */
.sidebar nav a .ikona,
.logout-link .ikona {
    width: 18px;
    height: 18px;
    margin-right: 0.7rem; /* bylo 1.2rem - menu zwezone razem z pozycjami */
    flex-shrink: 0;
}

/* Wyrownanie przyciskow w komorce tabeli */
.akcje-wiersza {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* Belka srodowiska - zeby nikt nie pomylil testu z produkcja. */
.belka-srodowiska {
    padding: 0.25rem 1rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: repeating-linear-gradient(45deg, rgba(255,152,0,0.18) 0 12px, rgba(255,152,0,0.08) 12px 24px);
    border-bottom: 1px solid rgba(255, 152, 0, 0.4);
    color: #ffc270;
}

/* =========================================================================
   11. SKALA - NADPISANIA PO mobile.css

   DLACZEGO TA SEKCJA W OGOLE ISTNIEJE:
   mobile.css (mimo nazwy) zawiera kilka regul GLOBALNYCH, poza jakimkolwiek
   @media - m.in. `.btn`, `.form-control`, `.form-grid`, `.alert`. Sa to resztki
   po starym CRM. mobile.css laduje sie PO components.css, wiec jego wartosci
   wygrywaly z tym, co ustawiliby autorzy komponentow. crm.css laduje sie jako
   ostatni, wiec to jedyne miejsce, w ktorym skala z :root faktycznie dochodzi
   do skutku bez uzycia !important.

   Nie kasujemy regul w mobile.css, bo ten plik obsluguje takze widoki
   przeniesione ze starego CRM, ktorych ten projekt jeszcze nie odtworzyl.
   ========================================================================= */

/* Pole formularza: bylo padding 0.875rem 1rem + min-height 44px = ~48-52 px. */
.form-control {
    padding: var(--kontrolka-pad-y) var(--kontrolka-pad-x);
    min-height: var(--kontrolka-wys);
    font-size: var(--kontrolka-font);
}

textarea.form-control {
    min-height: 88px;
}

/* Przycisk: bylo padding 0.875rem 2rem + min-height 44px + font 0.95rem = ~52 px.
   justify-content: mobile.css robi z .btn kontener flex, ale wysrodkowywal tresc
   wylacznie w @media dla telefonu - na desktopie napis przycisku rozciagnietego
   na 100% szerokosci (logowanie, "Zamawiam i place") lezal przy lewej krawedzi. */
.btn {
    padding: var(--kontrolka-pad-y) 18px;
    min-height: var(--przycisk-wys);
    font-size: 0.88rem;
    line-height: 1.3;
    justify-content: center;
}

.btn-lg {
    padding: 11px 22px;
    min-height: var(--przycisk-wys-duzy);
    font-size: 0.95rem;
}

/*
    .btn-sm BYLA UZYWANA W 15 WIDOKACH, ALE NIGDZIE NIEZDEFINIOWANA.
    Przyciski "w wierszu tabeli" dostawaly przez to pelny rozmiar .btn - stad
    m.in. wielkie "Otworz karte" w liscie klientow. Tutaj dostaja rozmiar,
    ktorego autorzy widokow oczekiwali.
*/
.btn-sm {
    padding: 0.2rem 0.65rem;
    min-height: 28px;
    font-size: 0.76rem;
    letter-spacing: 0.3px;
}

/*
    Siatka dwukolumnowa formularza. Odstep pionowy = 0, bo kazde `.pole`
    wnosi wlasny margin-bottom; bez tego miedzy wierszami robil sie podwojny
    odstep (margines pola + gap siatki).
*/
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--pole-odstep);
}

.alert {
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.7rem;
    font-size: 0.88rem;
}

/*
    Atrybut `hidden` ma wygrywac z `display: flex`.
    Przegladarka daje `[hidden] { display: none }` w arkuszu wbudowanym, ktory
    przegrywa z KAZDA regula autora - a `.zgoda` i `.wybrany-plik` maja
    `display: flex`. Skutkiem bylo, ze skrypt ustawiajacy `element.hidden = true`
    (zgoda konsumenta przy zakupie na firme, chip z nazwa wybranego pliku)
    niczego nie chowal. Jedna regula zamiast doklejania klas w skrypcie.
*/
[hidden] {
    display: none !important;
}

/*
    JEDNA KOLUMNA PONIZEJ 900 px.
    Wspolny prog dla wszystkich siatek formularzy - wczesniej czesc lamala sie
    przy 767 px, czesc przy 991 px, wiec miedzy nimi pola byly sciesnione
    do ~150 px szerokosci i polskie etykiety sie lamaly.
*/
@media (max-width: 900px) {
    .form-grid,
    .filtry {
        grid-template-columns: 1fr;
    }
}

/*
    Ekrany dotykowe: kontrolki wracaja do 44 px.
    Zageszczenie jest dla myszy - palcem w 34 px przycisk trafia sie zle,
    a wytyczne dostepnosci mowia o 44 px w kazdym kierunku.
*/
@media (hover: none) and (pointer: coarse) {
    .btn,
    .btn-duch,
    .form-control,
    .form-select,
    .paginacja__link,
    .admin-action-btn,
    .przelacznik-segmentowy label {
        min-height: 44px;
    }

    .paginacja__link {
        min-width: 44px;
    }
}

/* =========================================================================
   12. PANEL WSPARCIA I PANEL PROJEKTANTA

   DLACZEGO TA SEKCJA POWSTALA:
   Widoki obu tych obszarow napisano na klasach Bootstrapa (nav-tabs, row,
   col-lg-7, badge text-bg-success, dropdown-menu, progress...). Bootstrapa
   w tym projekcie NIE MA - arkusze sa wlasne. Skan porownujacy class="..."
   z widokow z definicjami w wwwroot/css znalazl 89 klas bez pokrycia,
   WSZYSTKIE w tych dwoch obszarach (Admin, Klient i Views mialy zero).
   Skutek widoczny na ekranie: zakladki jako lista z kropkami, lista
   "etykieta/wartosc" jako goly tekst, menu dzwonka rozwiniete na stale
   i nachodzace na naglowek, wszystkie panele zakladek widoczne naraz
   (strona 4500 px wysokosci).

   Widoki przepisano na slownik tego projektu (.znacznik, .btn-duch,
   .powiadomienie, .siatka-danych, .przewijana-w-poziomie), a tutaj dochodza
   TYLKO komponenty, ktorych projekt jeszcze nie mial: zakladki, zwarta
   checklista, menu podreczne dzwonka, pasek postepu i panel czatu.
   Nie odtwarzamy Bootstrapa - odtwarzamy brakujace kawalki wlasnego systemu.
   ========================================================================= */

/*
    PRZEPELNIENIE W POZIOMIE - NAPRAWA U ZRODLA.

    #container to siatka `var(--sidebar-width) 1fr`. Element siatki ma domyslnie
    min-width: auto, czyli NIE ZWEZI SIE ponizej szerokosci swojej najszerszej
    tresci. Jedna szeroka tabela (albo skrot SHA-256 bez mozliwosci zlamania)
    rozpychala wiec cala strone: menu boczne wyjezdzalo poza lewa krawedz,
    prawa kolumna poza prawa, na dole pojawial sie poziomy pasek przewijania.
    min-width: 0 przywraca kolumnie prawo do zwezania - wtedy przewija sie
    wylacznie ten jeden element, ktory jest za szeroki (ma .przewijana-w-poziomie).
*/
#container > main {
    min-width: 0;
}

#container > main > .content-wrapper {
    min-width: 0;
    max-width: 100%;
}

/* --- drobne narzedzia, ktorych projekt nie mial, a widoki ich potrzebuja --- */

/* Dlugie adresy e-mail i skroty SHA-256 maja sie lamac, a nie rozpychac tabele. */
.text-break {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.text-nowrap {
    white-space: nowrap;
}

.text-end {
    text-align: right;
}

.fw-semibold {
    font-weight: 600;
}

.font-monospace {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* Numer seryjny gogli wpisuje sie wielkimi literami - i tak jest zapisywany wielkimi. */
.text-uppercase {
    text-transform: uppercase;
}

.list-unstyled {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/*
    .show-mobile BYLA UZYWANA BEZ STANU DOMYSLNEGO.
    mobile.css pokazuje ja (display: initial !important) ponizej 768 px, ale NIGDZIE
    nie chowa jej powyzej. Skutek: na laptopie lista klientow renderowala sie dwa razy -
    raz jako tabela, raz jako kafelki "dla telefonu" pod nia. Tu dochodzi brakujacy
    stan domyslny; regula z mobile.css ma !important, wiec ponizej 768 px dalej wygrywa.
*/
.show-mobile {
    display: none;
}

/* =========================================================================
   12a. ZAKLADKI (bez JavaScriptu)

   Poprzednio: <ul class="nav nav-tabs"> z data-bs-toggle="tab". Bez Bootstrapa
   byla to lista z kropkami, a wszystkie panele renderowaly sie jednoczesnie.

   Teraz: ukryte pola radio + etykiety. Przelaczanie robi sama przegladarka
   (`:checked ~ panel`), wiec dziala przy wylaczonym JavaScripcie i przezyje
   zaostrzenie CSP do 'self' bez 'unsafe-inline'. Pola radio sa prawdziwymi
   kontrolkami, wiec strzalki na klawiaturze przechodza miedzy zakladkami
   tak, jak w natywnym zestawie zakladek.
   ========================================================================= */

.zakladki {
    display: block;
}

/*
    Pole radio musi zostac W UKLADZIE (a nie display:none), inaczej czesc
    przegladarek nie pozwala go zaznaczyc z klawiatury. Chowamy je wiec
    technika "clip", ktora nie wyjmuje go z kolejnosci fokusowania.
*/
.zakladki__wybor {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.zakladki__pasek {
    display: flex;
    flex-wrap: wrap; /* na waskim ekranie zakladki schodza do drugiego rzedu */
    gap: 0.25rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--glass-border);
}

.zakladki__etykieta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    min-height: var(--przycisk-wys-maly);
    border: 1px solid transparent;
    border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
    /* Etykiety w tym projekcie bywaja wersalikami - zakladka to nazwa sekcji,
       wiec zostaje w normalnym zapisie. */
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}

    .zakladki__etykieta:hover {
        color: var(--text-primary);
        background: rgba(255, 255, 255, 0.05);
    }

.zakladki__panel {
    display: none;
}

/*
    Zaznaczona zakladka. Selektor musi wymieniac kazda pare z osobna, bo CSS
    nie potrafi powiazac `input` z `label[for]` inaczej niz przez rodzenstwo.
    Lista jest krotka i stala - szesc zakladek karty klienta i dwie w sekcji gogli.
*/
#zakladka-dane:checked ~ .zakladki__pasek [for="zakladka-dane"],
#zakladka-wdrozenie:checked ~ .zakladki__pasek [for="zakladka-wdrozenie"],
#zakladka-zamowienia:checked ~ .zakladki__pasek [for="zakladka-zamowienia"],
#zakladka-gogle:checked ~ .zakladki__pasek [for="zakladka-gogle"],
#zakladka-konta:checked ~ .zakladki__pasek [for="zakladka-konta"],
#zakladka-czat:checked ~ .zakladki__pasek [for="zakladka-czat"],
#gogle-odczyt:checked ~ .zakladki__pasek [for="gogle-odczyt"],
#gogle-recznie:checked ~ .zakladki__pasek [for="gogle-recznie"] {
    color: var(--text-primary);
    background: rgba(102, 126, 234, 0.16);
    border-color: rgba(102, 126, 234, 0.45);
    box-shadow: inset 0 -2px 0 0 var(--blue-accent);
}

#zakladka-dane:checked ~ #panel-dane,
#zakladka-wdrozenie:checked ~ #panel-wdrozenie,
#zakladka-zamowienia:checked ~ #panel-zamowienia,
#zakladka-gogle:checked ~ #panel-gogle,
#zakladka-konta:checked ~ #panel-konta,
#zakladka-czat:checked ~ #panel-czat,
#gogle-odczyt:checked ~ #panel-gogle-odczyt,
#gogle-recznie:checked ~ #panel-gogle-recznie {
    display: block;
}

/* Obwodka fokusu nalezy sie etykiecie - samego pola radio nie widac na ekranie. */
#zakladka-dane:focus-visible ~ .zakladki__pasek [for="zakladka-dane"],
#zakladka-wdrozenie:focus-visible ~ .zakladki__pasek [for="zakladka-wdrozenie"],
#zakladka-zamowienia:focus-visible ~ .zakladki__pasek [for="zakladka-zamowienia"],
#zakladka-gogle:focus-visible ~ .zakladki__pasek [for="zakladka-gogle"],
#zakladka-konta:focus-visible ~ .zakladki__pasek [for="zakladka-konta"],
#zakladka-czat:focus-visible ~ .zakladki__pasek [for="zakladka-czat"],
#gogle-odczyt:focus-visible ~ .zakladki__pasek [for="gogle-odczyt"],
#gogle-recznie:focus-visible ~ .zakladki__pasek [for="gogle-recznie"] {
    outline: 3px solid var(--cyan-accent);
    outline-offset: 2px;
}

/* Licznik przy nazwie zakladki (np. "Zamowienia 3"). */
.zakladki__licznik {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 0.35rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

    .zakladki__licznik--pilne {
        background: rgba(233, 69, 96, 0.9);
        color: #fff;
    }

/* =========================================================================
   12b. PASEK POSTEPU

   components.css ma `.progress-bar` w znaczeniu TORU (szerokosc 100%, tlo).
   Widoki uzywaly `.progress` jako toru, a `.progress-bar` jako WYPELNIENIA -
   czyli odwrotnie. Zamiast mnozyc kolizje, komponent ma wlasne nazwy.
   ========================================================================= */

.pasek-postepu {
    height: 8px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.pasek-postepu__wypelnienie {
    display: block;
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(90deg, var(--blue-accent) 0%, var(--purple-medium) 100%);
    transition: width var(--transition-medium);
}

    .pasek-postepu__wypelnienie--gotowe {
        background: linear-gradient(90deg, #2bb98f 0%, #50E3C2 100%);
    }

/* =========================================================================
   12c. CHECKLISTA WDROZENIA - WERSJA ZWARTA

   BYLO: dziewiec ponumerowanych kart, kazda z dwoma polami tekstowymi na cala
   szerokosc i przyciskiem rozciagnietym na 1000 px. Cala lista mierzyla
   2041 px - czyli prawie trzy ekrany laptopa na dziewiec pozycji.

   JEST: jeden wiersz na krok - stan, nazwa, pole dowodu (kazdy z dziewieciu
   krokow wymaga dowodu, wiec bez niego przycisk i tak zwrocilby blad)
   i przycisk. Opis kroku, notatka i podpis chowaja sie pod przelacznikiem
   przy prawej krawedzi wiersza. Przelacznik jest polem wyboru bez atrybutu
   name (nie leci w formularzu), dzieki czemu rozwijanie dziala bez
   JavaScriptu i jest obslugiwane z klawiatury.
   ========================================================================= */

/* Korzen komponentu. Nie ma wlasnego wygladu - jest uchwytem dla skryptu
   odswiezajacego stan (data-klient, data-rola="licznik"/"pasek"). */
.checklista {
    min-width: 0;
}

.checklista__glowka {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.checklista__postep {
    flex: 1 1 220px;
    min-width: 180px;
}

.checklista__liczby {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.checklista__kroki {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-small);
    overflow: hidden;
}

.krok {
    border-bottom: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.015);
}

    .krok:last-child {
        border-bottom: none;
    }

    .krok--zrobiony {
        background: rgba(80, 227, 194, 0.06);
    }

/*
    flex-wrap jest tu po to, zeby rozwiniety panel szczegolow (.krok__panel)
    zszedl do wlasnego wiersza zamiast sciskac pole dowodu. Przy zamknietym
    panelu nie zmienia niczego, bo panel ma wtedy display: none.
*/
.krok__wiersz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    padding: 0.3rem 0.5rem;
}

/* Znacznik stanu kroku - kolko albo ptaszek. Ksztalt, nie sam kolor. */
.krok__stan {
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--text-muted);
}

    .krok--zrobiony .krok__stan {
        color: #50E3C2;
    }

.krok__nazwa {
    flex: 1 1 200px;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

    .krok--zrobiony .krok__nazwa {
        color: var(--text-primary);
    }

.krok__wymagany {
    color: var(--pink-medium);
    text-decoration: none;
    cursor: help;
}

/*
    Pole dowodu w wierszu, nie pod nim. Wszystkie dziewiec krokow procedury ma
    TypDowodu rozny od Brak, a usluga odrzuca ptaszek bez dowodu - gdyby pole
    bylo schowane, przycisk "Zrobione" konczylby sie czerwonym komunikatem.
*/
.krok__dowod {
    flex: 1 1 200px;
    min-width: 140px;
    max-width: 320px;
    min-height: 30px;
    padding: 3px 8px;
    font-size: 0.8rem;
}

.krok__zrob {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0.15rem 0.7rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

    /* Krok jeszcze niezrobiony - przycisk ma zachecac, a nie znikac w tle. */
    .krok__zrob--zrob {
        border-color: rgba(80, 227, 194, 0.45);
        background: rgba(80, 227, 194, 0.12);
        color: #7fecd4;
    }

        .krok__zrob--zrob:hover {
            border-color: #50E3C2;
            background: rgba(80, 227, 194, 0.2);
            color: #b6f5e6;
        }

/*
    Przelacznik szczegolow: prawdziwe pole wyboru bez `name`, wiec nie trafia
    do formularza. `appearance: none` zostawia je w kolejnosci fokusowania
    i pod spacja - czyli dziala z klawiatury, w odroznieniu od samej etykiety.
*/
.krok__wiecej {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    margin: 0;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-small);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
}

    .krok__wiecej::after {
        content: '';
        position: absolute;
        top: 8px;
        left: 8px;
        width: 7px;
        height: 7px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform var(--transition-fast);
    }

    .krok__wiecej:hover {
        border-color: var(--blue-accent);
        color: var(--text-primary);
    }

    .krok__wiecej:checked {
        color: var(--text-primary);
        background: rgba(102, 126, 234, 0.15);
    }

        .krok__wiecej:checked::after {
            transform: rotate(-135deg);
            top: 11px;
        }

.krok__panel {
    display: none;
    flex: 0 0 100%; /* wlasny wiersz pod paskiem kroku */
    padding: 0.1rem 0.4rem 0.4rem 1.6rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.krok__wiecej:checked ~ .krok__panel {
    display: block;
}

.krok__opis {
    margin: 0 0 0.4rem;
    line-height: 1.45;
}

.krok__podpis {
    margin-top: 0.35rem;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.checklista__stopka {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--glass-border);
}

.checklista__wyjasnienie {
    flex: 1 1 260px;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* =========================================================================
   12d. UKLAD DWUKOLUMNOWY I BLOK W RAMCE

   Zamiast siatki Bootstrapa (row / col-12 / col-lg-7): jedna klasa i jeden
   prog zalamania - ten sam 900 px, co reszta formularzy w tym projekcie.
   ========================================================================= */

.kolumny {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.9rem;
    align-items: start;
}

/* Wariant "szersza lewa" - lista czego jest duzo, panel akcji obok. */
.kolumny--7-5 {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.kolumny--4-8 {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}

@media (max-width: 900px) {
    .kolumny--7-5,
    .kolumny--4-8 {
        grid-template-columns: 1fr;
    }
}

.blok {
    min-width: 0;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-small);
    background: rgba(255, 255, 255, 0.02);
}

.blok__tytul {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.blok + .blok {
    margin-top: 0.9rem;
}

/* =========================================================================
   12e. MENU PODRECZNE (dzwonek powiadomien)

   BYLO: .dropdown-menu bez definicji, czyli menu widoczne ZAWSZE. Jego tresc
   ("Powiadomienia", przycisk "Oznacz wszystkie") lezala w naglowku karty
   i nachodzila na plakietke "Wdrozenie 0/9" - to jest ten nakladajacy sie
   napis ze zrzutu wlasciciela.

   JEST: <details>/<summary>. Otwieranie i zamykanie robi przegladarka,
   wiec nie potrzeba ani Bootstrapa, ani wlasnego skryptu.
   ========================================================================= */

.menu-podreczne {
    position: relative;
}

.menu-podreczne__przycisk {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    min-height: var(--przycisk-wys-maly);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-small);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none; /* chowa domyslny trojkacik <summary> */
    user-select: none;
}

    .menu-podreczne__przycisk::-webkit-details-marker {
        display: none;
    }

    .menu-podreczne__przycisk:hover {
        border-color: var(--blue-accent);
        color: var(--text-primary);
    }

.menu-podreczne__licznik {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.3rem;
    border-radius: 50px;
    background: var(--pink-medium);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.menu-podreczne__lista {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 300;
    width: min(340px, calc(100vw - 2rem)); /* nigdy szersze niz okno */
    max-height: 60vh;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-small);
    box-shadow: var(--shadow-card);
}

.menu-podreczne__glowka {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--glass-border);
    font-size: 0.85rem;
}

.menu-podreczne__pozycja {
    display: block;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.4;
    text-decoration: none;
}

    .menu-podreczne__pozycja:last-child {
        border-bottom: none;
    }

    .menu-podreczne__pozycja:hover {
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-primary);
    }

    .menu-podreczne__pozycja--nowa {
        color: var(--text-primary);
        font-weight: 600;
        border-left: 3px solid var(--blue-accent);
    }

.menu-podreczne__czas {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* Przycisk-odnosnik: akcja tekstowa bez ramki (np. "Oznacz wszystkie"). */
.przycisk-tekstowy {
    padding: 0;
    border: none;
    background: none;
    color: var(--blue-accent);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

    .przycisk-tekstowy:hover {
        color: var(--pink-light);
    }

/* =========================================================================
   12f. CZAT WSPARCIA (panel pracownika; dymek klienta siedzi w czat.css)
   ========================================================================= */

.czat-wsparcia {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 0.9rem;
    align-items: start;
}

@media (max-width: 900px) {
    .czat-wsparcia {
        grid-template-columns: 1fr;
    }
}

.czat-wsparcia__watki {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 420px;
    overflow-y: auto;
}

.czat-wsparcia__watek {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-small);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}

    .czat-wsparcia__watek:hover {
        border-color: var(--blue-accent);
        color: var(--text-primary);
    }

    .czat-wsparcia__watek--wybrany {
        border-color: var(--blue-accent);
        background: rgba(102, 126, 234, 0.14);
        color: var(--text-primary);
    }

.czat-wsparcia__okno {
    display: flex;
    flex-direction: column;
    height: 420px;
    min-width: 0;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-small);
    overflow: hidden;
}

.czat-wsparcia__naglowek {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--glass-border);
    font-size: 0.85rem;
}

.czat-wsparcia__wiadomosci {
    flex: 1;
    overflow-y: auto;
    padding: 0.6rem;
}

.czat-wsparcia__formularz {
    display: flex;
    gap: 0.4rem;
    padding: 0.4rem;
    border-top: 1px solid var(--glass-border);
}

    .czat-wsparcia__formularz .form-control {
        flex: 1;
        min-width: 0;
    }

.czat-wsparcia__dymek {
    display: flex;
    margin-bottom: 0.45rem;
}

    .czat-wsparcia__dymek--nasz {
        justify-content: flex-end;
    }

.czat-wsparcia__tresc {
    max-width: 80%;
    padding: 0.4rem 0.6rem;
    border-radius: var(--border-radius-small);
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.85rem;
}

    .czat-wsparcia__dymek--nasz .czat-wsparcia__tresc {
        background: rgba(102, 126, 234, 0.25);
    }

.czat-wsparcia__autor {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.czat-wsparcia__akapit {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* =========================================================================
   12g. DROBIAZGI WIDOKOW WSPARCIA
   ========================================================================= */

/* Pasek akcji nad trescia karty - naglowek z tytulem po lewej, akcjami po prawej. */
.karta-glowka {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.karta-glowka__akcje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

/*
    Wiersz formularza "pole + przycisk obok". Przycisk ma szerokosc wynikajaca
    z napisu - wlasciciel zglosil przyciski rozciagniete na cala szerokosc tam,
    gdzie nie ma to sensu.
*/
.wiersz-formularza {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

    .wiersz-formularza > .pole,
    .wiersz-formularza > .rozciagliwe {
        flex: 1 1 220px;
        min-width: 0;
        margin-bottom: 0;
    }

    .wiersz-formularza > .btn,
    .wiersz-formularza > .btn-duch {
        flex: 0 0 auto;
    }

/* Postep wdrozenia w wierszu tabeli - pasek plus liczby, bez lamania kolumny. */
.postep-w-wierszu {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 130px;
}

    .postep-w-wierszu .pasek-postepu {
        flex: 1;
        height: 6px;
    }

.postep-w-wierszu__liczby {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-secondary);
}

/* Karty zlecen projektanta - siatka bez Bootstrapa. */
.siatka-kart {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.9rem;
}

.karta-zlecenia {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-small);
    background: rgba(255, 255, 255, 0.02);
}

    .karta-zlecenia--wstrzymane {
        border-color: rgba(255, 152, 0, 0.45);
    }

    .karta-zlecenia--zakonczone {
        border-color: rgba(80, 227, 194, 0.4);
    }

.karta-zlecenia__glowka {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.karta-zlecenia__akcja {
    margin-top: auto;
}

/* Wybor etapu pracy: trzy przyciski w rzedzie, zawijane na waskim ekranie. */
.wybor-etapu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

    .wybor-etapu > .btn,
    .wybor-etapu > .btn-duch {
        flex: 1 1 150px;
    }

/* Aktywny etap - zaznaczony ramka, zeby bylo widac, gdzie jestesmy. */
.etap--wybrany {
    border-color: var(--blue-accent);
    background: rgba(102, 126, 234, 0.18);
    color: var(--text-primary);
}

/* =========================================================================
   12h. ODCZYT GOGLI (Support/Gogle)

   Ekran jest zlozony z klockow, ktore juz sa (.blok, .siatka-danych,
   .powiadomienie). Tu tylko to, czego tamte nie maja: lista krokow, plakietka
   kodu bledu i surowy komunikat przegladarki, ktory ma dac sie zaznaczyc
   i wkleic do zgloszenia jednym ruchem.
   ========================================================================= */

.odczyt-gogli__kroki {
    margin: 0 0 0.7rem;
    padding-left: 1.2rem;
    line-height: 1.5;
}

    .odczyt-gogli__kroki li + li {
        margin-top: 0.2rem;
    }

/* Kod (USB-09, CRM-02...) zostaje widoczny, bo po nim IT rozpoznaje sprawe w zgloszeniu. */
.odczyt-gogli__kod {
    display: inline-block;
    margin-right: 0.4rem;
    padding: 0 0.35rem;
    border-radius: 4px;
    border: 1px solid currentColor;
    font-family: Consolas, ui-monospace, monospace;
    font-size: 0.78em;
    font-weight: 600;
}

.odczyt-gogli__szczegoly {
    margin-top: 0.4rem;
}

    .odczyt-gogli__szczegoly > summary {
        cursor: pointer;
        font-size: 0.82rem;
        opacity: 0.8;
    }

    .odczyt-gogli__szczegoly > code {
        display: block;
        margin-top: 0.3rem;
        padding: 0.4rem 0.5rem;
        border-radius: 4px;
        border: 1px solid var(--glass-border);
        background: rgba(255, 255, 255, 0.04);
        font-family: Consolas, ui-monospace, monospace;
        font-size: 0.8rem;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        user-select: text;
    }

/* Odnosnik "Otworz karte klienta" pod zdaniem w powiadomieniu - bez tego przylegal do tekstu. */
.odczyt-gogli .powiadomienie__tresc > a {
    margin-top: 0.45rem;
}

/* =========================================================================
   13. OKNO DIALOGOWE (potwierdzenia, pytania, komunikaty)
   =========================================================================
   Zastepuje window.confirm / alert / prompt. Systemowe okno przegladarki
   ma naglowek "Komunikat ze strony localhost:5045", jasne tlo i przyciski
   systemu - w ciemnym panelu wyglada jak blad, a nie jak czesc aplikacji.
   Nie da sie go ostylowac, wiec budujemy wlasne na elemencie <dialog>:
   showModal() sam wysrodkowuje okno, blokuje reszte strony, trzyma fokus
   w srodku i zamyka sie klawiszem Esc - nie trzeba tego pisac recznie.
   Kod: wwwroot/js/crm.js, sekcja "Okno dialogowe".
   ========================================================================= */

.okno-dialogowe {
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    background: linear-gradient(180deg, #1a1a2c 0%, #12121a 100%);
    color: var(--text-primary);
    box-shadow: var(--shadow-card), 0 0 0 1px rgba(102, 126, 234, 0.08), 0 0 40px rgba(102, 126, 234, 0.12);
    animation: okno-dialogowe-wejscie 0.18s ease-out;
}

    .okno-dialogowe::backdrop {
        background: rgba(5, 5, 12, 0.66);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        animation: okno-dialogowe-tlo 0.18s ease-out;
    }

.okno-dialogowe__wnetrze {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.6rem var(--karta-pad) var(--karta-pad);
    text-align: center;
}

/* Kolo z ikona - kolor mowi o wadze pytania, zanim ktos przeczyta tekst. */
.okno-dialogowe__ikona {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(102, 126, 234, 0.4);
    background: rgba(102, 126, 234, 0.12);
    color: #a8b6f7;
}

    .okno-dialogowe__ikona svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.okno-dialogowe--ostrzezenie .okno-dialogowe__ikona {
    border-color: rgba(255, 152, 0, 0.45);
    background: rgba(255, 152, 0, 0.1);
    color: #ffc270;
}

.okno-dialogowe--niebezpieczne .okno-dialogowe__ikona,
.okno-dialogowe--blad .okno-dialogowe__ikona {
    border-color: rgba(233, 69, 96, 0.5);
    background: rgba(233, 69, 96, 0.12);
    color: #ff8fa3;
}

.okno-dialogowe--sukces .okno-dialogowe__ikona {
    border-color: rgba(80, 227, 194, 0.45);
    background: rgba(80, 227, 194, 0.1);
    color: #7fecd4;
}

.okno-dialogowe__tytul {
    margin: 0;
    font-family: 'Exo 2', sans-serif;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
    /* Naglowki w site.css ida wersalikami i szeroko - w pytaniu, ktore trzeba przeczytac
       do konca (czesto z numerem seryjnym albo nazwa konta), to meczy oko. Gradient marki
       z h2 zostaje. */
    text-transform: none;
    letter-spacing: 0.2px;
    overflow-wrap: anywhere;
}

.okno-dialogowe__tresc {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.okno-dialogowe__tresc:empty {
    display: none;
}

.okno-dialogowe__pole {
    width: 100%;
    margin-top: 0.25rem;
    text-align: left;
}

    .okno-dialogowe__pole label {
        display: block;
        margin-bottom: 0.3rem;
        font-size: var(--etykieta-font);
        font-weight: 600;
        color: var(--text-secondary);
    }

.okno-dialogowe__blad-pola {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: #ff8fa3;
}

.okno-dialogowe__akcje {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.6rem;
}

    .okno-dialogowe__akcje > button {
        flex: 1 1 140px;
        max-width: 200px;
        justify-content: center;
    }

    /* Anuluj jako przycisk-duch, ale tej samej wysokosci co przycisk glowny obok. */
    .okno-dialogowe__akcje > .btn-duch {
        min-height: var(--przycisk-wys);
        border-radius: 50px;
        font-size: 0.88rem;
        text-transform: uppercase;
        letter-spacing: 0.6px;
    }

/* Akcja nieodwracalna (odpiecie, zawieszenie, usuniecie) - czerwien zamiast gradientu marki. */
.okno-dialogowe__potwierdz--niebezpieczne {
    background: linear-gradient(135deg, #e94560 0%, #c41e3a 100%);
    box-shadow: 0 10px 20px rgba(233, 69, 96, 0.3);
}

    .okno-dialogowe__potwierdz--niebezpieczne:hover {
        box-shadow: 0 15px 30px rgba(233, 69, 96, 0.45);
    }

@media (max-width: 480px) {
    .okno-dialogowe__akcje > button {
        max-width: none;
        flex-basis: 100%;
    }
}

@keyframes okno-dialogowe-wejscie {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes okno-dialogowe-tlo {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =========================================================================
   14. KONTO META (karta klienta, zakladka "Skrzynka i Meta")

   Kod: wwwroot/js/konto-meta.js. Cztery PONUMEROWANE sekcje jednej ramki zamiast
   czterech osobnych .blok: w waskiej kolumnie obok skrzynki cztery ramki czytaly
   sie jak cztery niezalezne funkcje, a to jest jedna droga od gory do dolu
   (kto -> haslo -> zalozenie w Meta -> co dalej). Klocki juz sa w arkuszu
   (.pole, .pole-z-przyciskiem, .powiadomienie, .znacznik, .form-grid) - tu dochodzi
   tylko uklad sekcji, dwa stany pola hasla, lista brakow, kroki "co dalej"
   i przycisk-duch w wariancie niebezpiecznym.
   ========================================================================= */

/* Blok stoi w siatce .kolumny obok skrzynki. Ogolne ".blok + .blok { margin-top }" jest dla
   blokow jeden pod drugim - tu spychalo ramke Meta o 0.9rem nizej niz sasiadke w tym samym rzedzie. */
.kolumny > .konto-meta {
    margin-top: 0;
}

.konto-meta__glowka {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 0.6rem;
    margin-bottom: 0.35rem;
}

    .konto-meta__glowka .blok__tytul {
        margin: 0;
    }

.konto-meta__sekcja {
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--glass-border);
}

/*
    Naglowek sekcji: NIE Orbitron wersalikami z h4 w site.css - w kolumnie szerokosci
    pol ekranu cztery takie naglowki krzyczaly glosniej niz tytul bloku. Etykieta
    w tonie .dana__etykieta plus numer kroku w kole marki.
*/
.konto-meta__podtytul {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.65rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

    .konto-meta__podtytul > .ikona {
        color: var(--text-muted);
    }

.konto-meta__numer {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(102, 126, 234, 0.45);
    background: rgba(102, 126, 234, 0.14);
    color: #a8b6f7;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* Miejsce na komunikat po operacji. Puste nie zajmuje miejsca - inaczej pod kazdym
   przyciskiem wisialaby pusta linijka. */
.konto-meta__wynik {
    margin-top: 0.6rem;
}

    .konto-meta__wynik:empty {
        display: none;
    }

    .konto-meta__wynik .powiadomienie {
        margin-bottom: 0;
    }

.konto-meta__stan-hasla {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin: 0 0 0.55rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/*
    Pole hasla ma dwa stany: PUSTE z kropkami w placeholderze (ukryte - hasla nie ma
    w DOM-ie) i JAWNE po "Pokaż". Jawne dostaje zielona ramke, zeby z daleka bylo widac,
    ze haslo lezy na ekranie, i szerszy odstep miedzy znakami - "l" od "1" i "O" od "0"
    ma sie dac odroznic przy przepisywaniu do gogli.
*/
.konto-meta__haslo {
    letter-spacing: 0.08em;
}

    .konto-meta__haslo::placeholder {
        color: var(--text-muted);
        letter-spacing: 0.15em;
    }

    .konto-meta__haslo--jawne {
        border-color: rgba(80, 227, 194, 0.55);
        background: rgba(80, 227, 194, 0.07);
        color: #e9fffa;
        letter-spacing: 0.12em;
    }

/* Nowe haslo czekajace na zmiane w Meta - zolta ramka jak znacznik "oczekuje":
   sprawa czeka na ruch czlowieka po drugiej stronie. */
.konto-meta__nowe {
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(241, 196, 15, 0.4);
    border-left-width: 3px;
    border-radius: var(--border-radius-small);
    background: rgba(241, 196, 15, 0.06);
}

.konto-meta__nowe-tytul {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #f5d657;
}

/* Stale przypomnienie. Kolor ostrzezenia, ale BEZ ramki powiadomienia: to fakt o CRM,
   a nie komunikat - nie moze krzyczec glosniej niz prawdziwy blad pod przyciskiem. */
.konto-meta__uwaga {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #ffc270;
}

    .konto-meta__uwaga > .ikona {
        margin-top: 0.1rem;
    }

/* Braki przed rejestracja jako plakietki - trzy slowa czyta sie szybciej niz zdanie. */
.konto-meta__braki {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
}

    .konto-meta__braki > li {
        padding: 0.1rem 0.55rem;
        border-radius: 50px;
        border: 1px solid rgba(255, 152, 0, 0.45);
        background: rgba(255, 152, 0, 0.1);
        font-size: 0.78rem;
        font-weight: 600;
        color: #ffc270;
    }

/* "Konto zalozone - potwierdz" oddzielone przerywana ramka: to krok PO powrocie ze strony
   Meta, a nie druga wersja przycisku "Zaloz konto" obok. */
.konto-meta__potwierdzenie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding: 0.55rem 0.7rem;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: var(--border-radius-small);
}

.konto-meta__dalej {
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(80, 227, 194, 0.35);
    border-radius: var(--border-radius-small);
    background: rgba(80, 227, 194, 0.05);
}

.konto-meta__dalej-tytul {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #7fecd4;
}

/* Numery krokow z licznika CSS, nie wpisane recznie - dopisanie kroku nie wymaga
   przenumerowania, a czytnik ekranu i tak czyta <ol> jako liste numerowana. */
.konto-meta__kroki {
    counter-reset: krok-meta;
    margin: 0 0 0.65rem;
    padding: 0;
    list-style: none;
}

    .konto-meta__kroki > li {
        counter-increment: krok-meta;
        position: relative;
        padding-left: 1.9rem;
        font-size: 0.85rem;
        line-height: 1.5;
        color: var(--text-secondary);
    }

        .konto-meta__kroki > li + li {
            margin-top: 0.4rem;
        }

        .konto-meta__kroki > li::before {
            content: counter(krok-meta);
            position: absolute;
            left: 0;
            top: 0.08rem;
            display: grid;
            place-items: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid rgba(80, 227, 194, 0.45);
            color: #7fecd4;
            font-size: 0.7rem;
            font-weight: 700;
        }

    /* font-size: inherit - odnosnik bez tego wychodzil drobniejszy niz zdanie, w ktorym stoi. */
    .konto-meta__kroki a {
        color: var(--blue-accent);
        font-size: inherit;
        font-weight: 600;
    }

        .konto-meta__kroki a:hover {
            color: var(--pink-light);
        }

/* Historia: czas w stalej kolumnie, zeby piec wierszy dalo sie przeleciec wzrokiem w pionie. */
.konto-meta__zdarzenia {
    margin: 0;
    padding: 0;
    list-style: none;
}

.konto-meta__zdarzenie {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 0.6rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
}

    .konto-meta__zdarzenie:last-child {
        border-bottom: none;
    }

.konto-meta__czas {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.konto-meta__opis {
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.konto-meta__kto {
    grid-column: 2;
    overflow-wrap: anywhere;
}

/* Przycisk-duch dla akcji, ktora cos kasuje ("Porzuć nowe") - czerwien jak w oknie
   dialogowym przy akcji nieodwracalnej, ale bez ciezaru gradientu. */
.btn-duch--niebezpieczne {
    border-color: rgba(233, 69, 96, 0.45);
    color: #ff8fa3;
}

    .btn-duch--niebezpieczne:hover {
        border-color: #e94560;
        background: rgba(233, 69, 96, 0.14);
        color: #ffd0d8;
    }

/* Akcje sekcji bloku jednej wysokosci. Bylo: "Zapisz dane" 28 px (btn-sm), "Wylosuj hasło" i
   "Konto założone – potwierdź" 34 px, "Pokaż"/"Kopiuj" 42 px, "Załóż konto Meta" 40 px - cztery
   rozmiary w jednym bloku wygladaly jak doklejone z czterech ekranow. Glowne akcje sa .btn
   (--przycisk-wys), wiec przyciski-duchy w paskach sekcji dostaja te sama wysokosc. */
.konto-meta .pasek-narzedzi > .btn-duch,
.konto-meta__potwierdzenie > .btn-duch {
    min-height: var(--przycisk-wys);
}

/* Na telefonie (mobile.css od 767 px rozciaga KAZDY .btn na cala szerokosc) przyciski-duchy
   w paskach sekcji robia to samo - inaczej "Zapisz dane" szlo na cala szerokosc, a "Wylosuj
   nowe hasło" obok zostawalo waskie. Wysokosc 44 px jak .btn tam: cel dla palca. */
@media (max-width: 767px) {
    .konto-meta .pasek-narzedzi > .btn-duch,
    .konto-meta__potwierdzenie > .btn-duch {
        flex: 1 1 100%;
        justify-content: center;
        min-height: 44px;
    }
}

/* Na telefonie pole hasla idzie nad przyciski - trzy kontrolki w jednym rzedzie
   sciskaly haslo do kilku znakow. */
@media (max-width: 480px) {
    .konto-meta .pole-z-przyciskiem {
        flex-wrap: wrap;
    }

        .konto-meta .pole-z-przyciskiem .form-control {
            flex-basis: 100%;
        }
}