:root {
    --brand-primary: #0057d9;
}

.brand { color: var(--brand-primary); }
.btn-primary { background-color: var(--brand-primary); border-color: var(--brand-primary); }

/* Suppress focus outlines on non-input elements — Blazor's FocusOnNavigate
   and screen taps on h1/h2/h3 etc. otherwise show an iOS-style blue ring
   around section headings until the user taps elsewhere. */
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
div:focus, span:focus, p:focus, section:focus, article:focus, header:focus, nav:focus,
[tabindex="-1"]:focus {
    outline: none !important;
}


/* Prevent horizontal scroll, zoom, and edge swipe navigation on the entire app */
/* CRITICAL: html+body are locked non-scrollable so iOS/Android rubber-band
   bounce cannot move fixed elements (bottom nav bar). The #app element
   becomes the sole scroll container instead. */
html, body {
    max-width: 100% !important;
    overflow: hidden !important;
    /* Lock body in place - prevents iOS overscroll bounce on fixed elements */
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    /* pan-y only allows vertical scrolling - prevents horizontal swipe gestures */
    touch-action: pan-y !important;
    /* Prevent overscroll effects including back/forward navigation gestures */
    overscroll-behavior: none !important;
    overscroll-behavior-x: none !important;
    -webkit-text-size-adjust: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    /* White background prevents dark gap from showing during any residual bounce */
    background-color: #ffffff !important;
}

/* App root becomes the scroll container instead of body */
#app {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100% !important;
    height: 100% !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: none !important;
}

/* Prevent input zoom on mobile */
input, textarea, select {
    font-size: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent iOS zoom on focus for all common input types and states */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
textarea,
select,
input:focus,
textarea:focus,
select:focus {
    font-size: 16px !important;
}

/* Some libraries render an inner input element; ensure it inherits 16px */
.su-input input,
.su-textarea textarea,
.su-select select,
.simpleui input,
.simpleui textarea,
.simpleui select {
    font-size: 16px !important;
}

/* Force all containers to not exceed viewport */
* {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Specific fixes for simple-ui components */
.flex, .flex-col, .stack, .grid {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* iOS Safari left-edge swipe blocker - prevents back gesture */
/* Top offset (80px) leaves room for header back buttons to be clickable */
/* Height excludes top (80px) and bottom nav (64px) so buttons are clickable */
.edge-swipe-blocker {
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    width: 50px !important;
    height: calc(100% - 144px) !important;
    z-index: 99999 !important;
    touch-action: none !important;
    -webkit-touch-callout: none !important;
    pointer-events: none !important;
    background: transparent !important;
}

/* Prevent tables from causing horizontal scroll */
table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Ensure images don't overflow */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Upload thumbnail images need fixed dimensions */
img.upload-thumbnail {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* Bottom navigation bar - reinforce fixed positioning for iOS Safari/WebView */
nav[aria-label="Main navigation"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background-color: white !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    /* CRITICAL: nav is h-16 (64px) but buttons inside are h-20 (80px).
       Without overflow:hidden the 16px overflow creates an internal
       scrollable area that lets the nav content slide up/down. */
    overflow: hidden !important;
    /* Force GPU layer to prevent jank and keep nav pinned */
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    /* Prevent the nav bar itself from being dragged */
    touch-action: none !important;
}

/* White extension below nav bar - covers the dark gap revealed during
   iOS/Android overscroll rubber-band bounce */
nav[aria-label="Main navigation"]::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: -200px !important;
    left: 0 !important;
    right: 0 !important;
    height: 200px !important;
    background-color: white !important;
    z-index: -1 !important;
}