@import '_content/DOKGenius.Framework.Blazor.UI/DOKGenius.Framework.Blazor.UI.qhdm39m31r.bundle.scp.css';

/* /Components/Layout/PlaygroundLayout.razor.rz.scp.css */
/* DOK-290 — the shell top bar (.dok-app-header*) is styled globally in
   wwwroot/css/dok-shell.css: those classes sit on MudBlazor component roots,
   which never receive the scoped-CSS attribute, so rules here would not apply.
   This file keeps only plain-HTML elements owned by this layout. */

.dok-areas-bar[b-1zqaw1kjpv] {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    z-index: 1100;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 28px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--dok-border-subtle);
}

/* DOK-1657 — the content's clearance under this bar is in dok-shell.css: its class sits on MudMainContent. */

.dok-area-link[b-1zqaw1kjpv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--mud-palette-text-secondary);
    font-weight: var(--dok-font-weight-semibold);
    font-size: 0.9rem;
    cursor: pointer;
}

.dok-area-link:hover[b-1zqaw1kjpv] {
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    color: var(--dok-tone-primary-ink);
}

.dok-area-link.active[b-1zqaw1kjpv] {
    color: var(--dok-tone-primary-ink);
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
}

.dok-mobile-areas[b-1zqaw1kjpv] {
    display: none;
}

@media (max-width: 720px) {
    .dok-areas-bar[b-1zqaw1kjpv] {
        display: none;
    }

    .dok-mobile-areas[b-1zqaw1kjpv] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        display: flex;
        justify-content: space-around;
        align-items: center;
        /* DOK-364 — single source of truth in dok-shell.css; the cadastro footers clear it. */
        height: var(--dok-mobile-areas-height);
        padding: 0 8px;
        background: var(--mud-palette-surface);
        border-top: 1px solid var(--dok-border-subtle);
    }


    .dok-mobile-areas .dok-area-link[b-1zqaw1kjpv] {
        flex-direction: column;
        gap: 2px;
        height: auto;
        padding: 4px 10px;
        font-size: 0.7rem;
    }
}
/* /Components/Pages/Authentication/AcceptInvitation.razor.rz.scp.css */
/* ===== Auth Page - Centered Card Design ===== */

.auth-page[b-gr91evttrh] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    padding: 2rem 1rem;
}

.auth-wrapper[b-gr91evttrh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 400px;
}

/* ===== Brand Section ===== */
.brand-section[b-gr91evttrh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brand-icon[b-gr91evttrh] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1a1a1a;
    border-radius: 6px;
    color: white;
}

.brand-icon[b-gr91evttrh]  .mud-icon-root {
    font-size: 16px;
}

.brand-name[b-gr91evttrh] {
    font-size: var(--dok-font-size-lg);
    font-weight: var(--dok-font-weight-semibold);
    color: #1a1a1a;
}

/* ===== Auth Card ===== */
.auth-card[b-gr91evttrh] {
    width: 100%;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e5e5;
}

/* ===== Header ===== */
.auth-header[b-gr91evttrh] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.header-icon[b-gr91evttrh] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f4f6;
    border-radius: 12px;
    margin: 0 auto 1rem;
    color: #1a1a1a;
}

.header-icon[b-gr91evttrh]  .mud-icon-root {
    font-size: 28px;
}

.auth-title[b-gr91evttrh] {
    font-size: var(--dok-font-size-xl);
    font-weight: var(--dok-font-weight-semibold);
    color: #1a1a1a;
    margin: 0 0 0.5rem 0;
}

.auth-subtitle[b-gr91evttrh] {
    font-size: var(--dok-font-size-sm);
    color: #6b7280;
    margin: 0;
}

/* ===== Form =====

   DOK-1476 — ::deep, because the <form> is rendered by EditForm, a child component, and never carries this page's
   scope attribute: the plain `.auth-form` rule never applied, so the name, the password and their confirmation
   touched each other. The fix DOK-1294 made on the reset page. */
.auth-card[b-gr91evttrh]  .auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group[b-gr91evttrh] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-label[b-gr91evttrh] {
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-medium);
    color: #1a1a1a;
}

.form-input[b-gr91evttrh] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: var(--dok-font-size-sm);
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background-color: #ffffff;
    color: #1a1a1a;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.form-input[b-gr91evttrh]::placeholder {
    color: #9ca3af;
}

.form-input:hover[b-gr91evttrh] {
    border-color: #d1d5db;
}

.form-input:focus[b-gr91evttrh] {
    border-color: #1a1a1a;
    box-shadow: 0 0 0 1px #1a1a1a;
}

/* ===== Checkbox ===== */
.checkbox-group[b-gr91evttrh] {
    display: flex;
    align-items: center;
}

.checkbox-label[b-gr91evttrh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--dok-font-size-sm);
    color: #6b7280;
    cursor: pointer;
}

.checkbox-input[b-gr91evttrh] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #1a1a1a;
}

/* ===== Error Message ===== */
.error-message[b-gr91evttrh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: var(--dok-font-size-sm);
}

.error-message[b-gr91evttrh]  .mud-icon-root {
    font-size: 18px;
}

/* ===== Error State ===== */
.error-state[b-gr91evttrh] {
    text-align: center;
}

.error-state-icon[b-gr91evttrh] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fef2f2;
    border-radius: 50%;
    margin: 0 auto 1rem;
    color: #dc2626;
}

.error-state-icon[b-gr91evttrh]  .mud-icon-root {
    font-size: 32px;
}

/* ===== Success State ===== */
.success-state[b-gr91evttrh] {
    text-align: center;
}

.success-icon[b-gr91evttrh] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #dcfce7;
    border-radius: 50%;
    margin: 0 auto 1rem;
    color: #16a34a;
}

.success-icon[b-gr91evttrh]  .mud-icon-root {
    font-size: 32px;
}

/* ===== Auth Button ===== */
.auth-button[b-gr91evttrh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-medium);
    color: #ffffff;
    background-color: #1a1a1a;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    margin-top: 0.5rem;
}

.auth-button:hover:not(:disabled)[b-gr91evttrh] {
    background-color: #333333;
}

.auth-button:active:not(:disabled)[b-gr91evttrh] {
    background-color: #0a0a0a;
}

.auth-button:disabled[b-gr91evttrh] {
    opacity: 0.7;
    cursor: not-allowed;
}

.auth-button[b-gr91evttrh]  .mud-progress-circular {
    width: 18px !important;
    height: 18px !important;
}

.auth-button-link[b-gr91evttrh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-medium);
    color: #ffffff;
    background-color: #1a1a1a;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s ease;
    margin-top: 1.5rem;
}

.auth-button-link:hover[b-gr91evttrh] {
    background-color: #333333;
}

/* ===== Back Link ===== */
.back-link[b-gr91evttrh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: var(--dok-font-size-sm);
    color: #6b7280;
    text-decoration: none;
    margin-top: 0.5rem;
    transition: color 0.15s ease;
}

.back-link:hover[b-gr91evttrh] {
    color: #1a1a1a;
}

.back-link[b-gr91evttrh]  .mud-icon-root {
    font-size: 18px;
}

/* ===== Responsive Design ===== */
@media (max-width: 480px) {
    .auth-page[b-gr91evttrh] {
        padding: 1rem;
    }

    .auth-card[b-gr91evttrh] {
        padding: 1.5rem;
    }

    .auth-title[b-gr91evttrh] {
        font-size: 1.25rem;
    }
}

/* ===== Focus States for Accessibility ===== */
.auth-button:focus-visible[b-gr91evttrh],
.auth-button-link:focus-visible[b-gr91evttrh],
.back-link:focus-visible[b-gr91evttrh] {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

.form-input:focus-visible[b-gr91evttrh] {
    outline: none;
}
/* /Components/Pages/Authentication/ForgotPassword.razor.rz.scp.css */
.auth-page[b-ggvn53wlw7] {
    min-height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;
    padding: 32px;
    background:
        radial-gradient(circle at 16% 12%, rgba(37, 99, 235, 0.10), transparent 30%),
        radial-gradient(circle at 86% 16%, rgba(15, 159, 143, 0.10), transparent 28%),
        #f6f8fb;
}

.auth-shell[b-ggvn53wlw7] {
    display: grid;
    grid-template-columns: minmax(380px, 0.86fr) minmax(520px, 1.14fr);
    width: min(1120px, 100%);
    min-height: 680px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
}

.auth-panel[b-ggvn53wlw7] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    padding: 34px;
    background: rgba(255, 255, 255, 0.96);
}

.brand-section[b-ggvn53wlw7] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-icon[b-ggvn53wlw7] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #111827;
    color: #ffffff;
}

.brand-name[b-ggvn53wlw7] {
    color: #111827;
    font-size: 1.05rem;
    font-weight: 900;
}

.auth-card[b-ggvn53wlw7],
.auth-header[b-ggvn53wlw7] {
    display: grid;
}

.auth-card[b-ggvn53wlw7] {
    gap: 18px;
}

/* DOK-1476 — ::deep, because the <form> is rendered by EditForm, a child component, and never carries this page's
   scope attribute: the plain `.auth-form` rule never applied, so the tenant, the email and the button touched each
   other. The fix DOK-1294 made on the reset page. */
.auth-card[b-ggvn53wlw7]  .auth-form {
    display: grid;
    gap: 16px;
}

.auth-header[b-ggvn53wlw7] {
    gap: 8px;
}

.header-icon[b-ggvn53wlw7],
.success-icon[b-ggvn53wlw7] {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #eff6ff;
    color: #2563eb;
}

.success-icon[b-ggvn53wlw7] {
    background: #dcfce7;
    color: #16a34a;
}

