html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

* {
    -webkit-touch-callout: none;
    user-select: none;
}

body {
    /* iOS Safari ignores overflow:hidden on body for touch events.
       position:fixed is the only reliable way to stop rubber-band body scroll. */
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

/* Colors the iOS status bar (notch) area to match the header bar's --primary-color, same trick
   TrueOmni.Native uses (its app.scss). Android doesn't need this - the theme-color meta tag
   PwaLayout.razor sets already colors its status bar directly with no CSS involved. Falls back to
   #ccc (see PwaLayout.razor's pre-session-load :root block) until the real account color loads. */
@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex;
        position: sticky;
        top: 0;
        height: env(safe-area-inset-top);
        background-color: var(--primary-color);
        width: 100%;
        z-index: 1000;
    }
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* Covers the gap between the browser painting App.razor's shell and Blazor's WASM runtime
   actually booting (see App.razor's #pwa-boot-overlay markup) - on a fresh browser/app with
   nothing cached, that's every .wasm/.dll in the app downloading and initializing before any
   Blazor markup, including PwaLayout's own generic branded-Loader fallback, can render, which
   otherwise reads as a long blank white screen. Removed by pwa.hideBootOverlay() (see pwa.js)
   the moment PwaLayout's own Loader is actually on screen. */
#pwa-boot-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
}

#pwa-boot-overlay .pwa-boot-spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    animation: pwa-boot-spin 0.8s linear infinite;
}

@keyframes pwa-boot-spin {
    to { transform: rotate(360deg); }
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.page{
    height:100%;
}

.page-container {
    height:100%;
    width:100%;
}

main {
    /* Use an absolute height so % chains through Blazor wrapper elements don't matter */
    height: 100vh;
    height: 100dvh; /* overrides if supported: shrinks when browser chrome appears */
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden; /* no horizontal scroll */
    -webkit-overflow-scrolling: touch;
    /* Constrain touch to vertical panning — stops diagonal swipes triggering X scroll */
    touch-action: pan-y;
    box-sizing: border-box;
}

/* Reserve space at the bottom so content scrolls clear of the fixed bottom nav */

/* ── Bottom nav layout ───────────────────────────────────────────────────────
   MainNav.razor renders <div class="mainNav"> with <div class="item"> children
   outside of .page-container, so the SCSS rules there don't reach it.
   SVGs have no explicit size and default to 300 × 150 px — fix that here.
   These !important overrides win over anything in Default.css regardless of
   cascade order, so orientation has to be handled right here too - portrait
   keeps the original bottom-bar row layout, landscape becomes a left sidebar
   (mirrors Pages.scss's .bottomNav landscape treatment, which never reached
   this element because of the !important rules below). */
.bottomNav {
    overflow: hidden;
}

.bottomNav .mainNav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-around !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.bottomNav .mainNav .item {
    display: flex !important;
    flex: 1 !important;
    min-width: 0 !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    overflow: hidden !important;
    color: white !important;
    cursor: pointer !important;
}

.bottomNav .mainNav .item svg {
    width: 4vh !important;
    height: 4vh !important;
    max-width: 100% !important;
    min-width: 0 !important;
    fill: white !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.bottomNav .mainNav .item svg .stroke-only {
    stroke: white;
    fill: none;
}

.bottomNav .mainNav .item.active {
    background-color: var(--tertiary-color);
}

@media only screen and (orientation: landscape) {
    .bottomNav .mainNav {
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    .bottomNav .mainNav .item {
        flex: 1 !important;
        width: 100% !important;
        height: auto !important;
    }
}

#reconnect-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(255,255,255); /* Fallback color */
    background-color: rgba(255,255,255,0.7); /* White w/ opacity */

    color: #000000;
    border: 1px solid #888;
    padding-top: 27px;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
}

/* PwaLayout's slow-load fallback: only shown once the branded loader's own entrance animation
   has already finished playing and the app still isn't ready. Positioned as its own band across
   the lower third of the viewport rather than inside the Loader component itself, so it stays
   centered in that band regardless of the logo/spinner's own size or position above it. */
.pwa-load-progress {
    position: fixed;
    left: 0;
    top: 66.666%;
    width: 100%;
    height: 33.333%;
    z-index: 1001; /* above Loader's .loading (z-index: 1000) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    pointer-events: none;
}

/* Fixed white-on-dark-halo scheme instead of branding colors (--secondary-color can itself be
   dark/low-contrast) or a plain dark track (invisible against the dark, moody photography most
   LoaderBackground images use) - this needs to read clearly over ANY background photo, bright
   or dark, without knowing anything about it ahead of time. */
.pwa-load-progress .pwa-load-progress-track {
    width: 90vw;
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
    overflow: hidden;
}

.pwa-load-progress .pwa-load-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
    transition: width 0.3s ease-out;
}

.pwa-load-progress .pwa-load-progress-text {
    font-family: var(--sans-serif-font), sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6);
    text-align: center;
}