.dual-listbox__container .dual-listbox__item[data-type="label"] {
    text-transform: uppercase;
    font-size: 11px;
}

.dual-listbox__container .dual-listbox__item[data-type="label"]:not(.dual-listbox__item--selected) {
    background-color: #E5E7EB;
    color: rgb(107, 114, 128);
}

.dual-listbox__container .dual-listbox__item[data-type="page"] span{
    padding-left: 36px;
}

.dual-listbox__container .dual-listbox__item[data-type="page"]:not(.dual-listbox__item--selected) {
    background-color: #F3F4F6;
}

.dual-listbox__container .dual-listbox__item[data-type="action"] span{
    padding-left: 52px;
}

.dual-listbox__container .dual-listbox__item button {
    padding: 4px 8px;
}

.dual-listbox__container .dual-listbox__selected .dual-listbox__item button {
    margin-right: 8px;
}


.dual-listbox__container .dual-listbox__item.hidden {
    display: none !important;
}

.form-text.hidden {
    display: none !important;
}

.notificationElement .flex-fill .rounded {
    background-color: #bbd0fa;
    transition: background-color 0.5s;
    cursor: pointer;
}

.notificationElement:hover .flex-fill .rounded {
    background-color: #d7dfee;
}

.notificationElement.received .flex-fill .rounded {
    background-color: #E5E7EB;
}

.notificationElement.received:hover .flex-fill .rounded {
    background-color: #f8f8f8;
}
/* S-85: logo Interget w pasku górnym (images/logo-interget-pasek.png - jasna wersja na ciemny pasek), na ekranach logowania
   (images/logo-interget.png) i inicjały konta w kółku zamiast zdjęcia z szablonu. */
.navbar-brand img.interget-logo-pasek {
    height: 32px;
    width: auto;
}

@media (max-width: 575.98px) {
    .navbar-brand img.interget-logo-pasek {
        height: 26px;
    }
}

.interget-logo-logowanie {
    width: 168px;
    max-width: 100%;
    height: auto;
}

.interget-inicjaly {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #c01020;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
}

/* S-88: kreator wynajmu (views/pages/leases.kreator.html) - pasek kroków (stepper) i pasek akcji przyklejony do dołu.
   Tylko elementy z klasami k-* kreatora; kolory z motywu (--primary, --success, --warning, --gray-*). */
