:root {
    --mobile-tab-bar-height: 3.9rem;
    /* Odstępy pływającej pigułki od krawędzi ekranu - pasek siedzi nisko, więc
       od dołu odstęp jest wyraźnie mniejszy niż po bokach. */
    --mobile-tab-bar-gap-x: 0.75rem;
    --mobile-tab-bar-gap-bottom: 0.3rem;
    /* Wcięcie kapsuły aktywnej zakładki od krawędzi paska - takie samo z góry,
       z dołu i z boku. */
    --mobile-tab-bar-inset: 0.3rem;
    /* Miejsce, które pasek zajmuje na dole ekranu razem z marginesami. */
    --mobile-tab-bar-total-height: calc(var(--mobile-tab-bar-height) + var(--mobile-tab-bar-gap-bottom) + env(safe-area-inset-bottom, 0px));
    --mobile-top-bar-height: 2.75rem;
}

/* begin: mobile UX (uniwersalne usprawnienia dotyku) */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

:root {
    accent-color: var(--bs-primary);
}

a,
button,
[role="button"],
.btn,
label,
summary {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@media (max-width: 991.98px) {
    /* iOS auto-zoomuje na focus, gdy font inputa < 16px */
    input,
    select,
    textarea {
        font-size: 16px;
    }

    /* pull-to-refresh / scroll-chaining nie przeskakuje do body */
    body {
        overscroll-behavior-y: contain;
    }
}
/* end: mobile UX */

/* begin: PWA (klasę .pwa dokłada assets/pwa.js tylko w zainstalowanej aplikacji) */
html.pwa,
html.pwa body {
    /* Gumowe odbijanie i pull-to-refresh w oknie aplikacji wygląda jak usterka. */
    overscroll-behavior: none;
}

html.pwa {
    /* pan-x pan-y zostawia przewijanie, a odbiera pinch-zoom i zoom po dwukliku
       - w appce to przypadkowe gesty, nie funkcja. */
    touch-action: pan-x pan-y;
}

html.pwa body {
    /* Długie przytrzymanie nie wywołuje systemowego menu „kopiuj / udostępnij". */
    -webkit-touch-callout: none;
}

/* Chrome aplikacji nie zaznacza się jak tekst. Treść - tabele, formularze,
   karty - zostaje zaznaczalna, bo z niej się kopiuje. */
html.pwa .sidebar,
html.pwa .mobile-top-bar,
html.pwa .mobile-tab-bar,
html.pwa .navbar,
html.pwa .btn,
html.pwa .nav-link,
html.pwa .dropdown-item {
    -webkit-user-select: none;
    user-select: none;
}
/* end: PWA */

/* begin: mobile top bar (górny pasek z użytkownikiem) */
.mobile-top-bar {
    display: none;
}

@media (max-width: 991.98px) {
    .mobile-top-bar {
        position: fixed;
        z-index: 1030;
        top: 0;
        right: 0;
        left: 0;
        display: flex;
        align-items: center;
        min-height: var(--mobile-top-bar-height);
        padding: 0 0.75rem;
        padding-top: env(safe-area-inset-top, 0px);
        background: #1d1d21;
        border-bottom: 1px solid #2d2d31;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);

        /* Equal-growth side slots keep the title centered on the bar. */
        .mobile-top-bar-start,
        .mobile-top-bar-end {
            display: flex;
            flex: 1 1 0;
            align-items: center;
        }

        .mobile-top-bar-end {
            justify-content: flex-end;
            gap: 0.15rem;
        }

        .mobile-top-bar-title {
            flex: 0 1 auto;
            min-width: 0;
            padding: 0 0.5rem;
            color: #fff;
            font-size: 0.95rem;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mobile-top-bar-avatar {
            display: flex;
            align-items: center;
            padding: 0.2rem 0.3rem;
            color: #fff;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;

            img {
                width: 1.8rem;
                height: 1.8rem;
                border-radius: 50%;
                object-fit: cover;
                background: #616167;
            }
        }

        .mobile-top-bar-back,
        .mobile-top-bar-action {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 2.2rem;
            height: 2.2rem;
            padding: 0 0.4rem;
            color: #fff;
            font-size: 1.05rem;
            background: none;
            border: 0;
            border-radius: 50%;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
        }

        .mobile-top-bar-back {
            margin-left: -0.4rem;
        }

        .mobile-top-bar-action:last-child {
            margin-right: -0.4rem;
        }

        .mobile-top-bar-back:active,
        .mobile-top-bar-action:active {
            background: #2c2c30;
        }

        /* ciemny dropdown — jak na railbarze, ale rozwijany w dół pod przyciskiem */
        .dropdown-menu {
            top: 100% !important;
            bottom: auto !important;
            left: 0 !important;
            right: auto !important;
            margin: 0.55rem 0 0 !important;
            transform: none !important;
            min-width: 248px;
            padding: 0.5rem;
            background: #2e2e31;
            border: 1px solid #43434a;
            border-radius: 0.9rem;
            box-shadow: 0 1rem 2.75rem rgba(0, 0, 0, 0.6);
        }

        /* strzałka „dymka" wskazująca w górę na avatar */
        .dropdown-menu::before,
        .dropdown-menu::after {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
            pointer-events: none;
        }

        .dropdown-menu::before {
            top: -10px;
            left: 16px;
            border-width: 0 9px 10px 9px;
            border-color: transparent transparent #43434a transparent;
        }

        .dropdown-menu::after {
            top: -8px;
            left: 17px;
            border-width: 0 8px 9px 8px;
            border-color: transparent transparent #2e2e31 transparent;
        }

        .dropdown-header {
            line-height: 1.35;
            padding: 0.55rem 0.85rem 0.8rem;
            margin-bottom: 0.4rem;
            border-bottom: 1px solid #43434a;
        }

        .dropdown-header .fw-semibold {
            color: #fff;
            font-size: 1.05rem;
        }

        .dropdown-header .text-muted {
            color: #aab0ba !important;
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            color: #cdd2da;
            padding: 0.65rem 0.85rem;
            border-radius: 0.6rem;
            font-size: 0.975rem;
            transition: background .1s ease-in-out, color .1s ease-in-out;
        }

        .dropdown-item:hover,
        .dropdown-item:focus {
            background: #2c2c30;
            color: #fff;
        }

        /* szybkie pojawienie jak na railbarze (zamiast wolnego defaultu motywu) */
        .dropdown-menu.show {
            animation: mobileTopBarDropdownIn 0.12s ease-out;
        }
    }

    /* Title and buttons of the header card live in the top bar on mobile. */
    .header-card {
        display: none;
    }

    .main > .content {
        margin-top: calc(var(--mobile-top-bar-height) + env(safe-area-inset-top, 0px) + 1rem);
        padding-left: 0;
        padding-right: 0;
    }
}

@keyframes mobileTopBarDropdownIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* end: mobile top bar */

/* begin: mobile tab bar (pływająca pigułka nawigacji, wzorowana na iOS) */
.mobile-tab-bar {
    display: none;
}

@media (max-width: 991.98px) {
    .mobile-tab-bar {
        position: fixed;
        z-index: 1030;
        right: var(--mobile-tab-bar-gap-x);
        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-tab-bar-gap-bottom));
        left: var(--mobile-tab-bar-gap-x);
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        height: var(--mobile-tab-bar-height);
        /* Pigułka: promień = połowa wysokości, więc boki są idealnie półkoliste. */
        border-radius: calc(var(--mobile-tab-bar-height) / 2);
        /* Szkło: półprzezroczyste tło + rozmycie tego, co pod paskiem. */
        background: rgba(29, 29, 33, 0.72);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.09);
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.45),
            0 2px 6px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);

        .mobile-tab-bar-item {
            position: relative;
            z-index: 1;
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.2rem;
            padding: 0.25rem 0.15rem;
            color: #a1a5b0;
            font-size: 0.65rem;
            line-height: 1;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
            transition: color 0.15s ease-out, transform 0.12s ease-out;

            .mobile-tab-bar-icon {
                position: relative;
                display: inline-grid;
                place-items: center;
                font-size: 1.2rem;
                line-height: 1;

                > i {
                    grid-area: 1 / 1;
                    line-height: 1;
                }
            }

            /* overflow: hidden (for the ellipsis) clips to the line box, so the
               line-height must leave room for diacritics and descenders. */
            .mobile-tab-bar-label {
                max-width: 100%;
                line-height: 1.3;
                font-weight: 500;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .mobile-tab-bar-badge {
                position: absolute;
                top: -0.4rem;
                left: 60%;
                min-width: 1rem;
                padding: 0 0.25rem;
                border-radius: 0.5rem;
                background: var(--bs-primary);
                color: #fff;
                font-size: 0.6rem;
                font-weight: 600;
                line-height: 1rem;
                text-align: center;
            }
        }

        /* Dociśnięcie zakładki - lekkie wgniecenie, jak w natywnym pasku. */
        .mobile-tab-bar-item:active {
            transform: scale(0.92);
        }

        .mobile-tab-bar-item.active {
            color: #fff;
            font-weight: 600;
        }

        /* Jeden wspólny wskaźnik aktywnej zakładki - kapsuła pod ikoną, która
           przejeżdża między zakładkami zamiast przeskakiwać. Pozycję (środek
           aktywnej zakładki) ustawia JS w --mobile-tab-indicator-x; .is-static
           wyłącza przejście na pierwszym malowaniu i przy resize, żeby nie
           animować z lewej krawędzi. */
        .mobile-tab-bar-indicator {
            position: absolute;
            top: var(--mobile-tab-bar-inset);
            bottom: var(--mobile-tab-bar-inset);
            left: 0;
            z-index: 0;
            /* Kapsuła jest węższa od zakładki o 2x wcięcie, więc przy skrajnej
               zakładce odstaje od krawędzi paska dokładnie tyle samo, co od
               góry. Liczbę zakładek wstawia komponent w --mobile-tab-count. */
            width: calc(100% / var(--mobile-tab-count, 5) - var(--mobile-tab-bar-inset) * 2);
            border-radius: calc(var(--mobile-tab-bar-height) / 2 - var(--mobile-tab-bar-inset));
            /* Rozjaśnione tło, nie akcent - aktywną zakładkę wyróżnia sam kolor
               ikony i etykiety. */
            background: rgba(255, 255, 255, 0.11);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
            opacity: 0;
            transform: translateX(var(--mobile-tab-indicator-x, 0px)) translateX(-50%);
            transition: transform 0.40s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.2s ease-out;
            will-change: transform;
            pointer-events: none;
        }

        .mobile-tab-bar-indicator.is-visible {
            opacity: 1;
        }

        .mobile-tab-bar-indicator.is-static {
            transition: none;
        }

        /* Ikona zakładki: outline (far) + solid (fas) nałożone w jednej komórce
           gridu. Zmiana zakładki odsłania solid od lewej, a outline znika z lewej
           tą samą linią (keyframe'y rail-icon-* z _sidebar.scss / app.css).
           Animacja tylko przy realnej zmianie - JS (liframe.js) dokłada
           .tab-animating / .tab-deanimating po nawigacji, gdy klucz aktywnej
           zakładki się zmieni. */
        /* The clip extends past the <i> box on every open edge - with inset(0)
           glyphs touching the box edge lost their antialiased top/bottom pixels. */
        .mobile-tab-bar-icon-base {
            clip-path: inset(-0.25em);
        }

        .mobile-tab-bar-icon-fill {
            clip-path: inset(-0.25em calc(100% + 0.25em) -0.25em -0.25em);
        }

        .mobile-tab-bar-item.active .mobile-tab-bar-icon-fill {
            clip-path: inset(-0.25em);
        }

        .mobile-tab-bar-item.active .mobile-tab-bar-icon-base {
            clip-path: inset(-0.25em -0.25em -0.25em calc(100% + 0.25em));
        }

        .mobile-tab-bar-item.tab-animating .mobile-tab-bar-icon-fill {
            animation: rail-icon-fill 0.75s cubic-bezier(0.33, 1, 0.68, 1);
        }

        .mobile-tab-bar-item.tab-animating .mobile-tab-bar-icon-base {
            animation: rail-icon-base-hide 0.75s cubic-bezier(0.33, 1, 0.68, 1);
        }

        /* Poprzednio aktywna zakładka: solid spływa do outline'u (fas -> far),
           keyframe'y grane do przodu (easeOut, bez opóźnienia jak przy reverse). */
        .mobile-tab-bar-item.tab-deanimating .mobile-tab-bar-icon-fill {
            animation: rail-icon-fill-out 0.75s cubic-bezier(0.33, 1, 0.68, 1);
        }

        .mobile-tab-bar-item.tab-deanimating .mobile-tab-bar-icon-base {
            animation: rail-icon-base-show 0.75s cubic-bezier(0.33, 1, 0.68, 1);
        }

        @media (prefers-reduced-motion: reduce) {
            .mobile-tab-bar-item.tab-animating .mobile-tab-bar-icon-base,
            .mobile-tab-bar-item.tab-animating .mobile-tab-bar-icon-fill,
            .mobile-tab-bar-item.tab-deanimating .mobile-tab-bar-icon-base,
            .mobile-tab-bar-item.tab-deanimating .mobile-tab-bar-icon-fill {
                animation: none;
            }

            .mobile-tab-bar-indicator {
                transition: none;
            }

            .mobile-tab-bar-item:active {
                transform: none;
            }
        }
    }

    /* Bez backdrop-filter półprzezroczyste tło przepuszczałoby treść - wtedy
       pasek zostaje kryty. */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .mobile-tab-bar {
            background: #1d1d21;
        }
    }

    /* keep the floating bar from covering page content */
    .content {
        padding-bottom: calc(var(--mobile-tab-bar-total-height) + 0.75rem);
    }
}
/* end: mobile tab bar */

