/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Branded chrome-less shell for the unauthenticated auth pages.
   Tokens only (admin-design.css) so light + dark both work. The page
   markup classes (.login-shell, .login-form, .error, …) are styled via
   ::deep so each auth page stays markup-light. */

.auth-layout[b-b8mn9a8tqc] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(1100px 520px at 50% -10%, color-mix(in srgb, var(--ink) 14%, transparent), transparent 60%),
        var(--bg);
    font-family: var(--sans);
    color: var(--text);
    padding: 2rem;
}

.auth-shell[b-b8mn9a8tqc] {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    animation: fadeUp 0.4s cubic-bezier(.2, 1, .4, 1);
}

/* Brand lockup above the card */
.auth-brand[b-b8mn9a8tqc] {
    display: flex;
    align-items: center;
    gap: 13px;
    justify-content: center;
}

.auth-mark[b-b8mn9a8tqc] {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    background: var(--gold);
    color: var(--ink);
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-size: 25px;
    transform: rotate(-6deg);
    box-shadow: 2px 2px 0 var(--magenta);
}

.auth-brand-txt[b-b8mn9a8tqc] {
    line-height: 1;
}

.auth-brand-txt .nm[b-b8mn9a8tqc] {
    font-family: var(--display);
    font-size: 23px;
    letter-spacing: 0.5px;
}

.auth-brand-txt .nm b[b-b8mn9a8tqc] {
    color: var(--gold-2);
}

.auth-brand-txt small[b-b8mn9a8tqc] {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--text-3);
    margin-top: 6px;
    text-transform: uppercase;
}

.auth-layout-card[b-b8mn9a8tqc] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-3);
    padding: 30px 32px;
    width: 100%;
}

/* ——— Page content (rendered into @Body) ——— */

.auth-layout-card[b-b8mn9a8tqc]  .login-shell {
    width: 100%;
    margin: 0 auto;
}

.auth-layout-card[b-b8mn9a8tqc]  h1 {
    font-family: var(--display);
    font-size: 26px;
    line-height: 1.08;
    letter-spacing: -0.4px;
    margin: 0 0 8px;
    color: var(--text);
}

.auth-layout-card[b-b8mn9a8tqc]  .login-intro {
    color: var(--text-2);
    margin: 0 0 22px;
    font-size: 13.5px;
    line-height: 1.5;
}

.auth-layout-card[b-b8mn9a8tqc]  .muted {
    color: var(--text-2);
    font-size: 13.5px;
}

/* Form: label stacks a uppercase caption over its design field */
.auth-layout-card[b-b8mn9a8tqc]  .login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-layout-card[b-b8mn9a8tqc]  .login-form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: var(--text-2);
}

.auth-layout-card[b-b8mn9a8tqc]  .login-form input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: var(--surface);
    border: 1.5px solid var(--line-2);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--sans);
    color: var(--text);
    outline: none;
    text-transform: none;
    letter-spacing: normal;
    transition: border-color 0.14s, box-shadow 0.14s;
}

.auth-layout-card[b-b8mn9a8tqc]  .login-form input::placeholder {
    color: var(--text-3);
    font-weight: 400;
}

.auth-layout-card[b-b8mn9a8tqc]  .login-form input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.auth-layout-card[b-b8mn9a8tqc]  .login-form input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Primary submit — mirrors .btn .btn-primary */
.auth-layout-card[b-b8mn9a8tqc]  .login-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    margin-top: 4px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: var(--ink);
    color: #FFF8EC;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.07s, background 0.14s, filter 0.14s;
}

.auth-layout-card[b-b8mn9a8tqc]  .login-form button:hover {
    background: var(--ink-2);
}

.auth-layout-card[b-b8mn9a8tqc]  .login-form button:active {
    transform: translateY(1px);
}

[data-theme="dark"] .auth-layout-card[b-b8mn9a8tqc]  .login-form button {
    background: var(--accent);
    color: var(--accent-ink);
}

.auth-layout-card[b-b8mn9a8tqc]  .login-form button:disabled {
    opacity: 0.55;
    cursor: wait;
}

/* Standalone buttons on the 2FA pages (continue / save codes) */
.auth-layout-card[b-b8mn9a8tqc]  button {
    font-family: var(--sans);
}

.auth-layout-card[b-b8mn9a8tqc]  .login-shell > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: var(--ink);
    color: #FFF8EC;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.07s, background 0.14s;
}

.auth-layout-card[b-b8mn9a8tqc]  .login-shell > button:hover {
    background: var(--ink-2);
}

[data-theme="dark"] .auth-layout-card[b-b8mn9a8tqc]  .login-shell > button {
    background: var(--accent);
    color: var(--accent-ink);
}

.auth-layout-card[b-b8mn9a8tqc]  .login-shell > button:disabled {
    opacity: 0.55;
    cursor: wait;
}

/* Inline links (lost device, back to sign in) */
.auth-layout-card[b-b8mn9a8tqc]  a {
    color: var(--sky);
    font-weight: 600;
}

.auth-layout-card[b-b8mn9a8tqc]  a:hover {
    text-decoration: underline;
}

