/*
 * iOS / iPadOS Safari: safe areas, dynamic viewport, touch, and document scroll
 * (Safari minimizes tab/address UI when the main document scrolls — avoid nested scroll traps).
 * Selectors use #app-page-root / #navigation / #main-content so these rules win over Blazor scoped CSS.
 */

#app-page-root > .background-transition-layer {
    inset: 0;
    width: auto;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
}

#app-page-root {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    background-color: var(--background-canvas, #0a0a0a);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    box-sizing: border-box;
}

/* Nav overlays page content (absolute in .page), scrolls away — not viewport-sticky */
#navigation.navbar,
#app-page-root > #navigation {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Nav: notch / status bar */
#navigation .navbar-inner {
    padding-top: calc(10px + env(safe-area-inset-top, 0));
    padding-left: calc(16px + env(safe-area-inset-left, 0));
    padding-right: calc(16px + env(safe-area-inset-right, 0));
    background: transparent !important;
}

main#main-content {
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0));
}

#app-page-root .battery-footer {
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 4px);
}

#blazor-error-ui {
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0));
}

@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea {
        font-size: max(16px, 1rem);
    }
}

a,
button,
.btn,
[role="button"],
input[type="submit"],
input[type="button"],
.menu-button {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.12);
    touch-action: manipulation;
}