.auth-eyebrow[b-ggvn53wlw7],
.visual-kicker[b-ggvn53wlw7] {
    margin: 0;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.auth-title[b-ggvn53wlw7] {
    margin: 0;
    color: #0f172a;
    font-size: var(--dok-font-size-2xl);
    font-weight: 900;
    line-height: 1.08;
}

.auth-subtitle[b-ggvn53wlw7] {
    max-width: 420px;
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.55;
}

.auth-subtitle strong[b-ggvn53wlw7] {
    color: #0f172a;
}

.form-group[b-ggvn53wlw7] {
    display: grid;
    gap: 7px;
}

.form-label[b-ggvn53wlw7] {
    color: #111827;
    font-size: 0.78rem;
    font-weight: 900;
}

.tenant-input[b-ggvn53wlw7],
.input-shell[b-ggvn53wlw7] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-shell[b-ggvn53wlw7] {
    grid-template-columns: auto minmax(0, 1fr);
}

.tenant-input:focus-within[b-ggvn53wlw7],
.input-shell:focus-within[b-ggvn53wlw7] {
    border-color: rgba(37, 99, 235, 0.62);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

.tenant-input[b-ggvn53wlw7]  .mud-icon-root,
.input-shell[b-ggvn53wlw7]  .mud-icon-root {
    color: #64748b;
    font-size: 18px;
}

.tenant-input span[b-ggvn53wlw7] {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 850;
}

.form-input[b-ggvn53wlw7] {
    width: 100%;
    min-width: 0;
    height: 42px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: var(--dok-font-weight-bold);
}

.form-input[b-ggvn53wlw7]::placeholder {
    color: #94a3b8;
    font-weight: 650;
}

.error-message[b-ggvn53wlw7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.8rem;
    font-weight: 800;
}

.auth-button[b-ggvn53wlw7],
.auth-button-link[b-ggvn53wlw7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    margin-top: 8px;
    border: 0;
    border-radius: 10px;
    background: #2563eb;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 14px 26px rgba(37, 99, 235, 0.22);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.auth-button:hover:not(:disabled)[b-ggvn53wlw7],
.auth-button-link:hover[b-ggvn53wlw7] {
    background: #1d4ed8;
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.28);
    transform: translateY(-1px);
}

.auth-button:disabled[b-ggvn53wlw7] {
    opacity: 0.72;
    cursor: not-allowed;
}

.auth-button[b-ggvn53wlw7]  .mud-progress-circular {
    width: 18px !important;
    height: 18px !important;
}

.back-link[b-ggvn53wlw7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 850;
    text-decoration: none;
}

.back-link:hover[b-ggvn53wlw7] {
    color: #2563eb;
}

.success-state[b-ggvn53wlw7] {
    display: grid;
    gap: 16px;
}

.resend-text[b-ggvn53wlw7],
.auth-footer[b-ggvn53wlw7] {
    margin: 0;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: var(--dok-font-weight-bold);
}

.resend-link[b-ggvn53wlw7] {
    border: 0;
    background: transparent;
    color: #2563eb;
    font: inherit;
    font-weight: 850;
    cursor: pointer;
}

.resend-link:hover[b-ggvn53wlw7] {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.resend-link:disabled[b-ggvn53wlw7] {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-footer[b-ggvn53wlw7] {
    max-width: 420px;
    line-height: 1.5;
}

.auth-visual[b-ggvn53wlw7] {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 28px;
    padding: 48px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.86)),
        #0f172a;
    color: #ffffff;
}

.auth-visual[b-ggvn53wlw7]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 24% 20%, rgba(37, 99, 235, 0.36), transparent 28%),
        radial-gradient(circle at 82% 74%, rgba(15, 159, 143, 0.34), transparent 30%);
    pointer-events: none;
}

.auth-visual > *[b-ggvn53wlw7] {
    position: relative;
    z-index: 1;
}

.visual-copy h2[b-ggvn53wlw7] {
    margin: 8px 0 10px;
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 950;
    line-height: 1.02;
}

.visual-copy p[b-ggvn53wlw7] {
    max-width: 500px;
    margin: 0;
    color: rgba(226, 232, 240, 0.86);
    font-size: var(--dok-font-size-base);
    font-weight: 650;
    line-height: 1.58;
}

.recovery-visual[b-ggvn53wlw7] {
    align-self: center;
    display: grid;
    grid-template-columns: minmax(220px, 0.82fr) minmax(260px, 1fr);
    align-items: center;
    gap: 18px;
}

.secure-mail-card[b-ggvn53wlw7],
.security-steps[b-ggvn53wlw7] {
    border: 1px solid rgba(226, 232, 240, 0.24);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(12px);
}

.secure-mail-card[b-ggvn53wlw7] {
    display: grid;
    gap: 12px;
    min-height: 240px;
    padding: 22px;
}

.secure-mail-card[b-ggvn53wlw7]  .mud-icon-root {
    color: #5eead4;
    font-size: 48px;
}

.secure-mail-card strong[b-ggvn53wlw7] {
    font-size: 1.15rem;
}

.secure-mail-card span[b-ggvn53wlw7] {
    color: rgba(226, 232, 240, 0.78);
    font-size: 0.82rem;
    font-weight: 800;
}

.mail-lines[b-ggvn53wlw7] {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.mail-lines i[b-ggvn53wlw7] {
    display: block;
    height: 9px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.32);
}

.mail-lines i:nth-child(2)[b-ggvn53wlw7] {
    width: 72%;
}

.mail-lines i:nth-child(3)[b-ggvn53wlw7] {
    width: 46%;
}

.security-steps[b-ggvn53wlw7] {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.security-steps span[b-ggvn53wlw7],
.trust-strip span[b-ggvn53wlw7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(248, 250, 252, 0.88);
    font-size: 0.78rem;
    font-weight: 900;
}

.security-steps[b-ggvn53wlw7]  .mud-icon-root {
    color: #93c5fd;
}

.trust-strip[b-ggvn53wlw7] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.trust-strip span[b-ggvn53wlw7] {
    border: 1px solid rgba(226, 232, 240, 0.22);
}

@media (max-width: 980px) {
    .auth-shell[b-ggvn53wlw7] {
        grid-template-columns: 1fr;
    }

    .auth-visual[b-ggvn53wlw7] {
        min-height: 540px;
        padding: 34px;
    }
}

@media (max-width: 640px) {
    .auth-page[b-ggvn53wlw7] {
        padding: 0;
        place-items: stretch;
    }

    .auth-shell[b-ggvn53wlw7] {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .auth-panel[b-ggvn53wlw7],
    .auth-visual[b-ggvn53wlw7] {
        padding: 24px;
    }

    .auth-title[b-ggvn53wlw7] {
        font-size: 1.65rem;
    }

    .recovery-visual[b-ggvn53wlw7] {
        grid-template-columns: 1fr;
    }
}

.auth-button:focus-visible[b-ggvn53wlw7],
.auth-button-link:focus-visible[b-ggvn53wlw7],
.back-link:focus-visible[b-ggvn53wlw7],
.resend-link:focus-visible[b-ggvn53wlw7] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
/* /Components/Pages/Authentication/ResetPassword.razor.rz.scp.css */
/* ===== Auth Page - Centered Card Design =====

   DOK-1294 (DEV-60) — the screen wears the product's tokens, not literal greys: the primary button and the accents
   are the theme's primary, surfaces and ink come from the palette, so the screen follows the theme it is drawn in.
   An anonymous visitor always gets the light one (PlaygroundLayout, DOK-663); a signed-in visitor who opens a reset
   link sees the page inside the shell, dark when the shell is — where the old literal whites were a light island. */

.auth-page[b-oc73y6hpb2] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--dok-space-xl) var(--dok-space-md);
    background-color: var(--mud-palette-background);
    color: var(--dok-text-primary);
    font-family: var(--dok-font-sans);
}

/* 440px: «Definir a nova palavra-passe» and «Set your new password» fit the title's line at every language. */
.auth-wrapper[b-oc73y6hpb2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dok-space-lg);
    width: 100%;
    max-width: 440px;
}

/* ===== Auth Card ===== */
.auth-card[b-oc73y6hpb2] {
    width: 100%;
    padding: var(--dok-space-xl);
    background-color: var(--dok-card-bg);
    border: 1px solid var(--dok-card-border);
    border-radius: var(--dok-radius-lg);
    box-shadow: var(--dok-shadow-md);
}

/* ===== Header ===== */
.auth-header[b-oc73y6hpb2] {
    text-align: center;
    margin-bottom: var(--dok-space-lg);
}

.header-icon[b-oc73y6hpb2] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--dok-space-md);
    border-radius: var(--dok-radius);
    background-color: var(--dok-overlay-soft);
    color: var(--mud-palette-primary);
}

.header-icon[b-oc73y6hpb2]  .mud-icon-root {
    font-size: 28px;
}

.auth-title[b-oc73y6hpb2] {
    margin: 0 0 var(--dok-space-xs) 0;
    font-size: var(--dok-font-size-xl);
    font-weight: var(--dok-font-weight-semibold);
    line-height: var(--dok-line-height-tight);
    color: var(--dok-text-primary);
}

.auth-subtitle[b-oc73y6hpb2] {
    margin: 0;
    font-size: var(--dok-font-size-sm);
    line-height: var(--dok-line-height-normal);
    color: var(--dok-text-secondary);
}

/* ===== Form =====

   DOK-1294 — ::deep, because the <form> is rendered by EditForm, a child component, and never carries this page's
   scope attribute: the plain `.auth-form` rule never applied, so the fields had no gap between them and the tenant's
   hint touched the next label. */
.auth-card[b-oc73y6hpb2]  .auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--dok-space-md);
}

.form-group[b-oc73y6hpb2] {
    display: flex;
    flex-direction: column;
    gap: var(--dok-space-xs);
}

.form-label[b-oc73y6hpb2] {
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-medium);
    color: var(--dok-text-primary);
}

.form-input[b-oc73y6hpb2] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: var(--dok-font-size-sm);
    font-family: inherit;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--dok-radius-sm);
    background-color: var(--mud-palette-surface);
    color: var(--dok-text-primary);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.form-input[b-oc73y6hpb2]::placeholder {
    color: var(--mud-palette-text-disabled);
}

/* DOK-719: the tenant arrives on the link and is shown, not asked for. Read-only rather than
   hidden — the reader must be able to see which workspace they are setting a password for. */
.form-input:disabled[b-oc73y6hpb2] {
    background-color: var(--mud-palette-background-gray);
    color: var(--dok-text-secondary);
    cursor: not-allowed;
}

.form-hint[b-oc73y6hpb2] {
    margin: 0;
    font-size: var(--dok-font-size-xs);
    line-height: var(--dok-line-height-normal);
    color: var(--dok-text-secondary);
}

.form-input:hover:not(:disabled)[b-oc73y6hpb2] {
    border-color: var(--mud-palette-text-secondary);
}

.form-input:focus[b-oc73y6hpb2] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px var(--dok-overlay-soft);
}

