/* Receiva — only styles not covered by MudBlazor live here.
   Page/layout/form styling is all MudBlazor components + theme. */

/* Inter — bundled locally so it works offline (no Google Fonts hot-link). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter/Inter-Bold.woff2") format("woff2"); }

html, body {
    margin: 0;
    padding: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Pre-Blazor splash (shown before the WASM runtime boots) */
.splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 16px;
    background: linear-gradient(180deg, #042361, #041C55);
    color: #E7EFF6;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.splash img {
    width: 160px;
    height: 160px;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.splash strong {
    font-size: 1.4rem;
    letter-spacing: 0.04em;
}

.splash span {
    color: #AFC6DA;
    font-size: 0.85rem;
}

/* Splash-level diagnostic banner for startup failures. Hidden by default
   and only made visible (display:block) from index.html's inline JS when
   something actually throws — keeps successful boots looking identical
   to before. Must be readable on the dark navy splash and scrollable in
   case a stack trace is long (iOS Safari). */
.splash #splash-error {
    display: none;
    max-width: min(90vw, 720px);
    margin-top: 20px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 205, 210, 0.35);
    border-radius: 8px;
    color: #FFCDD2;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
    max-height: 60vh;
}

/* Blazor error banner */
#blazor-error-ui {
    background: #fee2e2;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1rem 0.6rem 1rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ===================== Restyle: shared components =====================
   All theme colours come from MudBlazor's runtime palette variables
   (--mud-palette-*), which MudThemeProvider rewrites on light/dark switch
   and accent change. So these components are fully dynamic — no hardcoded
   light/dark values, no second stylesheet. --mud-palette-primary is the
   user's accent; semantic status colours stay fixed. */

/* Status pills (Queue, Dashboard) */
.rcv-pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:100px; border:1px solid transparent; white-space:nowrap; }
.rcv-pill-dot { width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.rcv-pill-dot.spin { animation:rcv-spin 1s linear infinite; border-radius:50%; }
.st-sent { color:var(--mud-palette-success); background:color-mix(in srgb, var(--mud-palette-success) 14%, transparent); border-color:color-mix(in srgb, var(--mud-palette-success) 32%, transparent); }
.st-pending { color:var(--mud-palette-warning); background:color-mix(in srgb, var(--mud-palette-warning) 15%, transparent); border-color:color-mix(in srgb, var(--mud-palette-warning) 34%, transparent); }
.st-sending { color:var(--mud-palette-primary); background:color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); border-color:color-mix(in srgb, var(--mud-palette-primary) 30%, transparent); }
.st-failed { color:var(--mud-palette-error); background:color-mix(in srgb, var(--mud-palette-error) 14%, transparent); border-color:color-mix(in srgb, var(--mud-palette-error) 32%, transparent); }
.st-draft { color:var(--mud-palette-text-secondary); background:color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent); border-color:color-mix(in srgb, var(--mud-palette-text-secondary) 30%, transparent); }
@keyframes rcv-spin { to { transform:rotate(360deg); } }