.k-stepper .k-kroki {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.k-stepper .k-krok-pozycja {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

/* Linia postępu: odcinek od poprzedniego kółka do bieżącego (kolor główny do bieżącego kroku włącznie). */
.k-stepper .k-krok-pozycja + .k-krok-pozycja::before {
    content: "";
    position: absolute;
    top: 1.125rem;
    left: calc(-50% + 1.5rem);
    right: calc(50% + 1.5rem);
    height: 2px;
    background-color: var(--gray-300, #E5E7EB);
}

.k-stepper .k-krok-pozycja.k-przebyty + .k-krok-pozycja.k-przebyty::before {
    background-color: var(--primary, #0c83ff);
}

.k-stepper .k-krok-przycisk {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 0.5rem 0.25rem;
    border: 0;
    border-radius: var(--border-radius, 0.375rem);
    background: none;
    color: inherit;
    text-align: center;
    cursor: pointer;
}

.k-stepper .k-krok-przycisk:focus-visible {
    outline: 2px solid var(--primary, #0c83ff);
    outline-offset: 2px;
}

.k-stepper .k-kolko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.375rem;
    border: 2px solid var(--gray-400, #D1D5DB);
    border-radius: 50%;
    background-color: var(--card-bg, #fff);
    color: var(--gray-600, #6B7280);
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.15s, border-color 0.15s;
}

.k-stepper .k-kolko .k-ikona {
    display: none;
    font-size: 1.125rem;
}

.k-stepper .k-krok-przycisk:hover .k-kolko {
    border-color: var(--primary, #0c83ff);
}

.k-stepper .k-krok-biezacy .k-kolko {
    border-color: var(--primary, #0c83ff);
    background-color: var(--primary, #0c83ff);
    color: #fff;
}

.k-stepper .k-krok-gotowy .k-kolko {
    border-color: var(--success, #059669);
    background-color: var(--success, #059669);
    color: #fff;
}

.k-stepper .k-krok-gotowy .k-numer {
    display: none;
}

.k-stepper .k-krok-gotowy .k-kolko .k-ikona {
    display: inline-block;
}

.k-stepper .k-krok-braki .k-kolko {
    border-color: var(--warning, #f58646);
    color: var(--warning, #f58646);
}

.k-stepper .k-nazwa {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gray-700, #4B5563);
}

.k-stepper .k-krok-biezacy .k-nazwa {
    font-weight: 600;
    color: var(--body-color, inherit);
}

.k-stepper .k-streszczenie {
    max-width: 100%;
    min-height: 1.25em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--gray-500, #9CA3AF);
}

.k-stepper .k-braki,
.k-stepper-telefon .k-braki {
    margin-top: 0.25rem;
    background-color: var(--warning, #f58646);
    color: #fff;
    font-weight: 500;
}

.k-stepper-telefon {
    display: none;
}

/* Pasek akcji: przyklejony do dołu ekranu na całą szerokość karty (tło karty, ramka i cień u góry). */
.k-stopka {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 1rem calc(-1 * var(--card-spacer-x, 1.25rem)) calc(-1 * var(--card-spacer-y, 1.25rem));
    padding: 0.75rem var(--card-spacer-x, 1.25rem);
    border-top: 1px solid var(--border-color, #E5E7EB);
    border-radius: 0 0 var(--card-inner-border-radius, 0.375rem) var(--card-inner-border-radius, 0.375rem);
    background-color: var(--card-bg, #fff);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}

.k-przyciski {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.k-przyciski .k-odstep {
    flex: 1 1 0;
}

.k-przyciski .k-wstecz {
    padding-left: 0.25rem;
    padding-right: 0.5rem;
    color: var(--gray-700, #4B5563);
    text-decoration: none;
}

.k-przyciski .k-wstecz:hover {
    color: var(--primary, #0c83ff);
}

.k-przyciski .k-autozapis {
    min-width: 0;
}

.k-przyciski .k-autozapis:empty {
    display: none;
}

.k-przyciski .btn-link {
    text-decoration: none;
}

/* S-94 (uwaga właściciela 22.10): pole z kursorem w wycenie i w formularzu dodatkowego sprzętu nie chowa się pod przyklejonym
   paskiem akcji ani pod nagłówkiem — wysokość paska ustawia lease-ui.js (--k-stopka-wysokosc), scrollIntoView liczy marginesy. */
.k-linia input, .k-linia select, .k-linia-zacheta input, .k-formularz-donajmu input, .k-formularz-donajmu select {
    scroll-margin-top: 5rem;
    scroll-margin-bottom: calc(var(--k-stopka-wysokosc, 0px) + 0.75rem);
}

/* Przycisk „do góry” szablonu (js/app.js) nad paskiem akcji kreatora, nie na „Dalej” / „Zatwierdź”. */
.k-stopka-obecna .btn-to-top {
    bottom: 7.5rem;
}

@media (max-width: 575.98px) {
    /* Telefon: „Krok 2 z 4 · nazwa”, cienki pasek postępu, kropki kroków (klikalne, pole dotyku 2.75rem). */
    .k-stepper-telefon {
        display: block;
        margin-bottom: 0.5rem;
    }

    .k-stepper-tytul {
        font-weight: 600;
    }

    .k-stepper-telefon .k-braki {
        margin-top: 0;
    }

    .k-postep {
        height: 4px;
        margin-top: 0.5rem;
        border-radius: 2px;
        background-color: var(--gray-200, #F3F4F6);
        overflow: hidden;
    }

    .k-postep-pasek {
        height: 100%;
        background-color: var(--primary, #0c83ff);
        transition: width 0.2s;
    }

    .k-stepper .k-kroki {
        justify-content: center;
        gap: 0.25rem;
    }

    .k-stepper .k-krok-pozycja {
        flex: 0 0 auto;
    }

    .k-stepper .k-krok-pozycja + .k-krok-pozycja::before {
        display: none;
    }

    .k-stepper .k-krok-przycisk {
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        justify-content: center;
    }

    .k-stepper .k-kolko {
        width: 0.75rem;
        height: 0.75rem;
        margin: 0;
        font-size: 0;
    }

    .k-stepper .k-krok-biezacy .k-kolko {
        width: 1.5rem;
        border-radius: 0.375rem;
    }

    .k-stepper .k-krok-gotowy .k-kolko .k-ikona,
    .k-stepper .k-nazwa,
    .k-stepper .k-streszczenie,
    .k-stepper .k-kroki .k-braki {
        display: none;
    }

    .k-stepper .k-krok-braki .k-kolko {
        background-color: var(--warning, #f58646);
    }

    /* Pasek akcji: autozapis w osobnym wierszu, przyciski min. 44 px, „Wstecz” i „Więcej” jako ikony, „Dalej” bez nazwy kroku. */
    .k-przyciski .k-autozapis {
        order: -1;
        flex: 1 0 100%;
    }

    .k-przyciski .btn {
        min-height: 2.75rem;
    }

    .k-przyciski .k-odstep {
        display: none;
    }

    .k-przyciski .k-wstecz,
    .k-przyciski .k-wiecej-przycisk,
    .k-przyciski #k-zapisz:not(.k-glowny) {
        min-width: 2.75rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .k-przyciski .k-wstecz-tekst,
    .k-przyciski .k-wiecej-tekst,
    .k-przyciski .k-dalej-cel,
    .k-przyciski .btn:not(.k-glowny) > .k-zapisz-tekst,
    .k-przyciski .k-zatwierdz-dopisek,
    .k-przyciski #k-zatwierdz-teraz {
        display: none;
    }

    .k-stopka #k-pasek .fs-5 {
        font-size: 1rem !important;
    }

    .k-stopka #k-pasek-przedplata {
        font-size: 0.8125rem;
    }

    .k-przyciski .k-glowny {
        flex: 1 1 auto;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        font-weight: 600;
    }
}

/* S-89 (decyzja właściciela 21.10.2026): objaśnienie trybu rozliczenia w kroku 4 kreatora - mała oś czasu z 3 kroków (kropka, tytuł,
   opis); desktop - w poziomie z linią między kropkami (jak pasek kroków S-88), telefon - w pionie. Teksty wstawia JS (textContent). */
.k-os {
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300, #E5E7EB);
    border-radius: var(--border-radius, 0.375rem);
    background-color: var(--gray-100, #F9FAFB);
}

.k-os-czasu {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.k-os-krok {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    padding-right: 1rem;
}

/* Linia od kropki do następnej kropki. */
.k-os-krok + .k-os-krok::before {
    content: "";
    position: absolute;
    top: 0.4375rem;
    left: calc(-100% + 1rem);
    right: calc(100% + 0.25rem);
    height: 2px;
    background-color: var(--gray-300, #E5E7EB);
}

.k-os-kropka {
    width: 0.875rem;
    height: 0.875rem;
    margin-bottom: 0.375rem;
    border: 2px solid var(--primary, #0c83ff);
    border-radius: 50%;
    background-color: var(--card-bg, #fff);
}

.k-os-krok:first-child .k-os-kropka {
    background-color: var(--primary, #0c83ff);
}

.k-os-tytul {
    font-weight: 600;
}

.k-os-tekst {
    color: var(--gray-600, #6B7280);
    font-size: 0.8125rem;
}

@media (max-width: 575.98px) {
    .k-os-czasu {
        flex-direction: column;
        gap: 0.5rem;
    }

    .k-os-krok {
        flex-direction: row;
        gap: 0.625rem;
        padding-right: 0;
    }

    /* Telefon: linia pionowa między kropkami. */
    .k-os-krok + .k-os-krok::before {
        top: calc(-0.5rem - 2px);
        left: 0.375rem;
        right: auto;
        width: 2px;
        height: 0.75rem;
    }

    .k-os-kropka {
        flex: 0 0 auto;
        margin-top: 0.1875rem;
        margin-bottom: 0;
    }
}