/* ===== Checkbox ===== */
.checkbox-group[b-oc73y6hpb2] {
    display: flex;
    align-items: center;
}

.checkbox-label[b-oc73y6hpb2] {
    display: flex;
    align-items: center;
    gap: var(--dok-space-xs);
    font-size: var(--dok-font-size-sm);
    color: var(--dok-text-secondary);
    cursor: pointer;
}

.checkbox-input[b-oc73y6hpb2] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--mud-palette-primary);
}

/* ===== Error Message ===== */
.error-message[b-oc73y6hpb2] {
    display: flex;
    align-items: center;
    gap: var(--dok-space-xs);
    padding: var(--dok-space-sm) var(--dok-space-md);
    border: 1px solid rgba(var(--mud-palette-error-rgb), 0.3);
    border-radius: var(--dok-radius-sm);
    background-color: rgba(var(--mud-palette-error-rgb), 0.08);
    color: var(--dok-danger-ink);
    font-size: var(--dok-font-size-sm);
}

.error-message[b-oc73y6hpb2]  .mud-icon-root {
    font-size: 18px;
}

/* ===== Error State ===== */
.error-state[b-oc73y6hpb2] {
    text-align: center;
}

.error-state-icon[b-oc73y6hpb2] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--dok-space-md);
    border-radius: var(--dok-radius-full);
    background-color: rgba(var(--mud-palette-error-rgb), 0.1);
    color: var(--dok-danger-ink);
}

.error-state-icon[b-oc73y6hpb2]  .mud-icon-root {
    font-size: 32px;
}

/* ===== Success State ===== */
.success-state[b-oc73y6hpb2] {
    text-align: center;
}

.success-icon[b-oc73y6hpb2] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--dok-space-md);
    border-radius: var(--dok-radius-full);
    background-color: rgba(var(--mud-palette-success-rgb), 0.12);
    color: var(--dok-success-ink);
}

.success-icon[b-oc73y6hpb2]  .mud-icon-root {
    font-size: 32px;
}

/* ===== Auth Button ===== */
.auth-button[b-oc73y6hpb2],
.auth-button-link[b-oc73y6hpb2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dok-space-xs);
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-semibold);
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
    border: none;
    border-radius: var(--dok-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.auth-button[b-oc73y6hpb2] {
    margin-top: var(--dok-space-xs);
}

.auth-button-link[b-oc73y6hpb2] {
    margin-top: var(--dok-space-lg);
}

.auth-button:hover:not(:disabled)[b-oc73y6hpb2],
.auth-button-link:hover[b-oc73y6hpb2] {
    background-color: var(--mud-palette-primary-darken);
}

.auth-button:disabled[b-oc73y6hpb2] {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-button[b-oc73y6hpb2]  .mud-progress-circular {
    width: 18px !important;
    height: 18px !important;
}

/* ===== Back Link ===== */
.back-link[b-oc73y6hpb2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dok-space-xs);
    margin-top: var(--dok-space-xs);
    font-size: var(--dok-font-size-sm);
    color: var(--dok-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.back-link:hover[b-oc73y6hpb2] {
    color: var(--mud-palette-primary);
}

.back-link[b-oc73y6hpb2]  .mud-icon-root {
    font-size: 18px;
}

/* ===== Responsive Design ===== */
@media (max-width: 480px) {
    .auth-page[b-oc73y6hpb2] {
        padding: var(--dok-space-md);
    }

    .auth-card[b-oc73y6hpb2] {
        padding: var(--dok-space-lg);
    }

    .auth-title[b-oc73y6hpb2] {
        font-size: var(--dok-font-size-lg);
    }
}

/* ===== Focus States for Accessibility ===== */
.auth-button:focus-visible[b-oc73y6hpb2],
.auth-button-link:focus-visible[b-oc73y6hpb2],
.back-link:focus-visible[b-oc73y6hpb2] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.form-input:focus-visible[b-oc73y6hpb2] {
    outline: none;
}
/* /Components/Pages/SimpleLogin.razor.rz.scp.css */
.login-page[b-2e4vmd91lt] {
    min-height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;
    padding: 32px;
    background:
        radial-gradient(circle at 16% 12%, rgba(37, 99, 235, 0.10), transparent 30%),
        radial-gradient(circle at 86% 16%, rgba(15, 159, 143, 0.10), transparent 28%),
        #f6f8fb;
}

.login-shell[b-2e4vmd91lt] {
    display: grid;
    grid-template-columns: minmax(380px, 0.86fr) minmax(520px, 1.14fr);
    width: min(1120px, 100%);
    min-height: 680px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.18);
}

.login-panel[b-2e4vmd91lt] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    padding: 34px;
    background: rgba(255, 255, 255, 0.96);
}

.brand-section[b-2e4vmd91lt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.brand-lockup[b-2e4vmd91lt] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Language selector (DOK-202) — native <details> dropdown, works pre-circuit + keyboard accessible. */
.lang-switch[b-2e4vmd91lt] {
    position: relative;
}

.lang-switch__toggle[b-2e4vmd91lt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid rgba(148, 163, 184, 0.30);
    border-radius: 9px;
    background: rgba(248, 250, 252, 0.74);
    color: #111827;
    font-size: 0.78rem;
    font-weight: var(--dok-font-weight-bold);
    line-height: 1;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.lang-switch__toggle[b-2e4vmd91lt]::-webkit-details-marker {
    display: none;
}

.lang-switch__toggle:hover[b-2e4vmd91lt],
.lang-switch__toggle:focus-visible[b-2e4vmd91lt] {
    border-color: rgba(124, 92, 252, 0.55);
    outline: none;
}

.lang-switch__code[b-2e4vmd91lt] {
    letter-spacing: 0.02em;
}

.lang-switch__menu[b-2e4vmd91lt] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 148px;
    display: grid;
    gap: 2px;
    padding: 6px;
    border: 1px solid rgba(148, 163, 184, 0.30);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16);
}

.lang-switch__option[b-2e4vmd91lt] {
    display: block;
    padding: 8px 10px;
    border-radius: 7px;
    color: #111827;
    font-size: 0.82rem;
    font-weight: var(--dok-font-weight-semibold);
    text-decoration: none;
}

.lang-switch__option:hover[b-2e4vmd91lt],
.lang-switch__option:focus-visible[b-2e4vmd91lt] {
    background: rgba(124, 92, 252, 0.10);
    color: #7c5cfc;
    outline: none;
}

.brand-icon[b-2e4vmd91lt] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #111827 0%, #2563eb 135%);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
}

.brand-name[b-2e4vmd91lt] {
    color: #111827;
    font-size: 1.05rem;
    font-weight: 900;
}

.login-card[b-2e4vmd91lt] {
    display: grid;
    gap: 18px;
}

.login-header[b-2e4vmd91lt] {
    display: grid;
    gap: 6px;
}