/* Status messages */
.auth-layout-card[b-b8mn9a8tqc]  .error {
    color: var(--bad);
    background: var(--bad-bg);
    border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
    border-radius: 10px;
    padding: 11px 13px;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
}

.auth-layout-card[b-b8mn9a8tqc]  .success {
    color: var(--good);
    background: var(--good-bg);
    border: 1px solid color-mix(in srgb, var(--good) 30%, transparent);
    border-radius: 10px;
    padding: 11px 13px;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
}

/* 2FA enrollment: manual-entry secret + recovery-code callout */
.auth-layout-card[b-b8mn9a8tqc]  code {
    font-family: var(--mono);
    background: var(--bg-2) !important;
    color: var(--text);
    border: 1px solid var(--line);
}

.auth-layout-card[b-b8mn9a8tqc]  .admin-callout {
    border: 1px solid var(--warn) !important;
    background: var(--warn-bg) !important;
    color: var(--text);
    border-radius: var(--r) !important;
}

.auth-layout-card[b-b8mn9a8tqc]  .admin-callout h3 {
    font-family: var(--sans);
    color: var(--text);
}

/* Redirecting… placeholder (Home.razor) */
.auth-layout-card[b-b8mn9a8tqc]  .auth-redirect {
    text-align: center;
    margin: 8px 0;
    color: var(--text-2);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.auth-layout-card[b-b8mn9a8tqc]  .auth-redirect .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--line-2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: authSpin-b-b8mn9a8tqc 0.7s linear infinite;
}

@keyframes authSpin-b-b8mn9a8tqc {
    to {
        transform: rotate(360deg);
    }
}

/* Blazor's circuit-error banner. CSS isolation scopes the matching rule in
   MainLayout.razor.css to MainLayout only — without this stanza the
   AuthLayout-hosted #blazor-error-ui div is permanently visible here. */
#blazor-error-ui[b-b8mn9a8tqc] {
    color-scheme: light dark;
    background: var(--warn-bg);
    color: var(--text);
    border-top: 1px solid var(--warn);
    bottom: 0;
    box-shadow: var(--shadow-2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: var(--sans);
}

#blazor-error-ui .reload[b-b8mn9a8tqc] {
    color: var(--sky);
    font-weight: 600;
    text-decoration: underline;
}

#blazor-error-ui .dismiss[b-b8mn9a8tqc] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Admin shell — two-column, sidebar + main. Styling is deliberately
   minimal + inline so we don't fight Bootstrap for a priority we control.
   The admin panel is internal; we value clarity over visual flourish. */

.admin-shell[b-2of4frq1sn] {
    display: flex;
    min-height: 100vh;
    background: #f7f8fa;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.admin-sidebar[b-2of4frq1sn] {
    width: 240px;
    min-height: 100vh;
    background: #1f2937;
    color: #e5e7eb;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    flex-shrink: 0;
}

.admin-main[b-2of4frq1sn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-topbar[b-2of4frq1sn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.admin-brand[b-2of4frq1sn] {
    font-weight: 600;
    font-size: 1.1rem;
    color: #111827;
}

.admin-topbar-user[b-2of4frq1sn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.admin-user-phone[b-2of4frq1sn] {
    color: #6b7280;
    font-feature-settings: "tnum";
}

.admin-logout-btn[b-2of4frq1sn] {
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    color: #374151;
}

.admin-logout-btn:hover[b-2of4frq1sn] {
    background: #f3f4f6;
}

.admin-content[b-2of4frq1sn] {
    flex: 1;
    padding: 1.5rem;
    overflow-x: auto;
}

#blazor-error-ui[b-2of4frq1sn] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-2of4frq1sn] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.admin-nav[b-ojghynyc7w] {
    display: flex;
    flex-direction: column;
    padding: 0 0.5rem;
}

.admin-nav-section[b-ojghynyc7w] {
    margin-bottom: 1rem;
}

.admin-nav-label[b-ojghynyc7w] {
    color: #9ca3af;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 0.75rem;
    margin-bottom: 0.25rem;
}

.admin-nav[b-ojghynyc7w]  .admin-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #d1d5db;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.92rem;
    margin: 0 0 1px 0;
}

.admin-nav[b-ojghynyc7w]  .admin-nav-link:hover {
    background: #374151;
    color: #ffffff;
}

.admin-nav[b-ojghynyc7w]  .admin-nav-link.active {
    background: #3b82f6;
    color: #ffffff;
}

.admin-nav-icon[b-ojghynyc7w] {
    width: 1.25rem;
    display: inline-block;
    text-align: center;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-okr0r9qbfv],
.components-reconnect-repeated-attempt-visible[b-okr0r9qbfv],
.components-reconnect-failed-visible[b-okr0r9qbfv],
.components-pause-visible[b-okr0r9qbfv],
.components-resume-failed-visible[b-okr0r9qbfv],
.components-rejoining-animation[b-okr0r9qbfv] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-okr0r9qbfv],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-okr0r9qbfv],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-okr0r9qbfv],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-okr0r9qbfv],
#components-reconnect-modal.components-reconnect-retrying[b-okr0r9qbfv],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-okr0r9qbfv],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-okr0r9qbfv],
#components-reconnect-modal.components-reconnect-failed[b-okr0r9qbfv],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-okr0r9qbfv] {
    display: block;
}


