/* ==============================================
   CHECK-IN APP
   App-specific layout and overrides.

   The check-in app is a single scrollable page
   on a portrait tablet. Unlike the guest-app,
   there are no panels, modals, or tile grids.
   The body scrolls freely.
   ============================================== */

/* ------------------------------------------
   BODY OVERRIDE
   Allow scrolling (guest-app locks overflow)
   ------------------------------------------ */
html,
body {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: none;
}

body {
    background: #1a365d;
}

/* ------------------------------------------
   APP CONTAINER
   ------------------------------------------ */
#app {
    position: relative;
    min-height: 100vh;
}

/* ------------------------------------------
   CONNECTION STATUS BAR
   Thin strip at viewport top showing WebSocket
   state. Green = connected (auto-hides),
   amber = reconnecting, red = disconnected.
   ------------------------------------------ */
.ws-status-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 9999;
    transition: opacity 0.3s, background-color 0.3s;
    opacity: 0;
    pointer-events: none;
}

.ws-status-bar.ws-connected {
    background-color: var(--fill-active-green, #22c55e);
    opacity: 1;
}

.ws-status-bar.ws-reconnecting {
    background-color: var(--fill-active-orange, #f59e0b);
    opacity: 1;
}

.ws-status-bar.ws-disconnected {
    background-color: var(--fill-active-red, #ef4444);
    opacity: 1;
}

.ws-status-bar.ws-hidden {
    opacity: 0;
}

/* ------------------------------------------
   REDUCED MOTION
   ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}