.login-eyebrow[b-2e4vmd91lt],
.visual-kicker[b-2e4vmd91lt] {
    margin: 0;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.login-title[b-2e4vmd91lt] {
    margin: 0;
    color: #0f172a;
    font-size: var(--dok-font-size-2xl);
    font-weight: 900;
    line-height: 1.08;
}

.login-subtitle[b-2e4vmd91lt] {
    max-width: 420px;
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.55;
}

.login-error[b-2e4vmd91lt] {
    padding: 11px 13px;
    border: 1px solid rgba(185, 28, 28, 0.24);
    border-radius: 10px;
    background: rgba(254, 226, 226, 0.72);
    color: #991b1b;
    font-size: 0.82rem;
    font-weight: var(--dok-font-weight-bold);
    line-height: 1.45;
}

.login-form[b-2e4vmd91lt] {
    display: grid;
    gap: 14px;
}

.form-group[b-2e4vmd91lt] {
    display: grid;
    gap: 7px;
}

.label-row[b-2e4vmd91lt],
.login-options[b-2e4vmd91lt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.form-label[b-2e4vmd91lt] {
    color: #111827;
    font-size: 0.78rem;
    font-weight: 900;
}

.forgot-link[b-2e4vmd91lt],
.signup-link[b-2e4vmd91lt] {
    color: #2563eb;
    font-size: 0.78rem;
    font-weight: 850;
    text-decoration: none;
}

.forgot-link:hover[b-2e4vmd91lt],
.signup-link:hover[b-2e4vmd91lt] {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tenant-input[b-2e4vmd91lt],
.input-shell[b-2e4vmd91lt] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-shell[b-2e4vmd91lt] {
    grid-template-columns: auto minmax(0, 1fr);
}

.input-shell--password[b-2e4vmd91lt] {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.tenant-input:focus-within[b-2e4vmd91lt],
.input-shell:focus-within[b-2e4vmd91lt] {
    border-color: rgba(37, 99, 235, 0.62);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

.tenant-input[b-2e4vmd91lt]  .mud-icon-root,
.input-shell[b-2e4vmd91lt]  .mud-icon-root {
    color: #64748b;
    font-size: 18px;
}

.tenant-input span[b-2e4vmd91lt] {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 850;
}

.form-input[b-2e4vmd91lt] {
    width: 100%;
    min-width: 0;
    height: 42px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: var(--dok-font-weight-bold);
}

.form-input[b-2e4vmd91lt]::placeholder {
    color: #94a3b8;
    font-weight: 650;
}

.remember-option[b-2e4vmd91lt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 800;
}

.remember-option input[b-2e4vmd91lt] {
    width: 15px;
    height: 15px;
    accent-color: #2563eb;
}

.password-icon-button[b-2e4vmd91lt] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.password-icon-button:hover[b-2e4vmd91lt] {
    background: #f1f5f9;
    color: #2563eb;
}

.login-button[b-2e4vmd91lt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb 0%, #7c5cfc 100%);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.26);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.login-button:hover[b-2e4vmd91lt] {
    background: linear-gradient(135deg, #1d4ed8 0%, #6d4cf0 100%);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.32);
    transform: translateY(-1px);
}

.divider[b-2e4vmd91lt] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 850;
}

.divider[b-2e4vmd91lt]::before,
.divider[b-2e4vmd91lt]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.signup-text[b-2e4vmd91lt],
.login-footer[b-2e4vmd91lt] {
    margin: 0;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: var(--dok-font-weight-bold);
}

.login-footer[b-2e4vmd91lt] {
    max-width: 420px;
    line-height: 1.5;
}

.login-visual[b-2e4vmd91lt] {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 28px;
    padding: 48px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.86)),
        #0f172a;
    color: #ffffff;
}

.login-visual[b-2e4vmd91lt]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 24% 20%, rgba(37, 99, 235, 0.36), transparent 28%),
        radial-gradient(circle at 82% 74%, rgba(15, 159, 143, 0.34), transparent 30%);
    pointer-events: none;
}

.login-visual > *[b-2e4vmd91lt] {
    position: relative;
    z-index: 1;
}

.visual-copy[b-2e4vmd91lt] {
    max-width: 580px;
}

.visual-copy h2[b-2e4vmd91lt] {
    margin: 8px 0 10px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 950;
    line-height: 1.02;
}

.visual-copy p[b-2e4vmd91lt] {
    max-width: 500px;
    margin: 0;
    color: rgba(226, 232, 240, 0.86);
    font-size: var(--dok-font-size-base);
    font-weight: 650;
    line-height: 1.58;
}

.workflow-illustration[b-2e4vmd91lt] {
    align-self: stretch;
}

.wf-stage[b-2e4vmd91lt] {
    position: relative;
    height: 280px;
}

/* Invoice */
.doc-card[b-2e4vmd91lt] {
    position: absolute;
    left: 0;
    top: 0;
    width: 172px;
    height: 210px;
    padding: 16px;
    overflow: hidden;
    border-radius: 14px;
    background: #f1f5f9;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
    transform: rotate(-3deg);
}

.doc-topline[b-2e4vmd91lt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.doc-topline span[b-2e4vmd91lt] {
    font-size: 0.76rem;
    font-weight: 800;
    color: #1a1a2e;
}

.doc-topline b[b-2e4vmd91lt] {
    padding: 3px 7px;
    border-radius: 6px;
    background: #e6f1fb;
    color: #185fa5;
    font-size: 0.6rem;
    font-weight: 800;
}

.doc-lines[b-2e4vmd91lt] {
    display: grid;
    gap: 7px;
    margin-bottom: 16px;
}

.doc-lines i[b-2e4vmd91lt] {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: #dbe3ec;
}

.doc-lines i:nth-child(1)[b-2e4vmd91lt] { width: 80%; background: #cbd5e1; }
.doc-lines i:nth-child(2)[b-2e4vmd91lt] { width: 58%; }
.doc-lines i:nth-child(3)[b-2e4vmd91lt] { width: 70%; }

.doc-grid[b-2e4vmd91lt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.doc-grid i[b-2e4vmd91lt] {
    display: block;
    height: 26px;
    border-radius: 7px;
    background: #e2e8f0;
}

.doc-scan[b-2e4vmd91lt] {
    position: absolute;
    left: 0;
    right: 0;
    top: 14px;
    height: 3px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, #5dcaa5, transparent);
    box-shadow: 0 0 12px 2px rgba(93, 202, 165, 0.6);
}

/* AI Extraction node */
.extract-node[b-2e4vmd91lt] {
    position: absolute;
    left: 150px;
    top: 88px;
    width: 124px;
    padding: 13px;
    border-radius: 13px;
    background: rgba(30, 41, 59, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.extract-head[b-2e4vmd91lt] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}

.extract-head span[b-2e4vmd91lt] {
    font-size: 0.74rem;
    font-weight: var(--dok-font-weight-bold);
    color: #e2e8f0;
}

.extract-node[b-2e4vmd91lt]  .mud-icon-root {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: #5dcaa5;
}

.extract-fields[b-2e4vmd91lt] {
    font-size: 0.7rem;
    color: #94a3b8;
}

.extract-score[b-2e4vmd91lt] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #5dcaa5;
}

/* Work Item / Dossiê card */
.case-card[b-2e4vmd91lt] {
    position: absolute;
    right: 0;
    top: 50px;
    width: 236px;
    padding: 15px;
    border-radius: 14px;
    background: rgba(17, 24, 39, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

.case-head[b-2e4vmd91lt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.case-head span[b-2e4vmd91lt] {
    font-size: 0.7rem;
    font-weight: var(--dok-font-weight-bold);
    color: #94a3b8;
    letter-spacing: 0.04em;
}

.case-head b[b-2e4vmd91lt] {
    padding: 3px 9px;
    border-radius: 9999px;
    background: #fceaea;
    color: #a32d2d;
    font-size: 0.62rem;
    font-weight: 800;
}

.case-card strong[b-2e4vmd91lt] {
    display: block;
    margin-bottom: 4px;
    font-size: var(--dok-font-size-base);
    font-weight: 800;
    color: #fff;
}

.case-card small[b-2e4vmd91lt] {
    display: block;
    margin-bottom: 12px;
    font-size: 0.72rem;
    font-weight: var(--dok-font-weight-medium);
    color: #94a3b8;
}

.case-steps[b-2e4vmd91lt] {
    display: flex;
    gap: 5px;
}

.case-steps i[b-2e4vmd91lt] {
    flex: 1;
    height: 6px;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.25);
}

.case-step-1[b-2e4vmd91lt],
.case-step-2[b-2e4vmd91lt] {
    background: #1d9e75;
}

/* Genius Q&A panel */
.pilot-card[b-2e4vmd91lt] {
    position: absolute;
    left: 6px;
    bottom: 0;
    width: 300px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(17, 24, 39, 0.96);
    border: 1px solid rgba(124, 92, 252, 0.35);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
}

.pilot-head[b-2e4vmd91lt] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.pilot-avatar[b-2e4vmd91lt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #4f46e5, #7c5cfc);
}

.pilot-avatar[b-2e4vmd91lt]  .mud-icon-root {
    width: 15px;
    height: 15px;
    font-size: 15px;
    color: #fff;
}

.pilot-name[b-2e4vmd91lt] {
    font-size: 0.8rem;
    font-weight: 800;
    color: #fff;
}

.pilot-question[b-2e4vmd91lt] {
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 9px;
}

.pilot-question span[b-2e4vmd91lt] {
    font-size: 0.76rem;
    font-weight: var(--dok-font-weight-semibold);
    color: #cbd5e1;
}

.pilot-answer[b-2e4vmd91lt] {
    display: flex;
    gap: 8px;
}

.pilot-answer[b-2e4vmd91lt]  .mud-icon-root {
    width: 15px;
    height: 15px;
    font-size: 15px;
    color: #7c5cfc;
    flex-shrink: 0;
    margin-top: 2px;
}

.pilot-answer span[b-2e4vmd91lt] {
    font-size: 0.76rem;
    font-weight: var(--dok-font-weight-medium);
    color: #94a3b8;
    line-height: 1.4;
}

.trust-strip[b-2e4vmd91lt] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.trust-strip span[b-2e4vmd91lt] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(226, 232, 240, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(248, 250, 252, 0.88);
    font-size: 0.76rem;
    font-weight: 900;
}

@media (max-width: 980px) {
    .login-page[b-2e4vmd91lt] {
        padding: 18px;
    }

    .login-shell[b-2e4vmd91lt] {
        grid-template-columns: 1fr;
    }

    .login-visual[b-2e4vmd91lt] {
        min-height: 540px;
        padding: 34px;
    }
}

@media (max-width: 640px) {
    .login-page[b-2e4vmd91lt] {
        padding: 0;
        place-items: stretch;
    }

    .login-shell[b-2e4vmd91lt] {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .login-panel[b-2e4vmd91lt],
    .login-visual[b-2e4vmd91lt] {
        padding: 24px;
    }

    .login-title[b-2e4vmd91lt] {
        font-size: 1.65rem;
    }

    .login-options[b-2e4vmd91lt] {
        align-items: flex-start;
        flex-direction: column;
    }
}

.login-button:focus-visible[b-2e4vmd91lt],
.forgot-link:focus-visible[b-2e4vmd91lt],
.signup-link:focus-visible[b-2e4vmd91lt],
.password-icon-button:focus-visible[b-2e4vmd91lt] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* DOK-241 — Login visual: invoice extraction → AI → Dossiê → Genius Q&A.
   Decorative only (.workflow-illustration is aria-hidden). All motion gated behind
   prefers-reduced-motion: no-preference, so reduced-motion users get a sensible
   static composition (all cards visible, two approval steps filled, no scan line). */
@media (prefers-reduced-motion: no-preference) {
    .doc-scan[b-2e4vmd91lt] { animation: dokScan-b-2e4vmd91lt 9s ease-in-out infinite; }
    .extract-node[b-2e4vmd91lt] { animation: dokRise-b-2e4vmd91lt 9s ease-in-out infinite; }
    .case-card[b-2e4vmd91lt] { animation: dokCase-b-2e4vmd91lt 9s ease-in-out infinite; }
    .case-step-1[b-2e4vmd91lt] { animation: dokStep1-b-2e4vmd91lt 9s ease-in-out infinite; }
    .case-step-2[b-2e4vmd91lt] { animation: dokStep2-b-2e4vmd91lt 9s ease-in-out infinite; }
    .pilot-card[b-2e4vmd91lt] { animation: genius-b-2e4vmd91lt 9s ease-in-out infinite; }
    .pilot-question[b-2e4vmd91lt] { width: 0; animation: dokType-b-2e4vmd91lt 9s steps(30) infinite; }
    .pilot-answer[b-2e4vmd91lt] { opacity: 0; animation: dokAnswer-b-2e4vmd91lt 9s ease-in-out infinite; }
}

@keyframes dokScan-b-2e4vmd91lt {
    0%, 12% { top: 14px; opacity: 0; }
    16% { opacity: 1; }
    40% { top: 150px; opacity: 1; }
    46%, 100% { top: 150px; opacity: 0; }
}

@keyframes dokRise-b-2e4vmd91lt {
    0%, 20% { opacity: 0; transform: translateY(14px); }
    30%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes dokCase-b-2e4vmd91lt {
    0%, 42% { opacity: 0; transform: translateY(16px) scale(0.97); }
    54%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dokStep1-b-2e4vmd91lt {
    0%, 46% { background: rgba(148, 163, 184, 0.25); }
    56%, 100% { background: #1d9e75; }
}

@keyframes dokStep2-b-2e4vmd91lt {
    0%, 58% { background: rgba(148, 163, 184, 0.25); }
    68%, 100% { background: #1d9e75; }
}

@keyframes genius-b-2e4vmd91lt {
    0%, 66% { opacity: 0; transform: translateY(16px); }
    76%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes dokAnswer-b-2e4vmd91lt {
    0%, 80% { opacity: 0; }
    90%, 100% { opacity: 1; }
}

@keyframes dokType-b-2e4vmd91lt {
    0%, 70% { width: 0; }
    80%, 100% { width: 100%; }
}

/* Release 2026.11 — the Microsoft door beside (or instead of) the password form. */
.sso-button[b-2e4vmd91lt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.sso-button:hover[b-2e4vmd91lt] {
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.sso-button__mark[b-2e4vmd91lt] {
    width: 18px;
    height: 18px;
    background:
        linear-gradient(#f25022, #f25022) 0 0 / 8px 8px no-repeat,
        linear-gradient(#7fba00, #7fba00) 10px 0 / 8px 8px no-repeat,
        linear-gradient(#00a4ef, #00a4ef) 0 10px / 8px 8px no-repeat,
        linear-gradient(#ffb900, #ffb900) 10px 10px / 8px 8px no-repeat;
}

.sso-divider[b-2e4vmd91lt] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: var(--dok-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sso-divider[b-2e4vmd91lt]::before,
.sso-divider[b-2e4vmd91lt]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(15, 23, 42, 0.1);
}

.sso-note[b-2e4vmd91lt] {
    margin: 0;
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.5;
}

.sso-note--warning[b-2e4vmd91lt] {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
}

.emergency-link[b-2e4vmd91lt] {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: #2563eb;
    font-size: 0.82rem;
    font-weight: var(--dok-font-weight-bold);
    cursor: pointer;
    text-decoration: underline;
}

.password-form[b-2e4vmd91lt] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.password-form--hidden[b-2e4vmd91lt] {
    display: none;
}
/* /Components/Pages/SiteContent/SiteArticleEditDialog.razor.rz.scp.css */
/* DOK-944 — the rendered preview beside the markdown.

   Its height follows the 18-line body field it sits beside, and it scrolls rather than growing: a long
   article would otherwise push the image and tag fields off the bottom of the dialog, and the reviewer
   would lose the side-by-side reading that is the point of having a preview here at all. */
.dok-site-article-preview[b-musrgwrlbu] {
    max-height: 28rem;
    overflow: auto;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* The preview is a MarkupString, so its elements carry no scope attribute and need ::deep to be reached. */
.dok-site-article-preview[b-musrgwrlbu]  img {
    max-width: 100%;
    height: auto;
}

.dok-site-article-preview[b-musrgwrlbu]  table {
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
}

.dok-site-article-preview[b-musrgwrlbu]  th,
.dok-site-article-preview[b-musrgwrlbu]  td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.25rem 0.5rem;
}

.dok-site-article-preview[b-musrgwrlbu]  pre {
    overflow-x: auto;
}

/* DOK-946 — the article's image, as the site serves it. Shown at the width a reader's column gives it at
   most, and never taller than a third of a laptop screen: the reviewer needs to recognise the picture and
   read its text, not to scroll past it to reach the fields below. */
.dok-site-article-image[b-musrgwrlbu] {
    display: block;
    max-width: min(100%, 40rem);
    max-height: 18rem;
    object-fit: contain;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
}
/* /Components/Pages/Users/UserDetailPage.razor.rz.scp.css */
/* ===== User Detail Page - Widescreen Layout ===== */

/* DOK-1475 — only rules for elements this page writes itself live here. The cards, the action panels, the danger
   zone and their animations were rules for classes handed to MudBlazor components (MudPaper, MudExpansionPanel,
   MudStack, MudList), whose elements carry no scope attribute of this page: they never applied, and were deleted.
   The page's look is MudBlazor's and the global theme's (`.dok-premium-app .profile-card`). */

/* DOK-1505 — the picture itself is DokPersonAvatar (its Profile variant sets size, colour and photo). This wrapper only
   centres it and anchors the status indicator over its corner. */
.profile-avatar[b-d8uuheaqeo] {
    display: flex;
    position: relative;
    width: fit-content;
    margin: 0 auto 1rem;
}

.status-indicator[b-d8uuheaqeo] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid var(--mud-palette-surface);
}

.status-indicator.active[b-d8uuheaqeo] {
    background: var(--mud-palette-success);
}

.status-indicator.inactive[b-d8uuheaqeo] {
    background: var(--mud-palette-error);
}

.profile-info[b-d8uuheaqeo] {
    padding: 24px 20px 20px;
    text-align: center;
}

/* Responsive */
@media (max-width: 960px) {
    .profile-info[b-d8uuheaqeo] {
        padding-top: 20px;
    }
}
/* /Components/Shared/DokAuthBrand.razor.rz.scp.css */
/* DOK-1294 (DEV-60) — the lockup on a screen before sign-in. Tokens only: the name follows the theme's ink. */
.dok-auth-brand[b-u80u9xrk9x] {
    display: inline-flex;
    align-items: center;
    gap: var(--dok-space-sm);
}

.dok-auth-brand__mark[b-u80u9xrk9x] {
    display: block;
    flex: 0 0 auto;
}

.dok-auth-brand__name[b-u80u9xrk9x] {
    font-family: var(--dok-font-sans);
    font-size: var(--dok-font-size-xl);
    font-weight: var(--dok-font-weight-bold);
    line-height: var(--dok-line-height-tight);
    letter-spacing: -0.01em;
    color: var(--dok-text-primary);
}
/* /Components/Shared/DokPasswordRequirements.razor.rz.scp.css */
/* DOK-814 — the live password requirement checklist.

   DOK-806 — the colours used to be stated literally, on the grounds that the hosts are the anonymous
   auth pages (reset password, accept invitation), which paint their own fixed light palette and never
   see the tenant theme. That was true of two hosts out of three: UserCreatePage is behind [Authorize]
   and sits inside the app shell, where an administrator on the dark theme got this panel as a white
   rectangle with near-black text on it. Tokens instead, so the same file is right in both places —
   on the auth pages the MudBlazor palette is forced light anyway (PlaygroundLayout's anonymous
   branch), so nothing there moves.

   Red/green is not the only signal: the ::before glyph differs in shape and .dok-pwreq__state carries
   the state in words for assistive technology. */

.dok-pwreq[b-ovi55nhfl6] {
    margin: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--dok-card-border);
    border-radius: 8px;
    background-color: var(--mud-palette-background-gray, #fafafa);
}

.dok-pwreq__title[b-ovi55nhfl6] {
    margin: 0 0 0.5rem;
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-semibold);
    letter-spacing: 0.01em;
    color: var(--dok-text-primary);
}

.dok-pwreq__list[b-ovi55nhfl6] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dok-pwreq__item[b-ovi55nhfl6] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--dok-font-size-xs);
    line-height: 1.4;
}

.dok-pwreq__icon[b-ovi55nhfl6] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 0.9rem;
    height: 1.05rem;
}

.dok-pwreq__icon svg[b-ovi55nhfl6] {
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dok-pwreq__text[b-ovi55nhfl6] {
    min-width: 0;
}

.dok-pwreq__item.is-pending[b-ovi55nhfl6] {
    color: var(--dok-danger-ink);
}

.dok-pwreq__item.is-met[b-ovi55nhfl6] {
    color: var(--dok-success-ink);
}

/* Present to a screen reader, absent on screen: the icon and the colour already say it there.
   Not display:none — that would remove it from the accessibility tree as well. */
.dok-pwreq__state[b-ovi55nhfl6] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The high-contrast pair moved to dok-theme.css with the tokens: it used to be stated here, in light
   values only, so asking the OS for more contrast on the dark theme made the checklist harder to read
   rather than easier. --dok-danger-ink / --dok-success-ink now answer prefers-contrast in both
   themes, which is why nothing replaces this block. */
/* /Components/WorkItems/Camera/CameraCaptureDialog.razor.rz.scp.css */
.dok-camera[b-k8v1rwq5mh] {
    min-height: 28rem;
}

/* DOK-387 — o passo de explicação, antes de a permissão ser pedida. Ocupa a mesma altura da
   pré-visualização para o diálogo não saltar quando a câmara abre. */
.dok-camera__priming[b-k8v1rwq5mh] {
    display: grid;
    place-items: center;
    gap: 0.75rem;
    min-height: clamp(22rem, 58vh, 42rem);
    padding: 2rem;
    text-align: center;
}

/* DOK-1474 — ::deep from .dok-camera, written here: the class is on the MudSelect, a child component, whose element
   carries no scope attribute of this one. Without it this rule never applied. */
.dok-camera[b-k8v1rwq5mh]  .dok-camera__device {
    max-width: 22rem;
    margin-bottom: 0.75rem;
}

/* DOK-393 — the kind of failure (not possible on this device / needs a permission / unavailable for now), above
   what happened: it is what tells the person whether trying again can change anything. ::deep because MudText is a
   child component and carries no scope attribute of this one. */
.dok-camera[b-k8v1rwq5mh]  .dok-camera__failure-kind {
    display: block;
    font-weight: var(--dok-font-weight-bold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
/* /Components/WorkItems/Camera/CameraDialogActions.razor.rz.scp.css */
/* DOK-1712 — moved here from the dialog's stylesheet with the footer they style: an isolated rule reaches only the
   elements of its own component. */

/* DOK-391 — FLEX E NÃO GRELHA, porque o número de botões deixou de ser fixo.
   A grelha era `1fr auto 1fr` com o último filho encostado à direita, o que servia enquanto havia sempre
   dois ou três. Com quatro no passo de recorte — repetir, acrescentar página, concluir, mais o cancelar —
   a coluna do meio deixava de ser o obturador e a linha desalinhava. Os espaçadores fazem o mesmo
   trabalho e aguentam qualquer contagem. */
.dok-camera__actions[b-eb9v8qihaj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

/* DOK-1474 — ::deep from the actions row: the shutter is a MudIconButton, a child component. Measured in the render:
   its button carried no scope attribute, so it was the default size and shape, never this one. */
.dok-camera__actions[b-eb9v8qihaj]  .dok-camera__shutter {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 999px;
    box-shadow: 0 18px 34px rgba(var(--mud-palette-primary-rgb), 0.32);
}

.dok-camera__actions-spacer[b-eb9v8qihaj] {
    flex: 1 1 auto;
}

/* DOK-385 — on a touch screen every action of the dialog is at least 44px tall, the touch floor the app adopted under
   DOK-815. The small buttons are small for a mouse and a miss for a finger, and the camera is used on a phone more than
   anywhere. ::deep because MudButton is a child component and carries no scope attribute of this one. The modes and the
   crop bar have the same rule in CameraPageControls.razor.css, where their markup is (DOK-1711). */
@media (pointer: coarse) {
    .dok-camera__actions[b-eb9v8qihaj]  .mud-button-root {
        min-height: 44px;
    }
}
/* /Components/WorkItems/Camera/CameraPageControls.razor.rz.scp.css */
/* DOK-1711 — moved here from the dialog's stylesheet with the markup they style: an isolated rule reaches only the
   elements of its own component. */

/* DOK-390 — the three modes, one row that wraps on a phone. */
.dok-camera__modes[b-opjjqp7k3j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.dok-camera__crop-bar[b-opjjqp7k3j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* The dialog's spacer, written again here for the reason above: it pushes the bar's buttons to the right. */
.dok-camera__actions-spacer[b-opjjqp7k3j] {
    flex: 1 1 auto;
}

/* DOK-385 — on a touch screen every action of the dialog is at least 44px tall, the touch floor the app adopted under
   DOK-815. The small buttons are small for a mouse and a miss for a finger, and the camera is used on a phone more than
   anywhere. ::deep because MudButton is a child component and carries no scope attribute of this one. The dialog's
   footer has the same rule in CameraCaptureDialog.razor.css. */
@media (pointer: coarse) {
    .dok-camera__modes[b-opjjqp7k3j]  .mud-button-root,
    .dok-camera__crop-bar[b-opjjqp7k3j]  .mud-button-root {
        min-height: 44px;
    }
}
/* /Components/WorkItems/Camera/CameraPagesStrip.razor.rz.scp.css */
/* DOK-391 — a tira de páginas: miniatura da última, contador, e o aviso de fim de sessão.
   DOK-1710 — moved here from the dialog's stylesheet with the markup it styles. */
.dok-camera__pages[b-gpsracmz6t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.dok-camera__pages-thumb[b-gpsracmz6t] {
    width: 2.6rem;
    height: 2.6rem;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.45);
}

/* The dialog's spacer, written again here: an isolated rule reaches only the elements of its own component, and the
   strip pushes the end-of-session notice to the right with it, as the dialog's rows do. */
.dok-camera__actions-spacer[b-gpsracmz6t] {
    flex: 1 1 auto;
}
/* /Components/WorkItems/Camera/CameraPreview.razor.rz.scp.css */
/* DOK-1713 — moved here from the dialog's stylesheet with the preview they style: an isolated rule reaches only the
   elements of its own component. */

.dok-camera__preview[b-qof1uqf49g] {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(22rem, 58vh, 42rem);
    overflow: hidden;
    border-radius: 22px;
    background:
        radial-gradient(circle at 20% 18%, rgba(var(--mud-palette-primary-rgb), 0.18), transparent 32%),
        linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #111827 100%);
    border: 1px solid rgba(148, 163, 184, 0.32);
}

.dok-camera__loading[b-qof1uqf49g] {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    gap: 0.8rem;
    color: #fff;
}

/* DOK-388 — `contain` e não `cover`.
   `cover` preenche a área cortando o que sobra, e o que sobra numa câmara de documentos são precisamente
   as margens da folha: a pessoa enquadra pelo que vê, dispara, e a fotografia sai com os cantos fora.
   `contain` mostra o frame inteiro, com barras onde o rácio da câmara não bate certo com a área — que é
   o compromisso certo quando o enquadramento é o objetivo. Também é o que cumpre «sem distorcer a
   imagem»: nenhum dos dois estica, mas só este mostra tudo. */
.dok-camera__video[b-qof1uqf49g] {
    width: 100%;
    height: 100%;
    min-height: clamp(22rem, 58vh, 42rem);
    object-fit: contain;
}

.dok-camera__video.is-hidden[b-qof1uqf49g] {
    display: none;
}

/* DOK-389 — o canvas do recorte.

   NÃO TEM LARGURA NEM ALTURA AQUI, de propósito. O tamanho é posto em píxeis pelo JavaScript, com o
   rácio exato da fotografia, porque um canvas sem atributos tem tamanho intrínseco 300×150 e o CSS
   obedece-lhe: um `max-width: 100%` combinado com um `max-height` deformava-o, e os cantos deixavam de
   coincidir com o documento desenhado por baixo. A explicação inteira está em `fitCanvas`.

   `touch-action: none` é o que faz o arrastamento funcionar num telemóvel: sem ele o browser interpreta
   o gesto como scroll da página e o canto não se mexe. */
.dok-camera__crop[b-qof1uqf49g] {
    touch-action: none;
    border-radius: 12px;
}

/* DOK-388 — as guias de enquadramento.

   Desenhadas em CSS sobre a pré-visualização e não no canvas: o canvas só existe no momento do disparo, e
   uma guia tem de estar lá antes. `pointer-events: none` é o que as impede de roubar o clique ao disparo,
   e o `inset` deixa as ações de baixo livres, que é o critério «não tapam as ações principais». */
.dok-camera__guides[b-qof1uqf49g] {
    position: absolute;
    inset: 8% 6% 14%;
    z-index: 1;
    pointer-events: none;
    border: 2px dashed rgba(255, 255, 255, 0.58);
    border-radius: 10px;
}

/* Os quatro cantos, que é o que o olho usa para alinhar uma folha. Mais legíveis do que o retângulo
   inteiro quando o fundo é claro. */
.dok-camera__guides[b-qof1uqf49g]::before,
.dok-camera__guides[b-qof1uqf49g]::after {
    content: "";
    position: absolute;
    width: 2.2rem;
    height: 2.2rem;
    border: 3px solid rgba(255, 255, 255, 0.92);
}

.dok-camera__guides[b-qof1uqf49g]::before {
    top: -2px;
    left: -2px;
    border-right: 0;
    border-bottom: 0;
    border-radius: 10px 0 0 0;
}

.dok-camera__guides[b-qof1uqf49g]::after {
    right: -2px;
    bottom: -2px;
    border-left: 0;
    border-top: 0;
    border-radius: 0 0 10px 0;
}

/* Retrato e paisagem pedem proporções diferentes: um A4 de pé quase enche a altura, deitado quase enche
   a largura. Guias fixas fariam a pessoa enquadrar mal numa das duas. */
@media (orientation: landscape) {
    .dok-camera__guides[b-qof1uqf49g] {
        inset: 10% 16% 16%;
    }
}

.dok-camera__guides-hint[b-qof1uqf49g] {
    position: absolute;
    left: 50%;
    bottom: -2.4rem;
    transform: translateX(-50%);
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.78rem;
}

/* DOK-388 — o retorno imediato do disparo.

   Uma animação de opacidade sobre um elemento que já está no sítio: não força layout, não bloqueia a
   interface e termina sozinha. O critério pede retorno imediato «sem congelar a interface», e é
   exatamente o que uma animação de composição dá e um `await` no fio principal não daria. */
.dok-camera__flash[b-qof1uqf49g] {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: #fff;
    opacity: 0;
}

.dok-camera__flash.is-firing[b-qof1uqf49g] {
    animation: dok-camera-flash-b-qof1uqf49g 220ms ease-out;
}

@keyframes dok-camera-flash-b-qof1uqf49g {
    0% { opacity: 0.86; }
    100% { opacity: 0; }
}

/* Quem prefere menos movimento continua a ter retorno, mais curto e mais suave.
   A primeira versão disto punha `animation: none; opacity: 0.32`, o que deixava um retângulo branco
   semi-transparente por cima da pré-visualização PARA SEMPRE — a animação é o que o faz desaparecer, e
   sem ela nada o apagava. Uma redução de movimento não é um pedido para o ecrã ficar tapado. */
@media (prefers-reduced-motion: reduce) {
    .dok-camera__flash.is-firing[b-qof1uqf49g] {
        animation: dok-camera-flash-b-qof1uqf49g 120ms linear;
    }
}

/* DOK-389 — a indicação de que a deteção está a correr.
   Sobreposta e translúcida, e NÃO por cima do centro: os cantos já estão lá e já se arrastam enquanto ela
   aparece. Tapá-los dava a entender que era preciso esperar, que é precisamente o contrário do que o
   critério «a interface não fica bloqueada durante a deteção» quer dizer. */
.dok-camera__detecting[b-qof1uqf49g] {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transform: translateX(-50%);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
}

@media (max-width: 640px) {
    .dok-camera__preview[b-qof1uqf49g],
    .dok-camera__video[b-qof1uqf49g] {
        min-height: 20rem;
    }
}

/* DOK-390 — the corners' canvas while the result is on the screen: hidden, not removed, because the corners live on it.
   Hiding it does not change its size when it comes back: `fitCanvas` measures the preview box, not the canvas. */
.dok-camera__crop.is-hidden[b-qof1uqf49g] {
    display: none;
}

/* DOK-390 — the page in the chosen mode, in the same box as the corners. `contain` for the video's reason: the whole
   page, never stretched. */
.dok-camera__result[b-qof1uqf49g] {
    max-width: calc(100% - 8px);
    max-height: clamp(22rem, 58vh, 42rem);
    object-fit: contain;
    border-radius: 12px;
}

/* DOK-385 — where the focus is, visibly. The preview takes the focus when the step takes away the button that had it;
   the canvas takes it to move the corners by keyboard. Outside the box rather than over the photograph. */
.dok-camera__preview:focus-visible[b-qof1uqf49g],
.dok-camera__crop:focus-visible[b-qof1uqf49g] {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .dok-camera__result[b-qof1uqf49g] {
        max-height: 20rem;
    }
}
/* /Components/WorkItems/Sections/DokAttachmentsSection.razor.rz.scp.css */
/* DOK-1475 — only rules for elements this component writes itself live here. The card, its content, the
   dropzone's paper, the table with its rows and cells, the upload button, the pending chip and the comment
   texts are MudBlazor components' elements, which carry no scope attribute of this component: the rules
   naming the classes handed to them never applied, and were deleted. Those parts look as MudBlazor and the
   global theme draw them. */

.dok-file-manager__picker-host[b-ax6dfwdnfu] {
    display: none;
}

.dok-file-manager__dropzone[b-ax6dfwdnfu] {
    position: relative;
    width: 100%;
    min-height: 100%;
    background: var(--mud-palette-surface);
    transition: background-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.dok-file-manager__dropzone[data-disabled="true"][b-ax6dfwdnfu] {
    opacity: 0.82;
}

.dok-file-manager__dropzone--dragging[b-ax6dfwdnfu] {
    background:
        linear-gradient(180deg, rgba(var(--mud-palette-primary-rgb), 0.07), rgba(var(--mud-palette-surface-rgb), 0.98));
    box-shadow: inset 0 0 0 2px rgba(var(--mud-palette-primary-rgb), 0.55),
        inset 0 0 0 6px rgba(var(--mud-palette-primary-rgb), 0.06);
}

.dok-file-manager__toolbar[b-ax6dfwdnfu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3.55rem;
    padding: 0.58rem 0.72rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    /* DOK-344 — the tint used to be keyed to --mud-palette-background, which in light mode is
       almost the same as surface: the toolbar only looked separated in dark mode. A neutral slate
       wash reads in both. */
    background:
        linear-gradient(90deg, rgba(var(--mud-palette-primary-rgb), 0.04), transparent 55%),
        rgba(148, 163, 184, 0.07);
}

/* DOK-368 — feedback while the selected files are read and sent. Sits between the toolbar and the
   table so it appears exactly where the new rows are about to land. */
.dok-file-manager__receiving[b-ax6dfwdnfu] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.72rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    background: rgba(var(--mud-palette-primary-rgb), 0.05);
    font-size: 0.86rem;
    color: var(--mud-palette-text-secondary);
}

.dok-file-manager__toolbar-copy[b-ax6dfwdnfu] {
    display: flex;
    align-items: center;
    gap: 0.58rem;
    min-width: 0;
}

.dok-file-manager__toolbar-icon[b-ax6dfwdnfu] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 8px;
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
    color: var(--dok-tone-primary-ink);
}

.dok-file-manager__toolbar-text[b-ax6dfwdnfu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.dok-file-manager__toolbar-text strong[b-ax6dfwdnfu] {
    overflow: hidden;
    color: var(--mud-palette-text-primary);
    font-size: 0.82rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dok-file-manager__toolbar-text span[b-ax6dfwdnfu] {
    margin-top: 0.12rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    font-weight: var(--dok-font-weight-semibold);
}

.dok-file-manager__toolbar-actions[b-ax6dfwdnfu] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.dok-file-manager__toolbar-actions[b-ax6dfwdnfu]  .mud-button-root {
    min-width: 0;
    min-height: 2rem;
    padding: 0.28rem 0.58rem;
    border-radius: 8px;
    font-size: 0.72rem;
}

.dok-file-manager__file[b-ax6dfwdnfu] {
    display: flex;
    align-items: center;
    gap: 0.52rem;
    min-width: 0;
}

.dok-file-manager__detail-toggle[b-ax6dfwdnfu],
.dok-file-manager__detail-toggle-spacer[b-ax6dfwdnfu] {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
}

.dok-file-manager__detail-toggle[b-ax6dfwdnfu] {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.dok-file-manager__detail-toggle:hover[b-ax6dfwdnfu] {
    background: rgba(var(--mud-palette-primary-rgb), 0.09);
    color: var(--dok-tone-primary-ink);
}

.dok-file-manager__detail-toggle:focus-visible[b-ax6dfwdnfu] {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), 0.32);
}

.dok-file-manager__detail-toggle-spacer[b-ax6dfwdnfu] {
    display: block;
}

/* DOK-344 — the icon glyph already differed per file type, but every tile was the same blue, so a
   list of ten files read as ten identical blue squares and the glyph did all the work at 1rem.
   Colouring the tile by family makes the type legible before the name is read. */
.dok-file-manager__file-icon[b-ax6dfwdnfu] {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.14);
    color: var(--mud-palette-text-secondary);
}

.dok-file-manager__file-icon--pdf[b-ax6dfwdnfu] { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.dok-file-manager__file-icon--sheet[b-ax6dfwdnfu] { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.dok-file-manager__file-icon--doc[b-ax6dfwdnfu] { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.dok-file-manager__file-icon--image[b-ax6dfwdnfu] { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.dok-file-manager__file-icon--media[b-ax6dfwdnfu] { background: rgba(234, 88, 12, 0.12); color: #ea580c; }
.dok-file-manager__file-icon--archive[b-ax6dfwdnfu] { background: rgba(202, 138, 4, 0.14); color: #ca8a04; }

.dok-file-manager__file-copy[b-ax6dfwdnfu] {
    min-width: 0;
}

.dok-file-manager__file-copy[b-ax6dfwdnfu]  .mud-typography {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dok-file-manager__file-copy span[b-ax6dfwdnfu] {
    display: block;
    margin-top: 0.08rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.69rem;
    font-weight: 650;
}

/* DOK-236 — subtle AI pipeline indicator; secondary to the document's operational status. */
.dok-file-manager__file-copy span.dok-file-manager__pipeline[b-ax6dfwdnfu] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.18rem;
    padding: 0.06rem 0.4rem;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: var(--dok-font-weight-bold);
}

.dok-file-manager__file-copy span.dok-file-manager__pipeline-label[b-ax6dfwdnfu] {
    display: inline;
    margin-top: 0;
    color: inherit;
    font-size: inherit;
}

.dok-file-manager__pipeline--muted[b-ax6dfwdnfu] {
    background: rgba(148, 163, 184, 0.14);
    color: var(--mud-palette-text-secondary);
}

.dok-file-manager__pipeline--failed[b-ax6dfwdnfu] {
    background: rgba(var(--mud-palette-error-rgb), 0.1);
    color: var(--dok-tone-error-ink);
}

.dok-file-manager__modified[b-ax6dfwdnfu] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.76rem;
    font-weight: 650;
}

.dok-file-manager__details-content[b-ax6dfwdnfu] {
    margin: 0 0.8rem 0.72rem 3.95rem;
    padding: 0.72rem 0.82rem;
    border-left: 2px solid rgba(var(--mud-palette-primary-rgb), 0.24);
    border-radius: 0 8px 8px 0;
    background: rgba(var(--mud-palette-background-rgb), 0.34);
}

/* DOK-77 — the comment icon sits beside the overflow menu, not inside it, so the badge is readable
   without opening anything. The row keeps the cell right-aligned as it was. */
.dok-file-manager__row-actions[b-ax6dfwdnfu] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.1rem;
}

.dok-file-manager__comments[b-ax6dfwdnfu] {
    margin: 0 0.8rem 0.72rem 3.95rem;
    padding: 0.72rem 0.82rem;
    border-left: 2px solid rgba(var(--mud-palette-primary-rgb), 0.24);
    border-radius: 0 8px 8px 0;
    background: rgba(var(--mud-palette-background-rgb), 0.34);
}

.dok-file-manager__comments-head[b-ax6dfwdnfu] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    font-weight: var(--dok-font-weight-bold);
}

.dok-file-manager__loading-state[b-ax6dfwdnfu] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 11rem;
    color: var(--mud-palette-text-secondary);
    gap: 0.65rem;
    font-size: 0.82rem;
    font-weight: 650;
}

@media (max-width: 720px) {
    .dok-file-manager__toolbar[b-ax6dfwdnfu] {
        align-items: flex-start;
        flex-direction: column;
        padding: 0.68rem;
    }

    .dok-file-manager__toolbar-copy[b-ax6dfwdnfu],
    .dok-file-manager__toolbar-actions[b-ax6dfwdnfu] {
        width: 100%;
    }

    .dok-file-manager__toolbar-actions[b-ax6dfwdnfu] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.35rem;
    }

    .dok-file-manager__toolbar-actions[b-ax6dfwdnfu]  .mud-tooltip-root,
    .dok-file-manager__toolbar-actions[b-ax6dfwdnfu]  .mud-button-root {
        width: 100%;
    }

    .dok-file-manager__details-content[b-ax6dfwdnfu] {
        margin-right: 0.55rem;
        margin-left: 0.55rem;
    }
}

@media (max-width: 480px) {
    .dok-file-manager__toolbar-actions[b-ax6dfwdnfu]  .mud-button-root {
        padding-right: 0.35rem;
        padding-left: 0.35rem;
        font-size: 0.67rem;
    }

    .dok-file-manager__detail-toggle-spacer[b-ax6dfwdnfu] {
        display: none;
    }
}
/* /Components/WorkItems/Sections/DokDossierCorrectionNotice.razor.rz.scp.css */
/* DOK-1018 — the returned-dossier notice.

   Scoped CSS rather than another block in CaseDetailPage's embedded <style>: that page is one of the two
   the ratchet holds (MonolithicPageRatchetTests) and one of the two ThemeTokenTests keeps free of hex
   literals. Both rules are honoured by not writing there at all.

   Every colour derives from a --mud-palette-* token, so a tenant that changes its palette moves this
   notice with the rest of the app. A hex literal here would be a colour no tenant can reach. */

.correction-notice[b-kxrctqk40v] {
    margin: .35rem 0 0;
    padding: .85rem 1rem;
    border: 1px solid rgba(var(--mud-palette-warning-rgb), .3);
    border-left: 3px solid var(--mud-palette-warning);
    border-radius: 8px;
    background: rgba(var(--mud-palette-warning-rgb), .07);
}

/* Warning, not error. Nothing failed: a reviewer read the dossier and asked for specific files to be
   replaced. Painting it red would tell the collaborator something broke, and send them looking for a
   fault instead of reading the list. */

.correction-notice__head[b-kxrctqk40v] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}

.correction-notice__headline[b-kxrctqk40v] {
    min-width: 0;
}

.correction-notice__title[b-kxrctqk40v] {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--mud-palette-text-primary);
    font-size: .88rem;
    font-weight: 850;
}

.correction-notice__cycle[b-kxrctqk40v] {
    padding: .05rem .4rem;
    border-radius: 999px;
    background: rgba(var(--mud-palette-warning-rgb), .22);
    color: var(--mud-palette-warning-darken);
    font-size: .68rem;
    font-weight: 800;
}

.correction-notice__body[b-kxrctqk40v] {
    margin-top: .15rem;
    color: var(--mud-palette-text-primary);
    font-size: .82rem;
    font-weight: var(--dok-font-weight-semibold);
    line-height: 1.45;
}

.correction-notice__instruction[b-kxrctqk40v] {
    margin-top: .2rem;
    color: var(--mud-palette-warning-darken);
    font-size: .8rem;
    font-weight: 750;
}

.correction-notice__ready[b-kxrctqk40v] {
    margin-top: .2rem;
    color: var(--mud-palette-success-darken);
    font-size: .8rem;
    font-weight: 750;
}

.correction-notice__meta[b-kxrctqk40v] {
    margin-top: .3rem;
    color: var(--mud-palette-text-secondary);
    font-size: .74rem;
    font-weight: 650;
}

.correction-notice__comment[b-kxrctqk40v] {
    margin-top: .65rem;
    padding: .5rem .65rem;
    border-radius: 6px;
    background: rgba(var(--mud-palette-surface-rgb), .75);
}

.correction-notice__label[b-kxrctqk40v] {
    display: block;
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.correction-notice__comment p[b-kxrctqk40v] {
    margin: .2rem 0 0;
    color: var(--mud-palette-text-primary);
    font-size: .82rem;
    font-weight: var(--dok-font-weight-semibold);
    line-height: 1.45;
    white-space: pre-wrap;
}

.correction-notice__items[b-kxrctqk40v] {
    margin: .7rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .5rem;
}

.correction-item[b-kxrctqk40v] {
    padding: .55rem .7rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
}

/* A replaced file stops shouting. The list has to stay readable as the collaborator works down it, and
   an item already dealt with competing for attention with one that is not is exactly what makes a
   checklist stop functioning as a checklist. */
.correction-item--replaced[b-kxrctqk40v] {
    border-color: rgba(var(--mud-palette-success-rgb), .35);
    opacity: .8;
}

.correction-item--outstanding[b-kxrctqk40v] {
    border-color: rgba(var(--mud-palette-warning-rgb), .45);
}

.correction-item__head[b-kxrctqk40v] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.correction-item__names[b-kxrctqk40v] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.correction-item__file[b-kxrctqk40v] {
    color: var(--mud-palette-text-primary);
    font-size: .82rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.correction-item__document[b-kxrctqk40v] {
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    font-weight: 650;
}

.correction-item__badge[b-kxrctqk40v] {
    flex: 0 0 auto;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.correction-item--replaced .correction-item__badge[b-kxrctqk40v] {
    background: rgba(var(--mud-palette-success-rgb), .16);
    color: var(--mud-palette-success-darken);
}

.correction-item--outstanding .correction-item__badge[b-kxrctqk40v] {
    background: rgba(var(--mud-palette-warning-rgb), .2);
    color: var(--mud-palette-warning-darken);
}

/* Two columns on a comfortable width, stacked below it. The label has to stay next to its verdict:
   "what the AI said" and "what the reviewer said" are only useful as a pair. */
.correction-item__verdicts[b-kxrctqk40v] {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    gap: .15rem .6rem;
    margin: .45rem 0 0;
}

.correction-item__verdicts dt[b-kxrctqk40v] {
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.correction-item__verdicts dd[b-kxrctqk40v] {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-size: .78rem;
    font-weight: var(--dok-font-weight-semibold);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.correction-item__reviewer[b-kxrctqk40v] {
    margin-left: .35rem;
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    font-weight: 650;
}

@media (max-width: 599.98px) {
    .correction-item__verdicts[b-kxrctqk40v] {
        grid-template-columns: minmax(0, 1fr);
        gap: .05rem;
    }

    .correction-item__verdicts dd[b-kxrctqk40v] {
        margin-bottom: .3rem;
    }
}
/* /Components/WorkItems/Sections/DokDossierResubmissionNotice.razor.rz.scp.css */
/* DOK-989 — the resubmission notice an approver reads before deciding again.

   Scoped CSS rather than a block in CaseDetailPage's embedded <style>: that page is held by
   MonolithicPageRatchetTests and kept free of hex literals by ThemeTokenTests. Both honoured by not
   writing there.

   Informational blue, NOT the correction banner's amber. The two notices say opposite things to opposite
   people: the collaborator's amber one is "you have work to do", this one is "here is what changed, now
   decide". Painting this amber too would make an approver look for something to fix. */

.resubmission-notice[b-czmkdmr2bq] {
    margin: .35rem 0 0;
    padding: .85rem 1rem;
    border: 1px solid rgba(var(--mud-palette-info-rgb), .3);
    border-left: 3px solid var(--mud-palette-info);
    border-radius: 8px;
    background: rgba(var(--mud-palette-info-rgb), .07);
}

.resubmission-notice__head[b-czmkdmr2bq] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}

.resubmission-notice__headline[b-czmkdmr2bq] {
    min-width: 0;
}

.resubmission-notice__title[b-czmkdmr2bq] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    color: var(--mud-palette-text-primary);
    font-size: .88rem;
    font-weight: 850;
}

.resubmission-notice__cycle[b-czmkdmr2bq] {
    padding: .05rem .4rem;
    border-radius: 999px;
    background: rgba(var(--mud-palette-info-rgb), .22);
    color: var(--mud-palette-info-darken);
    font-size: .68rem;
    font-weight: 800;
}

.resubmission-notice__body[b-czmkdmr2bq] {
    margin-top: .15rem;
    color: var(--mud-palette-text-primary);
    font-size: .82rem;
    font-weight: var(--dok-font-weight-semibold);
    line-height: 1.45;
}

.resubmission-notice__meta[b-czmkdmr2bq] {
    margin-top: .3rem;
    color: var(--mud-palette-text-secondary);
    font-size: .74rem;
    font-weight: 650;
}

.resubmission-notice__intro[b-czmkdmr2bq] {
    margin-top: .65rem;
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.resubmission-notice__items[b-czmkdmr2bq] {
    margin: .35rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .5rem;
}

.resubmission-item[b-czmkdmr2bq] {
    padding: .55rem .7rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
}

.resubmission-item__document[b-czmkdmr2bq] {
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    font-weight: 800;
    margin-bottom: .2rem;
}

/* Before and after as two rows sharing a column grid, so the two file names start at the same x and the
   eye can run down them. A single "old -> new" line stops being comparable the moment either name is
   long, which for a scanner's output is always. */
.resubmission-item__row[b-czmkdmr2bq] {
    display: grid;
    grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: .1rem .5rem;
    padding: .15rem 0;
}

.resubmission-item__row--previous .resubmission-item__file[b-czmkdmr2bq] {
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.resubmission-item__row--current .resubmission-item__file[b-czmkdmr2bq] {
    color: var(--mud-palette-text-primary);
    font-weight: 800;
}

.resubmission-item__label[b-czmkdmr2bq] {
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.resubmission-item__file[b-czmkdmr2bq] {
    font-size: .8rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

/* Monospace, because the only thing anyone does with a hash is compare it to another one character by
   character, and a proportional font makes that harder for no gain. */
.resubmission-item__hash[b-czmkdmr2bq] {
    font-family: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;
    font-size: .68rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.resubmission-item__reason[b-czmkdmr2bq],
.resubmission-item__meta[b-czmkdmr2bq] {
    margin-top: .25rem;
    color: var(--mud-palette-text-secondary);
    font-size: .74rem;
    font-weight: var(--dok-font-weight-semibold);
    line-height: 1.4;
}

.resubmission-item__reason span:last-child[b-czmkdmr2bq] {
    color: var(--mud-palette-text-primary);
    margin-left: .35rem;
}

.resubmission-notice__closing[b-czmkdmr2bq] {
    margin-top: .6rem;
    color: var(--mud-palette-text-primary);
    font-size: .8rem;
    font-weight: 750;
}

@media (max-width: 599.98px) {
    /* The hash is the first thing to go: it is corroboration, and the names are the message. */
    .resubmission-item__row[b-czmkdmr2bq] {
        grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr);
    }

    .resubmission-item__hash[b-czmkdmr2bq] {
        grid-column: 2;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}
/* /Components/WorkItems/Sections/DokExtensionMark.razor.rz.scp.css */
/* DOK-1314 — the mark of an element added to the dossier in flight: small and tinted, beside the element's own name,
   so it reads as a fact about the element and never as a status of it. */
.dok-extension-mark[b-3ms7vgn01h] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: var(--dok-font-size-xs);
    line-height: 1.5;
    white-space: nowrap;
    color: var(--dok-tone-primary-ink);
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.3);
}
/* /Components/WorkItems/Sections/DokFilePreviewDialog.razor.rz.scp.css */
/* DOK-348 — attachment preview dialog content. The dialog CHROME (radius, content padding) is
   styled from the global dok-shell.css: the Class lands on MudBlazor's own .mud-dialog root,
   which never carries this component's scope attribute, so ::deep rules here can never match
   (the repo's documented MudBlazor scoped-CSS gotcha). Only scoped inner-content rules live here. */
.dok-file-preview__title[b-zybb9aj1dv] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.dok-file-preview__title-copy[b-zybb9aj1dv] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dok-file-preview__title-meta[b-zybb9aj1dv] {
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-bold);
    letter-spacing: 0.04em;
}

.dok-file-preview[b-zybb9aj1dv] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: min(1120px, 92vw);
    min-height: 60vh;
}

.dok-file-preview__state[b-zybb9aj1dv] {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 20rem;
    color: var(--mud-palette-text-secondary);
}

.dok-file-preview__state--empty[b-zybb9aj1dv] {
    flex-direction: column;
    gap: 0.35rem;
    border: 1px dashed rgba(148, 163, 184, 0.4);
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
}

.dok-file-preview__image-wrap[b-zybb9aj1dv] {
    display: grid;
    place-items: center;
    overflow: auto;
    max-height: 72vh;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
}

.dok-file-preview__image[b-zybb9aj1dv] {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* PDF (native viewer) and the sandboxed docx/xlsx HTML both render in this frame. White
   background so converted Office HTML (dark text) stays readable in dark mode too. */
.dok-file-preview__frame[b-zybb9aj1dv] {
    width: 100%;
    height: min(72vh, 56rem);
    border: 0;
    border-radius: 12px;
    background: #ffffff;
}

.dok-file-preview__text-wrap[b-zybb9aj1dv] {
    overflow: auto;
    max-height: 68vh;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
}

.dok-file-preview__text[b-zybb9aj1dv] {
    margin: 0;
    padding: 1rem 1.15rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.dok-file-preview__truncated[b-zybb9aj1dv] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    font-style: italic;
}