/* ============================================
   iOS PWA Fixes
   Addresses:
   - Rubber-band/bounce scrolling in Safari PWA
   - Side-to-side horizontal drift
   - Input zoom issues (iOS auto-zoom on focus)
   - Viewport height changes when keyboard opens/closes
   - Off-center layout after input blur
   ============================================ */

/* --------------------------------------------
   CSS Variables for dynamic viewport height
   Set by viewport-fixes.js to handle iOS keyboard
   -------------------------------------------- */
:root {
    --app-height: 100vh;
    --app-height-fallback: 100vh;
}

/* --------------------------------------------
   1. SINGLE SCROLL CONTAINER PATTERN
   Lock html/body, make .rz-body the sole scroller
   -------------------------------------------- */

/* Lock html and body to prevent double-scroll/rubber-band */
html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
    inset: 0;
    /* Prevent iOS overscroll on the document level */
    overscroll-behavior: none;
}

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
    inset: 0;
    /* Prevent iOS overscroll on the body level */
    overscroll-behavior: none;
}

/* --------------------------------------------
   2. RADZEN LAYOUT - SINGLE SCROLL CONTAINER
   Make .rz-body the only vertical scroller
   -------------------------------------------- */

/* RadzenLayout should fill the viewport */
.rz-layout {
    height: var(--app-height, 100vh);
    max-height: var(--app-height, 100vh);
    overflow: hidden;
    position: relative;
}

/* RadzenBody is the SINGLE scroll container */
.rz-body {
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* Smooth scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    /* Prevent bounce/pull-to-refresh behavior */
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
}

/* Mobile-specific body adjustments */
@media (max-width: 768px) {
    .rz-body {
        /* Account for mobile nav bar at bottom */
        padding-bottom: 70px !important;
    }
    
    /* Ensure mobile body uses dynamic height */
    .rz-body.mobile-body {
        height: calc(var(--app-height, 100vh) - 50px); /* Subtract header height if shown */
        max-height: calc(var(--app-height, 100vh) - 50px);
    }
}

/* --------------------------------------------
   3. HORIZONTAL OVERFLOW GUARDS
   Prevent side-to-side drift on iOS
   -------------------------------------------- */

/* Global box-sizing for predictable widths */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent common overflow culprits */
.rz-layout,
.rz-body,
.rz-header,
.rz-sidebar {
    overflow-x: hidden;
    max-width: 100%;
}

/* Images and media should respect container width */
img,
video,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
}

/* Tables should scroll horizontally within their container, not the page */
.table-responsive,
table {
    max-width: 100%;
    overflow-x: auto;
}

/* Prevent text from causing horizontal overflow */
.rz-body * {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Fix: Replace 100vw with 100% (100vw includes scrollbar width, causing drift) */
.full-width-container {
    width: 100%;
    max-width: 100%;
}

/* --------------------------------------------
   4. iOS INPUT ZOOM PREVENTION
   Font-size 16px+ prevents Safari auto-zoom on focus
   -------------------------------------------- */

/* Ensure all form inputs have 16px font to prevent iOS zoom */
input,
textarea,
select,
.rz-textbox,
.rz-textarea,
.rz-dropdown,
.rz-autocomplete input,
.rz-datepicker input,
.rz-numeric input,
.rz-inputmask input,
[contenteditable="true"] {
    font-size: 16px !important;
}

/* Radzen-specific input components */
.rz-body input,
.rz-body textarea,
.rz-body select,
.rz-body .rz-textbox,
.rz-body .rz-textarea {
    font-size: 16px !important;
}

/* If inputs need to appear smaller visually, use scale or adjust padding instead */
.compact-input {
    font-size: 16px !important;
    padding: 0.25rem 0.5rem;
    line-height: 1.2;
}

/* --------------------------------------------
   5. SAFE AREA HANDLING (Notch/Home Indicator)
   For iPhone X+ with notch and home indicator
   -------------------------------------------- */

/* Support safe-area-insets for notched devices */
@supports (padding: max(0px)) {
    .rz-body {
        /* Add safe area padding where needed */
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }
    
    /* Mobile nav needs bottom safe area */
    .mobile-nav {
        padding-bottom: env(safe-area-inset-bottom, 0);
        height: calc(70px + env(safe-area-inset-bottom, 0));
    }
    
    @media (max-width: 768px) {
        .rz-body {
            /* Account for mobile nav + safe area */
            padding-bottom: calc(70px + env(safe-area-inset-bottom, 0)) !important;
        }
    }
}

/* --------------------------------------------
   6. iOS PWA STANDALONE MODE SPECIFIC FIXES
   Only apply when running as installed PWA
   -------------------------------------------- */

@media (display-mode: standalone) {
    /* Prevent pull-to-refresh in standalone mode */
    html,
    body {
        overscroll-behavior-y: none;
    }
    
    /* Ensure the app fills the screen in standalone */
    .rz-layout {
        min-height: var(--app-height, 100vh);
    }
}

/* iOS Safari standalone check via media query */
@supports (-webkit-touch-callout: none) {
    /* iOS-specific: Ensure touch scrolling is smooth */
    .rz-body {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent elastic scroll on fixed elements */
    .rz-header,
    .rz-sidebar,
    .mobile-nav {
        position: fixed;
        -webkit-overflow-scrolling: auto;
        overscroll-behavior: none;
    }
}

/* --------------------------------------------
   7. TOUCH ACTION OPTIMIZATION
   Prevent unwanted gestures on certain elements
   -------------------------------------------- */

/* Prevent horizontal pan gestures on the main container */
.rz-layout {
    touch-action: pan-y pinch-zoom;
}

/* Allow normal touch on scrollable content */
.rz-body {
    touch-action: pan-y;
}

/* Prevent all touch manipulation on fixed UI elements */
.rz-header,
.mobile-nav {
    touch-action: none;
}

/* Allow tap/click on interactive elements within fixed headers */
.rz-header button,
.rz-header a,
.mobile-nav button,
.mobile-nav a {
    touch-action: manipulation;
}

/* --------------------------------------------
   8. FOCUS/BLUR SCROLL POSITION FIX
   Helps prevent layout shift after keyboard closes
   -------------------------------------------- */

/* When an input is focused, ensure its container is visible */
.rz-body:focus-within {
    /* This acts as a hint - actual scroll management is in JS */
    scroll-behavior: smooth;
}

/* Prevent layout jump when virtual keyboard opens/closes */
.rz-body {
    /* Smooth out scroll position changes */
    scroll-behavior: smooth;
}

/* Reset scroll behavior for programmatic scrolls (JS handles this) */
.rz-body.scroll-reset {
    scroll-behavior: auto;
}