@import '_content/Certifyd.Admin/Certifyd.Admin.wynwr3v338.bundle.scp.css';

/* /Components/Certificates/BulkJobDetails.razor.rz.scp.css */
/* Finished bulk-job summary card. */

.bjd[b-3o63fzuqg7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bjd__row[b-3o63fzuqg7] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bjd__stats[b-3o63fzuqg7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
}

.bjd__stat[b-3o63fzuqg7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bjd__stat-value[b-3o63fzuqg7] {
    font-family: var(--cd-font-display);
    font-size: 24px;
    line-height: 1.1;
    color: var(--cd-ink);
}

.bjd__stat-value--success[b-3o63fzuqg7] { color: var(--cd-success-ink); }
.bjd__stat-value--danger[b-3o63fzuqg7] { color: var(--cd-error-ink); }

.bjd__rate[b-3o63fzuqg7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bjd__error-list[b-3o63fzuqg7] {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bjd__error-row[b-3o63fzuqg7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    gap: 12px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--cd-slate-100);
}

.bjd__all-success[b-3o63fzuqg7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--cd-r-input);
    background: var(--cd-success-tint);
    color: var(--cd-success-ink);
    font-size: 13px;
}
/* /Components/Certificate/CertificateDetails.razor.rz.scp.css */
/* Certificate summary card, used only by the recipient Portal (Pages/Portal.razor, a different,
   not-yet-redesigned screen group). Shared cd-card/cd-field tokens live in
   wwwroot/css/certifyd.css; only this card's own layout lives here. */

.cd-detail[b-1btlm38wer] {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cd-detail__title[b-1btlm38wer] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cd-primary);
}

.cd-detail__recipient[b-1btlm38wer] {
    font-family: var(--cd-font-display);
    font-size: 24px;
    line-height: 1.1;
    color: var(--cd-ink);
}

.cd-detail__rows[b-1btlm38wer] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--cd-divider);
}

.cd-detail__row[b-1btlm38wer] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.cd-detail__download[b-1btlm38wer] {
    width: 100%;
    justify-content: center;
    height: 44px;
}
/* /Components/Certificate/PdfViewer.razor.rz.scp.css */
/* PDF viewer chrome, used by the recipient Portal and the Certificates details page. */

.cert-pdf-viewer[b-sj2o03b9pv] {
    padding: 16px;
    overflow: hidden;
}

.cert-pdf-viewer__state[b-sj2o03b9pv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 64px 16px;
    color: var(--cd-slate-500);
    font-size: 14px;
}

.cert-pdf-viewer__frame[b-sj2o03b9pv] {
    background: var(--cd-paper);
    border-radius: var(--cd-r-input);
    overflow: hidden;
}

.cert-pdf-viewer__frame embed[b-sj2o03b9pv] {
    display: block;
}

.cert-pdf-viewer__fallback[b-sj2o03b9pv] {
    margin: 10px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--cd-slate-500);
}

.cert-pdf-viewer__fallback a[b-sj2o03b9pv] {
    color: var(--cd-primary);
    font-weight: 700;
    text-decoration: underline;
}
/* /Components/Dialogs/BulkGenerateDialog.razor.rz.scp.css */
/* Bulk generate dialog (synchronous, one event) — see the component's header comment for why
   this does NOT reproduce the design's delivery-option radio cards. */

/* Modifier applied alongside the shared .cd-info-row (certifyd.css) when the selected event has
   no attendees to generate for. */
.bgd-info-row--warning[b-mx6yo7jo9b] {
    justify-content: flex-start;
    background: var(--cd-accent-tint);
    color: var(--cd-accent-ink);
}

.bgd-progress[b-mx6yo7jo9b] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* This endpoint is one synchronous HTTP call with no batch/percent feedback, so the fill sweeps
   back and forth instead of showing a real 0-100% value. */
.bgd-progress__indeterminate[b-mx6yo7jo9b] {
    width: 40% !important;
    animation: bgd-sweep-b-mx6yo7jo9b 1.1s ease-in-out infinite;
}

@keyframes bgd-sweep-b-mx6yo7jo9b {
    0% { margin-left: 0; }
    50% { margin-left: 60%; }
    100% { margin-left: 0; }
}

.bgd-banner[b-mx6yo7jo9b] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--cd-r-input);
    font-size: 14px;
    font-weight: 700;
}

.bgd-banner--success[b-mx6yo7jo9b] { background: var(--cd-success-tint); color: var(--cd-success-ink); }
.bgd-banner--warning[b-mx6yo7jo9b] { background: var(--cd-accent-tint);  color: var(--cd-accent-ink); }
.bgd-banner--danger[b-mx6yo7jo9b]  { background: var(--cd-error-tint);   color: var(--cd-error-ink); font-weight: 400; }

.bgd-result-grid[b-mx6yo7jo9b] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--cd-r-input);
    background: var(--cd-slate-50);
}

.bgd-result-grid > div[b-mx6yo7jo9b] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 15px;
}

.bgd-cert-list[b-mx6yo7jo9b] {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bgd-cert-row[b-mx6yo7jo9b] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--cd-slate-100);
    font-size: 13px;
}