#components-reconnect-modal[b-okr0r9qbfv] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-okr0r9qbfv 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-okr0r9qbfv 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-okr0r9qbfv 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-okr0r9qbfv]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-okr0r9qbfv 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-okr0r9qbfv {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-okr0r9qbfv {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-okr0r9qbfv {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-okr0r9qbfv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-okr0r9qbfv] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-okr0r9qbfv] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-okr0r9qbfv] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-okr0r9qbfv] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-okr0r9qbfv] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-okr0r9qbfv] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-okr0r9qbfv 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-okr0r9qbfv] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-okr0r9qbfv {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Chalah.razor.rz.scp.css */
/* Context strip shown atop the Edit dialog (the entry's Kreyòl name). */
.dialog-context[b-wl4ipitafs] {
    margin: 0 0 4px;
    padding: 10px 14px;
    background: var(--bg-2);
    border-radius: var(--r);
    font-size: 13px;
    color: var(--text-2);
}

/* "Leave blank to keep existing numbers." hint under the Numbers input. */
.modal-b small.muted[b-wl4ipitafs] {
    display: block;
    margin-top: -2px;
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-3);
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Dashboard page-scoped styles. Design tokens only — light + dark both work.
   ::deep is used for the ink card surface, which is rendered by the Card
   child component (the class lives on Card's own <div>, not this file's DOM). */

/* ── Next-drawing dark ink card ── */
[b-ygeofkoyum] .card-ink {
    background: var(--ink);
    color: #FFF8EC;
    border: none;
    overflow: hidden;
}

/* The countdown headline (rendered directly by this component → scoped). */
.draw-countdown[b-ygeofkoyum] {
    font-family: var(--display);
    font-size: 44px;
    letter-spacing: -1.5px;
    line-height: 1;
    margin-top: 16px;
    color: var(--gold);
}

.ink-details[b-ygeofkoyum] {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 14px;
}

/* Placeholder ball slots under the countdown (dim white-on-ink), matching
   the design's three num-tile.sm tiles foreshadowing the drawn numbers. */
.draw-balls[b-ygeofkoyum] {
    display: flex;
    gap: 7px;
    margin-top: 18px;
}

.draw-balls .draw-ball[b-ygeofkoyum] {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Scaled-down source flag in the inline "Today's schedule" rows. */
.draw-flag-sm[b-ygeofkoyum] {
    transform: scale(0.85);
}

/* ── Financial-integrity hero ── */
.recon-hero[b-ygeofkoyum] {
    border-radius: var(--r);
    padding: 16px;
    text-align: center;
    margin-bottom: 14px;
}

.recon-hero.good[b-ygeofkoyum] {
    background: var(--good-bg);
}

.recon-hero.bad[b-ygeofkoyum] {
    background: var(--bad-bg);
}

.recon-hero-val[b-ygeofkoyum] {
    font-size: 26px;
    font-weight: 700;
    margin-top: 6px;
}

.recon-breaches[b-ygeofkoyum] {
    margin-bottom: 14px;
}

.recon-breaches summary[b-ygeofkoyum] {
    cursor: pointer;
    list-style: none;
}

.recon-breaches summary[b-ygeofkoyum]::-webkit-details-marker {
    display: none;
}
/* /Components/Pages/Disputes.razor.rz.scp.css */
/* Page-unique bit only — the filter bar, table, pills, pager, and
   modals now use the shared design-system classes. What's left is the
   SLA-breach row tint (themed on tokens so light + dark both work). */

/* SLA-breached disputes (past deadline, still actionable) get a red BAD
   tint so they jump out during triage — matching the design's
   `background: var(--bad-bg)` and the red `.neg ⚠` deadline text (a
   past-deadline breach is an error state, not a warning). */
.tbl tr.row-warn td[b-7b40yapcsi] {
    background: var(--bad-bg);
}
/* /Components/Pages/Exposure.razor.rz.scp.css */
/* Exposure monitor — page-unique styles. Everything themed via design tokens
   so light and dark both work; no hardcoded hex. Shared primitives (card,
   tbl, badge, meter, numpill, src-flag, tabs, live-pill) come from the
   global admin-design.css and the shared components. */

/* Legend chips in the page subtitle. */
.exp-legend[b-h8pohy9ks1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 12px;
    white-space: nowrap;
}

.exp-legend .dot-good[b-h8pohy9ks1],
.exp-legend .dot-warn[b-h8pohy9ks1],
.exp-legend .dot-bad[b-h8pohy9ks1] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.exp-legend .dot-good[b-h8pohy9ks1] { background: var(--good); }
.exp-legend .dot-warn[b-h8pohy9ks1] { background: var(--warn); }
.exp-legend .dot-bad[b-h8pohy9ks1] { background: var(--bad); }

/* Auto-refresh control in the page actions. */
.exp-auto[b-h8pohy9ks1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
}

.exp-auto input[type="checkbox"][b-h8pohy9ks1] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Selectable session cards. */
.exp-strip[b-h8pohy9ks1] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: var(--gap, 22px);
}

