/* ── Guest Upload page ───────────────────────────────────────────────────── */
.pb-safe        { padding-bottom: env(safe-area-inset-bottom, 16px); }
.upload-label   { -webkit-tap-highlight-color: transparent; }
.float-icon     { animation: float 3s ease-in-out infinite; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ── Blazor Reconnect Modal ──────────────────────────────────────────────── */
/*
    Blazor adds one of these classes to #components-reconnect-modal
    based on the connection state:
      .components-reconnect-show     → trying to reconnect
      .components-reconnect-failed   → gave up after retries
      .components-reconnect-rejected → server explicitly rejected the circuit
*/
#components-reconnect-modal                          { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; }

/* Show the right inner panel for each state */
#components-reconnect-modal.components-reconnect-show     .components-reconnect-show     { display: flex; }
#components-reconnect-modal.components-reconnect-failed   .components-reconnect-failed   { display: flex; }
#components-reconnect-modal.components-reconnect-rejected .components-reconnect-rejected { display: flex; }

/* ── Blazor Error UI (unhandled render exception) ────────────────────────── */
#blazor-error-ui          { display: none; }
#blazor-error-ui.blazor-error-ui-show { display: flex; }

#blazor-error-ui .dismiss { cursor: pointer; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

/* ── Blazor Validation ───────────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid                              { outline: 1px solid #ba1a1a; }
.validation-message                   { color: #ba1a1a; font-size: 12px; margin-top: 4px; }