.bgd-cert-row__name[b-mx6yo7jo9b] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bgd-error-list[b-mx6yo7jo9b] {
    max-height: 160px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* /Components/Dialogs/CreateApiKeyDialog.razor.rz.scp.css */
/* CreateApiKeyDialog (redesign handoff "App - Dialogs.dc.html" #create-api-key reveal state). */

.cakd-instructions[b-b4jacu2rmh] {
    font-size: 14px;
    line-height: 1.5;
    color: var(--cd-slate-600);
}

/* The one-time secret chip: navy background, orange mono text, white Copy button -- exact
   colors from the design's #create-api-key markup. */
.cakd-reveal[b-b4jacu2rmh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 14px;
    border-radius: var(--cd-r-input);
    background: var(--cd-ink);
}

.cakd-reveal__key[b-b4jacu2rmh] {
    flex: 1;
    min-width: 0;
    font-family: var(--cd-font-mono);
    font-size: 13px;
    color: var(--cd-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cakd-reveal__copy[b-b4jacu2rmh] {
    height: 32px;
    padding: 0 12px;
    border-radius: 7px;
    border: none;
    background: #FFFFFF;
    color: var(--cd-ink);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex: none;
}

.cakd-scope-pills[b-b4jacu2rmh] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
/* /Components/Dialogs/CreateBadgeDialog.razor.rz.scp.css */
/* Create/edit badge dialog — redesign handoff "App - Dialogs.dc.html" #create-badge. The design's
   110px-medallion + fields grid becomes this two-column top section; everything the design omits
   (Description, Issuer, Image URL — see the component's header comment) flows below it full-width. */

.cbd-top[b-dx50t7s5wc] {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 18px;
}

.cbd-art[b-dx50t7s5wc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.cbd-fields[b-dx50t7s5wc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Skill chip input: a text field that grows a row of removable chips as skills are added,
   standing in for the design's interactive tag control (no shared chip-input class exists yet —
   this is the first dialog to need one, so it stays page-scoped per the group brief). */
.cbd-skills[b-dx50t7s5wc] {
    min-height: 42px;
    padding: 6px 8px;
    border: 1px solid var(--cd-slate-200);
    border-radius: 9px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    cursor: text;
}

.cbd-skills:focus-within[b-dx50t7s5wc] {
    border: 1.5px solid var(--cd-primary);
    box-shadow: var(--cd-focus-ring);
}

.cbd-skill-chip[b-dx50t7s5wc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 4px 6px 4px 10px;
    border-radius: var(--cd-r-pill);
    background: var(--cd-slate-100);
    color: var(--cd-ink);
    white-space: nowrap;
}

.cbd-skill-chip__remove[b-dx50t7s5wc] {
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    padding: 2px;
    cursor: pointer;
    color: var(--cd-slate-400);
}

.cbd-skill-chip__remove:hover[b-dx50t7s5wc] { color: var(--cd-error-ink); }

.cbd-skills__input[b-dx50t7s5wc] {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    padding: 4px;
    color: var(--cd-ink);
}
/* /Components/Dialogs/CreateWebhookDialog.razor.rz.scp.css */
/* CreateWebhookDialog (redesign handoff "App - Dialogs.dc.html" #create-webhook). */

.cwd-url-input[b-nxzb58x0jy] {
    font-family: var(--cd-font-mono);
    font-size: 13px;
}

/* Event type labels are mono in the design, unlike CreateApiKeyDialog's sans-serif scope names. */
.cwd-event-label[b-nxzb58x0jy] {
    font-family: var(--cd-font-mono);
    font-size: 11px;
}
/* /Components/Dialogs/CsvImportDialog.razor.rz.scp.css */
/* CSV import dialog — redesign handoff "App - Dialogs.dc.html" #csv-import.
   Shared cd-dialog / cd-steps / cd-field tokens live in wwwroot/css/certifyd.css. */

.csv-steps[b-sd3fh41uof] {
    margin-top: 4px;
}

/* The native file input keeps its OS chrome (a "Choose file" button); this only aligns its
   padding with the other cd-input fields so the step doesn't look like a stray browser control. */
.csv-file-input[b-sd3fh41uof] {
    padding: 8px 12px;
    height: auto;
}

.csv-file-chip[b-sd3fh41uof] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--cd-slate-50);
    font-size: 13px;
    color: var(--cd-slate-600);
}

.csv-file-chip__name[b-sd3fh41uof] {
    font-weight: 700;
    color: var(--cd-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.csv-file-chip__size[b-sd3fh41uof] {
    color: var(--cd-slate-400);
    margin-right: auto;
}

.csv-summary[b-sd3fh41uof] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--cd-slate-50);
    font-size: 13px;
    color: var(--cd-slate-600);
}

.csv-columns[b-sd3fh41uof] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.csv-checkbox-row[b-sd3fh41uof] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.csv-checkbox-row input[b-sd3fh41uof] { margin-top: 3px; }

.csv-checkbox-row__title[b-sd3fh41uof] {
    display: block;
    font-size: 14px;
    color: var(--cd-ink);
}

.csv-importing[b-sd3fh41uof] {
    text-align: center;
}

.csv-result-banner[b-sd3fh41uof] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
}

.csv-result-banner--success[b-sd3fh41uof] { background: var(--cd-success-tint); color: var(--cd-success-ink); }
.csv-result-banner--warning[b-sd3fh41uof] { background: var(--cd-accent-tint); color: var(--cd-accent-ink); }
.csv-result-banner--danger[b-sd3fh41uof]  { background: var(--cd-error-tint);  color: var(--cd-error-ink); }

.csv-result-grid[b-sd3fh41uof] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--cd-slate-50);
}

.csv-result-grid > div[b-sd3fh41uof] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 15px;
    color: var(--cd-ink);
}

.csv-error-list[b-sd3fh41uof] {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.csv-error-row[b-sd3fh41uof] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 10px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--cd-slate-100);
}

.csv-error-row__email[b-sd3fh41uof] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cd-slate-600);
    font-size: 13px;
}
/* /Components/Dialogs/EditEventDialog.razor.rz.scp.css */
/* Edit event dialog — Active/Inactive toggle row (the design has no visual for this control;
   it reuses the field/hint pattern from certifyd.css). */

.evt-edit-active[b-fp768ym0pk] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.evt-edit-active span[b-fp768ym0pk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.evt-edit-active input[b-fp768ym0pk] {
    margin-top: 3px;
}
/* /Components/Dialogs/GenerateCertificateDialog.razor.rz.scp.css */
/* Single-certificate generation dialog — no exact design mockup (see the component's header
   comment); this reuses the generic cd-dialog spec and the CsvImportDialog's result-banner
   pattern for the success/error states. */

.gcd-optional-label[b-p1s2s84301] {
    font-size: 12px;
    font-weight: 700;
    color: var(--cd-slate-400);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}

.gcd-progress[b-p1s2s84301] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* The dialog has no batch/percent data to report (a single certificate generates in one call),
   so the fill sweeps back and forth rather than showing a real 0-100% value. */
.gcd-progress__indeterminate[b-p1s2s84301] {
    width: 40% !important;
    animation: gcd-sweep-b-p1s2s84301 1.1s ease-in-out infinite;
}

@keyframes gcd-sweep-b-p1s2s84301 {
    0% { margin-left: 0; }
    50% { margin-left: 60%; }
    100% { margin-left: 0; }
}

.gcd-success[b-p1s2s84301] {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--cd-r-input);
    background: var(--cd-success-tint);
    color: var(--cd-success-ink);
    font-size: 13px;
}

.gcd-success__body[b-p1s2s84301] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gcd-error[b-p1s2s84301] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--cd-r-input);
    background: var(--cd-error-tint);
    color: var(--cd-error-ink);
    font-size: 13px;
}
/* /Components/Dialogs/PromptDialog.razor.rz.scp.css */
/* Generic prompt dialog — redesign handoff "App - Dialogs.dc.html" #confirm-revoke. */

.prompt-icon[b-cp0ikdd0qw] {
    width: 44px;
    height: 44px;
    border-radius: var(--cd-r-tile);
    background: var(--cd-slate-100);
    color: var(--cd-slate-500);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.prompt-icon--danger[b-cp0ikdd0qw] {
    background: var(--cd-error-tint);
    color: var(--cd-error);
}

.prompt-message[b-cp0ikdd0qw] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--cd-slate-600);
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Two-column auth shell (Account.dc.html): a gradient "visual" panel on the left, the actual
   screen content on the right. Collapses to a single column on narrow viewports -- the visual
   panel is purely decorative, so it simply disappears rather than reflowing above the form. */
.cd-auth-shell[b-nr35jd3ya7] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    background: #FFFFFF;
}

@media (max-width: 860px) {
    .cd-auth-shell[b-nr35jd3ya7] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cd-auth-visual[b-nr35jd3ya7] {
        display: none;
    }
}

.cd-auth-visual[b-nr35jd3ya7] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, var(--cd-primary-darkest) 0%, var(--cd-primary-deep) 55%, var(--cd-primary) 100%);
    color: #FFFFFF;
    padding: 40px clamp(24px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}

/* Faint grid overlay, matching the design's dotted graph-paper backdrop. */
.cd-auth-visual[b-nr35jd3ya7]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 72px 72px;
    pointer-events: none;
}