.exp-chip[b-h8pohy9ks1] {
    text-align: left;
    padding: 14px;
    min-width: 220px;
    cursor: pointer;
    border-color: var(--line);
}

.exp-chip:hover[b-h8pohy9ks1] {
    border-color: var(--text-3);
}

.exp-chip.is-sel[b-h8pohy9ks1] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

.exp-chip-title[b-h8pohy9ks1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.exp-chip-meta[b-h8pohy9ks1] {
    font-size: 11.5px;
    margin-top: 5px;
}

.exp-chip-counts[b-h8pohy9ks1] {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 600;
}

.exp-chip-counts .exp-c-warn[b-h8pohy9ks1] { color: var(--warn); }

/* Ratio cell: meter + percentage side by side. */
.exp-ratio-cell[b-h8pohy9ks1] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 160px;
}

.exp-ratio-cell .exp-meter[b-h8pohy9ks1] {
    width: 80px;
    flex-shrink: 0;
}

.exp-ratio-cell span[b-h8pohy9ks1] {
    font-size: 12.5px;
}

/* Row tints for at-risk levels. Scoped to the page's own table rows. */
.tbl tbody tr.row-red[b-h8pohy9ks1] {
    background: var(--bad-bg);
}

.tbl tbody tr.row-red:hover[b-h8pohy9ks1] {
    background: color-mix(in srgb, var(--bad-bg) 70%, var(--surface));
}

.tbl tbody tr.row-yellow[b-h8pohy9ks1] {
    background: var(--warn-bg);
}

.tbl tbody tr.row-yellow:hover[b-h8pohy9ks1] {
    background: color-mix(in srgb, var(--warn-bg) 70%, var(--surface));
}

/* Padding for inline loading / empty states inside the full-bleed card. */
.exp-pad[b-h8pohy9ks1] {
    padding: 16px;
}

.exp-empty[b-h8pohy9ks1] {
    text-align: center;
    padding: 40px;
}

.admin-error[b-h8pohy9ks1] {
    color: var(--bad);
    background: var(--bad-bg);
    padding: 10px 14px;
    border-radius: var(--r, 10px);
    margin-bottom: var(--gap, 22px);
}
/* /Components/Pages/FraudFlags.razor.rz.scp.css */
/* Page-unique modal bits for the Resolve fraud-flag dialog.
   Themed with design tokens so light + dark both work. */

/* Context line at the top of the resolve modal — flag type + description. */
.modal-context[b-y1s8bt4o5r] {
    margin: 0;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
}

/* The conditional "Auto-suspend banker" checkbox row. Overrides the
   stacked column layout of .modal-b label so the checkbox sits inline
   with its caption. */
.modal-b label.check-row[b-y1s8bt4o5r] {
    flex-direction: row;
    align-items: flex-start;
    gap: 9px;
    font-weight: 500;
}

.modal-b label.check-row > span[b-y1s8bt4o5r] {
    font-weight: 500;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
}

.modal-b label.check-row input[type="checkbox"][b-y1s8bt4o5r] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--accent);
    flex: none;
}
/* /Components/Pages/GameTypes.razor.rz.scp.css */
/* Page-unique styles for the read-only game-types card grid.
   All colours/spacing come from design tokens so light + dark both work. */

.gt-name[b-4ymkmw02fe] {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.1px;
    color: var(--text);
    margin-top: 14px;
}

.gt-digits[b-4ymkmw02fe] {
    font-size: 12.5px;
}

.gt-rows[b-4ymkmw02fe] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 8px;
}

.gt-row[b-4ymkmw02fe] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
}

.gt-num[b-4ymkmw02fe] {
    color: var(--text);
    font-size: 12.5px;
}

.gt-row-payouts[b-4ymkmw02fe] {
    align-items: flex-start;
}

.gt-payouts[b-4ymkmw02fe] {
    color: var(--text);
    font-size: 12px;
    text-align: right;
    line-height: 1.5;
}
/* /Components/Pages/Help.razor.rz.scp.css */
/* Page-unique help-index styling, themed with admin design tokens.
   The card grid uses the shared .grid.g-3 + .card.card-pad primitives; only
   the dark-ink hero banner and the card's internal layout live here. */

/* Dark-ink hero banner with a decorative (non-functional) search field. */
.help-hero[b-nbn5j0ljkd] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 20px;
    margin-bottom: var(--gap);
    background: var(--ink);
    color: #FFF8EC;
    border-radius: var(--r-lg);
}

.help-hero-copy[b-nbn5j0ljkd] { flex: 1; min-width: 240px; }

.help-hero-eyebrow[b-nbn5j0ljkd] { color: var(--gold); }

.help-hero-title[b-nbn5j0ljkd] {
    font-family: var(--display);
    font-size: 24px;
    line-height: 1.15;
    margin-top: 8px;
}

.help-hero-search[b-nbn5j0ljkd] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 320px;
    max-width: 100%;
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.help-hero-placeholder[b-nbn5j0ljkd] { font-size: 13.5px; }

