/**
 * WebView / APK compatibility – same UI in browser and in-app WebView
 * Fixes height (100vh/dvh), touch, safe areas, and fixed header/footer
 */

/* Base height chain for percentage-based layout in WebView */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    height: 100%;
}
body {
    min-height: 100%;
    height: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Safe area for notched devices (APK fullscreen) */
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* Use CSS variable --vh (set by JS) for correct viewport height in WebView */
.index-dashboard-scroll {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overflow-x: hidden;
}
.ratan-dashboard {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

/* Left menu full height – WebView friendly */
.left-menu {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    max-height: 100%;
}

/* Login / full-page height fallback */
.login-page-body {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}

/* Add fund / wallet type pages */
.add-fund-page {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    -webkit-overflow-scrolling: touch;
}

/* Fixed footer – prevent overlap; safe area bottom */
footer.fixed-bottom {
    left: 0;
    right: 0;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
}

/* Fixed header – safe area top */
header.fixed-top {
    left: 0;
    right: 0;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-top: env(safe-area-inset-top, 0);
}

/* Touch-friendly tap targets */
a, button, .btn-play-now, .index-hdr-btn, .chart-link {
    -webkit-tap-highlight-color: rgba(214, 190, 102, 0.3);
    touch-action: manipulation;
}

/* Prevent pull-to-refresh / overscroll breaking layout (optional, for WebView) */
.index-dashboard-scroll {
    overscroll-behavior-y: contain;
}

@media (max-width: 767px) {
    .index-page-body {
        min-height: 100vh;
        min-height: calc(var(--vh, 1vh) * 100);
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .ratan-dashboard,
    .index-dashboard-scroll {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        max-height: calc(var(--vh, 1vh) * 100);
    }
}