.cd-auth-visual__brand[b-nr35jd3ya7] {
    position: relative;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.cd-auth-visual__brand span[b-nr35jd3ya7] {
    color: var(--cd-accent);
}

.cd-auth-visual__copy[b-nr35jd3ya7] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 440px;
}

.cd-auth-visual__headline[b-nr35jd3ya7] {
    margin: 0;
    font-family: var(--cd-font-display);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.1;
}

.cd-auth-visual__text[b-nr35jd3ya7] {
    margin: 0;
    font-size: 15px;
    color: var(--cd-slate-300);
    line-height: 1.6;
}

.cd-auth-panel[b-nr35jd3ya7] {
    display: flex;
    flex-direction: column;
    padding: 28px clamp(24px, 5vw, 72px);
}

.cd-auth-panel__top[b-nr35jd3ya7] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.cd-auth-panel__body[b-nr35jd3ya7] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

.cd-auth-panel__footer[b-nr35jd3ya7] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--cd-slate-400);
}

.cd-auth-panel__footer-links[b-nr35jd3ya7] {
    display: flex;
    gap: 14px;
}

.cd-auth-panel__footer-links a[b-nr35jd3ya7] {
    color: var(--cd-slate-400);
    text-decoration: none;
}

.cd-auth-panel__footer-links a:hover[b-nr35jd3ya7] {
    color: var(--cd-slate-500);
}

/* EN/ES toggle -- mirrors NavMenu's .cd-lang exactly, duplicated here because Blazor's CSS
   isolation scopes each component's classes to that component only, and this is the only other
   place (besides the sidebar footer) where the toggle appears. */
.cd-lang[b-nr35jd3ya7] {
    display: flex;
    border: 1px solid var(--cd-slate-200);
    border-radius: 8px;
    overflow: hidden;
    flex: none;
}

.cd-lang__option[b-nr35jd3ya7] {
    border: none;
    padding: 5px 9px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    background: #FFFFFF;
    color: var(--cd-slate-500);
    text-decoration: none;
    display: inline-block;
}

.cd-lang__option.is-active[b-nr35jd3ya7] {
    background: var(--cd-ink);
    color: #FFFFFF;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* App shell — redesign handoff "Layout system": full-height flex row, sidebar + own-scrolling main. */
.cd-shell[b-yms79q8owh] {
    display: flex;
    height: 100vh;
    min-height: 560px;
    overflow: hidden;
    background: var(--cd-app-bg);
    color: var(--cd-ink);
    font-family: var(--cd-font);
}

.cd-main[b-yms79q8owh] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    background: var(--cd-app-bg);
}

/* Signed-out pages (recipient portal, error) have no sidebar and scroll with the document. */
.cd-main--bare[b-yms79q8owh] {
    min-height: 100vh;
    overflow-y: visible;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Sidebar — redesign handoff "Sidebar" and AppSidebar.dc.html. */
.cd-sidebar[b-pf2p7eh9ek] {
    width: 256px;
    height: 100%;
    flex: none;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-right: 1px solid var(--cd-slate-200);
    color: var(--cd-ink);
    overflow: hidden;
    transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cd-sidebar.is-collapsed[b-pf2p7eh9ek] {
    width: 72px;
}

/* ---------- Logo area (64px) ---------- */
.cd-sidebar__brand[b-pf2p7eh9ek] {
    height: 64px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 14px 0 16px;
    border-bottom: 1px solid var(--cd-slate-100);
}

.cd-sidebar.is-collapsed .cd-sidebar__brand[b-pf2p7eh9ek] {
    justify-content: center;
    padding: 0;
}

/* The wordmark PNG carries transparent padding; crop it to the wordmark (README "Assets"). */
.cd-sidebar__logo[b-pf2p7eh9ek] {
    display: block;
    width: 150px;
    height: 50px;
    overflow: hidden;
    flex: none;
}

.cd-sidebar__logo img[b-pf2p7eh9ek] {
    display: block;
    width: 664px;
    max-width: none;
    height: auto;
    margin: -76px 0 0 -256px;
}

.cd-sidebar__toggle[b-pf2p7eh9ek] {
    width: 32px;
    height: 32px;
    flex: none;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--cd-slate-500);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.cd-sidebar__toggle:hover[b-pf2p7eh9ek] {
    background: var(--cd-slate-100);
    color: var(--cd-ink);
}

/* ---------- Navigation ---------- */
.cd-sidebar__nav[b-pf2p7eh9ek] {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cd-nav-group[b-pf2p7eh9ek] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cd-nav-group__label[b-pf2p7eh9ek] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cd-slate-400);
    padding: 0 10px 6px;
}

.cd-nav-item[b-pf2p7eh9ek] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--cd-slate-600);
    font-weight: 400;
    transition: background 150ms ease, color 150ms ease;
}

.cd-nav-item:hover[b-pf2p7eh9ek] {
    background: var(--cd-slate-100);
    color: var(--cd-ink);
}

.cd-nav-item.is-active[b-pf2p7eh9ek] {
    background: var(--cd-blue-tint);
    color: var(--cd-primary);
    font-weight: 700;
}

.cd-sidebar.is-collapsed .cd-nav-item[b-pf2p7eh9ek] {
    justify-content: center;
    padding: 0;
}

.cd-nav-item__icon[b-pf2p7eh9ek] {
    width: 18px;
    height: 18px;
    flex: none;
    display: flex;
}

.cd-nav-sub[b-pf2p7eh9ek] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 4px 19px;
    padding-left: 12px;
    border-left: 1px solid var(--cd-slate-200);
}

.cd-nav-sub__item[b-pf2p7eh9ek] {
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    color: var(--cd-slate-500);
    font-weight: 400;
    transition: color 150ms ease;
}

.cd-nav-sub__item:hover[b-pf2p7eh9ek] {
    color: var(--cd-ink);
}

.cd-nav-sub__item.is-active[b-pf2p7eh9ek] {
    background: var(--cd-slate-50);
    color: var(--cd-primary);
    font-weight: 700;
}

/* ---------- Footer: credits, user, language, sign out ---------- */
.cd-sidebar__footer[b-pf2p7eh9ek] {
    border-top: 1px solid var(--cd-slate-100);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cd-credits[b-pf2p7eh9ek] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: var(--cd-slate-50);
    border: 1px solid var(--cd-divider);
}

.cd-credits__row[b-pf2p7eh9ek] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--cd-slate-600);
}

.cd-credits__value[b-pf2p7eh9ek] {
    font-weight: 700;
    color: var(--cd-ink);
}

.cd-credits__track[b-pf2p7eh9ek] {
    height: 4px;
    border-radius: 9999px;
    background: var(--cd-slate-200);
    overflow: hidden;
}

