/* Platform-specific global styles for iOS, Android, and PWA support */

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* iOS Safe Areas Only (platform-ios set by script) */
.platform-ios {
    padding-top: var(--safe-area-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.platform-ios .rz-layout {
    /* Reduce total available height by safe areas */
    min-height: calc(100vh - var(--safe-area-bottom));
    max-height: calc(100vh - var(--safe-area-bottom));
}

.platform-ios .main-content {
    /* Content area accounts for reduced viewport */
    min-height: calc(100vh - var(--safe-area-bottom) - var(--header-height));
    max-height: calc(100vh - var(--safe-area-bottom) - var(--header-height));
}

/* Android Device Styles (platform-android set by script) */
.platform-android .rz-layout,
.platform-android .rz-body,
.platform-android .main-content,
.platform-android .rz-row,
.platform-android .rz-column {
    width: 100% !important;       /* fixes scrollbar issue */
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-x: hidden !important;
    margin: 0 auto !important;    /* centers safely */
    padding: 0 !important;        /* removes misalignment */
}

/* Android PWA overrides (fixes edge-to-edge devices like S21+) */
.platform-android.pwa {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.platform-android.pwa,
.platform-android.pwa body,
.platform-android.pwa .rz-layout {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
}

/* ANDROID + PWA (scoped, no nuclear overflow):
   Hide scrollbars while preserving scroll behavior. */
.platform-android.pwa body {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}

.platform-android.pwa body::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
    -webkit-appearance: none !important;
}

/* Prefer container-level control for scrolling regions */
.platform-android.pwa .scroll-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.platform-android.pwa .scroll-container::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
    -webkit-appearance: none !important;
}

/* PWA layout container sizing (works for both platforms when .pwa is present) */
.pwa .rz-layout {
    position: relative;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    contain: layout paint;
    transform: translateZ(0);
    will-change: transform;
}

/* Mobile-specific iOS adjustments */
@media (max-width: 1024px) {
    .platform-ios .main-content {
        /* Account for mobile header height differences */
        min-height: calc(100vh - var(--safe-area-bottom) - 120px);
        max-height: calc(100vh - var(--safe-area-bottom) - 120px);
    }
}

/* Fix iOS header overlap with cap */
.platform-ios .header-container,
.platform-ios .mobile-header-container {
    padding-top: min(env(safe-area-inset-top, 0px), 40px);
}

/* Fix iOS dialogs overlapping the notch/Dynamic Island.
   Radzen dialogs use position:fixed and ignore body padding,
   so we must inset them within safe areas directly. */
.platform-ios .rz-dialog-wrapper {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
}