/* Topic cards — real <a> links; restyle the anchor as a hoverable card. */
.help-card[b-nbn5j0ljkd] {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.help-card:hover[b-nbn5j0ljkd] {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
    border-color: var(--accent);
}

.help-card-ic[b-nbn5j0ljkd] { flex-shrink: 0; }

.help-card-title[b-nbn5j0ljkd] {
    font-size: 15px;
    margin-top: 14px;
}

.help-card-body[b-nbn5j0ljkd] {
    font-size: 12.5px;
    line-height: 1.5;
    margin-top: 8px;
    flex: 1;
}

.help-card-foot[b-nbn5j0ljkd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

.help-card-meta[b-nbn5j0ljkd] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.help-card-arrow[b-nbn5j0ljkd] { color: var(--text-3); }
/* /Components/Pages/HelpArticle.razor.rz.scp.css */
/* HelpArticle — operator guide detail. Re-themed onto the admin design
   system tokens (var(--text), var(--surface), var(--line), var(--gold),
   var(--magenta), var(--ink) …). Structure + copy are unchanged; this file
   only retones typography and colour so the page tracks light AND dark. */

.help-article[b-t0o25qgu98] { max-width: 820px; }

.help-back[b-t0o25qgu98] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    text-decoration: none;
    margin-bottom: var(--gap);
}
.help-back:hover[b-t0o25qgu98] { color: var(--sky); }

.help-head[b-t0o25qgu98] {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 28px;
}
.help-head-icon[b-t0o25qgu98] {
    font-size: 30px;
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    flex-shrink: 0;
}
.help-eyebrow[b-t0o25qgu98] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--text-3);
}
.help-head h1[b-t0o25qgu98] {
    font-family: var(--display);
    font-size: 30px;
    letter-spacing: -0.5px;
    line-height: 1.05;
    color: var(--text);
    margin: 6px 0;
}
.help-lede[b-t0o25qgu98] { color: var(--text-2); margin: 0; line-height: 1.55; }

.help-h2[b-t0o25qgu98] {
    font-family: var(--sans);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.2px;
    margin: 34px 0 10px;
    color: var(--text);
}
.help-prose[b-t0o25qgu98] { color: var(--text); line-height: 1.65; max-width: 72ch; }
.help-prose b[b-t0o25qgu98] { font-weight: 700; }
.help-prose code[b-t0o25qgu98],
.help-bullets code[b-t0o25qgu98],
.help-callout-body code[b-t0o25qgu98],
.help-faq-a code[b-t0o25qgu98] {
    font-family: var(--mono);
    font-size: 0.88em;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    padding: 1px 6px;
    color: var(--text);
}
.help-footer[b-t0o25qgu98] { color: var(--text-2); }
.help-bullets[b-t0o25qgu98] { line-height: 1.65; max-width: 72ch; padding-left: 20px; color: var(--text); }
.help-bullets li[b-t0o25qgu98] { margin-bottom: 6px; }

.help-steps[b-t0o25qgu98] {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.help-steps li[b-t0o25qgu98] {
    counter-increment: step;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
}
.help-steps li[b-t0o25qgu98]::before {
    content: counter(step);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--gold);
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-weight: 400;
    font-size: 14px;
}
[data-theme="dark"] .help-steps li[b-t0o25qgu98]::before {
    background: var(--gold);
    color: var(--ink);
}
.help-step-title[b-t0o25qgu98] { font-weight: 700; color: var(--text); }
.help-step-body[b-t0o25qgu98] { color: var(--text-2); line-height: 1.6; margin-top: 2px; }

.help-callout[b-t0o25qgu98] {
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: var(--r);
    padding: 16px 18px;
    margin: 18px 0;
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.help-callout-title[b-t0o25qgu98] {
    font-weight: 700;
    color: var(--text);
    margin-bottom: 5px;
}
.help-callout-body[b-t0o25qgu98] { color: var(--text); line-height: 1.6; }

.help-callout-gold[b-t0o25qgu98] {
    border-left-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 12%, var(--surface));
}
.help-callout-magenta[b-t0o25qgu98] {
    border-left-color: var(--magenta);
    background: color-mix(in srgb, var(--magenta) 9%, var(--surface));
}
.help-callout-ink[b-t0o25qgu98] {
    border-left-color: var(--sky);
    background: color-mix(in srgb, var(--sky) 9%, var(--surface));
}

.help-faq[b-t0o25qgu98] { border-top: 1px solid var(--line); margin-top: 10px; }
.help-faq-item[b-t0o25qgu98] { border-bottom: 1px solid var(--line); padding: 14px 0; }
.help-faq-item summary[b-t0o25qgu98] {
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.help-faq-item summary[b-t0o25qgu98]::-webkit-details-marker { display: none; }
.help-faq-item summary[b-t0o25qgu98]::before {
    content: "+";
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--r-xs);
    background: var(--bg-2);
    color: var(--text-2);
    font-family: var(--mono);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    transition: background 0.14s, color 0.14s;
}
.help-faq-item[open] summary[b-t0o25qgu98]::before {
    content: "\2212"; /* minus */
    background: var(--gold);
    color: var(--ink);
}
.help-faq-item summary:hover[b-t0o25qgu98]::before { color: var(--text); }
.help-faq-a[b-t0o25qgu98] { color: var(--text-2); line-height: 1.6; margin-top: 8px; padding-left: 30px; }