/* begin: mobile grid (tabela z poziomym scrollem — dopieszczona pod dotyk) */
@media (max-width: 991.98px) {
    .grid {
        /* karta przycina zaokrąglone rogi przewijanej tabeli */
        > .card {
            overflow: hidden;
            border-radius: 0.85rem;
        }

        .grid-buttons {
            flex-wrap: wrap;
        }

        table.table tr th:first-child,
        table.table tr td:first-child {
            padding-left: 1.25rem;
        }

        table.table tr th:last-child,
        table.table tr td:last-child {
            padding-right: 1.25rem;
        }

        .grid-buttons .btn,
        .grid-bulk-actions__buttons .btn {
            min-height: 2.4rem;
        }

        /* pływający pasek akcji masowych ustawia się nad dolnym tab barem */
        .grid-bulk-actions {
            bottom: calc(var(--mobile-tab-bar-total-height) + 0.5rem);
        }

        /* tabela staje się własnym kontenerem przewijania w poziomie,
           ale zachowuje wyrównanie kolumn (display:block + width:max-content) */
        table.table {
            display: block;
            width: max-content;
            max-width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;

            /* cień-podpowiedź, że treść przewija się w bok (znika na końcach) */
            background:
                linear-gradient(to right, #fff 15%, rgba(255, 255, 255, 0)) 0 0,
                linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) 100% 0,
                linear-gradient(to right, rgba(100, 100, 100, 0.38) 0%, rgba(100, 100, 100, 0.16) 15%, rgba(100, 100, 100, 0.04) 60%, rgba(16, 16, 18, 0)) 0 0,
                linear-gradient(to left, rgba(100, 100, 100, 0.38) 0%, rgba(100, 100, 100, 0.16) 30%, rgba(100, 100, 100, 0.04) 60%, rgba(16, 16, 18, 0)) 100% 0;
            background-repeat: no-repeat;
            background-size: 36px 100%, 36px 100%, 22px 100%, 22px 100%;
            background-attachment: local, local, scroll, scroll;
        }

        table.table::-webkit-scrollbar {
            height: 6px;
        }

        table.table::-webkit-scrollbar-thumb {
            background: rgba(16, 16, 18, 0.22);
            border-radius: 3px;
        }

        /* wygodniejsze cele dotyku w wierszach */
        table.table tbody td,
        table.table tbody th {
            padding-top: 0.7rem;
            padding-bottom: 0.7rem;
        }

        table.table .btn-grid {
            width: 38px;
            height: 38px;
        }

        /* kolumny oznaczone hideOnMobile znikają na małych ekranach */
        table.table .grid-hide-mobile {
            display: none;
        }

        /* kolumna z akcjami trzyma się prawej krawędzi mimo poziomego scrolla; */
        table.table .grid-action {
            position: sticky;
            right: 0;
            z-index: 1;
        }

        /* nagłówek akcji nad przewijaną treścią */
        table.table thead .grid-action {
            z-index: 2;
        }
    }

    /* Footer is just the pagination on mobile: no summary, no per-page select,
       buttons stretched across the full width as large touch targets. */
    .grid .grid-footer {
        display: block;
        padding: 0.75rem;

        .summary,
        .grid-per-page {
            display: none;
        }

        .grid-footer__controls,
        nav {
            display: block;
            width: 100%;
        }

        .pagination {
            display: flex;
            gap: 0.3rem;
            width: 100%;
        }

        /* Only the current page's neighbours plus first/last stay visible. */
        .pagination .page-item--far {
            display: none;
        }

        .pagination .page-item {
            flex: 1 1 0;
            min-width: 0;
        }

        .pagination .page-link {
            min-width: 0;
            height: 2.75rem;
            padding: 0;
            border-radius: 0.65rem;
            font-size: 0.95rem;
            font-variant-numeric: tabular-nums;
        }

        .pagination .page-item:first-child .page-link,
        .pagination .page-item:last-child .page-link {
            font-size: 1.15rem;
        }

        .pagination .page-item.disabled[aria-hidden="true"] .page-link {
            border-color: transparent;
            background: none;
        }
    }
}
/* end: mobile grid */

