/* Installeerbare app (PWA): alleen wat anders moet als Carstats als app op het beginscherm draait
   (display-mode: standalone). Geldt voor beide layouts (Layout en LayoutAnonymous). */

/* Uitleg voor iOS (_PwaInstallModal.cshtml). */
.pwa-install-steps {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.pwa-install-steps li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.pwa-install-step-icon {
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

.pwa-install-note {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.75;
}

/* Door viewport-fit=cover loopt de pagina in liggende stand onder de notch door; houd die kanten vrij. */
@media (max-width: 991px) {
    .app-shell,
    .anon-wrapper {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

@media (display-mode: standalone) {
    /* iOS: de statusbalk is doorzichtig (black-translucent, witte tekst). Een vaste donkerblauwe strook
       eronder houdt de klok leesbaar, ook op de lichte pagina's, en is gelijk aan theme_color op Android.
       Boven de offcanvas (1045) en de onderbalk (1050), onder niets: er hoort daar niets anders te staan. */
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: env(safe-area-inset-top);
        background: #132845;
        z-index: 1070;
    }

    .app-shell,
    #navigation .navigation-offcanvas,
    .modal {
        padding-top: env(safe-area-inset-top);
    }

    /* Publieke kant: de vaste navigatiebalk schuift onder de strook, de pagina (68px voor die balk, zie anonymous.css) mee. */
    .anon-navbar.fixed-top {
        top: env(safe-area-inset-top);
    }

    .anon-main {
        padding-top: calc(68px + env(safe-area-inset-top));
    }

    /* Geen "stuiteren" voorbij de boven- en onderrand, zoals een app. */
    html,
    body {
        overscroll-behavior-y: none;
    }

    /* Al geïnstalleerd: de installatieknop heeft geen zin meer (pwa.js laat hem dan ook verborgen). */
    [data-pwa-install] {
        display: none !important;
    }
}