.cd-credits__fill[b-pf2p7eh9ek] {
    height: 100%;
    background: var(--cd-primary);
    border-radius: 9999px;
    transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cd-user[b-pf2p7eh9ek] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cd-sidebar.is-collapsed .cd-user[b-pf2p7eh9ek] {
    justify-content: center;
}

.cd-user__avatar[b-pf2p7eh9ek] {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--cd-ink);
    color: var(--cd-accent);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cd-user__text[b-pf2p7eh9ek] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cd-user__name[b-pf2p7eh9ek] {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cd-user__email[b-pf2p7eh9ek] {
    font-size: 12px;
    color: var(--cd-slate-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cd-lang[b-pf2p7eh9ek] {
    display: flex;
    border: 1px solid var(--cd-slate-200);
    border-radius: 8px;
    overflow: hidden;
    flex: none;
}

.cd-lang__option[b-pf2p7eh9ek] {
    border: none;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    background: #FFFFFF;
    color: var(--cd-slate-500);
}

.cd-lang__option.is-active[b-pf2p7eh9ek] {
    background: var(--cd-ink);
    color: #FFFFFF;
}

.cd-signout[b-pf2p7eh9ek] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--cd-slate-500);
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}

.cd-signout:hover[b-pf2p7eh9ek] {
    background: var(--cd-slate-100);
    color: var(--cd-ink);
}

.cd-sidebar.is-collapsed .cd-signout[b-pf2p7eh9ek] {
    justify-content: center;
    padding: 0;
}
/* /Components/Pages/Analytics/Index.razor.rz.scp.css */
/* Analytics — redesign handoff "App - Dashboard.dc.html" (#analytics). Shared tokens live in
   wwwroot/css/certifyd.css; this file only holds layout unique to this page. */

/* ---------- KPI strip: one bordered strip of white cells separated by 1px lines, not the
   Dashboard's individual cards (design "App - Dashboard.dc.html" #analytics aKpis grid). ---------- */
.an-kpis[b-a24cr10aee] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--cd-slate-200);
    border: 1px solid var(--cd-slate-200);
    border-radius: var(--cd-r-card);
    overflow: hidden;
}

.an-kpi[b-a24cr10aee] {
    background: #FFFFFF;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.an-kpi__value[b-a24cr10aee] {
    font-family: var(--cd-font-display);
    font-size: 36px;
    line-height: 1;
    color: var(--cd-ink);
}

/* ---------- Credential activity chart ---------- */
.an-chart[b-a24cr10aee] {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.an-chart__header[b-a24cr10aee] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.an-chart__legend[b-a24cr10aee] {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--cd-slate-600);
}

.an-legend-item[b-a24cr10aee] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.an-legend-dot[b-a24cr10aee] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.an-legend-dot--issued[b-a24cr10aee] { background: var(--cd-primary); }
.an-legend-dot--viewed[b-a24cr10aee] { background: var(--cd-accent); }

.an-chart__bars[b-a24cr10aee] {
    height: 240px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    border-bottom: 1px solid var(--cd-slate-200);
    padding-bottom: 1px;
}

.an-chart__pair[b-a24cr10aee] {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    gap: 2px;
}

.an-chart__bar[b-a24cr10aee] {
    flex: 1;
    border-radius: 3px 3px 0 0;
    min-width: 1px;
}

.an-chart__bar--issued[b-a24cr10aee] { background: var(--cd-primary); }
.an-chart__bar--viewed[b-a24cr10aee] { background: var(--cd-accent); }

.an-chart__axis[b-a24cr10aee] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--cd-slate-400);
}

.an-chart__empty[b-a24cr10aee] {
    padding: 40px 0;
    text-align: center;
    font-size: 14px;
    color: var(--cd-slate-500);
}

/* ---------- Top events by views ---------- */
.an-panel[b-a24cr10aee] {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.an-panel__empty[b-a24cr10aee] {
    font-size: 13px;
    color: var(--cd-slate-500);
}

.an-bar-row[b-a24cr10aee] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.an-bar-row__label[b-a24cr10aee] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--cd-ink);
}

.an-bar-row__value[b-a24cr10aee] {
    font-weight: 700;
}

.an-bar-row__track[b-a24cr10aee] {
    height: 6px;
    border-radius: var(--cd-r-pill);
    background: var(--cd-divider);
    overflow: hidden;
}

.an-bar-row__fill[b-a24cr10aee] {
    height: 100%;
    border-radius: var(--cd-r-pill);
    background: var(--cd-primary);
}

/* ---------- Misc ---------- */
.an-retry[b-a24cr10aee] { margin-left: 8px; }
.an-partial-warning[b-a24cr10aee] { padding: 14px 22px; font-size: 13px; }
/* /Components/Pages/Attendees/Index.razor.rz.scp.css */
/* Attendees list — redesign handoff "App - Attendees.dc.html". Shared tokens/classes live in
   wwwroot/css/certifyd.css; only list-specific bits live here. */

.att-retry[b-hhbmm4c2qg] {
    margin-left: 8px;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
}

/* The design keeps search and the filter chips left-aligned; cd-toolbar's default
   space-between would push the chips to the far right instead. */
.att-toolbar[b-hhbmm4c2qg] {
    justify-content: flex-start;
}

/* Filter chips (Event / Certificate / Organization). A native <select> keeps the control
   accessible and keyboard-operable; it is styled to read as the design's pill-shaped chip,
   with the facet name folded into each option's text (e.g. "Event: All") since a plain select
   cannot show a two-tone label + value like the design's custom control. */
.att-chips[b-hhbmm4c2qg] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.att-chip-select[b-hhbmm4c2qg] {
    height: 40px;
    padding: 0 32px 0 14px;
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid var(--cd-slate-200);
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--cd-slate-600);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    max-width: 220px;
    text-overflow: ellipsis;
}

.att-chip-select:hover[b-hhbmm4c2qg] { border-color: var(--cd-slate-300); }
.att-chip-select:focus[b-hhbmm4c2qg] { outline: none; border: 1.5px solid var(--cd-primary); box-shadow: var(--cd-focus-ring); }

/* ---------- Table cells specific to this list ---------- */
.att-check[b-hhbmm4c2qg] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.att-name[b-hhbmm4c2qg] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.att-avatar[b-hhbmm4c2qg] {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cd-app-bg);
    color: var(--cd-slate-600);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.att-ellipsis[b-hhbmm4c2qg] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.att-actions[b-hhbmm4c2qg] {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

.att-icon-btn[b-hhbmm4c2qg] {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--cd-slate-500);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--cd-t-hover), color var(--cd-t-hover);
}

.att-icon-btn:hover[b-hhbmm4c2qg] { background: var(--cd-slate-100); color: var(--cd-ink); }
.att-icon-btn--danger:hover[b-hhbmm4c2qg] { background: var(--cd-error-tint); color: var(--cd-error-ink); }

/* ---------- Pager ---------- */
.att-pager[b-hhbmm4c2qg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    font-size: 13px;
    color: var(--cd-slate-500);
}

.att-pager__buttons[b-hhbmm4c2qg] { display: flex; gap: 6px; }
/* /Components/Pages/Badges/Index.razor.rz.scp.css */
/* Badges library — redesign handoff "App - Badges.dc.html". Unlike other rebuilt list pages this
   one is not a single centered "cd-page" column: the design puts a persistent 360px detail aside
   outside the main content, so the page root here is a flex row instead. The aside uses
   "position: sticky" against ".cd-main" (MainLayout's own scroll container) rather than the
   design's own independently-scrolling pane, which keeps this page inside the app's existing
   single-scroll shell instead of introducing a second nested scroll container. */