/* begin: mobile modal (bottom sheet — arkusz wysuwany od dołu) */
@media (max-width: 991.98px) {
    /* An open modal freezes the page underneath; mobile.js additionally stops
       touch gestures from chaining to it (older iOS ignores overflow here). */
    html:has(#modal-manager .modal),
    html:has(#modal-manager .modal) body {
        overflow: hidden;
    }

    .modal {
        overscroll-behavior: contain;
    }

    .modal .modal-dialog {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none !important;
        margin: 0;
    }

    .modal .modal-content {
        max-height: 92vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 0.25rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        border-radius: 1.25rem 1.25rem 0 0;
        animation: modal-sheet-in 0.28s cubic-bezier(0.32, 0.72, 0, 1);

        /* uchwyt (grabber) jak w natywnych arkuszach */
        &::before {
            content: "";
            display: block;
            width: 2.25rem;
            height: 0.3rem;
            margin: 0.4rem auto 0.85rem;
            border-radius: 1rem;
            background: #d4d4da;
        }

        /* przyciski akcji pełnej szerokości — wygodne dla kciuka */
        .modal-buttons {
            display: flex;
            gap: 0.6rem;
            margin-top: 1.5rem;

            .btn {
                flex: 1 1 0;
                margin-left: 0 !important;
                min-height: 2.85rem;
                padding: 0.7rem 1rem;
            }
        }
    }

    /* Modal.close() adds .modal-closing before Livewire removes the modal, so
       the sheet slides down; after a swipe it starts from --modal-sheet-offset. */
    .modal.modal-closing .modal-content {
        animation: modal-sheet-out 0.24s cubic-bezier(0.4, 0, 1, 1) forwards;
    }
}

@keyframes modal-sheet-in {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes modal-sheet-out {
    from {
        transform: translateY(var(--modal-sheet-offset, 0px));
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}
/* end: mobile modal */

/* begin: progress bar (pasek wire:navigate - NProgress wstrzykiwany przez Livewire) */
/* NProgress trzyma pasek na sztywno w top: 0, więc na mobile chowałby się za
   górnym paskiem. Zsuwamy go o jego wysokość razem z bezpiecznym marginesem
   iOS. Warunek :has pilnuje, żeby nie ruszać paska tam, gdzie topbaru nie ma
   (ekrany logowania korzystają z tego samego arkusza). */
@media (max-width: 991.98px) {
    body:has(.mobile-top-bar) #nprogress .bar {
        top: calc(var(--mobile-top-bar-height) + env(safe-area-inset-top, 0px));
    }
}
/* end: progress bar */

/* begin: mobile cards */
@media (max-width: 991.98px) {
    .card {
        box-shadow: none;
    }

    .card-header {
        padding: 0.75rem 1rem;
    }
}
/* end: mobile cards */

/* begin: mobile page transition (wire:navigate) */
@media (max-width: 991.98px) {
    /* Fade-through: Livewire swaps the whole <body> at once, so the outgoing
       page cannot fade out - only the incoming content fades in while the top
       and tab bars stay put. mobile.js adds the class right after the swap.
       Opacity only: a transform would re-anchor position: fixed children
       (e.g. the grid bulk actions bar) for the duration of the animation. */
    .content.page-entering {
        animation: mobile-page-in 0.32s cubic-bezier(0.2, 0, 0, 1);
    }
}

@keyframes mobile-page-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content.page-entering {
        animation: none;
    }
}
/* end: mobile page transition */

/* begin: mobile toasts (native-like banner under the top bar) */
@media (max-width: 991.98px) {
    #toast-container {
        top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
        right: var(--mobile-tab-bar-gap-x);
        bottom: auto;
        left: var(--mobile-tab-bar-gap-x);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        pointer-events: none;
    }

    body:has(.mobile-top-bar) #toast-container {
        top: calc(var(--mobile-top-bar-height) + env(safe-area-inset-top, 0px) + 0.5rem);
    }

    #toast-container > div,
    #toast-container > div:hover {
        width: 100%;
        max-width: 28rem;
        margin: 0;
        padding: 0.8rem 2.9rem 0.8rem 2.85rem;
        border-radius: 1.5rem;
        /* Same glass as the tab bar, so toasts read as part of the app chrome. */
        background-color: rgba(14, 14, 16, 0.9);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid #000;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
        color: #fff;
        font-size: 0.9rem;
        line-height: 1.35;
        pointer-events: auto;
        /* toastrEnter slides in sideways through inline transform; on mobile the
           banner drops from the top via the independent translate property. */
        transform: none !important;
        animation: mobile-toast-in 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #toast-container .toast-message,
    #toast-container .toast-message a,
    #toast-container .toast-message label {
        color: #fff;
        overflow-wrap: anywhere;
    }

    #toast-container > div::before {
        left: 1.1rem;
        width: 1rem;
        height: 1rem;
    }

    #toast-container > .toast-success::before {
        background-color: #34c759;
    }

    #toast-container > .toast-error::before {
        background-color: #ff453a;
    }

    #toast-container > .toast-warning::before {
        background-color: #ffb340;
    }

    #toast-container > .toast-info::before {
        background-color: #64a8ff;
    }

    #toast-container .toast-close-button {
        top: 50%;
        right: 0.55rem;
        width: 2rem;
        height: 2rem;
        color: rgba(255, 255, 255, 0.7);
    }

    #toast-container .toast-close-button:hover,
    #toast-container .toast-close-button:focus {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.12);
    }

    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        #toast-container > div,
        #toast-container > div:hover {
            background-color: #0e0e10;
        }
    }
}

@keyframes mobile-toast-in {
    from {
        translate: 0 -1.5rem;
        scale: 0.96;
    }
    to {
        translate: 0 0;
        scale: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #toast-container > div {
        animation: none;
    }
}
/* end: mobile toasts */