.help-related-label[b-t0o25qgu98] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--text-3);
    margin-top: 34px;
    margin-bottom: 10px;
}
.help-related[b-t0o25qgu98] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
.help-related-card[b-t0o25qgu98] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-1);
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    transition: border-color 0.14s, box-shadow 0.14s, transform 0.07s;
}
.help-related-card:hover[b-t0o25qgu98] {
    border-color: var(--gold);
    box-shadow: var(--shadow-2);
}
.help-related-card:active[b-t0o25qgu98] { transform: translateY(1px); }
.help-related-icon[b-t0o25qgu98] { font-size: 18px; }
.help-related-arrow[b-t0o25qgu98] { margin-left: auto; color: var(--text-3); }
.help-related-card:hover .help-related-arrow[b-t0o25qgu98] { color: var(--gold); }

.help-notfound[b-t0o25qgu98] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    padding: 32px;
    color: var(--text);
}
.help-notfound h2[b-t0o25qgu98] {
    font-family: var(--display);
    font-size: 21px;
    letter-spacing: -0.3px;
    margin: 0 0 8px;
}
.help-notfound p[b-t0o25qgu98] { color: var(--text-2); margin: 0; line-height: 1.6; }
.help-notfound a[b-t0o25qgu98] { color: var(--sky); font-weight: 600; }
.help-notfound a:hover[b-t0o25qgu98] { text-decoration: underline; }
/* /Components/Pages/Sessions.razor.rz.scp.css */
/* Page-unique bits only — the filter bar, table, pills, and pager now use the
   shared design-system classes. What's left is the status row tinting (themed
   on tokens so light + dark both work), the action cell, and the modal context
   block. */

/* Status row tints — warn-tinted rows jump out during triage of stuck sessions
   (PendingVerification / AwaitingResults); cancelled rows recede. */
.tbl tr.row-warn td[b-ujhg856djx] {
    background: var(--warn-bg);
}

.tbl tr.row-muted td[b-ujhg856djx] {
    color: var(--text-3);
    opacity: 0.7;
}

/* Per-row action cell: keep the Submit/Settle buttons on one line with a small
   gap between them. */
.sessions-actions[b-ujhg856djx] {
    white-space: nowrap;
}

.sessions-actions .btn + .btn[b-ujhg856djx] {
    margin-left: 6px;
}

.sessions-notice[b-ujhg856djx] {
    margin: 0 0 12px;
}

/* Submit-results modal context line. */
.dialog-context[b-ujhg856djx] {
    margin: 0 0 4px;
    padding: 10px 14px;
    background: var(--bg-2);
    border-radius: var(--r);
    font-size: 13px;
    color: var(--text-2);
}

.code-chip[b-ujhg856djx] {
    font-family: var(--mono);
    font-size: 12px;
    background: var(--bg-2);
    color: var(--text);
    padding: 1px 6px;
    border-radius: 5px;
}
/* /Components/Pages/Settings.razor.rz.scp.css */
/* Settings page — scoped layout only. Visual primitives (.tabs, .card, .field,
   .btn, .field-label) come from the global admin design system; this file just
   arranges them. All colours go through design tokens so light & dark both work. */

/* Two-column layout — a 220px sticky vertical nav rail on the left, the
   settings cards on the right (the design's grid). Collapses to a single
   column on narrow viewports so the rail stacks above the cards. */
.settings-grid[b-tuqyyqww06] {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: start;
    gap: var(--gap, 20px);
}

@media (max-width: 720px) {
    .settings-grid[b-tuqyyqww06] {
        grid-template-columns: 1fr;
    }
}

/* Left nav rail — a thin-padded sticky card holding one .nav-item per tab. */
.settings-nav[b-tuqyyqww06] {
    padding: 8px;
    position: sticky;
    top: 90px;
}

/* The right column stacks the settings panel + any aux panels (e.g. test SMS). */
.settings-col[b-tuqyyqww06] {
    display: flex;
    flex-direction: column;
    gap: var(--gap, 20px);
    min-width: 0;
}

/* .nav-item is tuned for the dark sidebar; on the light settings card its
   hover would flash a dark-on-dark state. Re-tint the rail's hover so it reads
   on the card surface. Active/idle base colours are set inline in the markup
   (NavItemStyle); this only fixes the interactive hover state. The .nav-item
   buttons are authored in this component so they carry the scope attribute;
   the .nav-ic glyph lives inside the child Icon component, so it needs ::deep. */
.settings-nav .nav-item:hover[b-tuqyyqww06] {
    background: var(--bg-2);
    color: var(--text);
}

.settings-nav .nav-item.active[b-tuqyyqww06]  .nav-ic {
    color: var(--text);
}

/* Settings rows — a single stacked column of full-width .between rows (label +
   hint on the left, control on the right), divided by hairlines. This matches
   the design's vertical list and gives each row room for the two-column split
   now that the page is itself two-column (nav rail + this card). */