.badges-shell[b-xk552qx8ui] {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.badges-shell__main[b-xk552qx8ui] {
    flex: 1;
    min-width: 0;
    max-width: 1100px;
    margin: 0 auto;
}

.badges-shell__aside[b-xk552qx8ui] {
    width: 360px;
    flex: none;
    background: #FFFFFF;
    border-left: 1px solid var(--cd-slate-200);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: 100vh;
    overflow-y: auto;
}

@media (max-width: 1100px) {
    .badges-shell[b-xk552qx8ui] { flex-direction: column; }
    .badges-shell__main[b-xk552qx8ui] { max-width: none; margin: 0; }
    .badges-shell__aside[b-xk552qx8ui] {
        width: auto;
        position: static;
        max-height: none;
        border-left: none;
        border-top: 1px solid var(--cd-slate-200);
    }
}

/* ---------- Badge tile grid ---------- */
.badges-grid[b-xk552qx8ui] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
}

.badge-tile[b-xk552qx8ui] {
    background: #FFFFFF;
    border: 1.5px solid var(--cd-slate-200);
    border-radius: var(--cd-r-card);
    padding: 26px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    cursor: pointer;
    transition: transform var(--cd-t-lift), box-shadow var(--cd-t-lift), border-color var(--cd-t-hover);
}

.badge-tile:hover[b-xk552qx8ui] {
    transform: translateY(-3px);
    box-shadow: var(--cd-shadow-tile-hover);
}

.badge-tile.is-selected[b-xk552qx8ui] {
    border-color: var(--cd-primary);
    box-shadow: var(--cd-focus-ring);
}

.badge-tile__titles[b-xk552qx8ui] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.badge-tile__name[b-xk552qx8ui] {
    font-size: 15px;
    font-weight: 700;
    color: var(--cd-ink);
}

/* ---------- Detail aside ---------- */
.badge-aside__header[b-xk552qx8ui] {
    padding: 28px 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    border-bottom: 1px solid var(--cd-divider);
    background: linear-gradient(180deg, var(--cd-slate-50), #FFFFFF);
}

.badge-aside__titles[b-xk552qx8ui] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.badge-aside__name[b-xk552qx8ui] {
    font-family: var(--cd-font-display);
    font-size: 26px;
    line-height: 1.1;
    color: var(--cd-ink);
}

.badge-aside__actions[b-xk552qx8ui] {
    display: flex;
    gap: 8px;
    width: 100%;
}

.badge-aside__actions-primary[b-xk552qx8ui] { flex: 1; justify-content: center; }

.badge-aside__section[b-xk552qx8ui] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid var(--cd-divider);
}

.badge-aside__section:last-child[b-xk552qx8ui] { border-bottom: none; }

.badge-aside__text[b-xk552qx8ui] {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--cd-slate-700);
}

.badge-aside__skills[b-xk552qx8ui] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.badge-aside__skill[b-xk552qx8ui] {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: var(--cd-r-pill);
    background: var(--cd-slate-100);
    color: var(--cd-slate-700);
}

.badge-aside__earner[b-xk552qx8ui] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.badge-aside__earner-initials[b-xk552qx8ui] {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cd-app-bg);
    color: var(--cd-slate-600);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-aside__earner-name[b-xk552qx8ui] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--cd-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge-aside__earner-when[b-xk552qx8ui] {
    flex: none;
    font-size: 12px;
    color: var(--cd-slate-400);
}
/* /Components/Pages/Certificates/Details.razor.rz.scp.css */
/* Certificate details — redesign handoff "App - Certificates.dc.html" (#details view). Header
   band and two-column grid reuse cd-detail-header/cd-two-col from certifyd.css. */

/* This page has no tabs under the header (unlike Events details), so cd-detail-header__inner's
   zero bottom padding (meant to butt against the tab strip) would otherwise crowd the border. */
.cert-detail-header .cd-detail-header__inner[b-4njy2exca0] {
    padding-bottom: 24px;
}

.cert-detail__event[b-4njy2exca0] {
    font-size: 15px;
    color: var(--cd-slate-600);
}

.cert-detail__body[b-4njy2exca0] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px clamp(20px, 4vw, 48px) 64px;
}

/* Canvas frame around the PDF preview, matching the README's certificate-on-canvas treatment. */
.cert-detail__canvas[b-4njy2exca0] {
    background: var(--cd-canvas);
    border-radius: var(--cd-r-card);
    padding: clamp(16px, 3vw, 32px);
}

.cert-detail__frame[b-4njy2exca0] {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(11, 27, 51, 0.18);
}

