/*
 * 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 {
    height: 100vh;
    height: 100dvh;
    min-height: -webkit-fill-available;
}

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

/* Fixed 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));
}

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

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

#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;
}