.settings-form[b-tuqyyqww06] {
    display: flex;
    flex-direction: column;
}

/* Hairline divider between consecutive rows, the design's per-row border. */
.settings-form[b-tuqyyqww06] >  .setting-row + .setting-row {
    border-top: 1px solid var(--line);
}

/* Footer save/reset row inside the category card. */
.settings-foot[b-tuqyyqww06] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

/* Test-SMS auxiliary panel (auth_sms tab only). */
.settings-aux[b-tuqyyqww06] {
    margin-top: 18px;
}

.settings-aux-head[b-tuqyyqww06] {
    margin-bottom: 14px;
}

.settings-aux-head h3[b-tuqyyqww06] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.1px;
}

.settings-aux-head p[b-tuqyyqww06] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.settings-aux-row[b-tuqyyqww06] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.settings-aux-field[b-tuqyyqww06] {
    flex: 1;
    min-width: 240px;
}

/* Inline notices — status/alert banners. Tinted via semantic tokens so they
   read correctly against both themes. */
.setting-notice[b-tuqyyqww06] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-radius: var(--r-sm);
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 16px;
}

.setting-notice.good[b-tuqyyqww06] {
    background: var(--good-bg);
    color: var(--good);
}

.setting-notice.bad[b-tuqyyqww06] {
    background: var(--bad-bg);
    color: var(--bad);
}
/* /Components/Pages/Verifications.razor.rz.scp.css */
/* Page-unique bits only. The page shell, filter bar, cards, badges, source
   flags, .shot capture chrome, .vstep / .ventry / .vinput, digit tiles, and
   pager all use the shared design-system classes from admin-design.css. What
   remains here is the verification-card accent edge, the three-step body
   layout, the machine-readings columns, and the page-local typography — all
   themed on design tokens so light + dark both work. */

.vf-notice[b-dxdbb0xj28] {
    margin: 0 0 12px;
}

.vf-empty[b-dxdbb0xj28] {
    padding: 32px;
    text-align: center;
    font-size: 13.5px;
}

/* ——— Verification card ——— */
/* Left-edge status accent so the queue is scannable at a glance. The card
   itself is the shared .card surface; we only tint the leading border. */
.vf-card[b-dxdbb0xj28] {
    border-left: 3px solid var(--line-2);
}

.vf-card.card-pending[b-dxdbb0xj28] { border-left-color: var(--warn); }
.vf-card.card-auto[b-dxdbb0xj28] { border-left-color: var(--good); }
.vf-card.card-approved[b-dxdbb0xj28] { border-left-color: var(--good); }
.vf-card.card-rejected[b-dxdbb0xj28] { border-left-color: var(--bad); }

.vf-head[b-dxdbb0xj28] {
    gap: 12px;
    margin-bottom: 18px;
}

.vf-title[b-dxdbb0xj28] {
    font-size: 15px;
}

.vf-title-meta[b-dxdbb0xj28] {
    font-weight: 500;
}

.vf-badges[b-dxdbb0xj28] {
    gap: 8px;
    margin-top: 5px;
}

/* ——— Pipeline warnings callout ——— */
.vf-warnings[b-dxdbb0xj28] {
    background: var(--warn-bg);
    border-radius: var(--r);
    padding: 10px 14px;
    margin-bottom: 18px;
}

.vf-warnings-title[b-dxdbb0xj28] {
    gap: 8px;
    color: var(--warn);
    font-size: 12.5px;
    font-weight: 600;
}

.vf-warning-row[b-dxdbb0xj28] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    margin-top: 6px;
    margin-left: 23px;
}

/* ——— Three-step body ——— */
.vf-body[b-dxdbb0xj28] {
    gap: 26px;
    align-items: stretch;
}

.vf-col[b-dxdbb0xj28] {
    min-width: 0;
}

.vf-col-captures[b-dxdbb0xj28] {
    flex: 1 1 270px;
    min-width: 250px;
}