.cert-detail__side[b-4njy2exca0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cert-detail__card[b-4njy2exca0] {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cert-detail__row[b-4njy2exca0] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.cert-detail__manage-row[b-4njy2exca0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
/* /Components/Pages/Certificates/Index.razor.rz.scp.css */
/* Certificates list — redesign handoff "App - Certificates.dc.html" (list view). Shared
   tokens/classes live in wwwroot/css/certifyd.css; only list-specific bits live here. */

.cert-retry[b-us5pbrubdu] {
    margin-left: 8px;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
}

/* Banner shown when the list arrived with "?eventId=" from an event's details page. */
.cert-filter-banner[b-us5pbrubdu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-radius: var(--cd-r-input);
    background: var(--cd-blue-tint);
    color: var(--cd-primary);
    font-size: 13px;
    font-weight: 700;
}

/* Trailing chevron hinting the row opens the certificate's details page, matching the design's
   list row affordance. */
.cert-chevron[b-us5pbrubdu] {
    color: var(--cd-slate-400);
    display: flex;
    justify-content: center;
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Dashboard — redesign handoff "App - Dashboard.dc.html". Shared tokens live in wwwroot/css/certifyd.css. */

/* ---------- KPI tiles ---------- */
.dash-kpis[b-0g2ox5chwm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.dash-kpi[b-0g2ox5chwm] {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dash-kpi__value[b-0g2ox5chwm] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.dash-kpi__delta[b-0g2ox5chwm] {
    font-size: 13px;
    font-weight: 700;
    color: var(--cd-success-ink);
}

/* ---------- Quick actions ---------- */
.dash-actions[b-0g2ox5chwm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.dash-action[b-0g2ox5chwm] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #FFFFFF;
    border: 1px solid var(--cd-slate-200);
    border-radius: 14px;
    color: var(--cd-ink);
    text-decoration: none;
    transition: border-color 220ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dash-action:hover[b-0g2ox5chwm] {
    border-color: var(--cd-primary);
    box-shadow: var(--cd-shadow-tile-hover);
    color: var(--cd-ink);
}

.dash-action__icon[b-0g2ox5chwm] {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-action__icon--blue[b-0g2ox5chwm] { background: var(--cd-blue-tint); color: var(--cd-primary); }
.dash-action__icon--orange[b-0g2ox5chwm] { background: var(--cd-accent-tint); color: var(--cd-accent-ink); }
.dash-action__icon--slate[b-0g2ox5chwm] { background: var(--cd-slate-100); color: var(--cd-ink); }
.dash-action__icon--green[b-0g2ox5chwm] { background: var(--cd-success-tint); color: var(--cd-success-ink); }

.dash-action__text[b-0g2ox5chwm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dash-action__label[b-0g2ox5chwm] {
    font-size: 14px;
    font-weight: 700;
}

.dash-action__sub[b-0g2ox5chwm] {
    font-size: 12px;
    color: var(--cd-slate-500);
}

/* ---------- Two-column body ---------- */
.dash-columns[b-0g2ox5chwm] {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 1100px) {
    .dash-columns[b-0g2ox5chwm] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dash-events[b-0g2ox5chwm] {
    overflow: hidden;
}

.dash-event[b-0g2ox5chwm] {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 120px 110px;
    align-items: center;
    gap: 16px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--cd-slate-100);
    color: var(--cd-ink);
    text-decoration: none;
    transition: background 150ms ease;
}

.dash-event:last-child[b-0g2ox5chwm] {
    border-bottom: none;
}

.dash-event:hover[b-0g2ox5chwm] {
    background: var(--cd-slate-50);
    color: var(--cd-ink);
}

.dash-event__date[b-0g2ox5chwm] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--cd-app-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.dash-event__month[b-0g2ox5chwm] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--cd-accent-dark);
}

.dash-event__day[b-0g2ox5chwm] {
    font-family: var(--cd-font-display);
    font-size: 22px;
    margin-top: 3px;
}

.dash-event__text[b-0g2ox5chwm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dash-event__name[b-0g2ox5chwm] {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-event__meta[b-0g2ox5chwm] {
    font-size: 12px;
    color: var(--cd-slate-500);
}

.dash-event__progress[b-0g2ox5chwm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-event__progress-text[b-0g2ox5chwm] {
    font-size: 12px;
    color: var(--cd-slate-600);
}

.dash-event__status[b-0g2ox5chwm] {
    justify-self: end;
}

/* ---------- Side panels ---------- */
.dash-side[b-0g2ox5chwm] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dash-panel[b-0g2ox5chwm] {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dash-panel__empty[b-0g2ox5chwm] {
    font-size: 13px;
    color: var(--cd-slate-500);
}

.dash-alert[b-0g2ox5chwm] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    color: var(--cd-ink);
    text-decoration: none;
    transition: filter 150ms ease;
}

.dash-alert:hover[b-0g2ox5chwm] {
    color: var(--cd-ink);
    filter: brightness(0.98);
}

.dash-alert__dot[b-0g2ox5chwm] {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    margin-top: 6px;
}

.dash-alert--danger[b-0g2ox5chwm] { background: var(--cd-error-tint); }
.dash-alert--danger .dash-alert__dot[b-0g2ox5chwm] { background: var(--cd-error); }
.dash-alert--warning[b-0g2ox5chwm] { background: var(--cd-accent-tint); }
.dash-alert--warning .dash-alert__dot[b-0g2ox5chwm] { background: var(--cd-accent-dark); }
.dash-alert--neutral[b-0g2ox5chwm] { background: var(--cd-app-bg); }
.dash-alert--neutral .dash-alert__dot[b-0g2ox5chwm] { background: var(--cd-slate-500); }

.dash-alert__text[b-0g2ox5chwm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash-alert__title[b-0g2ox5chwm] {
    font-size: 13px;
    font-weight: 700;
}

.dash-alert__sub[b-0g2ox5chwm] {
    font-size: 12px;
    color: var(--cd-slate-600);
}

.dash-activity[b-0g2ox5chwm] {
    display: flex;
    gap: 12px;
    padding: 8px 0;
}

.dash-activity__avatar[b-0g2ox5chwm] {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--cd-app-bg);
    color: var(--cd-slate-600);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-activity__text[b-0g2ox5chwm] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.dash-activity__line[b-0g2ox5chwm] {
    font-size: 13px;
    line-height: 1.4;
}

.dash-activity__time[b-0g2ox5chwm] {
    font-size: 12px;
    color: var(--cd-slate-400);
}
/* /Components/Pages/Events/Details.razor.rz.scp.css */
/* Event details — redesign handoff "App - Events.dc.html" (#details view). Header band and
   tabs reuse cd-detail-header/cd-tabs from certifyd.css; only the two-column body is here. */

.evt-body[b-qty33chlg4] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px clamp(20px, 4vw, 48px) 64px;
}

.evt-main[b-qty33chlg4] {
    overflow: hidden;
}

.evt-side[b-qty33chlg4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- Attendees / Certificates tab toolbar ---------- */
.evt-toolbar[b-qty33chlg4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--cd-divider);
    flex-wrap: wrap;
}

.evt-toolbar__search[b-qty33chlg4] {
    min-width: 220px;
}

.evt-avatar[b-qty33chlg4] {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--cd-app-bg);
    color: var(--cd-slate-600);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Right column: template card ---------- */
.evt-template-card[b-qty33chlg4] {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.evt-template-card__icon[b-qty33chlg4] {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 10px;
    background: var(--cd-blue-tint);
    color: var(--cd-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.evt-template-card__text[b-qty33chlg4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

/* ---------- Right column: issue/deliver/view funnel ---------- */
.evt-progress[b-qty33chlg4] {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.evt-progress__row[b-qty33chlg4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.evt-progress__row-head[b-qty33chlg4] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

/* ---------- Settings tab ---------- */
.evt-settings[b-qty33chlg4] {
    display: flex;
    flex-direction: column;
}

.evt-settings__row[b-qty33chlg4],
.evt-settings__danger[b-qty33chlg4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
}

.evt-settings__row[b-qty33chlg4] {
    border-bottom: 1px solid var(--cd-slate-100);
}

.evt-settings__label[b-qty33chlg4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* /Components/Pages/Events/Index.razor.rz.scp.css */
/* Events list — redesign handoff "App - Events.dc.html". Shared tokens/classes live in
   wwwroot/css/certifyd.css; only list-specific bits live here. */

.evt-template[b-2f9pt9sbm7] {
    font-size: 13px;
    color: var(--cd-slate-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "No template yet" is called out in the accent ink color (README status pill palette). */
.evt-template--empty[b-2f9pt9sbm7] {
    color: var(--cd-accent-ink);
}

.evt-retry[b-2f9pt9sbm7] {
    margin-left: 8px;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
}
/* /Components/Pages/Portal.razor.rz.scp.css */
/* Recipient portal (redesign handoff "Recipient Portal.dc.html"). Rendered inside MainLayout's
   bare, sidebar-less main area for signed-out visitors (see Layout/MainLayout.razor.css
   .cd-main--bare), so this page draws its own header instead of reusing the app sidebar's. */

.portal[b-kzhn8tlpdx] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---------- Header ---------- */
.portal-header[b-kzhn8tlpdx] {
    height: 68px;
    flex: none;
    background: #FFFFFF;
    border-bottom: 1px solid var(--cd-slate-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(16px, 4vw, 48px);
    gap: 16px;
}

.portal-header__brand[b-kzhn8tlpdx] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Crops the full wordmark image down to just the "certifyd" mark, matching NavMenu's sidebar
   logo exactly (redesign README: "In the sidebar it is cropped to the wordmark only"). */
.portal-header__logo[b-kzhn8tlpdx] {
    display: block;
    width: 150px;
    height: 50px;
    overflow: hidden;
    flex: none;
}

.portal-header__logo img[b-kzhn8tlpdx] {
    display: block;
    width: 664px;
    max-width: none;
    height: auto;
    margin: -76px 0 0 -256px;
}

.portal-header__tagline[b-kzhn8tlpdx] {
    font-size: 11px;
    color: var(--cd-slate-400);
    white-space: nowrap;
}

.portal-header__actions[b-kzhn8tlpdx] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
}

.portal-header__avatar[b-kzhn8tlpdx] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--cd-blue-tint);
    color: var(--cd-primary);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* EN/ES toggle -- mirrors NavMenu's/AuthLayout's .cd-lang exactly. Duplicated here (rather than
   reused) because Blazor's CSS isolation scopes each component's classes to that component only. */
.cd-lang[b-kzhn8tlpdx] {
    display: flex;
    border: 1px solid var(--cd-slate-200);
    border-radius: 8px;
    overflow: hidden;
    flex: none;
}

.cd-lang__option[b-kzhn8tlpdx] {
    border: none;
    padding: 5px 9px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    background: #FFFFFF;
    color: var(--cd-slate-500);
    text-decoration: none;
    display: inline-block;
}

.cd-lang__option.is-active[b-kzhn8tlpdx] {
    background: var(--cd-ink);
    color: #FFFFFF;
}

/* ---------- Loading / error states ---------- */
.portal-state[b-kzhn8tlpdx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 20px;
    text-align: center;
}

.portal-state__text[b-kzhn8tlpdx] {
    margin: 0;
    font-size: 14px;
    color: var(--cd-slate-500);
}

.portal-state__card[b-kzhn8tlpdx] {
    text-align: left;
}

/* ---------- Success state ---------- */
.portal-body[b-kzhn8tlpdx] {
    flex: 1;
}

.portal-cert[b-kzhn8tlpdx] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Grey canvas the certificate sits on, and the shadowed frame around the PDF viewer itself --
   copied from Pages/Certificates/Details.razor.css's .cert-detail__canvas/__frame (same recipe:
   README "certificate on canvas: 0 24px 60px rgba(11,27,51,0.18)"), duplicated for the same
   CSS-isolation reason as .cd-lang above. */
.portal-cert__canvas[b-kzhn8tlpdx] {
    background: var(--cd-canvas);
    padding: clamp(16px, 4vw, 40px);
}

.portal-cert__frame[b-kzhn8tlpdx] {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(11, 27, 51, 0.18);
}

.portal-cert__footer[b-kzhn8tlpdx] {
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.portal-cert__meta[b-kzhn8tlpdx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.portal-cert__title[b-kzhn8tlpdx] {
    font-size: 16px;
    font-weight: 700;
    color: var(--cd-ink);
}

.portal-cert__sub[b-kzhn8tlpdx] {
    font-size: 13px;
    color: var(--cd-slate-500);
}

.portal-side[b-kzhn8tlpdx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.portal-share[b-kzhn8tlpdx] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.portal-share__title[b-kzhn8tlpdx] {
    font-size: 15px;
    font-weight: 700;
    color: var(--cd-ink);
}

/* LinkedIn's own brand blue -- a one-off, like the design's own hardcoded #0A66C2, not a redesign
   token (nothing else in the app uses LinkedIn's color). */
.portal-share__linkedin[b-kzhn8tlpdx] {
    height: 46px;
    border: none;
    border-radius: 10px;
    background: #0A66C2;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    justify-content: center;
    width: 100%;
}

.portal-share__linkedin:hover[b-kzhn8tlpdx] {
    background: #08519c;
    color: #FFFFFF;
}

.portal-share__linkedin-badge[b-kzhn8tlpdx] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: #FFFFFF;
    color: #0A66C2;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.portal-share__grid[b-kzhn8tlpdx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.portal-share__grid .cd-btn[b-kzhn8tlpdx] {
    height: 44px;
    justify-content: center;
}

/* ---------- Footer ---------- */
.portal-footer[b-kzhn8tlpdx] {
    flex: none;
    padding: 24px;
    text-align: center;
    font-size: 12px;
    color: var(--cd-slate-400);
}

.portal-footer__brand[b-kzhn8tlpdx] {
    color: var(--cd-primary);
    font-weight: 700;
}

.portal-footer__brand span[b-kzhn8tlpdx] {
    color: var(--cd-accent-dark);
}

/* ---------- Mobile (recipients mostly open this from their phone) ---------- */
@media (max-width: 480px) {
    .portal-header[b-kzhn8tlpdx] {
        gap: 10px;
    }

    .portal-header__tagline[b-kzhn8tlpdx] {
        display: none;
    }

    .portal-share__grid[b-kzhn8tlpdx] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Settings/ApiKeys.razor.rz.scp.css */
/* API keys list (redesign handoff "App - Settings.dc.html" #isApi). Page-only layout; the
   table itself is the shared .cd-table from certifyd.css. */

.apk-scopes[b-8sq6gahfex] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Design's row action is a red text link ("Revoke"), not the blue .cd-link default. */
.apk-revoke[b-8sq6gahfex] {
    justify-self: end;
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--cd-error-ink);
    cursor: pointer;
}

.apk-revoke:hover[b-8sq6gahfex] {
    text-decoration: underline;
}
/* /Components/Pages/Settings/Branding.razor.rz.scp.css */
/* Branding settings (redesign handoff "App - Settings.dc.html" #isBranding). Page-only layout;
   shared tokens/classes (cd-card, cd-field, cd-input, cd-two-col, ...) come from certifyd.css. */

.brd-column[b-tojmv35j5t] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.brd-card[b-tojmv35j5t] {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- Identity: logo preview + URL field ---------- */

.brd-logo-row[b-tojmv35j5t] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brd-logo-tile[b-tojmv35j5t] {
    width: 72px;
    height: 72px;
    flex: none;
    border-radius: var(--cd-r-tile);
    background: var(--cd-ink);
    color: var(--cd-accent);
    font-family: var(--cd-font-display);
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.brd-logo-tile img[b-tojmv35j5t] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brd-logo-field[b-tojmv35j5t] {
    flex: 1;
    min-width: 0;
}

/* ---------- Color swatches (design's 5-dot primary/accent pickers) ---------- */

.brd-swatch-row[b-tojmv35j5t] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.brd-swatch[b-tojmv35j5t] {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    border: 3px solid #FFFFFF;
    box-shadow: 0 0 0 1px var(--cd-slate-200);
    cursor: pointer;
    padding: 0;
}

.brd-swatch.is-selected[b-tojmv35j5t] {
    box-shadow: 0 0 0 2px var(--cd-ink);
}

.brd-hex-input[b-tojmv35j5t] {
    width: 110px;
    height: 36px;
    font-family: var(--cd-font-mono);
    font-size: 12px;
}

/* ---------- Hide-Powered-By toggle row ---------- */

.brd-toggle-row[b-tojmv35j5t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--cd-slate-200);
    border-radius: var(--cd-r-input);
    cursor: pointer;
}

.brd-toggle-title[b-tojmv35j5t] {
    font-size: 13px;
    font-weight: 700;
    color: var(--cd-ink);
}

/* A checkbox-backed switch (SfSwitch has no redesign styling yet), matching the design's
   40x22 pill track with a sliding white knob. */
.brd-toggle[b-tojmv35j5t] {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex: none;
}

.brd-toggle input[b-tojmv35j5t] {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.brd-toggle__track[b-tojmv35j5t] {
    position: absolute;
    inset: 0;
    border-radius: var(--cd-r-pill);
    background: var(--cd-slate-300);
    transition: background var(--cd-t-hover);
}

.brd-toggle__knob[b-tojmv35j5t] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: left var(--cd-t-hover);
}

.brd-toggle input:checked + .brd-toggle__track[b-tojmv35j5t] {
    background: var(--cd-primary);
}

.brd-toggle input:checked + .brd-toggle__track .brd-toggle__knob[b-tojmv35j5t] {
    left: 20px;
}

.brd-toggle input:focus-visible + .brd-toggle__track[b-tojmv35j5t] {
    box-shadow: var(--cd-focus-ring);
}

/* ---------- Email preview aside ---------- */

.brd-preview[b-tojmv35j5t] {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.brd-preview-card[b-tojmv35j5t] {
    background: #FFFFFF;
    border: 1px solid var(--cd-slate-200);
    border-radius: var(--cd-r-card);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(11, 27, 51, 0.08);
}

.brd-preview-mailhead[b-tojmv35j5t] {
    padding: 12px 18px;
    border-bottom: 1px solid var(--cd-divider);
    font-size: 12px;
    color: var(--cd-slate-500);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brd-preview-mailhead strong[b-tojmv35j5t] { color: var(--cd-ink); }

.brd-preview-bar[b-tojmv35j5t] { height: 6px; }

.brd-preview-body[b-tojmv35j5t] {
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.brd-preview-mark[b-tojmv35j5t] {
    width: 40px;
    height: 40px;
    border-radius: var(--cd-r-input);
    background: var(--cd-ink);
    color: var(--cd-accent);
    font-family: var(--cd-font-display);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.brd-preview-mark img[b-tojmv35j5t] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brd-preview-greeting[b-tojmv35j5t] {
    font-family: var(--cd-font-display);
    font-size: 26px;
    line-height: 1.15;
    color: var(--cd-ink);
}

.brd-preview-text[b-tojmv35j5t] {
    font-size: 14px;
    line-height: 1.6;
    color: var(--cd-slate-600);
}

.brd-preview-button[b-tojmv35j5t] {
    align-self: flex-start;
    height: 42px;
    padding: 0 20px;
    border-radius: 9px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.brd-preview-rule[b-tojmv35j5t] { height: 2px; width: 60px; }

.brd-preview-footer[b-tojmv35j5t] { font-size: 12px; color: var(--cd-slate-400); }

.brd-preview-powered[b-tojmv35j5t] { font-size: 11px; color: var(--cd-slate-300); }

/* ---------- Actions ---------- */

.brd-actions[b-tojmv35j5t] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
/* /Components/Pages/Settings/Webhooks.razor.rz.scp.css */
/* Webhooks list (redesign handoff "App - Settings.dc.html" #isHooks). Page-only layout. */

.whk-list[b-29kjw8u9ax] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.whk-card[b-29kjw8u9ax] {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.whk-card__top[b-29kjw8u9ax] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.whk-card__id[b-29kjw8u9ax] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.whk-dot[b-29kjw8u9ax] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.whk-dot--success[b-29kjw8u9ax] { background: var(--cd-success); }
.whk-dot--warning[b-29kjw8u9ax] { background: var(--cd-accent-dark); }
.whk-dot--danger[b-29kjw8u9ax] { background: var(--cd-error); }

.whk-url[b-29kjw8u9ax] {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.whk-card__actions[b-29kjw8u9ax] {
    display: flex;
    gap: 6px;
    flex: none;
}

.whk-events[b-29kjw8u9ax] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.whk-event[b-29kjw8u9ax] {
    font-family: var(--cd-font-mono);
}

.whk-meta[b-29kjw8u9ax] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.whk-failures[b-29kjw8u9ax] { color: var(--cd-accent-ink); }

.whk-log[b-29kjw8u9ax] {
    padding-top: 4px;
}
/* /Components/Shared/BadgeArt.razor.rz.scp.css */
/* Badge medallion — see BadgeArt.razor's header comment for the design source and the
   color/level fields it omits for lack of data. Sizing is driven by CSS variables the component
   sets inline so one stylesheet serves every call site (grid tile, detail aside, dialog preview). */

.badge-art[b-q3g8ichmoh] {
    width: var(--badge-art-size);
    height: var(--badge-art-size);
    flex: none;
}

.badge-art__image[b-q3g8ichmoh] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Default ring: the design's own orange-accent gradient (one of its several per-badge variants),
   used for every CSS-built badge since no color field exists to vary it per badge. */
.badge-art__ring[b-q3g8ichmoh] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(var(--cd-accent), var(--cd-accent-dark), var(--cd-accent));
    padding: var(--badge-art-ring);
}

.badge-art__core[b-q3g8ichmoh] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--cd-ink);
    border: 3px solid #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.badge-art__mono[b-q3g8ichmoh] {
    font-family: var(--cd-font-display);
    font-size: var(--badge-art-mono);
    line-height: 1;
}
/* /Pages/Certificates/BulkOperations.razor.rz.scp.css */
/* Bulk operations — redesign handoff "App - Certificates.dc.html" (#bulk view). Shared cd-card /
   cd-progress / cd-info-row tokens live in wwwroot/css/certifyd.css; only this page's own
   running-job card and delivery-mode cards live here. */

.bulk-running[b-ddjji9p8gg] {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bulk-running__head[b-ddjji9p8gg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.bulk-running__title[b-ddjji9p8gg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bulk-running__dot[b-ddjji9p8gg] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cd-primary);
    box-shadow: 0 0 0 4px rgba(10, 95, 173, 0.15);
    flex: none;
}

.bulk-running__label[b-ddjji9p8gg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* No real percent is available while the backend job-id bug (see the page's header comment)
   means progress never populates, so the fill sweeps back and forth instead of freezing at 0%. */
.bulk-running__indeterminate[b-ddjji9p8gg] {
    width: 30% !important;
    animation: bulk-sweep-b-ddjji9p8gg 1.2s ease-in-out infinite;
}

@keyframes bulk-sweep-b-ddjji9p8gg {
    0% { margin-left: 0; }
    50% { margin-left: 70%; }
    100% { margin-left: 0; }
}

.bulk-running__stats[b-ddjji9p8gg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.bulk-running__stat[b-ddjji9p8gg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bulk-running__stat-value[b-ddjji9p8gg] {
    font-family: var(--cd-font-display);
    font-size: 26px;
    line-height: 1.1;
    color: var(--cd-ink);
}

/* ---------- "New Bulk Job" dialog: delivery mode cards ---------- */
.bulk-mode-card[b-ddjji9p8gg] {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1.5px solid var(--cd-slate-200);
    border-radius: var(--cd-r-tile);
    cursor: pointer;
    background: #FFFFFF;
}

.bulk-mode-card.is-selected[b-ddjji9p8gg] {
    border-color: var(--cd-primary);
    background: var(--cd-row-selected);
}

.bulk-mode-card__dot[b-ddjji9p8gg] {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid var(--cd-slate-300);
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bulk-mode-card__dot[b-ddjji9p8gg]::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.bulk-mode-card__dot.is-selected[b-ddjji9p8gg] {
    border-color: var(--cd-primary);
}

.bulk-mode-card__dot.is-selected[b-ddjji9p8gg]::after {
    background: var(--cd-primary);
}

.bulk-mode-card__text[b-ddjji9p8gg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bulk-attach-row[b-ddjji9p8gg] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--cd-ink);
    cursor: pointer;
}