/* ==========================================================================
   Browser-edition-only styling.

   Everything visual lives in css/databridge-ui.css — the same stylesheet the
   server product uses, linked in from src/DataBridge.Web by the project file.
   What is left here is what only this edition has: the boot screen shown while
   the WebAssembly runtime downloads (Blazor Server has none), the framework's
   error strip, and the scrollbars. All three read the design tokens, so the
   first paint is already in the right theme and nothing flashes white.

   The old Roboto import, the #121212 body and the gradient loading panel are
   gone: they contradicted the tokens and were the only reason this app looked
   like a different product.
   ========================================================================== */

/* databridge-ui.css already paints body in the tokens; only the height the boot
   screen needs is added here. */
html, body { height: 100%; }

/* ---- boot screen -------------------------------------------------------- */
/* Replaced by the shell as soon as the runtime starts. It states what is
   loading and where it runs; it does not sell anything. */
.db-boot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100vh;
    background: var(--db-app);
}

.db-boot-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--db-radius);
    background: var(--db-accent);
    color: var(--db-on-accent);
    font-family: var(--db-font-mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.db-boot-name { font-size: 19px; font-weight: 700; color: var(--db-ink); }
.db-boot-note { font-size: 12px; color: var(--db-muted); }

.db-boot-bar {
    width: 216px;
    height: 2px;
    margin-top: 6px;
    overflow: hidden;
    background: var(--db-line);
    border-radius: 1px;
}

.db-boot-bar span {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--db-accent);
    animation: db-boot-slide 1.1s ease-in-out infinite;
}

@keyframes db-boot-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .db-boot-bar span { animation: none; width: 100%; }
}

/* ---- framework error strip ---------------------------------------------- */
/* Hairline block on the critical background, like every other error surface in
   the system — not a slab of color. */
#blazor-error-ui {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
    padding: 8px 34px 8px 13px;
    background: var(--db-crit-bg);
    border-top: 1px solid var(--db-crit-line);
    color: var(--db-crit);
    font-size: 12.5px;
}

#blazor-error-ui .reload { color: inherit; text-decoration: underline; }

#blazor-error-ui .dismiss {
    position: absolute;
    right: 12px;
    top: 7px;
    cursor: pointer;
}

/* ---- scrollbars --------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--db-surface-2); }
::-webkit-scrollbar-thumb { background: var(--db-line); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--db-line-strong); }