.vf-col-readings[b-dxdbb0xj28] {
    flex: 1 1 330px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ——— Step 1: real MinIO screenshots in capture chrome ——— */
.vf-shot[b-dxdbb0xj28] {
    margin: 0;
}

.vf-shot .shot-url[b-dxdbb0xj28] {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.vf-shot-src[b-dxdbb0xj28] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--mono);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.vf-shot-src:hover[b-dxdbb0xj28] {
    color: #fff;
    text-decoration: underline;
}

.vf-shot-img[b-dxdbb0xj28] {
    width: 100%;
    height: auto;
    display: block;
}

.vf-shot-note[b-dxdbb0xj28] {
    font-size: 12px;
    margin: 10px 0 0;
}

/* ——— Steps 2 + 3 ——— */
.vf-stage-times[b-dxdbb0xj28] {
    margin-left: auto;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    gap: 5px;
}

/* Step 2: per-game machine readings — a fixed label gutter, then the Scraper
   and AI-vision digit-tile groups SIDE BY SIDE so each pick's two readings sit
   on one line and a per-digit diff is immediately visible. */
.vf-machine-grid[b-dxdbb0xj28] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vf-machine-legend[b-dxdbb0xj28],
.vf-machine-game[b-dxdbb0xj28] {
    display: grid;
    grid-template-columns: 48px 1fr 1fr;
    align-items: center;
    gap: 16px;
}

.vf-machine-gutter[b-dxdbb0xj28] {
    width: 48px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.vf-machine-h[b-dxdbb0xj28] {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.vf-machine-tiles[b-dxdbb0xj28] {
    display: inline-flex;
    align-items: center;
}

/* Step 3 divider + verification block. */
.vf-verify-block[b-dxdbb0xj28] {
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.vf-verify-hint[b-dxdbb0xj28] {
    font-size: 12.5px;
    margin: 0 0 14px;
    line-height: 1.5;
}

/* Confirmed (non-pending) final numbers as alt digit tiles. */
.vf-final[b-dxdbb0xj28] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.vf-final-cell[b-dxdbb0xj28] {
    min-width: 0;
}

/* ——— Match / three-way indicator ——— */
.match-line[b-dxdbb0xj28] {
    font-size: 12.5px;
    color: var(--text-2);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 14px;
}

.match[b-dxdbb0xj28] { font-weight: 600; }
.match.ok[b-dxdbb0xj28] { color: var(--good); }
.match.bad[b-dxdbb0xj28] { color: var(--bad); }
.match.warn[b-dxdbb0xj28] { color: var(--warn); }
.match.unknown[b-dxdbb0xj28] { color: var(--text-3); }

.match-divider[b-dxdbb0xj28] {
    color: var(--line-2);
    margin: 0 0.3rem;
}

.admin-notes[b-dxdbb0xj28] {
    color: var(--text-2);
    font-style: italic;
}

.col-error[b-dxdbb0xj28] {
    color: var(--bad);
    font-size: 12.5px;
    margin: 0;
}

/* ——— Decision form ——— */
.decision-form[b-dxdbb0xj28] {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vf-notes-label[b-dxdbb0xj28] {
    margin-bottom: 0;
}

textarea.vf-notes[b-dxdbb0xj28] {
    min-height: 56px;
}

.decision-actions[b-dxdbb0xj28] {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

/* Inline red callout shown above the actions when the admin's entry diverges
   from the scraper — the magenta "Override & settle" path. */
.vf-disagree[b-dxdbb0xj28] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--bad);
    background: var(--bad-bg);
    padding: 9px 12px;
    border-radius: var(--r);
    margin-top: 4px;
}

.vf-disagree :deep(svg)[b-dxdbb0xj28] {
    flex-shrink: 0;
}

/* ——— Pager card spacing ——— */
.vf-pager-card[b-dxdbb0xj28] {
    margin-top: var(--gap);
}

/* ——— Responsive: stack the capture + readings columns on narrow viewports.
   The .flex.wrap on .vf-body already wraps; this just tightens the machine
   readings + final grids when space is tight. */
@media (max-width: 700px) {
    .vf-machine-legend[b-dxdbb0xj28],
    .vf-machine-game[b-dxdbb0xj28] {
        gap: 12px;
    }
}
/* /Components/Shared/SettingField.razor.rz.scp.css */
/* One settings row — a two-column .between split: label + hint on the LEFT,
   control right-aligned on the RIGHT (the design's label+desc / control
   layout). The input visuals (.field) come from the global admin design
   system; this file lays out the row and the "modified" pill. All colours
   route through design tokens (light + dark safe). */

.setting-row[b-k3or592eb0] {
    /* .between (global) provides display:flex; align-items:center;
       justify-content:space-between. Override the vertical centering to top so
       a multi-line hint doesn't push the control off-centre, and add the row
       gutter + the design's per-row vertical rhythm (15px 0). */
    align-items: flex-start;
    gap: 16px;
    padding: 15px 0;
    min-width: 0;
}

/* Left block — label (+ modified pill) over the hint, capped so long hints
   wrap into a tidy column rather than crowding the control. */
.setting-label-block[b-k3or592eb0] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    max-width: 360px;
}

.setting-head[b-k3or592eb0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* .field-label provides the uppercase eyebrow styling; setting-name only resets
   the bottom margin so it sits flush in the flex row with the pill. */
.setting-name[b-k3or592eb0] {
    margin-bottom: 0;
}

/* Modified indicator — a small amber pill that flags an uncommitted edit without
   shifting the row layout. */
.changed-pill[b-k3or592eb0] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    background: var(--warn-bg);
    color: var(--warn);
    line-height: 1.4;
}

/* Right block — holds the control, right-aligned. flex:none keeps it from
   stretching across the row; a min-width gives single inputs a sane size while
   still hugging the right edge. */
.setting-control[b-k3or592eb0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: none;
    min-width: 150px;
}

/* Number input + unit suffix sit on one line; the unit chip hugs the input's
   right edge. */
.number-with-unit[b-k3or592eb0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.number-with-unit .field[b-k3or592eb0] {
    flex: 1;
    min-width: 0;
}

.number-with-unit .unit[b-k3or592eb0] {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    white-space: nowrap;
}

.setting-hint[b-k3or592eb0] {
    margin: 1px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-3);
}