/* ===================== Restyle: bottom navigation ===================== */
.rcv-bottomnav {
    position:fixed; left:0; right:0; bottom:0; z-index:1300;
    height:var(--rcv-nav-h, 78px);
    display:flex; align-items:flex-start; justify-content:space-around;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--mud-palette-surface) 90%, transparent);
    backdrop-filter:saturate(140%) blur(14px);
    border-top:1px solid var(--mud-palette-lines-default);
}
.rcv-nav-item {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; cursor:pointer; padding:6px 2px;
    color:var(--mud-palette-text-secondary); font-size:11px; font-weight:600; font-family:inherit;
    transition:color .15s ease;
}
.rcv-nav-item .mud-icon-root, .rcv-nav-item svg { width:22px; height:22px; transition:transform .18s ease; }
.rcv-nav-ico {
    display:flex; align-items:center; justify-content:center;
    width:50px; height:30px; border-radius:100px;
    transition:background .18s ease, transform .18s ease;
}
.rcv-nav-item.active { color:var(--mud-palette-primary); font-weight:700; }
.rcv-nav-item.active .rcv-nav-ico {
    background:color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    transform:translateY(-4px);
}
.rcv-nav-item.active .mud-icon-root, .rcv-nav-item.active svg { transform:scale(1.1); }
.rcv-nav-badge { position:relative; }
.rcv-nav-badge::after {
    content:""; position:absolute; top:-2px; right:-4px; width:8px; height:8px;
    border-radius:50%; background:var(--mud-palette-error); border:2px solid var(--mud-palette-surface);
}
.rcv-nav-fab { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.rcv-nav-fab .fab-btn {
    width:60px; height:60px; margin-top:-24px; border-radius:50%;
    background:var(--mud-palette-primary); color:#fff; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px -6px color-mix(in srgb, var(--mud-palette-primary) 80%, transparent);
}
.rcv-nav-fab .fab-btn .mud-icon-root, .rcv-nav-fab .fab-btn svg { width:28px; height:28px; }
.rcv-nav-fab .fab-lab { font-size:11px; font-weight:600; color:var(--mud-palette-text-secondary); }

/* Pad the main content so it isn't hidden behind the fixed nav. */
.rcv-content { padding-bottom:calc(var(--rcv-nav-h, 78px) + 12px); }

/* ===================== Restyle: filter tabs (Queue) ===================== */
.rcv-qtabs { display:flex; gap:8px; flex-wrap:wrap; }
.rcv-qtab {
    display:inline-flex; align-items:center; gap:7px;
    padding:7px 14px; border-radius:100px; cursor:pointer;
    font-family:inherit; font-size:13px; font-weight:600;
    color:var(--mud-palette-text-secondary); background:var(--mud-palette-surface);
    border:1px solid var(--mud-palette-lines-default); transition:.15s;
}
.rcv-qtab:hover { color:var(--mud-palette-text-primary); }
.rcv-qtab.active { color:#fff; background:var(--mud-palette-primary); border-color:var(--mud-palette-primary); }
.rcv-qtab .cnt {
    font-size:11px; min-width:18px; height:18px; padding:0 5px; border-radius:100px;
    display:inline-flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--mud-palette-text-secondary) 25%, transparent); color:inherit;
}
.rcv-qtab.active .cnt { background:rgba(0,0,0,.22); }

/* ===================== Restyle: list/card rows ===================== */
.rcv-row {
    display:flex; align-items:center; gap:14px;
    padding:12px 14px; margin-bottom:12px; cursor:pointer;
    background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default);
    border-radius:14px; transition:border-color .15s ease;
}
.rcv-row:hover { border-color:color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-lines-default)); }
.rcv-avatar {
    flex:none; width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:15px; font-weight:700; letter-spacing:.02em;
    color:var(--mud-palette-primary); background:color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); border:1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
}

/* ===================== Restyle: app background gradient ===================== */
/* Subtle dual-tone gradient (page background -> surface) plus a faint accent
   glow, both from the live palette so it adapts to light/dark and accent.
   !important overrides MudBlazor's flat palette background-color on the layout. */
.mud-layout {
    background:
        radial-gradient(1100px 620px at 78% -8%, color-mix(in srgb, var(--mud-palette-primary) 10%, transparent), transparent 60%),
        linear-gradient(178deg, var(--mud-palette-background) 0%, color-mix(in srgb, var(--mud-palette-surface) 60%, var(--mud-palette-background)) 50%, var(--mud-palette-surface) 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

/* ===================== Restyle: accent swatches (Settings) ===================== */
.rcv-swatches { display:flex; flex-wrap:wrap; gap:10px; }
.rcv-swatch {
    width:34px; height:34px; border-radius:50%; cursor:pointer; padding:0;
    border:2px solid var(--mud-palette-lines-default);
    transition:transform .12s ease, border-color .12s ease;
}
.rcv-swatch:hover { transform:scale(1.08); }
.rcv-swatch.sel { border-color:var(--mud-palette-text-primary); box-shadow:0 0 0 2px color-mix(in srgb, var(--mud-palette-text-primary) 25%, transparent); }