@import '_content/Datanomics.Ds/Datanomics.Ds.d7cf1101uz.bundle.scp.css';
@import '_content/PrivacyPlatform.UI.Shared/PrivacyPlatform.UI.Shared.prvnsjczth.bundle.scp.css';

/* _content/BlazorFrontend/Components/Admin/UserGuides/ConflictModal.razor.rz.scp.css */
.dp-modal-backdrop[b-7tedcoe7dd] {
    position: fixed;
    inset: 0;
    background-color: var(--dp-surface-overlay);
    z-index: 1080;
}

.dp-modal[b-7tedcoe7dd] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(960px, 95vw);
    max-height: 90vh;
    overflow: auto;
    background-color: var(--dp-surface-elevated);
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-l3, 0 8px 32px rgba(0, 0, 0, 0.16));
    z-index: 1090;
}

.dp-modal__header[b-7tedcoe7dd] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--dp-border-subtle);
}

    .dp-modal__header i[b-7tedcoe7dd] {
        color: var(--dp-status-warning);
        font-size: 1.25rem;
    }

    .dp-modal__header h2[b-7tedcoe7dd] {
        font-size: 1.125rem;
        font-weight: 600;
        margin: 0;
        color: var(--dp-text-primary);
    }

.dp-modal__body[b-7tedcoe7dd] {
    padding: 1rem 1.25rem;
    color: var(--dp-text-primary);
}

.dp-modal__footer[b-7tedcoe7dd] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--dp-border-subtle);
    background-color: var(--dp-surface-secondary);
}

.ug-diff-grid[b-7tedcoe7dd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
}

.ug-diff-col[b-7tedcoe7dd] {
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md, 8px);
    background-color: var(--dp-surface-primary);
    overflow: hidden;
}

.ug-diff-col__header[b-7tedcoe7dd] {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--dp-border-subtle);
}

.ug-diff-col--theirs .ug-diff-col__header[b-7tedcoe7dd] {
    background-color: var(--dp-audit-diff-remove-bg);
    color: var(--dp-audit-diff-remove-fg);
}

.ug-diff-col--mine .ug-diff-col__header[b-7tedcoe7dd] {
    background-color: var(--dp-audit-diff-add-bg);
    color: var(--dp-audit-diff-add-fg);
}

.ug-diff-pre[b-7tedcoe7dd] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--dp-text-primary);
    background-color: var(--dp-surface-primary);
    margin: 0;
    padding: 0.75rem;
    max-height: 40vh;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.ug-overwrite[b-7tedcoe7dd] {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--dp-border-subtle);
}

@media (max-width: 767.98px) {
    .ug-diff-grid[b-7tedcoe7dd] {
        grid-template-columns: 1fr;
    }
}
/* _content/BlazorFrontend/Components/Admin/UserGuides/DeleteConfirmModal.razor.rz.scp.css */
.dp-modal-backdrop[b-ovohyj6v3c] {
    position: fixed;
    inset: 0;
    background-color: var(--dp-surface-overlay);
    z-index: 1080;
}

.dp-modal[b-ovohyj6v3c] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 92vw);
    max-height: 86vh;
    overflow-y: auto;
    background-color: var(--dp-surface-elevated);
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-l3, 0 8px 32px rgba(0, 0, 0, 0.16));
    z-index: 1090;
}

.dp-modal__header[b-ovohyj6v3c] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--dp-border-subtle);
}

    .dp-modal__header i[b-ovohyj6v3c] {
        color: var(--dp-status-danger);
        font-size: 1.25rem;
    }

    .dp-modal__header h2[b-ovohyj6v3c] {
        font-size: 1.125rem;
        font-weight: 600;
        margin: 0;
        color: var(--dp-text-primary);
    }

.dp-modal__body[b-ovohyj6v3c] {
    padding: 1rem 1.25rem;
    color: var(--dp-text-primary);
}

    .dp-modal__body p[b-ovohyj6v3c] {
        margin: 0 0 1rem;
        font-size: 0.9375rem;
    }

.dp-modal__footer[b-ovohyj6v3c] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--dp-border-subtle);
    background-color: var(--dp-surface-secondary);
    border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
}
/* _content/BlazorFrontend/Components/Admin/UserGuides/VersionHistoryModal.razor.rz.scp.css */
.dp-modal-backdrop[b-e9ou8mk2o8] {
    position: fixed;
    inset: 0;
    background-color: var(--dp-surface-overlay);
    z-index: 1080;
}

.dp-modal[b-e9ou8mk2o8] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, 92vw);
    max-height: 86vh;
    overflow: auto;
    background-color: var(--dp-surface-elevated);
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-l3, 0 8px 32px rgba(0, 0, 0, 0.16));
    z-index: 1090;
}

.dp-modal__header[b-e9ou8mk2o8],
.dp-modal__footer[b-e9ou8mk2o8] {
    padding: 1rem 1.25rem;
}

.dp-modal__header[b-e9ou8mk2o8] {
    border-bottom: 1px solid var(--dp-border-subtle);
}

.dp-modal__footer[b-e9ou8mk2o8] {
    border-top: 1px solid var(--dp-border-subtle);
    background-color: var(--dp-surface-secondary);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.dp-modal__body[b-e9ou8mk2o8] {
    padding: 0.5rem 1.25rem 1rem;
    color: var(--dp-text-primary);
}

.ug-version-list[b-e9ou8mk2o8] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ug-version-item[b-e9ou8mk2o8] {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--dp-border-subtle);
    background-color: var(--dp-surface-primary);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .ug-version-item:hover[b-e9ou8mk2o8] {
        background-color: var(--dp-surface-hover);
    }

    .ug-version-item:last-child[b-e9ou8mk2o8] {
        border-bottom: 0;
    }

.ug-version-item__head[b-e9ou8mk2o8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
}

.ug-version-pill[b-e9ou8mk2o8] {
    background-color: var(--dp-surface-brand-subtle);
    color: var(--dp-interactive-primary);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full, 999px);
    font-weight: 600;
}

.ug-version-status[b-e9ou8mk2o8] {
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full, 999px);
    font-size: 0.75rem;
    font-weight: 600;
}

    .ug-version-status--draft[b-e9ou8mk2o8] {
        background-color: var(--dp-surface-secondary);
        color: var(--dp-text-secondary);
    }

    .ug-version-status--published[b-e9ou8mk2o8] {
        background-color: var(--dp-status-success-bg);
        color: var(--dp-status-success-text);
    }

    .ug-version-status--archived[b-e9ou8mk2o8] {
        background-color: var(--dp-status-warning-bg);
        color: var(--dp-status-warning-text);
    }

.ug-version-meta[b-e9ou8mk2o8] {
    color: var(--dp-text-muted);
    font-size: 0.8125rem;
    margin-left: auto;
}

.ug-version-note[b-e9ou8mk2o8] {
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.ug-version-current[b-e9ou8mk2o8] {
    color: var(--dp-text-tertiary);
    font-size: 0.8125rem;
    font-style: italic;
}

.ug-version-rollback-confirm[b-e9ou8mk2o8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    background-color: var(--dp-status-warning-bg);
    border: 1px solid var(--dp-status-warning-border);
    border-radius: var(--radius-md, 8px);
}

.ug-version-rollback-confirm__icon[b-e9ou8mk2o8] {
    font-size: 1.5rem;
    color: var(--dp-status-warning);
}

.ug-version-rollback-confirm__title[b-e9ou8mk2o8] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.ug-version-rollback-confirm__body[b-e9ou8mk2o8] {
    margin: 0;
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
}

.ug-version-rollback-confirm__actions[b-e9ou8mk2o8] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
/* _content/BlazorFrontend/Components/Administration/Licensing/ContractsPanel.razor.rz.scp.css */
/* Contracts panel (Accounts hub — Contracts tab).
   Tokens only; no hardcoded colours. */

/* Replaces the former inline style="background-color: rgba(0,0,0,0.4)" on the modal. */
.contracts-panel__modal-backdrop[b-wsposcqzi2] {
    background-color: var(--dp-surface-overlay);
}
/* _content/BlazorFrontend/Components/Administration/Licensing/PendingApprovalsPanel.razor.rz.scp.css */
/* Pending approvals panel (Licenses hub — Pending tab).
   Tokens only; no hardcoded colours. */

.pending-approvals__empty-icon[b-wmhqmnbnyc] {
    color: var(--dp-status-success);
}

/* Replaces the former inline style="background-color: rgba(0,0,0,0.4)" on the modal. */
.pending-approvals__modal-backdrop[b-wmhqmnbnyc] {
    background-color: var(--dp-surface-overlay);
}
/* _content/BlazorFrontend/Components/Administration/Licensing/SigningKeysPanel.razor.rz.scp.css */
/* Signing keys panel (Operations hub — Signing keys tab).
   Tokens only; no hardcoded colours. */

/* Replaces the former inline style="word-break: break-all; white-space: pre-wrap;" on the
   public-key <pre>. */
.signing-keys-panel__pubkey[b-ukixgm3st8] {
    word-break: break-all;
    white-space: pre-wrap;
}
/* _content/BlazorFrontend/Components/Apple/AppleActionRow.razor.rz.scp.css */
/*
 * AppleActionRow.razor.css — Scoped styles.
 * Token mapping per spec Section 3.2.7.
 */

/* ── Row base ── */
.apple-action-row[b-qskv75g5ps] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-bottom: 1px solid var(--dp-border-separator);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background-color 120ms ease;
    background: transparent;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    text-align: left;
}

.apple-action-row:last-child[b-qskv75g5ps] {
    border-bottom: none;
}

.apple-action-row:hover[b-qskv75g5ps] {
    background-color: var(--dp-surface-hover);
}

.apple-action-row:focus-visible[b-qskv75g5ps] {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(0, 122, 130, 0.4)) inset;
}

/* ── Icon circle ── */
.apple-action-row__icon[b-qskv75g5ps] {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    flex-shrink: 0;
}

/*
 * .apple-action-row__icon--cyan — Brand-tinted icon circle.
 * Used by BOTH IconTone.Brand (default) and IconTone.Cyan (explicit alias).
 * WCAG AA: glyph color --dp-interactive-primary on --dp-surface-brand-subtle
 * yields ≥4.5:1 in light mode (#007A82 on #E6FAFB ≈ 5.16:1) and ≥4.5:1
 * in dark mode (#33D6DB on rgba(51,214,219,0.08) over #0F172A canvas).
 */
.apple-action-row__icon--cyan[b-qskv75g5ps]    { background-color: var(--dp-surface-brand-subtle); color: var(--dp-interactive-primary); }
.apple-action-row__icon--success[b-qskv75g5ps] { background-color: var(--dp-status-success-bg); color: var(--dp-status-success); }
.apple-action-row__icon--warning[b-qskv75g5ps] { background-color: var(--dp-status-warning-bg); color: var(--dp-status-warning); }
.apple-action-row__icon--danger[b-qskv75g5ps]  { background-color: var(--dp-status-danger-bg); color: var(--dp-status-danger); }
.apple-action-row__icon--info[b-qskv75g5ps]    { background-color: var(--dp-status-info-bg); color: var(--dp-status-info); }
.apple-action-row__icon--yellow[b-qskv75g5ps]  { background-color: var(--dp-status-warning-bg); color: var(--dp-status-warning); }
.apple-action-row__icon--neutral[b-qskv75g5ps] { background-color: var(--dp-surface-hover); color: var(--dp-text-secondary); }

/* ── Label ── */
.apple-action-row__label[b-qskv75g5ps] {
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--dp-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Optional badge ── */
.apple-action-row__badge[b-qskv75g5ps] {
    flex-shrink: 0;
}

/* ── Trailing chevron ── */
.apple-action-row__chevron[b-qskv75g5ps] {
    font-size: 0.625rem;
    color: var(--dp-text-tertiary);
    flex-shrink: 0;
}
/* _content/BlazorFrontend/Components/Apple/AppleAlert.razor.rz.scp.css */
/*
 * AppleAlert.razor.css — Scoped styles.
 * Token mapping per spec Section 3.2.4.
 * All colors use --dp-* tokens.
 *
 * Wave 6 additions (additive only — no existing class names changed):
 *   .apple-alert--dismissable  — adds top-right padding to make room for X button
 *   .apple-alert__body         — rich content slot (replaces __desc when ChildContent is set)
 *   .apple-alert__action       — focus ring/spacing tweaks for action button
 *   .apple-alert__dismiss      — top-right X (close) button
 */

/* ── Base alert layout ── */
.apple-alert[b-qdiw52n662] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-radius: var(--radius-md, 10px);
    border-left: 3px solid transparent;
    position: relative;
}

/* ── Variant backgrounds + border-left ── */
.apple-alert--danger[b-qdiw52n662] {
    background-color: var(--dp-status-danger-bg);
    border-left-color: var(--dp-status-danger);
}

.apple-alert--warning[b-qdiw52n662] {
    background-color: var(--dp-status-warning-bg);
    border-left-color: var(--dp-status-warning);
}

.apple-alert--success[b-qdiw52n662] {
    background-color: var(--dp-status-success-bg);
    border-left-color: var(--dp-status-success);
}

.apple-alert--info[b-qdiw52n662] {
    background-color: var(--dp-status-info-bg);
    border-left-color: var(--dp-status-info);
}

/* ── Icon column ── */
.apple-alert__icon[b-qdiw52n662] {
    flex-shrink: 0;
    font-size: 1rem;
    margin-top: 1px;
}

.apple-alert--danger .apple-alert__icon[b-qdiw52n662] { color: var(--dp-status-danger); }
.apple-alert--warning .apple-alert__icon[b-qdiw52n662] { color: var(--dp-status-warning); }
.apple-alert--success .apple-alert__icon[b-qdiw52n662] { color: var(--dp-status-success); }
.apple-alert--info .apple-alert__icon[b-qdiw52n662] { color: var(--dp-status-info); }

/* ── Content ── */
.apple-alert__content[b-qdiw52n662] {
    flex: 1;
    min-width: 0;
}

.apple-alert__title[b-qdiw52n662] {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--dp-text-primary);
    margin-bottom: 2px;
}

.apple-alert__desc[b-qdiw52n662] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

/* ── Wave 6: rich body slot ── */
.apple-alert__body[b-qdiw52n662] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.apple-alert__body :first-child[b-qdiw52n662] {
    margin-top: 0;
}

.apple-alert__body :last-child[b-qdiw52n662] {
    margin-bottom: 0;
}

.apple-alert__body ul[b-qdiw52n662],
.apple-alert__body ol[b-qdiw52n662] {
    padding-left: var(--space-4, 16px);
    margin: var(--space-1, 4px) 0;
}

.apple-alert__body li[b-qdiw52n662] {
    margin: 2px 0;
}

.apple-alert__body strong[b-qdiw52n662] {
    color: var(--dp-text-primary);
    font-weight: 600;
}

.apple-alert__body code[b-qdiw52n662] {
    font-size: 0.6875rem;
    padding: 1px 4px;
    border-radius: var(--radius-sm, 4px);
    background-color: var(--dp-surface-subtle, transparent);
    color: var(--dp-text-primary);
}

/* ── Wave 6: action button focus ring ── */
.apple-alert__action[b-qdiw52n662] {
    flex-shrink: 0;
    align-self: center;
}

.apple-alert__action:focus-visible[b-qdiw52n662] {
    outline: 2px solid var(--dp-interactive-focus, var(--dp-status-info));
    outline-offset: 2px;
}

/* ── Wave 6: dismiss (X) button ── */
.apple-alert__dismiss[b-qdiw52n662] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--dp-text-secondary);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
    align-self: flex-start;
    margin-top: -2px;
}

.apple-alert__dismiss:hover[b-qdiw52n662] {
    background-color: var(--dp-surface-hover, rgba(0, 0, 0, 0.04));
    color: var(--dp-text-primary);
}

.apple-alert__dismiss:focus-visible[b-qdiw52n662] {
    outline: 2px solid var(--dp-interactive-focus, var(--dp-status-info));
    outline-offset: 1px;
    color: var(--dp-text-primary);
}

.apple-alert__dismiss i[b-qdiw52n662] {
    pointer-events: none;
}
/* _content/BlazorFrontend/Components/Apple/AppleChip.razor.rz.scp.css */
/*
 * AppleChip.razor.css — Scoped styles.
 * Token mapping per spec Section 3.2.6.
 * All colors use --dp-status-* tokens.
 */

.apple-chip[b-e6ixqhya90] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: 2px 10px;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--apple-font-label-size, 0.688rem);
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
}

/* ── Variants ── */
.apple-chip--danger[b-e6ixqhya90] {
    background-color: var(--dp-status-danger-bg);
    color: var(--dp-status-danger-text);
}

.apple-chip--warning[b-e6ixqhya90] {
    background-color: var(--dp-status-warning-bg);
    color: var(--dp-status-warning-text);
}

.apple-chip--info[b-e6ixqhya90] {
    background-color: var(--dp-status-info-bg);
    color: var(--dp-status-info);
}

.apple-chip--success[b-e6ixqhya90] {
    background-color: var(--dp-status-success-bg);
    color: var(--dp-status-success-text);
}

.apple-chip--neutral[b-e6ixqhya90] {
    background-color: var(--dp-surface-hover);
    color: var(--dp-text-secondary);
}

/*
 * Brand variant — primary brand tint (teal/cyan in current palette).
 * Pairs subtle brand surface with primary interactive foreground. WCAG AA:
 *   Light mode: #007A82 on #E6FAFB ≈ 5.16:1 (passes for normal text).
 *   Dark mode:  #33D6DB on rgba(51,214,219,0.08) ≈ 5.4:1 over #0F172A canvas.
 */
.apple-chip--brand[b-e6ixqhya90] {
    background-color: var(--dp-surface-brand-subtle);
    color: var(--dp-interactive-primary);
}
/* _content/BlazorFrontend/Components/Apple/AppleEmptyState.razor.rz.scp.css */
/*
 * AppleEmptyState.razor.css — Scoped styles.
 * Token mapping per spec Section 3.2.3.
 */

.apple-empty-state[b-tkjngyo0ts] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-10, 40px) var(--space-6, 24px);
    gap: var(--space-3, 12px);
}

/* ── Icon circle ── */
.apple-empty-state__icon-wrap[b-tkjngyo0ts] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--dp-surface-brand-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2, 8px);
}

.apple-empty-state__icon[b-tkjngyo0ts] {
    font-size: 1.75rem; /* 28px — scales inside 64px circle */
    color: var(--dp-interactive-primary);
}

/* ── Text ── */
.apple-empty-state__title[b-tkjngyo0ts] {
    font-size: var(--apple-font-h3-size, 1rem);
    font-weight: 600;
    color: var(--dp-text-primary);
    margin: 0;
}

.apple-empty-state__desc[b-tkjngyo0ts] {
    font-size: var(--apple-font-caption-size, 0.813rem);
    color: var(--dp-text-secondary);
    max-width: 480px;
    margin: 0;
    line-height: 1.5;
}
/* _content/BlazorFrontend/Components/Apple/AppleHeroSection.razor.rz.scp.css */
/*
 * AppleHeroSection.razor.css — Scoped styles.
 * Mirrors pp-score-hero pattern from DPODashboard.
 */

.apple-hero-section[b-ec81hkcizo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
}

/* ── Lead block: big number + delta ── */
.apple-hero-section__lead[b-ec81hkcizo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
}

.apple-hero-section__value[b-ec81hkcizo] {
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--dp-text-primary);
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.apple-hero-section__suffix[b-ec81hkcizo] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
    vertical-align: super;
    margin-left: 2px;
}

/* ── Delta row ── */
.apple-hero-section__meta[b-ec81hkcizo] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--apple-font-caption-size, 0.813rem);
}

.apple-hero-section__delta[b-ec81hkcizo] {
    font-weight: 600;
}

.apple-hero-section__delta--positive[b-ec81hkcizo] {
    color: var(--dp-status-success);
}

.apple-hero-section__delta--negative[b-ec81hkcizo] {
    color: var(--dp-status-danger);
}

.apple-hero-section__delta--flat[b-ec81hkcizo] {
    color: var(--dp-text-secondary);
}

.apple-hero-section__meta-context[b-ec81hkcizo] {
    color: var(--dp-text-secondary);
}

/* ── Summary chips row ── */
.apple-hero-section__summary[b-ec81hkcizo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    font-size: var(--apple-font-caption-size, 0.813rem);
    color: var(--dp-text-secondary);
    margin-top: var(--space-1, 4px);
}

.apple-hero-section__summary strong[b-ec81hkcizo] {
    color: var(--dp-text-primary);
    font-weight: 700;
}

/* ── Body content ── */
.apple-hero-section__body[b-ec81hkcizo] {
    flex: 1;
}
/* _content/BlazorFrontend/Components/Apple/AppleI18nTabs.razor.rz.scp.css */
/*
 * AppleI18nTabs.razor.css — Scoped styles for AppleI18nTabs component.
 * Token mapping per spec Section 3.6.
 * Underline-only active indicator — no filled background pill.
 * All colors use --dp-* tokens.
 */

/* ── Tab strip container ── */
.apple-i18n-tabs[b-n4iofvlvlx] {
    display: flex;
    flex-direction: column;
}

/* ── Tab bar ── */
.apple-i18n-tabs__bar[b-n4iofvlvlx] {
    display: flex;
    border-bottom: 1px solid var(--dp-border-separator);
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.apple-i18n-tabs__bar[b-n4iofvlvlx]::-webkit-scrollbar {
    display: none;
}

/* ── Individual tab button ── */
.apple-i18n-tabs__tab[b-n4iofvlvlx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px); /* gap between flag, label, chip */
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 150ms ease, border-bottom-color 150ms ease;
    margin-bottom: -1px; /* Overlap the bar border-bottom */
}

.apple-i18n-tabs__tab:hover[b-n4iofvlvlx] {
    color: var(--dp-text-primary);
}

.apple-i18n-tabs__tab:focus-visible[b-n4iofvlvlx] {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(0, 122, 130, 0.4)) inset;
}

/* ── Active tab ── */
.apple-i18n-tabs__tab--active[b-n4iofvlvlx] {
    color: var(--dp-text-primary);
    border-bottom-color: var(--dp-interactive-primary);
    font-weight: 600;
}

/* ── Disabled tab ── */
.apple-i18n-tabs__tab--disabled[b-n4iofvlvlx] {
    color: var(--dp-text-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Flag icon ── */
.apple-i18n-tabs__flag[b-n4iofvlvlx] {
    display: inline-block;
    border-radius: 2px;
    flex-shrink: 0;
    /* Width/height set inline (16px) — approved exception: fixed icon size is not a color value */
}

/* ── Label ── */
.apple-i18n-tabs__label[b-n4iofvlvlx] {
    flex: 1;
}

/* ── Status chip ── */
.apple-i18n-tabs__chip[b-n4iofvlvlx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full, 9999px);
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
}

.apple-i18n-tabs__chip--success[b-n4iofvlvlx] {
    background-color: var(--dp-status-success-bg);
    color: var(--dp-status-success-text);
}

.apple-i18n-tabs__chip--warning[b-n4iofvlvlx] {
    background-color: var(--dp-status-warning-bg);
    color: var(--dp-status-warning-text);
}

.apple-i18n-tabs__chip--danger[b-n4iofvlvlx] {
    background-color: var(--dp-status-danger-bg);
    color: var(--dp-status-danger-text);
}

.apple-i18n-tabs__chip--neutral[b-n4iofvlvlx] {
    background-color: var(--dp-surface-hover);
    color: var(--dp-text-secondary);
}

/* ── Tab panel body ── */
.apple-i18n-tabs__body[b-n4iofvlvlx] {
    padding: var(--space-4, 16px) 0;
}
/* _content/BlazorFrontend/Components/Apple/AppleMeter.razor.rz.scp.css */
/*
 * AppleMeter.razor.css — Scoped styles.
 * Token mapping per spec Section 3.2.5.
 * The fill width is data-driven (approved inline style exception per spec 3.4).
 */

/* ── Track ── */
.apple-meter[b-sw6lijr74w] {
    width: 100%;
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
    background-color: var(--dp-surface-hover);
}

/* ── Height variants ── */
.apple-meter--xs[b-sw6lijr74w] { height: 4px; }
.apple-meter--sm[b-sw6lijr74w] { height: 6px; } /* default */
.apple-meter--md[b-sw6lijr74w] { height: 8px; }
.apple-meter--lg[b-sw6lijr74w] { height: 10px; }

/* ── Fill ── */
.apple-meter__fill[b-sw6lijr74w] {
    height: 100%;
    border-radius: var(--radius-full, 9999px);
    transition: width 250ms var(--ease-apple, cubic-bezier(0.4, 0, 0.2, 1));
}

/* ── Tone variants ── */
.apple-meter__fill--cyan[b-sw6lijr74w] { background-color: var(--dp-interactive-primary); }
/*
 * Brand tone — semantic alias of Cyan.
 * Same primary brand color; provided so callers can express intent ("brand
 * KPI") instead of the legacy "cyan" naming. Contrast is irrelevant for
 * the fill itself (no text on top); the bar sits on --dp-surface-hover
 * track which yields ≥3:1 non-text contrast in both light and dark modes.
 */
.apple-meter__fill--brand[b-sw6lijr74w] { background-color: var(--dp-interactive-primary); }
.apple-meter__fill--green[b-sw6lijr74w] { background-color: var(--dp-status-success); }
.apple-meter__fill--yellow[b-sw6lijr74w] { background-color: var(--dp-status-warning); }
.apple-meter__fill--red[b-sw6lijr74w] { background-color: var(--dp-status-danger); }
/* _content/BlazorFrontend/Components/Apple/ApplePagePanel.razor.rz.scp.css */
/*
 * ApplePagePanel.razor.css — Scoped styles for ApplePagePanel component.
 * All colors use --dp-* tokens. No hardcoded hex/rgb values.
 */

/* ── Panel container ── */
.apple-page-panel[b-7w6ncps9qw] {
    background-color: var(--dp-surface-primary);
    border: none;
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-l1);
    overflow: hidden;
}

/* ── Panel header ── */
.apple-page-panel__head[b-7w6ncps9qw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    padding: var(--space-5, 20px);
    border-bottom: 1px solid var(--dp-border-separator);
    flex-wrap: wrap;
}

.apple-page-panel__head-text[b-7w6ncps9qw] {
    flex: 1 1 0;
    min-width: 0;
}

.apple-page-panel__title[b-7w6ncps9qw] {
    font-size: var(--apple-font-h3-size, 1rem);
    font-weight: var(--apple-font-h3-weight, 600);
    color: var(--dp-text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.apple-page-panel__sub[b-7w6ncps9qw] {
    font-size: var(--apple-font-caption-size, 0.813rem);
    color: var(--dp-text-secondary);
    margin: 0.25rem 0 0;
}

.apple-page-panel__actions[b-7w6ncps9qw] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── Panel body — Default ── */
.apple-page-panel--default .apple-page-panel__body[b-7w6ncps9qw] {
    padding: var(--space-5, 20px);
}

/* ── Panel body — Flush (tables span edge-to-edge) ── */
.apple-page-panel--flush .apple-page-panel__body[b-7w6ncps9qw] {
    padding: 0;
}

/* ── Panel body — Compact ── */
.apple-page-panel--compact .apple-page-panel__body[b-7w6ncps9qw] {
    padding: var(--space-4, 16px);
}

/*
 * ── Panel body — Donut ──
 * Supplies position:relative so absolutely-positioned overlays
 * (e.g., .pp-donut-total center label) can anchor to this box.
 * min-height:286px preserves the donut canvas + vertical centering of the label.
 * Padding matches Default (--space-5) per spec Section 3.2.1.
 * Opt-in via Variant=Donut — zero side-effects on Default/Flush/Compact panels.
 */
.apple-page-panel--donut .apple-page-panel__body[b-7w6ncps9qw] {
    padding: var(--space-5, 20px);
    position: relative;
    min-height: 286px;
}
/* _content/BlazorFrontend/Components/Apple/ApplePanelHeader.razor.rz.scp.css */
/*
 * ApplePanelHeader.razor.css — Scoped styles for ApplePanelHeader.
 * All colors use --dp-* tokens.
 */

.apple-panel-header[b-7ws5zqoyjq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    flex-wrap: wrap;
}

.apple-panel-header__text[b-7ws5zqoyjq] {
    flex: 1 1 0;
    min-width: 0;
}

.apple-panel-header__title[b-7ws5zqoyjq] {
    font-size: var(--apple-font-h3-size, 1rem);
    font-weight: var(--apple-font-h3-weight, 600);
    color: var(--dp-text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.apple-panel-header__sub[b-7ws5zqoyjq] {
    font-size: var(--apple-font-caption-size, 0.813rem);
    color: var(--dp-text-secondary);
    margin: 0.25rem 0 0;
}

.apple-panel-header__actions[b-7ws5zqoyjq] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-shrink: 0;
    flex-wrap: wrap;
}
/* _content/BlazorFrontend/Components/Apple/AppleSectionHeader.razor.rz.scp.css */
/*
 * AppleSectionHeader.razor.css — Scoped styles.
 * Renders an uppercase tracking-tight overline.
 */

.apple-section-header[b-zpoli5k5jk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2, 8px);
}

.apple-section-header__label[b-zpoli5k5jk] {
    font-size: var(--apple-font-label-size, 0.688rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dp-text-secondary);
}

.apple-section-header__actions[b-zpoli5k5jk] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}
/* _content/BlazorFrontend/Components/Apple/AppleTooltip.razor.rz.scp.css */
/*
 * AppleTooltip — Scoped styles for tooltip wrapper element.
 *
 * The visible tooltip popup itself is rendered by Bootstrap into document.body
 * and cannot be styled from this scoped file (Blazor scope hashes do not apply
 * outside the component tree). The popup's appearance is themed via global
 * .tooltip / .tooltip-inner overrides in wwwroot/css/site.css (or equivalent
 * global stylesheet) using --dp-* tokens.
 *
 * This file only styles the inline wrapper span so that:
 *   1. It does not introduce extra layout/spacing around the wrapped trigger.
 *   2. It receives a visible keyboard focus ring (WCAG 2.4.7), even when the
 *      inner button is disabled and cannot itself take focus.
 */

.apple-tooltip-wrapper[b-6i0s7v5phx] {
    display: inline-flex;
    /* Critical: keep the wrapper visually transparent. The wrapped trigger
       (typically a button) carries its own padding/border/background. */
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    /* The wrapper takes focus so disabled buttons can still surface a tooltip
       via keyboard navigation. The focus ring uses our standard focus token. */
    border-radius: 6px;
    outline: none;
}

.apple-tooltip-wrapper:focus-visible[b-6i0s7v5phx] {
    outline: 2px solid var(--dp-interactive-focus, var(--dp-status-info));
    outline-offset: 2px;
}
/* _content/BlazorFrontend/Components/Assessment/AssessmentHubNav.razor.rz.scp.css */
.assessment-hub-nav[b-10iyg9fcnc] {
    width: 100%;
    margin-bottom: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.assessment-hub-nav[b-10iyg9fcnc]  .ds-tabs {
    min-width: max-content;
    margin-bottom: 0;
}
/* _content/BlazorFrontend/Components/Assessment/AssessmentKpiBar.razor.rz.scp.css */

.assessment-kpi-summary[b-qf37pqlf4h] { display: grid; gap: var(--space-2); }

/* Contextual cards include text/date summaries, unlike the numeric 100px registry strip. */
.assessment-kpi-bar[b-qf37pqlf4h]  .ds-statgrid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    margin-bottom: 0;
}
/* KPI visuals and responsive behavior are owned by DsStatGrid, DsStatCard and
   DsProgressIndicator. This component only composes assessment-specific values. */
/* _content/BlazorFrontend/Components/Assessment/DynamicForm/AssessmentProcessingScopePicker.razor.rz.scp.css */
.assessment-scope[b-snjxa7sott] { display: grid; min-width: 0; gap: var(--space-4); }
.assessment-scope__row[b-snjxa7sott] { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.assessment-scope__fields[b-snjxa7sott] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.assessment-scope__field[b-snjxa7sott] { display: flex; flex-direction: column; min-width: 0; gap: .375rem; }
.assessment-scope__field small[b-snjxa7sott] { line-height: 1.5; }
.assessment-scope__row-actions[b-snjxa7sott] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.assessment-scope__actions[b-snjxa7sott] { display: flex; flex-wrap: wrap; gap: .75rem; }
.assessment-scope__diagram[b-snjxa7sott] { width: 100%; min-width: 0; max-height: 40rem; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; background: var(--bg-surface); border: var(--border-default); border-radius: var(--radius-lg); }
.assessment-scope__diagram img[b-snjxa7sott] { display: block; width: 1080px; min-width: 0; max-width: none; height: auto; }
.assessment-scope[b-snjxa7sott]  dl { min-width: 0; margin: 0; }
.assessment-scope[b-snjxa7sott]  dt { font-weight: 600; }
.assessment-scope[b-snjxa7sott]  dd { margin: 0 0 var(--space-3); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 768px) { .assessment-scope__fields[b-snjxa7sott] { grid-template-columns: 1fr; } }

.assessment-scope__values[b-snjxa7sott] { margin: 0; }
.assessment-scope__values dt[b-snjxa7sott] { font-weight: 500; }
.assessment-scope__values dd[b-snjxa7sott] { margin: 0; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.assessment-scope__selected-value[b-snjxa7sott] { display: none; overflow-wrap: anywhere; }
.assessment-scope__selected-value--long[b-snjxa7sott] { display: block; }
.assessment-scope__saved-count[b-snjxa7sott] { display: block; margin-top: .375rem; font-weight: 600; }
.assessment-scope__diagram-toolbar[b-snjxa7sott] { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.assessment-scope__diagram-toolbar[b-snjxa7sott]  a { margin-inline-start: auto; }
.assessment-scope__diagram-hint[b-snjxa7sott] { margin: 0; font-size: .875rem; line-height: 1.5; }
.assessment-scope__diagram:focus-visible[b-snjxa7sott] { outline: 2px solid var(--accent); outline-offset: 2px; }
.assessment-scope__routes ol[b-snjxa7sott] { padding-inline-start: 1.25rem; margin-top: .75rem; }
.assessment-scope__routes li[b-snjxa7sott] { padding-block: .5rem; overflow-wrap: anywhere; }
.assessment-scope__routes p[b-snjxa7sott] { margin: 0 0 .25rem; }
@media (max-width: 768px) { .assessment-scope__selected-value[b-snjxa7sott] { display: block; } .assessment-scope__diagram-toolbar[b-snjxa7sott]  a { margin-inline-start: 0; } }
/* _content/BlazorFrontend/Components/Assessment/DynamicForm/AssessmentRepeatingTable.razor.rz.scp.css */
.dp-repeating-table__label[b-3qnufotjhv] { margin-bottom: .5rem; font-weight: 500; }
.dp-repeating-table__help[b-3qnufotjhv] { color: var(--color-text-secondary); font-size: .875rem; }
.dp-repeating-table__scroll[b-3qnufotjhv] { max-width: 100%; overflow-x: auto; margin-bottom: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--bg-surface); }
.dp-repeating-table__scroll:focus-visible[b-3qnufotjhv] { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.assessment-repeating-grid[b-3qnufotjhv] { width: 100%; table-layout: fixed; margin-bottom: 0; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.dp-repeating-table th[b-3qnufotjhv], .dp-repeating-table td[b-3qnufotjhv] {
    vertical-align: top;
    overflow-wrap: anywhere;
    padding: var(--ds-table-cell-px-comfortable);
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}
.dp-repeating-table th[b-3qnufotjhv] {
    height: var(--ds-table-head-h-comfortable);
    vertical-align: middle;
    font-weight: 500;
    color: var(--color-text-primary);
    background: var(--color-bg-surface-base-tertiary, var(--bg-inset));
}
.dp-repeating-table th:last-child[b-3qnufotjhv], .dp-repeating-table td:last-child[b-3qnufotjhv] { border-right: 0; }
.dp-repeating-table tr:last-child td[b-3qnufotjhv] { border-bottom: 0; }
.dp-repeating-table td[b-3qnufotjhv]  .ds-field,
.dp-repeating-table td[b-3qnufotjhv]  .ds-input-control { min-width: 0; width: 100%; }
.dp-repeating-table__value[b-3qnufotjhv] { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.dp-repeating-table__empty[b-3qnufotjhv] { padding: .75rem; color: var(--color-text-secondary); background: var(--color-bg-surface-base-secondary); border-radius: 6px; }
/* _content/BlazorFrontend/Components/Assessment/DynamicForm/DynamicAssessmentForm.razor.rz.scp.css */
/* ==========================================================================
   DynamicAssessmentForm — Scoped styles
   All colors use Design System v2 semantic tokens. No hardcoded color values.
   ========================================================================== */

/* Layout shell */
.dp-assessment-form[b-uc5c6zdogi] {
    background: var(--bg-canvas);
    min-height: 100vh;
}

.dp-form-layout[b-uc5c6zdogi] {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 0;
    min-height: 80vh;
    align-items: start;
}

/* ---- Step Navigation (left) ---- */
.dp-step-nav[b-uc5c6zdogi] {
    background: var(--color-bg-surface-base-primary);
    border-right: 1px solid var(--border-subtle);
    padding: 1.5rem 1rem;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
}

.dp-step-nav__mobile-header[b-uc5c6zdogi] {
    width: 100%;
    border: 0;
    background: transparent;
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
}

.dp-step-list[b-uc5c6zdogi] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dp-step-nav__save[b-uc5c6zdogi] {
    margin-top: 1rem;
}

.dp-step-item[b-uc5c6zdogi] {
    margin-bottom: 0.25rem;
}

.dp-step-btn[b-uc5c6zdogi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    transition: background 0.15s;
}

.dp-step-btn:hover[b-uc5c6zdogi] {
    background: var(--bg-hover);
}

.dp-step-btn:focus-visible[b-uc5c6zdogi] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.dp-step--current .dp-step-btn[b-uc5c6zdogi] {
    color: var(--color-text-primary);
    font-weight: 600;
    background: var(--accent-soft);
}

.dp-step--current .dp-step-icon[b-uc5c6zdogi] {
    color: var(--accent);
}

.dp-step--complete .dp-step-icon[b-uc5c6zdogi] {
    color: var(--color-text-success-active);
}

.dp-step--error .dp-step-icon[b-uc5c6zdogi] {
    color: var(--color-text-danger-active);
}

.dp-step--pending .dp-step-icon[b-uc5c6zdogi] {
    color: var(--color-text-tertiary);
}

.dp-step-label[b-uc5c6zdogi] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Step Content ---- */
.dp-step-content[b-uc5c6zdogi] {
    background: var(--color-bg-surface-base-primary);
    padding: 2rem 2.5rem;
    min-width: 0;
    overflow-y: auto;
}

.dp-step-title[b-uc5c6zdogi] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-subtle);
}

.dp-subsection[b-uc5c6zdogi] {
    margin-top: 1.5rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--border-subtle);
}

.dp-subsection-title[b-uc5c6zdogi] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

/* ---- Progress bar ---- */
.dp-progress-bar-container[b-uc5c6zdogi] {
    margin-bottom: 1rem;
}

/* ---- Form field styles ---- */
.dp-question-wrapper[b-uc5c6zdogi] {
    margin-bottom: 1.5rem;
}

.dp-form-field[b-uc5c6zdogi] {
    margin-bottom: 0;
}

.dp-form-label[b-uc5c6zdogi] {
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 0.375rem;
    display: block;
}

.dp-required-mark[b-uc5c6zdogi] {
    color: var(--color-text-danger-active);
    margin-left: 0.25rem;
    font-weight: 700;
}

.dp-form-help[b-uc5c6zdogi] {
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
    margin-bottom: 0.375rem;
}

.dp-char-counter[b-uc5c6zdogi] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    text-align: right;
    margin-top: 0.25rem;
}

.dp-form-error[b-uc5c6zdogi] {
    font-size: 0.8125rem;
    color: var(--color-text-danger-active);
    margin-top: 0.25rem;
}

.dp-form-field--error .form-control[b-uc5c6zdogi],
.dp-form-field--error textarea[b-uc5c6zdogi] {
    border-color: var(--color-border-danger-solid);
    background-color: var(--color-bg-surface-danger-secondary);
}

/* ---- Prefill states ---- */
.dp-input-prefilled[b-uc5c6zdogi] {
    background-color: var(--accent-soft) !important;
}

.dp-prefill-status[b-uc5c6zdogi] {
    margin-left: 0.5rem;
    vertical-align: middle;
}

.dp-input-wrapper[b-uc5c6zdogi] {
    position: relative;
}

/* Prefill metadata/actions sit outside the control; they must never cover its value. */
[b-uc5c6zdogi] .dp-field-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.dp-override-btn[b-uc5c6zdogi],
.dp-restore-btn[b-uc5c6zdogi] {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* ---- Yes/No group ---- */
.dp-yesno-group[b-uc5c6zdogi] {
    display: flex;
    gap: 1.5rem;
    padding: 0.5rem 0;
}

.dp-radio-item[b-uc5c6zdogi],
.dp-checkbox-item[b-uc5c6zdogi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    min-height: 44px;
}

.dp-radio-item--inline[b-uc5c6zdogi] {
    flex-direction: row;
}

/* ---- Rating ---- */
.dp-rating-group[b-uc5c6zdogi] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.dp-rating-btn[b-uc5c6zdogi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--color-bg-surface-base-primary);
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.75rem;
}

.dp-rating-btn:hover[b-uc5c6zdogi] {
    border-color: var(--accent);
    color: var(--accent);
}

.dp-rating-btn--selected[b-uc5c6zdogi] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
}

.dp-rating-btn:focus-visible[b-uc5c6zdogi] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.dp-rating-display[b-uc5c6zdogi] {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ---- Dropzone ---- */
[b-uc5c6zdogi] .dp-dropzone,
[b-uc5c6zdogi] .dp-image-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 140px;
    border: 2px dashed var(--border-control);
    border-radius: 8px;
    background: var(--color-bg-surface-base-secondary);
    cursor: pointer;
    padding: 1.5rem;
    transition: all 0.2s;
    color: var(--color-text-tertiary);
}

[b-uc5c6zdogi] .dp-image-dropzone {
    min-height: 240px;
}

[b-uc5c6zdogi] .dp-dropzone:hover,
[b-uc5c6zdogi] .dp-image-dropzone:hover {
    border-color: var(--accent);
}

[b-uc5c6zdogi] .dp-dropzone--drag-over,
[b-uc5c6zdogi] .dp-image-dropzone.dp-dropzone--drag-over {
    border-style: solid;
    border-color: var(--accent);
    background: var(--accent-soft);
}

[b-uc5c6zdogi] .dp-dropzone:focus-visible,
[b-uc5c6zdogi] .dp-image-dropzone:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

[b-uc5c6zdogi] .dp-dropzone-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-tertiary);
}

[b-uc5c6zdogi] .dp-dropzone-text {
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--color-text-primary);
}

[b-uc5c6zdogi] .dp-dropzone-hint {
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
    margin: 0;
}

[b-uc5c6zdogi] .dp-file-input-hidden {
    display: none;
}

/* ---- Image preview card ---- */
[b-uc5c6zdogi] .dp-image-preview-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--color-bg-surface-base-secondary);
    align-items: flex-start;
    flex-wrap: wrap;
}

[b-uc5c6zdogi] .dp-image-preview-thumb {
    max-width: min(200px, 100%);
    max-height: 160px;
    border-radius: 4px;
    object-fit: contain;
    border: 1px solid var(--border-subtle);
}

[b-uc5c6zdogi] .dp-image-preview-meta {
    flex: 1 1 200px;
    min-width: 0;
    overflow-wrap: anywhere;
}

[b-uc5c6zdogi] .dp-pdf-icon-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-text-danger-active);
    font-size: 0.8rem;
}

/* ---- Attachment list ---- */
[b-uc5c6zdogi] .dp-attachment-list {
    list-style: none;
    padding: 0;
    margin-top: 0.75rem;
}

[b-uc5c6zdogi] .dp-attachment-item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    margin-bottom: 0.375rem;
    background: var(--color-bg-surface-base-primary);
}

[b-uc5c6zdogi] .dp-attachment-info { flex: 1; min-width: 0; overflow-wrap: anywhere; }

[b-uc5c6zdogi] .dp-attachment-name {
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

[b-uc5c6zdogi] .dp-attachment-size {
    font-size: 0.75rem;
}

/* ---- Upload progress ---- */
[b-uc5c6zdogi] .dp-upload-progress {
    margin-top: 0.5rem;
}

/* ---- Cross-border banner ---- */
[b-uc5c6zdogi] .dp-cross-border-banner {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    background: var(--color-bg-surface-additional-2-secondary);
    border-left: 4px solid var(--color-text-additional-2-active);
    border-radius: 0 6px 6px 0;
    margin-top: 0.75rem;
    color: var(--color-text-additional-2-active);
}

.dp-cross-border-banner__body[b-uc5c6zdogi] {
    flex: 1;
    color: var(--color-text-primary);
}

/* ---- Dictionary multi-check ---- */
.dp-dict-check fieldset[b-uc5c6zdogi] {
    border: none;
    padding: 0;
}

.dp-dict-toolbar[b-uc5c6zdogi] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.dp-dict-search[b-uc5c6zdogi] {
    flex: 1;
    min-width: 160px;
}

.dp-dict-list[b-uc5c6zdogi] {
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    max-height: 360px;
    overflow-y: auto;
    padding: 0.5rem;
}

.dp-dict-group-header[b-uc5c6zdogi] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.5rem 0.25rem 0.25rem;
}

.dp-dict-item[b-uc5c6zdogi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    min-height: 44px;
}

.dp-dict-item:hover[b-uc5c6zdogi] {
    background: var(--bg-hover);
}

.dp-dict-item--other span[b-uc5c6zdogi] {
    font-style: italic;
}

.dp-dict-other-input[b-uc5c6zdogi] {
    margin-left: 1.75rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.dp-dict-counter[b-uc5c6zdogi] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-top: 0.375rem;
    text-align: right;
}

.dp-dict-select-all[b-uc5c6zdogi] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
}

/* ---- Action bar ---- */
.dp-action-bar[b-uc5c6zdogi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    margin-top: 2rem;
    border-top: 1px solid var(--border-subtle);
}

.dp-action-bar__right[b-uc5c6zdogi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---- Mobile warning ---- */
.dp-mobile-warn[b-uc5c6zdogi] {
    display: none;
    margin-bottom: 0.75rem;
}

/* ---- Autosave status ---- */
.dp-autosave-status[b-uc5c6zdogi] {
    font-size: 0.8125rem;
    min-height: 1.25rem;
    margin-bottom: 0.5rem;
}

.dp-autosave-status__saved[b-uc5c6zdogi],
.dp-autosave-status__failed[b-uc5c6zdogi] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.dp-autosave-status__saved[b-uc5c6zdogi] {
    color: var(--color-text-tertiary);
}

.dp-autosave-status__failed[b-uc5c6zdogi] {
    color: var(--color-text-danger-active);
}

/* ---- Flash highlight (Item #15: Navigate to field) ---- */
.dp-flash-highlight[b-uc5c6zdogi] {
    animation: dp-flash-b-uc5c6zdogi 2s ease-out;
    border-radius: 4px;
}

@keyframes dp-flash-b-uc5c6zdogi {
    0%   { background-color: var(--color-bg-surface-warning-secondary, var(--color-bg-surface-warning-secondary)); }
    50%  { background-color: var(--color-bg-surface-warning-secondary, var(--color-bg-surface-warning-secondary)); }
    100% { background-color: var(--color-bg-surface-base-primary); }
}

/* ---- Conditional reveal banner (Item #12) ---- */
.dp-conditional-reveal-toast[b-uc5c6zdogi] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1090;
    background: var(--color-bg-surface-base-primary);
    border-left: 4px solid var(--color-text-success-active);
    border-radius: 6px;
    box-shadow: var(--shadow-md);
    padding: 0.75rem 1rem;
    min-width: 280px;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-primary);
    font-size: 0.875rem;
    animation: dp-toast-in-b-uc5c6zdogi 0.25s ease-out;
}

@keyframes dp-toast-in-b-uc5c6zdogi {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Bounce animation for drag state ---- */
@media (prefers-reduced-motion: no-preference) {
    .dp-bounce[b-uc5c6zdogi] {
        animation: dp-bounce-b-uc5c6zdogi 0.6s ease infinite;
    }

    @keyframes dp-bounce-b-uc5c6zdogi {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-4px); }
    }

}

/* ---- Responsive ---- */

/* 1024–1279: compact step navigation */
@media (max-width: 1279px) {
    .dp-form-layout[b-uc5c6zdogi] {
        grid-template-columns: 200px minmax(0, 1fr);
    }
}

/* 768–1023: full width content, step nav as drawer */
@media (max-width: 1023px) {
    .dp-form-layout[b-uc5c6zdogi] {
        grid-template-columns: 1fr;
    }

    .dp-step-nav[b-uc5c6zdogi] {
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        position: static;
        max-height: none;
    }
}

/* 320–767: mobile */
@media (max-width: 767px) {
    .dp-mobile-warn[b-uc5c6zdogi] {
        display: block;
    }

    .dp-step-list--collapsed[b-uc5c6zdogi] {
        display: none;
    }

    .dp-step-content[b-uc5c6zdogi] {
        padding: 1rem;
        padding-bottom: calc(11rem + env(safe-area-inset-bottom, 0px));
    }

    .dp-step-nav__mobile-header[b-uc5c6zdogi] {
        display: flex;
    }

    .dp-action-bar[b-uc5c6zdogi] {
        position: fixed;
        /* Match the shell's reserved bottom-navigation space. */
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        background: var(--color-bg-surface-base-primary);
        border-top: 1px solid var(--border-subtle);
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
        z-index: 100;
    }

    .dp-action-bar__right[b-uc5c6zdogi] {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .dp-dict-list[b-uc5c6zdogi] {
        max-height: 240px;
    }

    /* Touch targets */
    .dp-radio-item[b-uc5c6zdogi],
    .dp-checkbox-item[b-uc5c6zdogi],
    .dp-dict-item[b-uc5c6zdogi],
    .dp-step-btn[b-uc5c6zdogi],
    .dp-rating-btn[b-uc5c6zdogi] {
        min-height: 44px;
    }
}

/* ---- Focus rings ---- */
.dp-step-btn:focus-visible[b-uc5c6zdogi],
.dp-rating-btn:focus-visible[b-uc5c6zdogi],
.dp-dropzone:focus-visible[b-uc5c6zdogi],
.dp-image-dropzone:focus-visible[b-uc5c6zdogi],
.dp-dict-item:focus-visible[b-uc5c6zdogi],
button:focus-visible[b-uc5c6zdogi] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}
/* _content/BlazorFrontend/Components/Assessment/DynamicForm/ValidationIssuesPanel.razor.rz.scp.css */
.dp-issues-panel[b-6rvaqw1876] {
    margin-bottom: 1.25rem;
    border: 1px solid var(--border-subtle);
    border-inline-start: 3px solid var(--color-text-danger-active);
    border-radius: 6px;
    background: var(--color-bg-surface-base-secondary);
    color: var(--color-text-primary);
}

.dp-issues-panel__header[b-6rvaqw1876] {
    padding: .75rem 1rem;
    font-weight: 600;
    cursor: pointer;
}

.dp-issues-panel__header:focus-visible[b-6rvaqw1876] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.dp-issues-panel__title[b-6rvaqw1876] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-inline-end: .5rem;
}

.dp-issues-panel__body[b-6rvaqw1876] {
    max-height: 22rem;
    overflow-y: auto;
    padding: 0 1rem .75rem;
}

.dp-issues-group + .dp-issues-group[b-6rvaqw1876] { margin-top: 1rem; }
.dp-issues-group__title[b-6rvaqw1876] { margin-bottom: .5rem; font-size: .8125rem; font-weight: 600; }

.dp-issue-card[b-6rvaqw1876] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .5rem 0;
    font-size: .875rem;
}

.dp-issue-card__icon[b-6rvaqw1876] { flex-shrink: 0; color: var(--color-text-danger-active); }
.dp-issue-card--warning .dp-issue-card__icon[b-6rvaqw1876] { color: var(--color-text-warning-active); }
.dp-issue-card__body[b-6rvaqw1876] { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dp-issue-card__field[b-6rvaqw1876] { font-weight: 600; }
.dp-issue-card__msg[b-6rvaqw1876] { color: var(--color-text-secondary); }

@media (max-width: 767px) {
    .dp-issues-panel__header[b-6rvaqw1876] { padding-inline: .75rem; }
    .dp-issues-panel__body[b-6rvaqw1876] { padding-inline: .75rem; }
    .dp-issue-card[b-6rvaqw1876] { flex-wrap: wrap; }
}
/* _content/BlazorFrontend/Components/Assessment/RiskMatrix.razor.rz.scp.css */
.risk-matrix-legend[b-5t7nkv53rr] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}

.risk-list[b-5t7nkv53rr] {
    display: grid;
    gap: 12px;
}

.risk-list__item[b-5t7nkv53rr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.risk-list__body[b-5t7nkv53rr] {
    display: grid;
    gap: 8px;
    min-width: 0;
    color: var(--color-text-primary);
}

.risk-list__body p[b-5t7nkv53rr] {
    margin: 0;
    color: var(--color-text-secondary);
}

.risk-list__metrics[b-5t7nkv53rr],
.risk-list__actions[b-5t7nkv53rr],
.risk-list__footer[b-5t7nkv53rr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.risk-list__actions[b-5t7nkv53rr] {
    flex: 0 0 auto;
}

.risk-list__footer[b-5t7nkv53rr] {
    justify-content: flex-end;
    margin-top: 20px;
}

@media (max-width: 767px) {
    .risk-list__item[b-5t7nkv53rr] {
        flex-direction: column;
    }
}
/* _content/BlazorFrontend/Components/AuditLog/AuditActivityPanel.razor.rz.scp.css */
.audit-activity-panel[b-pwfxdfms6z] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: var(--space-3);
}

.audit-activity-panel__filters[b-pwfxdfms6z] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-separator);
    background: var(--bg-subtle);
}

.audit-activity-panel__filters :deep(.ds-date-range)[b-pwfxdfms6z] {
    min-width: min(100%, 292px);
}

.audit-activity-panel__filters :deep(.ds-select)[b-pwfxdfms6z] {
    min-width: 160px;
}

.audit-activity-panel__error-action[b-pwfxdfms6z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.audit-activity-panel__nowrap[b-pwfxdfms6z] {
    white-space: nowrap;
}

.audit-activity-panel__event[b-pwfxdfms6z] {
    display: block;
    overflow: hidden;
    color: var(--text-strong);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-activity-panel__target[b-pwfxdfms6z] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-activity-panel__pagination[b-pwfxdfms6z] {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-3) var(--space-4);
    border-top: var(--border-separator);
    background: var(--bg-subtle);
}

@media (max-width: 767px) {
    .audit-activity-panel__filters[b-pwfxdfms6z] {
        align-items: stretch;
    }

    .audit-activity-panel__filters > :deep(*)[b-pwfxdfms6z] {
        width: 100%;
    }
}
/* _content/BlazorFrontend/Components/AuditLog/AuditLogDetailModal.razor.rz.scp.css */
.audit-activity-modal[b-1fkgh2sool] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.audit-activity-modal__summary[b-1fkgh2sool] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
}

.audit-activity-modal__summary-icon[b-1fkgh2sool],
.audit-activity-modal__card-head > span[b-1fkgh2sool] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--accent);
    background: var(--accent-soft);
}

.audit-activity-modal__summary-icon[b-1fkgh2sool] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
}

.audit-activity-modal__summary-copy[b-1fkgh2sool] { min-width: 0; }

.audit-activity-modal__summary-copy h4[b-1fkgh2sool] {
    margin: 0;
    color: var(--text-strong);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 650;
    line-height: 1.35;
}

.audit-activity-modal__summary-meta[b-1fkgh2sool] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.audit-activity-modal__summary-meta > span[b-1fkgh2sool] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.audit-activity-modal__context-grid[b-1fkgh2sool] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.audit-activity-modal__card[b-1fkgh2sool] {
    min-width: 0;
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.audit-activity-modal__card-head[b-1fkgh2sool] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.audit-activity-modal__card-head > span[b-1fkgh2sool] {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
}

.audit-activity-modal__card-head h4[b-1fkgh2sool] {
    margin: 0;
    color: var(--text-strong);
    font-size: var(--text-sm);
    font-weight: 650;
}

.audit-activity-modal__facts[b-1fkgh2sool],
.audit-activity-modal__technical-grid[b-1fkgh2sool] { margin: 0; }

.audit-activity-modal__facts[b-1fkgh2sool] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.audit-activity-modal__facts > div[b-1fkgh2sool] { min-width: 0; }

.audit-activity-modal__facts dt[b-1fkgh2sool],
.audit-activity-modal__technical-grid dt[b-1fkgh2sool],
.audit-activity-modal__fingerprint > span[b-1fkgh2sool] {
    margin-bottom: var(--space-1);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 500;
}

.audit-activity-modal__facts dd[b-1fkgh2sool],
.audit-activity-modal__technical-grid dd[b-1fkgh2sool] {
    margin: 0;
    color: var(--text-strong);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.audit-activity-modal code[b-1fkgh2sool] {
    color: var(--text-body);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.audit-activity-modal__empty-note[b-1fkgh2sool] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.audit-activity-modal__empty-note :deep(.ds-icon)[b-1fkgh2sool] {
    flex: none;
    margin-top: 2px;
    color: var(--text-muted);
}

.audit-activity-modal__technical[b-1fkgh2sool] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-2);
}

.audit-activity-modal__technical-grid[b-1fkgh2sool] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
}

.audit-activity-modal__technical-grid > div[b-1fkgh2sool] { min-width: 0; }
.audit-activity-modal__technical-wide[b-1fkgh2sool] { grid-column: 1 / -1; }

.audit-activity-modal__fingerprint[b-1fkgh2sool] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
}

.audit-activity-modal__fingerprint > span[b-1fkgh2sool] { display: block; }

.audit-activity-modal__actions[b-1fkgh2sool] {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-3);
    border-top: var(--border-separator);
}

@media (max-width: 640px) {
    .audit-activity-modal__context-grid[b-1fkgh2sool],
    .audit-activity-modal__technical-grid[b-1fkgh2sool] {
        grid-template-columns: minmax(0, 1fr);
    }

    .audit-activity-modal__technical-wide[b-1fkgh2sool] { grid-column: auto; }
    .audit-activity-modal__summary[b-1fkgh2sool] { align-items: flex-start; }
}
/* _content/BlazorFrontend/Components/AuditLog/AuditLogFilterPanel.razor.rz.scp.css */
.audit-filter-shell[b-yl29oqbwr9],
.audit-filter-controls[b-yl29oqbwr9] {
    min-width: 0;
}
.audit-filter-controls[b-yl29oqbwr9] {
    display: grid;
    gap: var(--space-3);
    border: 0;
    margin: 0;
    padding: 0;
}
.audit-filter-grid[b-yl29oqbwr9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}
.audit-filter-severity[b-yl29oqbwr9] {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
.audit-filter-label[b-yl29oqbwr9] {
    color: var(--dp-text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
}
.audit-filter-actions[b-yl29oqbwr9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}
@media (max-width: 1099px) {
    .audit-filter-grid[b-yl29oqbwr9] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .audit-filter-grid[b-yl29oqbwr9] { grid-template-columns: minmax(0, 1fr); }
}
/* _content/BlazorFrontend/Components/AuditLog/AuditLogSeverityBadge.razor.rz.scp.css */
/* Severity badge base */
.audit-severity-badge[b-asgxlq4w2y] {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25em 0.6em;
    border-radius: 0.375rem;
    white-space: nowrap;
}

/* Critical — danger red, white text */
.audit-severity-critical[b-asgxlq4w2y] {
    background-color: var(--dp-status-danger);
    color: var(--dp-text-on-danger);
}

/* Error — orange, white text */
.audit-severity-error[b-asgxlq4w2y] {
    background-color: var(--dp-status-warning);
    color: var(--dp-text-inverse);
}

/* Warning — yellow, dark text (4.5:1 contrast) */
.audit-severity-warning[b-asgxlq4w2y] {
    background-color: var(--dp-status-warning);
    color: var(--dp-text-on-warning);
}

/* Info — primary blue, white text */
.audit-severity-info[b-asgxlq4w2y] {
    background-color: var(--dp-status-info);
    color: var(--dp-text-inverse);
}

/* Debug — neutral grey, dark text */
.audit-severity-debug[b-asgxlq4w2y] {
    background-color: var(--dp-text-tertiary);
    color: var(--dp-text-primary);
}
/* _content/BlazorFrontend/Components/AuditLog/AuditLogSeverityFilter.razor.rz.scp.css */
.audit-severity-filter-group[b-m3tz0zp559] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.audit-sev-toggle[b-m3tz0zp559] {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    gap: var(--space-1);
    min-height: 32px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    background: transparent;
}

.audit-sev-toggle:focus-visible[b-m3tz0zp559] {
    outline: 3px solid var(--color-border-focus, var(--dp-interactive-primary));
    outline-offset: 2px;
}

/* Active state — filled */
.audit-sev-toggle-critical.active[b-m3tz0zp559]  { background: var(--dp-status-danger); color: var(--dp-text-on-danger); border-color: var(--dp-status-danger); }
.audit-sev-toggle-error.active[b-m3tz0zp559]     { background: var(--dp-status-danger); color: var(--dp-text-on-danger); border-color: var(--dp-status-danger); }
.audit-sev-toggle-warning.active[b-m3tz0zp559]   { background: var(--dp-status-warning); color: var(--dp-text-on-warning); border-color: var(--dp-status-warning); }
.audit-sev-toggle-info.active[b-m3tz0zp559]      { background: var(--dp-status-info); color: var(--dp-text-inverse); border-color: var(--dp-status-info); }
.audit-sev-toggle-debug.active[b-m3tz0zp559]     { background: var(--dp-text-tertiary); color: var(--dp-text-inverse); border-color: var(--dp-text-tertiary); }

/* Outline state — inactive */
.audit-sev-toggle-critical.outline[b-m3tz0zp559]  { color: var(--dp-status-danger); border-color: var(--dp-status-danger); }
.audit-sev-toggle-error.outline[b-m3tz0zp559]     { color: var(--dp-status-warning); border-color: var(--dp-status-warning); }
.audit-sev-toggle-warning.outline[b-m3tz0zp559]   { color: var(--dp-text-secondary); border-color: var(--dp-status-warning); }
.audit-sev-toggle-info.outline[b-m3tz0zp559]      { color: var(--dp-status-info); border-color: var(--dp-status-info); }
.audit-sev-toggle-debug.outline[b-m3tz0zp559]     { color: var(--dp-text-secondary); border-color: var(--dp-text-tertiary); }

.audit-sev-toggle.outline[b-m3tz0zp559] {
    opacity: 0.7;
}

.audit-sev-toggle:hover[b-m3tz0zp559] {
    opacity: 1;
    transform: translateY(-1px);
}
/* _content/BlazorFrontend/Components/AuditLog/IntegrityVerificationModal.razor.rz.scp.css */
.audit-verify-body[b-bqyfa94b7i],
.audit-verify-step[b-bqyfa94b7i] {
    display: grid;
    min-width: 0;
    gap: var(--space-4);
}
.audit-verify-step:focus-visible[b-bqyfa94b7i] {
    outline: 2px solid var(--dp-interactive-primary);
    outline-offset: 2px;
}
.audit-verify-loading[b-bqyfa94b7i] {
    min-height: 160px;
    align-content: center;
    justify-items: center;
    padding-block: var(--space-5);
    text-align: center;
    /* UI spec §6.3: a sub-300 ms response shows no spinner flash; the min-height keeps the layout still. */
    animation: audit-verify-reveal-b-bqyfa94b7i 150ms ease-out 300ms both;
}
@keyframes audit-verify-reveal-b-bqyfa94b7i {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .audit-verify-loading[b-bqyfa94b7i] { animation-duration: 1ms; }
}
.audit-verify-job[b-bqyfa94b7i] {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    margin: 0;
    color: var(--dp-text-secondary);
}
.audit-verify-job[b-bqyfa94b7i]  .ds-icon { flex-shrink: 0; margin-top: 2px; }
.audit-verify-list-note[b-bqyfa94b7i] { margin-top: var(--space-1); }
.audit-verify-asof[b-bqyfa94b7i] {
    margin: 0;
    color: var(--dp-text-muted);
}
.audit-verify-summary[b-bqyfa94b7i] {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}
.audit-verify-summary > div[b-bqyfa94b7i] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3);
}
.audit-verify-summary dt[b-bqyfa94b7i] { color: var(--dp-text-secondary); font-weight: 400; }
.audit-verify-summary dd[b-bqyfa94b7i] { margin: 0; overflow-wrap: anywhere; }
.audit-verify-actions[b-bqyfa94b7i] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}
@media (pointer: coarse) {
    .audit-verify-actions[b-bqyfa94b7i]  .ds-btn { min-height: 44px; }
}
@media (max-width: 767px) {
    .audit-verify-summary > div[b-bqyfa94b7i] { grid-template-columns: 1fr; gap: var(--space-1); }
    .audit-verify-actions[b-bqyfa94b7i] { flex-direction: column; }
    .audit-verify-actions[b-bqyfa94b7i]  .ds-btn { width: 100%; min-height: 44px; }
}
/* _content/BlazorFrontend/Components/Auth/AuthFlowShell.razor.rz.scp.css */
.auth-flow-stage[b-d06ks58uso] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 100%;
    padding: 24px;
    background: var(--bg-canvas);
}

.auth-flow-card[b-d06ks58uso] {
    --accent: var(--teal-700);
    --accent-hover: var(--teal-700);
    --accent-soft: var(--teal-50);
    width: 100%;
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
}

[data-pp-theme="dark"] .auth-flow-card[b-d06ks58uso] {
    --accent: var(--teal-400);
    --accent-hover: var(--teal-500);
    --accent-contrast: var(--text-inverse);
}

.auth-flow-card[b-d06ks58uso]  .ds-auth-panel {
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
}

.auth-flow-visual[b-d06ks58uso] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
}

.auth-flow-card[b-d06ks58uso]  .ds-auth-panel-content {
    padding-block: 32px;
}

.auth-flow-card[b-d06ks58uso]  .ds-auth-panel-notice:empty {
    display: none;
}

.auth-flow-card[b-d06ks58uso]  form,
.auth-flow-card[b-d06ks58uso]  .auth-flow-form {
    display: grid;
    gap: 16px;
}

.auth-flow-card[b-d06ks58uso]  .auth-field {
    gap: 6px;
    margin: 0;
}

.auth-flow-card[b-d06ks58uso]  .auth-field__label {
    color: var(--text-body);
    font: 600 13px/18px var(--font-body);
}

.auth-flow-card[b-d06ks58uso]  .auth-field__input {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-strong);
    font: 400 14px/20px var(--font-body);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-flow-card[b-d06ks58uso]  .auth-field__input:hover:not(:disabled) {
    border-color: var(--border-control);
}

.auth-flow-card[b-d06ks58uso]  .auth-field__input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--ring);
}

.auth-flow-card[b-d06ks58uso]  .auth-field__hint,
.auth-flow-card[b-d06ks58uso]  .auth-field__error {
    font: 400 12px/16px var(--font-body);
}

.auth-flow-card[b-d06ks58uso]  .auth-field__hint {
    color: var(--text-muted);
}

.auth-flow-card[b-d06ks58uso]  .auth-field__error {
    color: var(--danger);
}

.auth-flow-card[b-d06ks58uso]  .auth-field__input-group {
    position: relative;
}

.auth-flow-card[b-d06ks58uso]  .auth-field__reveal {
    right: 6px;
    width: 32px;
    height: 32px;
    min-height: 32px;
    color: var(--text-muted);
}

.auth-flow-card[b-d06ks58uso]  .auth-form-actions {
    margin: 0;
}

.auth-flow-card[b-d06ks58uso]  .auth-form-actions--stack {
    display: grid;
    gap: 10px;
}

.auth-flow-card[b-d06ks58uso]  .auth-form-actions--center {
    display: flex;
    justify-content: center;
    margin: 0;
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-primary.ds-btn {
    min-height: 48px;
    border-radius: var(--radius-sm);
    font: 700 14px/20px var(--font-display);
}

.auth-flow-card[b-d06ks58uso]  .auth-inline-link {
    color: var(--accent);
    font: 600 13px/20px var(--font-body);
    text-decoration: none;
}

.auth-flow-card[b-d06ks58uso]  .auth-inline-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-state {
    display: grid;
    justify-items: center;
    gap: 16px;
    color: var(--text-body);
    text-align: center;
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-state-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-state--success .auth-flow-state-icon {
    background: var(--success-soft);
    color: var(--success);
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-state--danger .auth-flow-state-icon {
    background: var(--danger-soft);
    color: var(--danger);
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-state h3,
.auth-flow-card[b-d06ks58uso]  .auth-flow-state p {
    margin: 0;
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-state h3 {
    color: var(--text-strong);
    font: 700 20px/28px var(--font-display);
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-state p {
    color: var(--text-muted);
    font: 400 14px/20px var(--font-body);
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-skeleton {
    width: 100%;
    height: 160px;
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-progress-line {
    width: 60%;
    height: 8px;
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-meta {
    display: grid;
    gap: 10px;
    width: 100%;
    padding: 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    text-align: left;
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-meta-row {
    display: grid;
    grid-template-columns: minmax(110px, 0.45fr) 1fr;
    gap: 12px;
    color: var(--text-body);
    font: 400 13px/18px var(--font-body);
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-meta-row strong {
    color: var(--text-muted);
    font-weight: 600;
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-meta-row code {
    overflow-wrap: anywhere;
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-list {
    margin: 0;
    padding-left: 20px;
    color: var(--text-body);
    font: 400 13px/20px var(--font-body);
    text-align: left;
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-verification,
.auth-flow-card[b-d06ks58uso]  .auth-flow-actions {
    display: grid;
    gap: 16px;
}

.auth-flow-card[b-d06ks58uso]  .auth-flow-verification > .ds-alert,
.auth-flow-card[b-d06ks58uso]  .auth-flow-state > .ds-alert {
    width: 100%;
}

@media (max-width: 899.98px) {
    .auth-flow-stage[b-d06ks58uso] {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0;
    }

    .auth-flow-card[b-d06ks58uso],
    .auth-flow-card[b-d06ks58uso]  .ds-auth-panel {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .auth-flow-card[b-d06ks58uso]  .ds-auth-panel--separated {
        gap: 0;
    }

    .auth-flow-card[b-d06ks58uso]  .ds-auth-panel--separated .ds-auth-panel-card {
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    .auth-flow-card[b-d06ks58uso]  .ds-auth-panel-brand {
        justify-content: flex-start;
        padding-inline: 20px;
    }

    .auth-flow-card[b-d06ks58uso]  .ds-auth-panel-content {
        width: min(calc(100% - 40px), 432px);
    }

    .auth-flow-card[b-d06ks58uso]  .ds-auth-panel h1,
    .auth-flow-card[b-d06ks58uso]  .ds-auth-panel h2 {
        font-size: 28px;
        line-height: 36px;
    }

    .auth-flow-card[b-d06ks58uso]  .auth-flow-meta-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-flow-card[b-d06ks58uso]  .auth-field__input {
        transition-duration: 0.001ms;
    }
}
/* _content/BlazorFrontend/Components/Compliance/EvidenceUrlReleaseDialog.razor.rz.scp.css */
dialog[b-tabgu7z15t] {
    max-width: min(32rem, calc(100vw - 2rem));
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: 1.5rem;
}

dialog[b-tabgu7z15t]::backdrop { background: rgb(0 0 0 / 50%); }
form[b-tabgu7z15t] { margin-top: 1rem; }
/* _content/BlazorFrontend/Components/CookieConsent/CookieConsentAnalytics.razor.rz.scp.css */
/* CK-02 Cookie Consent Analytics (Phase 4 wave 4a). Token-only, layout-only rules —
   every component visual comes from Datanomics.Ds. */

/* One owner for the page's vertical rhythm. The PageHeader and every major dashboard section use
   the same 24px separation; child controls retain only their smaller, internal spacing. */
.ana-page-stack[b-g85f2c3j4q] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-6);
}

/* DsStatGrid normally creates its own following-section margin. Inside the page stack that would
   add a second 24px gap, so the composition wrapper becomes the sole owner of that separation. */
.ana-stats-section[b-g85f2c3j4q]  .ds-statgrid {
    margin-bottom: 0;
}

.ana-chart-section[b-g85f2c3j4q],
.ana-history-section[b-g85f2c3j4q],
.ana-history-content[b-g85f2c3j4q] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.ana-chart-section[b-g85f2c3j4q] {
    gap: var(--space-2);
}

.ana-history-section[b-g85f2c3j4q] {
    gap: var(--space-3);
}

.ana-period-group[b-g85f2c3j4q] {
    display: flex;
    gap: var(--space-2);
}

.ana-chart-toolbar[b-g85f2c3j4q] {
    display: flex;
    justify-content: flex-end;
}

.ana-history-table[b-g85f2c3j4q] {
    width: 100%;
}

.ana-history-table[b-g85f2c3j4q]  .ana-col--actions {
    width: 135px;
}

.ana-row-actions[b-g85f2c3j4q] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ana-alert-action[b-g85f2c3j4q] {
    margin-top: var(--space-2);
}

.ana-mono[b-g85f2c3j4q] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.ana-user-id[b-g85f2c3j4q] {
    color: var(--color-text-primary, var(--text-strong));
    font-weight: 600;
}

.ana-muted[b-g85f2c3j4q] {
    color: var(--color-text-secondary, var(--text-muted));
}

.ana-danger[b-g85f2c3j4q] {
    color: var(--color-text-danger, var(--danger));
}

.ana-ip[b-g85f2c3j4q] {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 0.8125rem;
}

.ana-pagination-wrap[b-g85f2c3j4q] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

/* ── Consent detail content in the shared DsSidePanel ───────────────────── */
[b-g85f2c3j4q] .ana-detail-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ana-detail-section h3[b-g85f2c3j4q] {
    margin: 0 0 10px;
    color: var(--color-text-tertiary, var(--text-subtle));
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ana-detail-list[b-g85f2c3j4q] {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px var(--space-3);
    margin: 0;
    font-size: 0.84375rem;
}

.ana-detail-list dt[b-g85f2c3j4q] {
    color: var(--color-text-secondary, var(--text-muted));
    font-weight: 400;
}

.ana-detail-list dd[b-g85f2c3j4q] {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--color-text-primary, var(--text-strong));
}

.ana-detail-skeleton[b-g85f2c3j4q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ana-detail-skeleton span[b-g85f2c3j4q] {
    width: 100%;
    height: 38px;
    border-radius: var(--radius-sm);
}
/* _content/BlazorFrontend/Components/DataMapping/DataCategorySelector.razor.rz.scp.css */
.dm-selector-scroll[b-dgpigmcu58] { display: grid; gap: var(--space-4); max-height: 240px; overflow-y: auto; }
.dm-selector-option[b-dgpigmcu58] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.dm-selector-option[b-dgpigmcu58]  .ds-checkbox { flex: 1; min-width: 0; }
.dm-selector-tags[b-dgpigmcu58] { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* _content/BlazorFrontend/Components/DataMapping/DataFlowAreaTabs.razor.rz.scp.css */
/* Layout only. The strip scrolls inside itself on a narrow shell instead of wrapping (precedent: SystemList .dm-hub-tabs). */
.dfa-tabs[b-e83egj3tvs] {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.dfa-tabs[b-e83egj3tvs]  .ds-tabs {
    margin-bottom: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
}

.dfa-tabs[b-e83egj3tvs]  .ds-tab {
    flex: 0 0 auto;
}
/* _content/BlazorFrontend/Components/DataMapping/DataFlowVisualization.razor.rz.scp.css */
.data-flow-visualization[b-bp1oadterr] { display: grid; gap: var(--space-4); min-width: 0; }
.flow-viz-toolbar[b-bp1oadterr], .flow-viz-actions[b-bp1oadterr], .flow-viz-metadata[b-bp1oadterr], .flow-viz-legend[b-bp1oadterr] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.flow-viz-toolbar[b-bp1oadterr] { justify-content: space-between; }
.flow-viz-metadata[b-bp1oadterr] { margin-top: var(--space-4); }
.flow-viz-metadata > span[b-bp1oadterr] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); overflow-wrap: anywhere; }
.flow-viz-canvas[b-bp1oadterr] { width: 100%; height: 520px; min-width: 0; }
.flow-viz-canvas--compact[b-bp1oadterr] { height: 220px; }
.flow-viz-loading[b-bp1oadterr] { color: var(--text-muted); font-size: 12px; }
/* _content/BlazorFrontend/Components/DataMapping/DataSubjectTypeSelector.razor.rz.scp.css */
.dm-selector-scroll[b-3yewk0u33z] { display: grid; gap: var(--space-3); max-height: 200px; overflow-y: auto; }
.dm-selector-tags[b-3yewk0u33z] { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* _content/BlazorFrontend/Components/DataMapping/GenerateDataflowDialog.razor.rz.scp.css */
/* Layout only: one field per row (DsModal contract). */
.gdf-dialog[b-ut0v8muixj] {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.gdf-dialog-echo[b-ut0v8muixj],
.gdf-dialog-status[b-ut0v8muixj] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    overflow-wrap: anywhere;
}
/* _content/BlazorFrontend/Components/DataMapping/GeneratedDataflowDiagram.razor.rz.scp.css */
/* Layout only: the diagram, its legend and states are Datanomics.Ds. */
.gdf-diagram[b-a9uhp7ajd7] {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

/* Fixed minimum height, so selecting a node never shifts the content below (E-73). */
.gdf-selection[b-a9uhp7ajd7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    min-height: 3rem;
    min-width: 0;
}

.gdf-selection-prompt[b-a9uhp7ajd7],
.gdf-selection-details[b-a9uhp7ajd7] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    overflow-wrap: anywhere;
}

.gdf-selection[b-a9uhp7ajd7]  .gdf-chip {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Touch has no hover: below the tablet breakpoint the hint points at the Table view. */
.gdf-pan-hint[b-a9uhp7ajd7] {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

@media (max-width: 767.98px) {
    .gdf-pan-hint[b-a9uhp7ajd7] {
        display: flex;
    }
}

@media print {
    .gdf-pan-hint[b-a9uhp7ajd7],
    .gdf-selection[b-a9uhp7ajd7] {
        display: none;
    }
}
/* _content/BlazorFrontend/Components/DataMapping/GeneratedDataflowTable.razor.rz.scp.css */
/* Layout only: the table, pager, selects and chips are Datanomics.Ds. */
.gdf-table[b-138ute9oao] {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.gdf-table-toolbar[b-138ute9oao] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4) var(--space-4) 0;
}

.gdf-table-field[b-138ute9oao] {
    min-width: 14rem;
    flex: 0 1 18rem;
}

.gdf-table-node[b-138ute9oao] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.gdf-table[b-138ute9oao]  .gdf-chip {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.gdf-node-cell[b-138ute9oao] {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    overflow-wrap: anywhere;
}

.gdf-node-lane[b-138ute9oao] {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.gdf-table-pager[b-138ute9oao],
.gdf-table-empty[b-138ute9oao] {
    padding: 0 var(--space-4) var(--space-4);
}

/* Print: the current page or filter of the list; controls are not part of the printout (FR-23). */
@media print {
    .gdf-table-toolbar[b-138ute9oao],
    .gdf-table-pager[b-138ute9oao],
    .gdf-table-empty[b-138ute9oao] {
        display: none;
    }
}
/* _content/BlazorFrontend/Components/DataMapping/GenerateOutcomeAlert.razor.rz.scp.css */
/* Layout only: stacks the message, the optional counts line and the optional link. */
.gdf-outcome-counts[b-wcfjen8u1u] {
    display: block;
    margin-top: var(--space-1);
}
/* _content/BlazorFrontend/Components/DataMapping/SecurityControlsSelector.razor.rz.scp.css */
.dm-security-score[b-1h2jnah3dc], .dm-security-domain[b-1h2jnah3dc], .dm-security-tags[b-1h2jnah3dc] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dm-security-score[b-1h2jnah3dc] { justify-content: space-between; margin-block: var(--space-2); }
.dm-security-domain[b-1h2jnah3dc] { min-width: 0; }
.dm-security-controls[b-1h2jnah3dc] { display: grid; gap: var(--space-4); }
.dm-security-control[b-1h2jnah3dc] { display: grid; gap: var(--space-2); min-width: 0; }
/* _content/BlazorFrontend/Components/Export/ExportPasswordRevealDialog.razor.rz.scp.css */
/*
 * ExportPasswordRevealDialog.razor.css
 * Scoped styles for the TOTP step-up password reveal dialog (Flow D).
 * All colors via --dp-* tokens. No hardcoded hex/rgb values.
 * WCAG AA: icon + text label on every state (color not sole differentiator).
 * prefers-reduced-motion: animation entry is skipped.
 */

/* ─────────────────────────────────────────────────────────────
   Backdrop fade-in
   ───────────────────────────────────────────────────────────── */

.dp-reveal-modal-backdrop[b-giss1fsxag] {
    animation: dp-reveal-fade-in-b-giss1fsxag 0.15s ease-out;
}

@keyframes dp-reveal-fade-in-b-giss1fsxag {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .dp-reveal-modal-backdrop[b-giss1fsxag] {
        animation: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   Dialog sizing
   ───────────────────────────────────────────────────────────── */

.dp-reveal-modal-dialog[b-giss1fsxag] {
    max-width: 480px;
    width: 100%;
    margin: 1rem auto;
}

.dp-reveal-modal-content[b-giss1fsxag] {
    background: var(--dp-surface-elevated);
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* ─────────────────────────────────────────────────────────────
   Header
   ───────────────────────────────────────────────────────────── */

.dp-reveal-modal-header[b-giss1fsxag] {
    border-bottom: 1px solid var(--dp-border-default);
    padding: 1rem 1.25rem;
}

.dp-reveal-modal-title[b-giss1fsxag] {
    color: var(--dp-text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.dp-reveal-modal-shield-icon[b-giss1fsxag] {
    color: var(--dp-status-warning-text);
    font-size: 1.1rem;
}

/* ─────────────────────────────────────────────────────────────
   Job info band
   ───────────────────────────────────────────────────────────── */

.dp-reveal-job-info-band[b-giss1fsxag] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    background: var(--dp-surface-secondary);
    border-bottom: 1px solid var(--dp-border-separator);
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

.dp-reveal-job-info-item[b-giss1fsxag] {
    display: inline-flex;
    align-items: center;
}

.dp-reveal-job-info-sep[b-giss1fsxag] {
    color: var(--dp-border-default);
}

/* ─────────────────────────────────────────────────────────────
   Body
   ───────────────────────────────────────────────────────────── */

.dp-reveal-modal-body[b-giss1fsxag] {
    padding: 1.25rem;
    min-height: 120px;
}

.dp-reveal-instruction[b-giss1fsxag] {
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────
   TOTP input — monospaced, large, centered digits
   ───────────────────────────────────────────────────────────── */

.dp-reveal-totp-label[b-giss1fsxag] {
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.dp-reveal-totp-input[b-giss1fsxag] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-align: center;
    background: var(--dp-surface-input);
    border-color: var(--dp-border-default);
    color: var(--dp-text-primary);
    padding: 0.625rem 1rem;
    border-radius: var(--radius-md, 8px);
    transition: border-color 0.15s ease;
}

.dp-reveal-totp-input:focus[b-giss1fsxag] {
    border-color: var(--dp-interactive-primary);
    box-shadow: 0 0 0 3px rgba(var(--dp-interactive-primary-rgb), 0.15);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    outline: none;
}

.dp-reveal-totp-input.is-invalid[b-giss1fsxag] {
    border-color: var(--dp-status-danger);
}

.dp-reveal-totp-input:disabled[b-giss1fsxag] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────
   Password container — warning-coloured box
   ───────────────────────────────────────────────────────────── */

.dp-reveal-ready-label[b-giss1fsxag] {
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.dp-reveal-password-container[b-giss1fsxag] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dp-status-warning-bg);
    border: 1px solid var(--dp-status-warning-border);
    border-radius: var(--radius-md, 8px);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    min-height: 56px;
}

.dp-reveal-password-text[b-giss1fsxag] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--dp-status-warning-text);
    word-break: break-all;
    user-select: text;
}

.dp-reveal-password-hidden[b-giss1fsxag] {
    letter-spacing: 0.2em;
    color: var(--dp-text-tertiary);
    user-select: none;
}

/* ─────────────────────────────────────────────────────────────
   Auto-hide countdown
   ───────────────────────────────────────────────────────────── */

.dp-reveal-autohide-message[b-giss1fsxag] {
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    margin: 0;
    display: flex;
    align-items: center;
}

/* ─────────────────────────────────────────────────────────────
   Copy success inline banner
   ───────────────────────────────────────────────────────────── */

.dp-reveal-copy-success[b-giss1fsxag] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--dp-status-success-text);
    background: var(--dp-status-success-bg);
    border: 1px solid var(--dp-status-success-border);
    border-radius: var(--radius-sm, 6px);
    padding: 0.25rem 0.625rem;
    margin-top: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────
   Blocked state
   ───────────────────────────────────────────────────────────── */

.dp-reveal-blocked-state[b-giss1fsxag] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 1rem 0;
}

.dp-reveal-blocked-icon[b-giss1fsxag] {
    font-size: 2rem;
    color: var(--dp-status-danger);
}

.dp-reveal-blocked-message[b-giss1fsxag] {
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
    margin: 0;
    max-width: 320px;
}

/* ─────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────── */

.dp-reveal-modal-footer[b-giss1fsxag] {
    border-top: 1px solid var(--dp-border-default);
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────
   Action buttons
   ───────────────────────────────────────────────────────────── */

.dp-reveal-submit-btn[b-giss1fsxag] {
    background: var(--dp-interactive-primary);
    border-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.dp-reveal-submit-btn:hover:not(:disabled)[b-giss1fsxag] {
    background: var(--dp-interactive-primary-hover);
    border-color: var(--dp-interactive-primary-hover);
    color: var(--dp-text-on-primary);
}

.dp-reveal-submit-btn:disabled[b-giss1fsxag] {
    opacity: 0.55;
    cursor: not-allowed;
}

.dp-reveal-copy-btn[b-giss1fsxag] {
    background: var(--dp-status-warning-bg);
    border-color: var(--dp-status-warning-border);
    color: var(--dp-status-warning-text);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
}

.dp-reveal-copy-btn:hover:not(:disabled)[b-giss1fsxag] {
    background: var(--dp-status-warning-border);
    color: var(--dp-status-warning-text);
}

/* ─────────────────────────────────────────────────────────────
   Dark-mode adjustments (Bootstrap 5.3 data-bs-theme)
   ───────────────────────────────────────────────────────────── */

[data-bs-theme="dark"] .dp-reveal-modal-content[b-giss1fsxag] {
    background: var(--dp-surface-elevated);
    border-color: var(--dp-border-default);
}

[data-bs-theme="dark"] .dp-reveal-job-info-band[b-giss1fsxag] {
    background: var(--dp-surface-secondary);
}

[data-bs-theme="dark"] .dp-reveal-totp-input[b-giss1fsxag] {
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    border-color: var(--dp-border-default);
}
/* _content/BlazorFrontend/Components/Export/ExportRequestModal.razor.rz.scp.css */
/* ExportRequestModal — scoped styles for the zero-record confirmation state (FR-ZDR-08..11, 16).
   Only the new surface is styled here; the pre-existing inline styles elsewhere in this modal are
   deliberately left untouched (out of scope for this change). */

.dp-export-zero-records[b-qblffzvucm] {
    background: var(--dp-status-warning-bg);
    border: 1px solid var(--dp-status-warning-border);
}

.dp-export-zero-records-icon[b-qblffzvucm],
.dp-export-zero-records-title[b-qblffzvucm] {
    color: var(--dp-status-warning-text);
}

/* Body and available-range copy use the primary text token, NOT the warning text token: the latter
   sits at roughly 4.51:1 on the warning background — technically over WCAG AA but with no margin,
   and these two lines carry the actual instruction and the actual dates. */
.dp-export-zero-records-body[b-qblffzvucm] {
    color: var(--dp-text-primary);
}

/* Supporting note about a value that was filled in on the user's behalf — secondary, not an error. */
.dp-export-range-trimmed[b-qblffzvucm] {
    color: var(--dp-text-secondary);
}

@media (max-width: 575.98px) {
    /* Stacked and reversed, so "Use this date range" — the action that resolves the situation
       without producing an empty file — is the one under the thumb. */
    .dp-export-zero-records-actions[b-qblffzvucm] {
        flex-direction: column-reverse;
        flex-wrap: nowrap;
    }

    .dp-export-zero-records-actions .btn[b-qblffzvucm] {
        width: 100%;
        min-height: 44px;
    }
}

/* D-09 / TC-PN-10 — the reason line under the format buttons. Supporting explanation, not an
   error: the same secondary text token the range-trimmed note uses, so it reads as guidance. */
.dp-export-format-note[b-qblffzvucm] {
    color: var(--dp-text-secondary);
}
/* _content/BlazorFrontend/Components/Navigation/DsAppSidebar.razor.rz.scp.css */
/* Loading / error states of the DS app sidebar (token-only). */
.ds-app-sidebar-loading[b-ofpm7gz1ld] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--space-4);
    font-size: 0.875rem;
    color: var(--text-muted);
}

.ds-app-sidebar-error[b-ofpm7gz1ld] {
    margin: var(--space-4);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--warning);
    background: var(--warning-soft);
    color: var(--text-body);
    font-size: 0.8125rem;
}
/* _content/BlazorFrontend/Components/Navigation/UnifiedSidebar.razor.rz.scp.css */
/* ================================================================
   UnifiedSidebar — Scoped Styles
   Merged from inline <style> + previous .razor.css
   Uses --dp-nav-* design tokens (variables.css) for full theme support
   ================================================================ */

/* ================================================================
   SIDEBAR CONTAINER
   ================================================================ */
.unified-sidebar[b-hv993jj6wa] {
    /* Transparent — outer .sidebar-column carries the frosted vibrancy layer
       (see wwwroot/css/apple-vibrancy.css §5). */
    background: transparent;
    border-radius: 0;
    border-right: none;
    box-shadow: none;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sidebar-nav[b-hv993jj6wa] {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 0.25rem 0.5rem;
}

.sidebar-loading[b-hv993jj6wa] {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================================================================
   NAV GROUPS — Section dividers
   ================================================================ */
.nav-group[b-hv993jj6wa] {
    /* Apple: use spacing instead of dividers between nav groups */
    border-bottom: none;
    margin-bottom: var(--space-4, 16px);
}

.nav-group:last-child[b-hv993jj6wa] {
    margin-bottom: 0;
}

.nav-group-header[b-hv993jj6wa] {
    background: transparent;
    border-radius: 0;
    cursor: default;
    padding: 0.75rem 0.75rem 0.25rem;
}

.nav-group-title[b-hv993jj6wa] {
    font-family: var(--font-heading, 'Inter', sans-serif);
    font-size: var(--nav-section-font-size, 0.6875rem);
    font-weight: var(--nav-section-weight, 600);
    letter-spacing: var(--nav-section-tracking, 0.06em);
    color: var(--dp-nav-section-label);
    cursor: default;
    text-transform: uppercase;
}

/* ================================================================
   BASE NAV LINK — shared by single items and accordion children
   ================================================================ */
[b-hv993jj6wa] .nav-link {
    color: var(--dp-nav-text);
    border-radius: var(--nav-item-radius, 6px);
    margin-bottom: 0.125rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--type-sm, 0.875rem);
    text-decoration: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    transition: background-color var(--transition-micro, 150ms ease),
                color var(--transition-micro, 150ms ease);
    border-left: none;
}

[b-hv993jj6wa] .nav-link:hover {
    background-color: var(--dp-nav-hover);
    color: var(--dp-interactive-primary);
}

[b-hv993jj6wa] .nav-link.active {
    background-color: var(--dp-nav-active-bg);
    color: var(--dp-nav-active-text);
    font-weight: 500;
    border-left: none;
    box-shadow: none;
}

[b-hv993jj6wa] .nav-link.active:hover {
    background-color: var(--dp-nav-active-bg);
    color: var(--dp-nav-active-text);
    transform: none;
}

/* ================================================================
   ACCORDION — Parent toggle
   ================================================================ */
[b-hv993jj6wa] .nav-accordion-item {
    margin-bottom: 0.125rem;
}

[b-hv993jj6wa] .nav-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    color: var(--dp-nav-text);
    background: transparent;
    border: none;
    border-left: none;
    border-radius: 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-size: var(--type-sm, 0.875rem);
    font-weight: 500;
    transition: background-color var(--transition-micro, 150ms ease),
                color var(--transition-micro, 150ms ease);
}

[b-hv993jj6wa] .nav-accordion-toggle:hover {
    background-color: var(--dp-nav-hover);
    color: var(--dp-interactive-primary);
}

[b-hv993jj6wa] .nav-accordion-toggle.has-active-child {
    background-color: var(--dp-nav-hover);
    border-left: none;
    color: var(--dp-interactive-primary);
    font-weight: 600;
}

/* Parent-active class (set via C#) — higher specificity avoids !important */
[b-hv993jj6wa] .sidebar-nav .nav-link.parent-active {
    background-color: var(--dp-nav-hover);
    border-left: none;
    color: var(--dp-interactive-primary);
}

/* ================================================================
   ACCORDION — Chevron icon rotation
   ================================================================ */
[b-hv993jj6wa] .nav-accordion-icon {
    transition: transform var(--motion-slow, 350ms) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
    font-size: 0.65rem;
    margin-left: auto;
    padding-left: 0.5rem;
    color: var(--dp-nav-text-muted);
}

[b-hv993jj6wa] .nav-accordion-icon.expanded {
    transform: rotate(90deg);
    color: var(--dp-interactive-primary);
}

/* ================================================================
   ACCORDION — Collapsible content
   ================================================================ */
[b-hv993jj6wa] .nav-accordion-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease-out,
                padding 0.35s ease-out;
}

[b-hv993jj6wa] .nav-accordion-content.expanded {
    max-height: 800px;
    opacity: 1;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s ease-in,
                padding 0.45s ease-in;
}

/* ================================================================
   ACCORDION — Child items (indented)
   ================================================================ */
[b-hv993jj6wa] .nav-accordion-child {
    padding-left: 2rem;
    margin-bottom: 0;
}

[b-hv993jj6wa] .nav-accordion-child .nav-link {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: var(--type-sm, 0.8125rem);
    color: var(--dp-text-secondary);
    font-weight: 400;
    border-left: none;
}

[b-hv993jj6wa] .nav-accordion-child .nav-link:hover {
    background-color: var(--dp-nav-hover);
    color: var(--dp-interactive-primary);
}

[b-hv993jj6wa] .nav-accordion-child .nav-link.active {
    background-color: var(--dp-nav-active-bg);
    color: var(--dp-nav-active-text);
    font-weight: 500;
    border-left: none;
}

/* ================================================================
   SINGLE NAV ITEMS (no children)
   ================================================================ */
[b-hv993jj6wa] .nav-single-item .nav-link {
    padding: 0.5rem 0.75rem;
    color: var(--dp-nav-text);
    font-size: var(--type-sm, 0.875rem);
    border-left: none;
}

[b-hv993jj6wa] .nav-single-item .nav-link:hover {
    background-color: var(--dp-nav-hover);
    color: var(--dp-interactive-primary);
}

[b-hv993jj6wa] .nav-single-item .nav-link.active {
    background-color: var(--dp-nav-active-bg);
    color: var(--dp-nav-active-text);
    font-weight: 500;
    border-left: none;
}

/* ================================================================
   NAV TEXT — prevent overflow
   ================================================================ */
[b-hv993jj6wa] .nav-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ================================================================
   MISC
   ================================================================ */
[b-hv993jj6wa] .badge {
    font-size: 0.65rem;
}

.nav-header[b-hv993jj6wa] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.nav-divider[b-hv993jj6wa] {
    margin: 0.5rem 0.75rem;
    border-color: var(--dp-nav-divider);
}

/* ================================================================
   RESPONSIVE — Mobile sidebar
   ================================================================ */
@media (max-width: 991.98px) {
    .unified-sidebar[b-hv993jj6wa] {
        border-radius: 0;
        box-shadow: none;
        border-right: 1px solid var(--dp-border-separator);
        height: auto;
        min-height: auto;
    }

    .nav-group-title[b-hv993jj6wa] {
        font-size: 0.72rem;
    }

    /* Apple HIG: 44px minimum touch target on mobile */
    [b-hv993jj6wa] .nav-link,
    [b-hv993jj6wa] .nav-single-item .nav-link,
    [b-hv993jj6wa] .nav-accordion-toggle {
        padding: 0.75rem 0.875rem;
        min-height: 44px;
    }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    [b-hv993jj6wa] .nav-accordion-content,
    [b-hv993jj6wa] .nav-accordion-icon,
    [b-hv993jj6wa] .nav-link,
    [b-hv993jj6wa] .nav-accordion-toggle {
        transition: none;
    }
}
/* _content/BlazorFrontend/Components/Notifications/NotificationBell.razor.rz.scp.css */
/* Component-scoped styles for NotificationBell.razor.
   Primary layout + tokens live in wwwroot/css/components/notifications.css.
   This file handles host-element positioning context only. */

/* Ensure the host wrapper does not collapse the 44×44 hit area */
:host[b-yqtjna724k] {
    display: inline-flex;
    align-items: center;
}
/* _content/BlazorFrontend/Components/Notifications/NotificationItem.razor.rz.scp.css */
/* Component-scoped supplementary styles for NotificationItem.razor.
   Primary layout + tokens live in wwwroot/css/components/notifications.css.
   This file handles danger delete text styling inside Bootstrap dropdown. */

/* Danger text variant for dropdown delete item — no dp-action-btn class needed inside <li> */
[b-jmmr66ud3g] .dp-action-btn--danger-text {
    color: var(--dp-status-danger);
}

[b-jmmr66ud3g] .dp-action-btn--danger-text:hover {
    background: var(--dp-status-danger-bg);
    color: var(--dp-status-danger);
}

[b-jmmr66ud3g] .dp-action-btn--danger-text i {
    color: var(--dp-status-danger);
}
/* _content/BlazorFrontend/Components/PrivacyNotices/Components/AuditEventDetailDrawer.razor.rz.scp.css */
/* =============================================================================
   AuditEventDetailDrawer — scoped styles
   All colors use --dp-* tokens.
   ============================================================================= */

.audit-drawer-backdrop[b-w6e3jxs0k9] {
    position: fixed;
    inset: 0;
    background-color: var(--dp-surface-overlay);
    z-index: 1040;
    cursor: pointer;
    animation: fade-in-b-w6e3jxs0k9 0.15s ease;
}

.audit-drawer[b-w6e3jxs0k9] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(720px, 100vw);
    background-color: var(--dp-surface-primary);
    border-left: 1px solid var(--dp-border-default);
    z-index: 1045;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--dp-shadow-drawer);
    outline: none;
}

.audit-drawer--open[b-w6e3jxs0k9] {
    transform: translateX(0);
}

/* Header */
.audit-drawer__header[b-w6e3jxs0k9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--dp-border-default);
    background-color: var(--dp-surface-secondary);
    flex-shrink: 0;
}

.audit-drawer__header-info[b-w6e3jxs0k9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.audit-drawer__timestamp[b-w6e3jxs0k9] {
    font-size: 0.8rem;
    color: var(--dp-text-muted);
}

.audit-drawer__header-actions[b-w6e3jxs0k9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Body */
.audit-drawer__body[b-w6e3jxs0k9] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    overscroll-behavior: contain;
}

/* Cards */
.audit-drawer__card[b-w6e3jxs0k9] {
    border-color: var(--dp-border-subtle);
}

.audit-drawer__card-header[b-w6e3jxs0k9] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
    background-color: var(--dp-surface-secondary);
    padding: 0.5rem 0.75rem;
}

/* Definition list */
.audit-drawer__dl[b-w6e3jxs0k9] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.75rem;
    font-size: 0.85rem;
    margin: 0;
}

.audit-drawer__dl dt[b-w6e3jxs0k9] {
    font-weight: 600;
    color: var(--dp-text-secondary);
    white-space: nowrap;
}

.audit-drawer__dl dd[b-w6e3jxs0k9] {
    color: var(--dp-text-primary);
    margin: 0;
    word-break: break-word;
}

.audit-drawer__mono[b-w6e3jxs0k9] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
}

.audit-drawer__truncate[b-w6e3jxs0k9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Diff */
.audit-drawer__diff-inline[b-w6e3jxs0k9] {
    margin: 0;
    padding: 0.75rem 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
    overflow-x: auto;
    background-color: var(--dp-surface-secondary);
    max-height: 320px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.6;
}

.diff-add[b-w6e3jxs0k9] {
    color: var(--dp-audit-diff-add-fg);
    background-color: var(--dp-audit-diff-add-bg);
    display: block;
    padding: 0 0.25rem;
    border-radius: 2px;
}

.diff-remove[b-w6e3jxs0k9] {
    color: var(--dp-audit-diff-remove-fg);
    background-color: var(--dp-audit-diff-remove-bg);
    display: block;
    padding: 0 0.25rem;
    border-radius: 2px;
}

.diff-change[b-w6e3jxs0k9] {
    color: var(--dp-audit-diff-change-fg);
    background-color: var(--dp-audit-diff-change-bg);
    display: block;
    padding: 0 0.25rem;
    border-radius: 2px;
}

.audit-drawer__diff-sidebyside[b-w6e3jxs0k9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--dp-border-subtle);
}

.audit-drawer__diff-pane[b-w6e3jxs0k9] {
    overflow: auto;
    max-height: 320px;
}

.audit-drawer__diff-pane + .audit-drawer__diff-pane[b-w6e3jxs0k9] {
    border-left: 1px solid var(--dp-border-subtle);
}

.audit-drawer__diff-pane-label[b-w6e3jxs0k9] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dp-text-tertiary);
    padding: 0.35rem 0.75rem;
    background-color: var(--dp-surface-secondary);
    border-bottom: 1px solid var(--dp-border-subtle);
}

.audit-drawer__diff-code[b-w6e3jxs0k9] {
    margin: 0;
    padding: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-all;
    background-color: var(--dp-surface-primary);
    color: var(--dp-text-primary);
    line-height: 1.5;
}

/* Compliance badges */
.audit-drawer__compliance-badge[b-w6e3jxs0k9] {
    background-color: var(--dp-badge-regulatory-bg);
    color: var(--dp-badge-regulatory-fg);
    border: 1px solid var(--dp-badge-regulatory-border);
    font-size: 0.7rem;
}

/* ── Skeleton loading lines ── */
.audit-drawer__skeleton-line[b-w6e3jxs0k9] {
    border-radius: 4px;
}

.audit-drawer__skeleton-line--h1[b-w6e3jxs0k9] {
    height: 1rem;
}

.audit-drawer__skeleton-line--h085[b-w6e3jxs0k9] {
    height: 0.85rem;
}

.audit-drawer__skeleton-line--w40[b-w6e3jxs0k9] {
    width: 40%;
}

.audit-drawer__skeleton-line--w55[b-w6e3jxs0k9] {
    width: 55%;
}

.audit-drawer__skeleton-line--w70[b-w6e3jxs0k9] {
    width: 70%;
}

.audit-drawer__skeleton-line--mb[b-w6e3jxs0k9] {
    margin-bottom: 0.5rem;
}

.audit-drawer__skeleton-line--mt[b-w6e3jxs0k9] {
    margin-top: 0.4rem;
}

/* Responsive */
@media (max-width: 768px) {
    .audit-drawer[b-w6e3jxs0k9] {
        width: 100vw;
    }

    .audit-drawer__diff-sidebyside[b-w6e3jxs0k9] {
        grid-template-columns: 1fr;
    }

    .audit-drawer__diff-pane + .audit-drawer__diff-pane[b-w6e3jxs0k9] {
        border-left: none;
        border-top: 1px solid var(--dp-border-subtle);
    }
}

@keyframes fade-in-b-w6e3jxs0k9 {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* _content/BlazorFrontend/Components/PrivacyNotices/Components/AuditTimeline.razor.rz.scp.css */
/* =============================================================================
   AuditTimeline — scoped styles
   All colors use --dp-* tokens. No hardcoded hex values.
   WCAG 2.1 AA verified for all text-on-background pairs.
   ============================================================================= */

/* ── Severity badge tokens (new, added to variables.css as well) ── */
.audit-timeline__badge--info[b-vv1stgku6d] {
    background-color: var(--dp-audit-severity-info-bg);
    color: var(--dp-audit-severity-info-fg);
    border: 1px solid var(--dp-audit-severity-info-border);
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.audit-timeline__badge--notice[b-vv1stgku6d] {
    background-color: var(--dp-audit-severity-notice-bg);
    color: var(--dp-audit-severity-notice-fg);
    border: 1px solid var(--dp-audit-severity-notice-border);
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.audit-timeline__badge--warning[b-vv1stgku6d] {
    background-color: var(--dp-status-warning-bg);
    color: var(--dp-status-warning);
    border: 1px solid var(--dp-status-warning-border);
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.audit-timeline__badge--error[b-vv1stgku6d] {
    background-color: var(--dp-status-danger-bg);
    color: var(--dp-status-danger);
    border: 1px solid var(--dp-status-danger-border);
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

/* ── Filter bar ── */
.audit-timeline__filters[b-vv1stgku6d] {
    background-color: var(--dp-surface-secondary);
    border: 1px solid var(--dp-border-subtle);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.audit-timeline__filter-row[b-vv1stgku6d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.audit-timeline__filter-field[b-vv1stgku6d] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 160px;
    min-width: 140px;
}

.audit-timeline__filter-label[b-vv1stgku6d] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--dp-text-secondary);
}

.audit-timeline__date-range[b-vv1stgku6d] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.audit-timeline__date-sep[b-vv1stgku6d] {
    color: var(--dp-text-tertiary);
    font-size: 0.9rem;
}

.audit-timeline__filter-actions[b-vv1stgku6d] {
    display: flex;
    align-items: flex-end;
}

/* ── Skeleton ── */
.audit-timeline__skeleton[b-vv1stgku6d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.audit-timeline__skeleton-item[b-vv1stgku6d] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.audit-timeline__skeleton-avatar[b-vv1stgku6d] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.audit-timeline__skeleton-body[b-vv1stgku6d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.audit-timeline__skeleton-line[b-vv1stgku6d] {
    height: 0.85rem;
    border-radius: 0.25rem;
}

.audit-timeline__skeleton-line--w40[b-vv1stgku6d] { width: 40%; }
.audit-timeline__skeleton-line--w55[b-vv1stgku6d] { width: 55%; }
.audit-timeline__skeleton-line--w70[b-vv1stgku6d] { width: 70%; }

.skeleton-pulse[b-vv1stgku6d] {
    background: linear-gradient(
        90deg,
        var(--dp-surface-secondary) 25%,
        var(--dp-surface-hover) 50%,
        var(--dp-surface-secondary) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse-b-vv1stgku6d 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-vv1stgku6d {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Empty state ── */
.audit-timeline__empty[b-vv1stgku6d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--dp-text-muted);
    text-align: center;
}

.audit-timeline__empty-icon[b-vv1stgku6d] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    color: var(--dp-text-tertiary);
}

.audit-timeline__empty-text[b-vv1stgku6d] {
    font-size: 0.95rem;
    margin: 0;
}

/* ── Timeline list ── */
.audit-timeline__list[b-vv1stgku6d] {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.audit-timeline__list[b-vv1stgku6d]::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--dp-border-default);
}

.audit-timeline__item[b-vv1stgku6d] {
    display: flex;
    gap: 1rem;
    padding: 0.85rem 0;
    position: relative;
    align-items: flex-start;
}

.audit-timeline__item + .audit-timeline__item[b-vv1stgku6d] {
    border-top: 1px solid var(--dp-border-subtle);
}

.audit-timeline__connector[b-vv1stgku6d] {
    display: none; /* the ::before on the list handles the line */
}

.audit-timeline__avatar[b-vv1stgku6d] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    user-select: none;
}

.audit-timeline__content[b-vv1stgku6d] {
    flex: 1;
    min-width: 0;
}

.audit-timeline__header[b-vv1stgku6d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.audit-timeline__actor[b-vv1stgku6d] {
    font-weight: 600;
    color: var(--dp-text-primary);
    font-size: 0.875rem;
    word-break: break-all;
}

.audit-timeline__role[b-vv1stgku6d] {
    font-size: 0.65rem;
}

.audit-timeline__description[b-vv1stgku6d] {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    color: var(--dp-text-secondary);
    line-height: 1.4;
}

.audit-timeline__reason[b-vv1stgku6d] {
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    color: var(--dp-text-muted);
}

.audit-timeline__meta[b-vv1stgku6d] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.audit-timeline__time[b-vv1stgku6d] {
    font-size: 0.75rem;
    color: var(--dp-text-muted);
}

.audit-timeline__detail-btn[b-vv1stgku6d] {
    font-size: 0.75rem;
    color: var(--dp-text-link);
    text-decoration: none;
}

.audit-timeline__detail-btn:hover[b-vv1stgku6d],
.audit-timeline__detail-btn:focus[b-vv1stgku6d] {
    color: var(--dp-text-link-hover);
    text-decoration: underline;
    outline-offset: 2px;
}

/* ── Pagination ── */
.audit-timeline__pagination[b-vv1stgku6d] {
    border-top: 1px solid var(--dp-border-subtle);
    padding-top: 0.75rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .audit-timeline__filter-field[b-vv1stgku6d] {
        flex: 1 1 100%;
    }

    .audit-timeline__date-range[b-vv1stgku6d] {
        flex-direction: column;
        align-items: stretch;
    }

    .audit-timeline__date-sep[b-vv1stgku6d] {
        display: none;
    }
}

@media (max-width: 320px) {
    .audit-timeline__avatar[b-vv1stgku6d] {
        width: 28px;
        height: 28px;
        font-size: 0.6rem;
    }

    .audit-timeline__list[b-vv1stgku6d]::before {
        left: 13px;
    }
}
/* _content/BlazorFrontend/Components/PrivacyNotices/Components/ExportEvidenceDialog.razor.rz.scp.css */
/* =============================================================================
   ExportEvidenceDialog — scoped styles (layout only)
   Everything visual comes from Datanomics.Ds components; --dp-* / DS tokens only.
   ============================================================================= */

.export-evidence-body[b-0zovasewiy],
.export-evidence-step[b-0zovasewiy] {
    display: grid;
    min-width: 0;
    gap: var(--space-4);
}

.export-evidence-step:focus-visible[b-0zovasewiy],
.export-evidence-alert:focus-visible[b-0zovasewiy] {
    outline: 2px solid var(--dp-interactive-primary);
    outline-offset: 2px;
}

.export-evidence-text[b-0zovasewiy] {
    margin: 0;
    color: var(--dp-text-secondary);
}

.export-evidence-note[b-0zovasewiy] {
    margin-top: calc(var(--space-2) * -1);
}

.export-evidence-summary[b-0zovasewiy] {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.export-evidence-summary > div[b-0zovasewiy] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3);
}

.export-evidence-summary dt[b-0zovasewiy] {
    color: var(--dp-text-secondary);
    font-weight: 400;
}

.export-evidence-summary dd[b-0zovasewiy] {
    margin: 0;
    color: var(--dp-text-primary);
    overflow-wrap: anywhere;
}

/* Entity type and id side by side on wide screens, one per row below 768 px. */
.export-evidence-target[b-0zovasewiy] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.export-evidence-target > div[b-0zovasewiy] {
    grid-template-columns: 1fr;
    gap: var(--space-1);
}

.export-evidence-dates[b-0zovasewiy] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3);
}

.export-evidence-actions[b-0zovasewiy] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

@media (pointer: coarse) {
    .export-evidence-actions[b-0zovasewiy]  .ds-btn { min-height: 44px; }
}

@media (max-width: 767px) {
    .export-evidence-summary > div[b-0zovasewiy] { grid-template-columns: 1fr; gap: var(--space-1); }
    .export-evidence-target[b-0zovasewiy],
    .export-evidence-dates[b-0zovasewiy] { grid-template-columns: 1fr; }
    .export-evidence-actions[b-0zovasewiy] { flex-direction: column; }
    .export-evidence-actions[b-0zovasewiy]  .ds-btn { width: 100%; min-height: 44px; }
    .export-evidence-step[b-0zovasewiy]  .ds-radio,
    .export-evidence-step[b-0zovasewiy]  .ds-checkbox { min-height: 44px; }
}
/* _content/BlazorFrontend/Components/PrivacyNotices/Components/IntegrityBanner.razor.rz.scp.css */
/* =============================================================================
   IntegrityBanner — scoped styles
   Uses --dp-* tokens; no hardcoded hex.
   ============================================================================= */

.integrity-banner[b-d8kbcs53yj] {
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    transition: background-color 0.2s, border-color 0.2s;
}

.integrity-banner--success[b-d8kbcs53yj] {
    background-color: var(--dp-status-success-bg);
    border-color: var(--dp-status-success-border);
    color: var(--dp-status-success);
}

.integrity-banner--danger[b-d8kbcs53yj] {
    background-color: var(--dp-status-danger-bg);
    border-color: var(--dp-status-danger-border);
    color: var(--dp-status-danger);
}

.integrity-banner--warning[b-d8kbcs53yj] {
    background-color: var(--dp-status-warning-bg);
    border-color: var(--dp-status-warning-border);
    color: var(--dp-status-warning);
}

.integrity-banner--loading[b-d8kbcs53yj] {
    background-color: var(--dp-surface-secondary);
    border-color: var(--dp-border-default);
    color: var(--dp-text-secondary);
}

.integrity-banner__content[b-d8kbcs53yj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
}

.integrity-banner__clickable[b-d8kbcs53yj] {
    cursor: pointer;
}

.integrity-banner__clickable:focus[b-d8kbcs53yj] {
    outline: 2px solid var(--dp-border-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.integrity-banner__meta[b-d8kbcs53yj] {
    color: inherit;
    opacity: 0.8;
    font-size: 0.8rem;
}

.integrity-banner__reverify-btn[b-d8kbcs53yj] {
    margin-left: auto;
    font-size: 0.78rem;
    border-color: currentColor;
    color: inherit;
}

.integrity-banner__reverify-btn:hover[b-d8kbcs53yj],
.integrity-banner__reverify-btn:focus[b-d8kbcs53yj] {
    background-color: var(--dp-surface-overlay-subtle);
}

@media (max-width: 768px) {
    .integrity-banner__content[b-d8kbcs53yj] {
        flex-direction: column;
        align-items: flex-start;
    }

    .integrity-banner__reverify-btn[b-d8kbcs53yj] {
        margin-left: 0;
        margin-top: 0.5rem;
    }
}
/* _content/BlazorFrontend/Components/PrivacyNotices/Shared/PrivacyNoticeTemplatePickerModal.razor.rz.scp.css */
.pn-template-picker[b-g5ir52fmqf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.pn-template-option[b-g5ir52fmqf] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 20px;
    gap: var(--space-3);
    align-items: start;
    min-width: 0;
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    color: var(--text-strong);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.pn-template-option:hover[b-g5ir52fmqf] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.pn-template-option:focus-visible[b-g5ir52fmqf] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.pn-template-option--selected[b-g5ir52fmqf] {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.pn-template-option-icon[b-g5ir52fmqf],
.pn-template-option-check[b-g5ir52fmqf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.pn-template-option-icon[b-g5ir52fmqf] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
}

.pn-template-option-copy[b-g5ir52fmqf] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1);
}

.pn-template-option-copy strong[b-g5ir52fmqf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-template-option-copy small[b-g5ir52fmqf] {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-muted);
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pn-template-option-meta[b-g5ir52fmqf] {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    margin-top: var(--space-1);
}

@media (max-width: 639.98px) {
    .pn-template-picker[b-g5ir52fmqf] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/BlazorFrontend/Components/PrivacyNotices/Shared/TemplateSectionEditor.razor.rz.scp.css */
.template-section-editor[b-wi2en1yte4],
.template-section-editor__fields[b-wi2en1yte4] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-3);
}

.template-section-editor__hint[b-wi2en1yte4],
.template-section-editor__footer span[b-wi2en1yte4] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.template-section-editor__actions[b-wi2en1yte4],
.template-section-editor__footer[b-wi2en1yte4] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.template-section-editor__footer[b-wi2en1yte4] {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
}
/* _content/BlazorFrontend/Components/Security/SignOutEverywhereDialog.razor.rz.scp.css */
/*
 * SignOutEverywhereDialog — scoped styles.
 *
 * Colours reference --dp-* tokens only (BlazorFrontend/wwwroot/css/variables.css); light and
 * dark mode use the same token names, so no [data-bs-theme] rule is needed here.
 * Layout literals (radius/shadow/spacing) mirror the sibling
 * PrivacyPlatform.UI.Shared/Components/Session/SessionExpiryWarningModal.razor.css.
 *
 * Deliberate deviation from that sibling: the consequence block puts --dp-text-primary on
 * --dp-status-warning-bg (13.4:1) instead of --dp-status-warning-text (4.50:1 — passes AA by
 * nothing). Tolerable for a three-word countdown label, not for the three-line sentence this
 * whole dialog hinges on.
 */

.dp-signout-all-overlay[b-mopwtzpo08] {
    position: fixed;
    /* Longhand, not `inset` — same renderer gap the sibling modal documents. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483650;
    background-color: var(--dp-surface-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: dp-signout-all-fade-b-mopwtzpo08 180ms ease-out;
}

.dp-signout-all[b-mopwtzpo08] {
    width: 440px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    background-color: var(--dp-surface-primary);
    border: 1px solid var(--dp-border-default);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    outline: none;
    animation: dp-signout-all-pop-b-mopwtzpo08 200ms ease-out;
}

@keyframes dp-signout-all-fade-b-mopwtzpo08 { from { opacity: 0; } to { opacity: 1; } }
@keyframes dp-signout-all-pop-b-mopwtzpo08 { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .dp-signout-all-overlay[b-mopwtzpo08], .dp-signout-all[b-mopwtzpo08] { animation: none; }
}

.dp-signout-all__head[b-mopwtzpo08] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1rem 0.75rem;
}

.dp-signout-all__icon[b-mopwtzpo08] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 8px;
    font-size: 0.9375rem;
}

.dp-signout-all__icon--warning[b-mopwtzpo08] {
    background-color: var(--dp-status-warning-bg);
    color: var(--dp-status-warning);
}

.dp-signout-all__icon--danger[b-mopwtzpo08] {
    background-color: var(--dp-status-danger-bg);
    color: var(--dp-status-danger);
}

.dp-signout-all__icon--success[b-mopwtzpo08] {
    background-color: var(--dp-status-success-bg);
    color: var(--dp-status-success);
}

.dp-signout-all__title[b-mopwtzpo08] {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.dp-signout-all__body[b-mopwtzpo08] {
    padding: 0 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    transition: opacity 120ms ease-out;
}

.dp-signout-all__body--dimmed[b-mopwtzpo08] {
    opacity: 0.6;
}

.dp-signout-all__lead[b-mopwtzpo08],
.dp-signout-all__keep-hint[b-mopwtzpo08] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--dp-text-secondary);
}

.dp-signout-all__consequence[b-mopwtzpo08] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border-radius: 8px;
    background-color: var(--dp-status-warning-bg);
    border: 1px solid var(--dp-status-warning-border);
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--dp-text-primary);
}

.dp-signout-all__consequence-icon[b-mopwtzpo08] {
    flex: none;
    margin-top: 0.125rem;
    color: var(--dp-status-warning);
}

.dp-signout-all__error[b-mopwtzpo08] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border-radius: 8px;
    background-color: var(--dp-status-danger-bg);
    border: 1px solid var(--dp-status-danger-border);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--dp-text-primary);
}

.dp-signout-all__error-icon[b-mopwtzpo08] {
    flex: none;
    margin-top: 0.125rem;
    color: var(--dp-status-danger);
}

.dp-signout-all__foot[b-mopwtzpo08] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--dp-border-subtle);
    background-color: var(--dp-surface-secondary);
    border-radius: 0 0 12px 12px;
}

.dp-signout-all__btn[b-mopwtzpo08] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 40px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 120ms ease-out, border-color 120ms ease-out, opacity 120ms ease-out;
}

.dp-signout-all__btn:disabled[b-mopwtzpo08] {
    opacity: 0.65;
    cursor: not-allowed;
}

.dp-signout-all__btn--primary[b-mopwtzpo08] {
    background-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
}

.dp-signout-all__btn--primary:hover:not(:disabled)[b-mopwtzpo08] {
    background-color: var(--dp-interactive-primary-hover);
}

.dp-signout-all__btn--primary:active:not(:disabled)[b-mopwtzpo08] {
    background-color: var(--dp-interactive-primary-active);
}

.dp-signout-all__btn--secondary[b-mopwtzpo08] {
    background-color: transparent;
    border-color: var(--dp-border-default);
    color: var(--dp-text-primary);
}

.dp-signout-all__btn--secondary:hover:not(:disabled)[b-mopwtzpo08] {
    background-color: var(--dp-surface-hover);
}

/* The shared 3px ring alone measures 1.99:1 on white (design-system debt, logged separately),
   so the focus indicator adds a 2px --dp-interactive-primary outline that does meet 1.4.11. */
.dp-signout-all__btn:focus-visible[b-mopwtzpo08] {
    outline: 2px solid var(--dp-interactive-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--dp-border-focus);
}

.dp-signout-all__spinner[b-mopwtzpo08] {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: var(--dp-text-on-primary);
    border-radius: 50%;
    animation: dp-signout-all-spin-b-mopwtzpo08 0.75s linear infinite;
    flex-shrink: 0;
}

@keyframes dp-signout-all-spin-b-mopwtzpo08 {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .dp-signout-all__spinner[b-mopwtzpo08] { animation: none; opacity: 0.75; }
}

/* Screen-reader-only helper (mirrors the sibling session components). */
.dp-signout-all .visually-hidden[b-mopwtzpo08] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Small screens: tighter overlay padding and a stacked, full-width footer. DOM order is
   preserved (cancel first, confirm last) so focus order still equals visual order. */
@media (max-width: 575.98px) {
    .dp-signout-all-overlay[b-mopwtzpo08] {
        padding: 1rem;
    }

    .dp-signout-all__foot[b-mopwtzpo08] {
        flex-direction: column;
        align-items: stretch;
    }

    .dp-signout-all__btn[b-mopwtzpo08] {
        width: 100%;
        min-height: 44px;
    }
}
/* _content/BlazorFrontend/Components/Shared/Business/OrgChartPicker.razor.rz.scp.css */
/*
 * OrgChartPicker.razor.css — org-unit form field + its picker dialog.
 * Colours via --dp-* tokens only; no dark-mode block (ds-bridge.css flips the tokens).
 */

.ocp[b-mvvzkxo8wr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ocp-label[b-mvvzkxo8wr] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
}

.ocp-required[b-mvvzkxo8wr] {
    color: var(--dp-status-danger);
}

.ocp-value[b-mvvzkxo8wr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-height: 40px;
    padding: 6px var(--space-3);
    background: var(--dp-surface-input);
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md);
}

.ocp-value--error[b-mvvzkxo8wr] {
    border-color: var(--dp-border-error);
}

.ocp-value--disabled[b-mvvzkxo8wr] {
    opacity: 0.55;
}

.ocp-empty[b-mvvzkxo8wr],
.ocp-hint[b-mvvzkxo8wr],
.ocp-disabled-hint[b-mvvzkxo8wr],
.ocp-count[b-mvvzkxo8wr],
.ocp-empty-note[b-mvvzkxo8wr] {
    color: var(--dp-text-muted);
    font-size: 0.8125rem;
}

.ocp-disabled-hint[b-mvvzkxo8wr] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    overflow-wrap: break-word;
}

.ocp-error[b-mvvzkxo8wr] {
    color: var(--dp-status-danger-text);
    font-size: 0.8125rem;
    overflow-wrap: break-word;
}

.ocp-actions[b-mvvzkxo8wr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ─── Dialog body ──────────────────────────────────────────────────────────── */

.ocp-modal[b-mvvzkxo8wr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ocp-modal-tools[b-mvvzkxo8wr] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ocp-modal[b-mvvzkxo8wr]  .oct {
    max-height: 46vh;
}

.ocp-draft[b-mvvzkxo8wr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--dp-border-default);
}

.ocp-empty-note[b-mvvzkxo8wr] {
    margin: 0;
}

@media (max-width: 767.98px) {
    .ocp-modal[b-mvvzkxo8wr]  .oct {
        max-height: 52vh;
    }
}
/* _content/BlazorFrontend/Components/Shared/Business/OrgChartTree.razor.rz.scp.css */
/*
 * OrgChartTree.razor.css — WAI-ARIA tree view of organization units.
 *
 * Rules (CLAUDE.md): colors only through --dp-* tokens, no inline style="" anywhere, and NO
 * [data-bs-theme="dark"] block — ds-bridge.css already points every --dp-* token at a DS token
 * that flips on [data-pp-theme="dark"], so one declaration serves both themes.
 *
 * Indentation is the padding of each nested <ul role="group">, not a computed inline padding:
 * infinite depth, zero inline styles, and the role the ARIA tree pattern requires — one change
 * that solves all three.
 */

.oct[b-n7vyl73i2a] {
    --oct-indent: 20px;
    --oct-row-min-h: 40px;

    list-style: none;
    margin: 0;
    padding: var(--space-2);
    max-height: 60vh;
    overflow-y: auto;
    background: var(--dp-surface-primary);
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md);
}

.oct-group[b-n7vyl73i2a] {
    list-style: none;
    margin: 0;
    padding-left: var(--oct-indent);
}

.oct-node[b-n7vyl73i2a] {
    outline: none;
}

.oct-node:focus-visible[b-n7vyl73i2a] {
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}

.oct-row[b-n7vyl73i2a] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--oct-row-min-h);
    padding: 4px var(--space-2);
    border-left: 3px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--dp-text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.oct-row:hover[b-n7vyl73i2a] {
    background: var(--dp-surface-hover);
}

.oct-row:active[b-n7vyl73i2a] {
    background: var(--dp-surface-active);
}

/* Selected = background + left rail + bold name + tick glyph + aria-selected — never colour alone. */
.oct-node[aria-selected="true"] > .oct-row[b-n7vyl73i2a] {
    background: var(--dp-surface-brand-subtle);
    border-left-color: var(--dp-interactive-primary);
}

.oct-node[aria-selected="true"] > .oct-row .oct-name[b-n7vyl73i2a] {
    font-weight: 600;
}

.oct-node[aria-disabled="true"] > .oct-row[b-n7vyl73i2a] {
    opacity: 0.55;
    cursor: not-allowed;
}

.oct-node[aria-disabled="true"] > .oct-row:hover[b-n7vyl73i2a] {
    background: transparent;
}

.oct-node--context > .oct-row[b-n7vyl73i2a] {
    opacity: 0.72;
}

.oct-chevron[b-n7vyl73i2a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--dp-text-secondary);
}

.oct-chevron--leaf[b-n7vyl73i2a] {
    visibility: hidden;
}

.oct-check[b-n7vyl73i2a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1px solid var(--dp-border-control);
    border-radius: var(--radius-sm);
    color: transparent;
}

.oct-check[data-checked][b-n7vyl73i2a] {
    background: var(--dp-interactive-primary);
    border-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
}

.oct-icon[b-n7vyl73i2a] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--dp-text-secondary);
}

.oct-body[b-n7vyl73i2a] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.oct-line[b-n7vyl73i2a] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.oct-name[b-n7vyl73i2a] {
    color: var(--dp-text-primary);
    overflow-wrap: break-word;
}

.oct-mark[b-n7vyl73i2a] {
    background: var(--dp-status-warning-bg);
    color: var(--dp-text-primary);
    padding: 0 1px;
    border-radius: 2px;
}

.oct-desc[b-n7vyl73i2a],
.oct-path[b-n7vyl73i2a],
.oct-meta[b-n7vyl73i2a] {
    color: var(--dp-text-muted);
    font-size: 0.8125rem;
}

.oct-desc[b-n7vyl73i2a] {
    overflow-wrap: break-word;
}

/* The ancestor path is redundant while indentation shows the hierarchy; it appears on mobile
   (where indentation is dropped) and whenever a search flattens the context. */
.oct-path[b-n7vyl73i2a] {
    display: none;
    font-size: 0.71875rem;
}

.oct--searching .oct-path[b-n7vyl73i2a] {
    display: block;
}

.oct-meta[b-n7vyl73i2a] {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ─── Loading ──────────────────────────────────────────────────────────────── */

.oct-skeleton[b-n7vyl73i2a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.oct-skeleton-row[b-n7vyl73i2a] {
    height: 36px;
}

.oct-skeleton-row--0[b-n7vyl73i2a] { width: 100%; }
.oct-skeleton-row--1[b-n7vyl73i2a] { width: 92%; margin-left: 20px; }
.oct-skeleton-row--2[b-n7vyl73i2a] { width: 84%; margin-left: 40px; }
.oct-skeleton-row--3[b-n7vyl73i2a] { width: 76%; margin-left: 60px; }

/* ─── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1279.98px) {
    .oct[b-n7vyl73i2a] {
        --oct-indent: 16px;
    }

    .oct-desc[b-n7vyl73i2a] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Head-count gives way to the unit name — the name is the primary information. */
    .oct-meta[b-n7vyl73i2a] {
        display: none;
    }
}

@media (max-width: 767.98px) {
    /* 6 levels × 20px leaves ~120px for the name on a 320px screen. Drop the indentation and give
       every row its ancestor path instead — same interaction model, no horizontal scrolling, and
       <ul role="group"> nesting (hence aria-level) is untouched for screen readers. */
    .oct-group[b-n7vyl73i2a] {
        padding-left: 0;
    }

    .oct-path[b-n7vyl73i2a] {
        display: block;
    }

    .oct-desc[b-n7vyl73i2a] {
        display: none;
    }

    .oct-row[b-n7vyl73i2a] {
        --oct-row-min-h: 44px;
        padding-block: var(--space-2);
    }

    /* 44×44 touch target without growing the glyph visually (WCAG 2.5.8). */
    .oct-chevron[b-n7vyl73i2a]::before {
        content: "";
        position: absolute;
        inset: -10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oct-row[b-n7vyl73i2a] {
        transition: none;
    }
}
/* _content/BlazorFrontend/Components/Shared/Business/OrgLinkDisplay.razor.rz.scp.css */
/*
 * OrgLinkDisplay.razor.css — one org-unit link, read-only.
 * Colours via --dp-* tokens only; no dark-mode block (ds-bridge.css flips the tokens).
 */

.oil[b-dg17swd9th] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    min-width: 0;
}

.oil--compact[b-dg17swd9th] {
    flex-wrap: nowrap;
    gap: var(--space-1);
}

.oil-icon[b-dg17swd9th] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--dp-text-secondary);
}

.oil-name[b-dg17swd9th] {
    color: var(--dp-text-primary);
    /* In a narrow column a long name used to wrap to its OWN flex line and strand the icon alone
       on the line above. min-width:0 is not enough on its own: flex line-breaking is decided by
       the item's hypothetical main size, which with flex-basis:auto is the name's max-content
       width. Basis 0 makes the name always fit on the icon's line, then grow into whatever space
       is left and break inside itself. Measured on a 240px column: 3 lines / 102px → 1 line /
       70px, with the wide and compact renderings byte-identical to before. */
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: break-word;
}

.oil--compact .oil-name[b-dg17swd9th] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Deleted units are dimmed, not struck through — the name is still the record's evidence. */
.oil-name--deleted[b-dg17swd9th] {
    color: var(--dp-text-muted);
}

.oil-hint[b-dg17swd9th],
.oil-empty[b-dg17swd9th] {
    color: var(--dp-text-muted);
    font-size: 0.8125rem;
}
/* _content/BlazorFrontend/Components/Shared/Business/SearchFilter.razor.rz.scp.css */
/* Clear button visibility is driven entirely by whether the input is empty, using the browser's
   own :placeholder-shown state. Doing this in CSS rather than with an @if on a server-side field
   is what lets the quick-search box run without a SignalR round-trip per keystroke — the button
   appears and disappears as the user types with no server involvement at all.

   Relies on the input always having a placeholder; SearchFilter falls back to the localized
   "SearchFilter.SearchPlaceholder" when the caller does not supply one. */

.dp-quick-search-clear[b-p1n878bt1q] {
    display: none;
}

.dp-quick-search-input:not(:placeholder-shown) ~ .dp-quick-search-clear[b-p1n878bt1q] {
    display: inline-flex;
}
/* _content/BlazorFrontend/Components/Shared/Dashboard/KpiCard.razor.rz.scp.css */
/*
 * KpiCard.razor.css — Scoped styles for the KpiCard component.
 *
 * Q6 Extension (Wave 1): Adds .dp-kpi-card--status modifier and status pill styles.
 * All existing Metric-mode callers are unaffected (no class changes to existing markup).
 *
 * Token mapping: all colors use --dp-* tokens (never hardcoded hex/rgb).
 */

/* ── Status mode container (Q6) ── */
.dp-kpi-card__status[b-9whsg37kv9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Status pill (Q6) — mirrors AppleChip token mapping per spec Section 3.5 ── */
.dp-kpi-card__status-pill[b-9whsg37kv9] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--apple-font-label-size, 0.688rem);
    font-weight: 600;
    width: fit-content;
}

.dp-kpi-card__status-pill--success[b-9whsg37kv9] {
    background-color: var(--dp-status-success-bg);
    color: var(--dp-status-success-text);
}

.dp-kpi-card__status-pill--warning[b-9whsg37kv9] {
    background-color: var(--dp-status-warning-bg);
    color: var(--dp-status-warning-text);
}

.dp-kpi-card__status-pill--danger[b-9whsg37kv9] {
    background-color: var(--dp-status-danger-bg);
    color: var(--dp-status-danger-text);
}

.dp-kpi-card__status-pill--brand[b-9whsg37kv9] {
    background-color: var(--dp-surface-brand-subtle);
    color: var(--dp-interactive-primary);
}

.dp-kpi-card__status-pill--info[b-9whsg37kv9] {
    background-color: var(--dp-status-info-bg);
    color: var(--dp-status-info);
}

.dp-kpi-card__status-pill--neutral[b-9whsg37kv9] {
    background-color: var(--dp-surface-hover);
    color: var(--dp-text-secondary);
}

/* ── Sub-label for Status mode (uses DeltaText slot — muted style) ── */
.dp-kpi-card__delta-text--muted[b-9whsg37kv9] {
    color: var(--dp-text-muted);
    font-size: var(--apple-font-caption-size, 0.813rem);
    font-weight: 400;
}
/* _content/BlazorFrontend/Components/Shared/Data/DataPagination.razor.rz.scp.css */
.pagination-page-size-select[b-3czya19lbs] {
    width: auto;
    display: inline-block;
}
/* _content/BlazorFrontend/Components/Shared/Forms/TenantDatePicker.razor.rz.scp.css */
.tenant-date-picker[b-jaaxsaf749] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 144px;
}

.tenant-date-picker__label[b-jaaxsaf749] {
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
}

.tenant-date-picker__shell[b-jaaxsaf749] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 10px 0 12px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tenant-date-picker__shell:focus-within[b-jaaxsaf749] {
    border-color: var(--border-focus);
    box-shadow: var(--ring);
}

.tenant-date-picker__text[b-jaaxsaf749] {
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    color: var(--ink);
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.tenant-date-picker__text[b-jaaxsaf749]::placeholder {
    color: var(--text-subtle);
}

.tenant-date-picker__calendar[b-jaaxsaf749] {
    position: relative;
    display: inline-flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 32px;
    color: var(--slate-400);
}

.tenant-date-picker__native[b-jaaxsaf749] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.tenant-date-picker--disabled .tenant-date-picker__shell[b-jaaxsaf749] {
    background: var(--bg-inset);
}

.tenant-date-picker--disabled .tenant-date-picker__text[b-jaaxsaf749],
.tenant-date-picker--disabled .tenant-date-picker__native[b-jaaxsaf749] {
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .tenant-date-picker__shell[b-jaaxsaf749] {
        transition: none;
    }
}
/* _content/BlazorFrontend/Components/Shared/Help/HelpTooltip.razor.rz.scp.css */
/* HelpTooltip — scoped styles. Colours via --dp-* tokens. */
.help-tooltip-wrapper[b-euyfde08re] {
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.help-tooltip-icon[b-euyfde08re] {
    display: inline-flex;
    align-items: center;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    color: var(--dp-status-info);
}

    .help-tooltip-icon:hover[b-euyfde08re] {
        opacity: 1;
    }

/* Colour variants (mirrors the legacy Color param: primary/secondary/info/muted) */
.help-tooltip-icon--primary[b-euyfde08re] {
    color: var(--dp-interactive-primary);
}

.help-tooltip-icon--secondary[b-euyfde08re] {
    color: var(--dp-text-secondary);
}

.help-tooltip-icon--info[b-euyfde08re] {
    color: var(--dp-status-info);
}

.help-tooltip-icon--muted[b-euyfde08re] {
    color: var(--dp-text-tertiary);
}

@media (prefers-reduced-motion: reduce) {
    .help-tooltip-icon[b-euyfde08re] {
        transition: none;
    }
}
/* _content/BlazorFrontend/Components/Shared/LanguageSwitcher.razor.rz.scp.css */
/* ============================================================================
   LanguageSwitcher — scoped styles
   ----------------------------------------------------------------------------
   Migrated from inline <style> block in LanguageSwitcher.razor.
   All colors reference --dp-* design tokens (variables.css). Dark mode is
   handled automatically via [data-bs-theme="dark"] in variables.css — no
   component-level dark mode overrides required.
   See: docs/design/DESIGN_SYSTEM.md (Part II — Design Tokens)
   ============================================================================ */

.language-switcher[b-8y2uc5i98v] {
    display: inline-block;
}

/* ----------------------------------------------------------------------------
   Dropdown trigger button
   ---------------------------------------------------------------------------- */
.language-switcher .btn-light[b-8y2uc5i98v] {
    color: var(--dp-text-secondary);
    transition: all 0.3s ease;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
}

.language-switcher .btn-light:hover[b-8y2uc5i98v] {
    background-color: var(--dp-surface-brand-subtle);
    border-color: var(--dp-interactive-primary);
    box-shadow: 0 0.125rem 0.25rem var(--dp-surface-overlay-subtle);
    transform: translateY(-1px);
}

.language-switcher .btn-light:focus[b-8y2uc5i98v] {
    box-shadow: 0 0 0 0.2rem var(--dp-border-focus);
}

/* Local Figma Button Circled (301:7587): 40×40, pill radius, 10px padding,
   neutral-50 surface and a 20px circular locale flag. */
.language-switcher--compact .language-switcher-trigger--compact[b-8y2uc5i98v] {
    width: 40px;
    height: 40px;
    justify-content: center;
    padding: 10px;
    border: 0;
    border-radius: 999px;
    background: var(--bg-subtle);
    box-shadow: none;
}

.language-switcher--compact .language-switcher-trigger--compact[b-8y2uc5i98v]::after {
    display: none;
}

.language-switcher--compact .language-switcher-trigger--compact:hover[b-8y2uc5i98v] {
    border-color: transparent;
    background: var(--bg-hover);
    box-shadow: none;
    transform: none;
}

.language-switcher-compact-flag[b-8y2uc5i98v] {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 999px;
    background-size: cover;
}

/* ----------------------------------------------------------------------------
   Dropdown menu surface
   ---------------------------------------------------------------------------- */
.language-switcher .language-dropdown[b-8y2uc5i98v] {
    min-width: 180px;
    max-width: 200px;
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    animation: languageSwitcherSlideDown-b-8y2uc5i98v 0.3s ease;
    background-color: var(--dp-surface-brand-subtle);
    color: var(--dp-text-primary);
    overflow-x: hidden;
}

/* Animates the `translate` LONGHAND, never `transform`.
   Bootstrap positions this menu with Popper, which writes an inline
   `transform: translate(0px, 38px)` on this very element. A running animation on `transform`
   wins over inline style for that property, so for the whole 0.3s the menu rendered at its
   un-translated position (flush with the top edge of the trigger) and then snapped ~39px down
   to Popper's value in a single frame when the animation ended — measured: computed transform
   was matrix(…,-10) at t=1ms and matrix(…,38) at t=313ms, rect.top 0 → 48.
   `translate` is a separate property that composites with `transform` instead of replacing it,
   so Popper's placement holds from the first frame while the slide-in still plays.
   Do NOT switch this back to `transform`, and do NOT reposition with `top` — Popper flips to
   `top-start` near the viewport edge (confirmed on mobile) and hard-coded offsets fight it. */
@keyframes languageSwitcherSlideDown-b-8y2uc5i98v {
    from {
        opacity: 0;
        translate: 0 -10px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* ----------------------------------------------------------------------------
   Dropdown header
   ---------------------------------------------------------------------------- */
.language-switcher .dropdown-header[b-8y2uc5i98v] {
    color: var(--dp-text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

/* ----------------------------------------------------------------------------
   Language item (default)
   ---------------------------------------------------------------------------- */
.language-switcher .language-item[b-8y2uc5i98v] {
    padding: 0.625rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    margin: 0.125rem 0.25rem;
    border-radius: 0.375rem;
    color: var(--dp-text-primary);
}

.language-switcher .language-item:hover:not(.active):not(.disabled)[b-8y2uc5i98v] {
    background-color: var(--dp-surface-hover);
    border-left-color: var(--dp-interactive-primary);
    padding-left: calc(1rem - 3px);
}

/* ----------------------------------------------------------------------------
   Active language item — brand gradient
   ---------------------------------------------------------------------------- */
.language-switcher .language-item.active[b-8y2uc5i98v] {
    background: linear-gradient(
        135deg,
        var(--dp-interactive-primary) 0%,
        var(--dp-interactive-primary-hover) 100%
    );
    color: var(--dp-text-on-primary) !important;
    font-weight: 600;
    border-left-color: var(--dp-interactive-primary);
    box-shadow: 0 2px 8px var(--dp-border-focus);
}

.language-switcher .language-item.active:hover[b-8y2uc5i98v] {
    background: linear-gradient(
        135deg,
        var(--dp-interactive-primary) 0%,
        var(--dp-interactive-primary-active) 100%
    );
    transform: translateX(2px);
    box-shadow: 0 4px 12px var(--dp-border-focus);
}

/* ----------------------------------------------------------------------------
   Disabled item
   ---------------------------------------------------------------------------- */
.language-switcher .language-item.disabled[b-8y2uc5i98v] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ----------------------------------------------------------------------------
   Flag — decorative shadow uses surface-overlay-subtle (theme-aware)
   ---------------------------------------------------------------------------- */
.language-switcher .language-flag[b-8y2uc5i98v] {
    font-size: 1.5em;
    width: 24px;
    height: 18px;
    display: inline-block;
    border-radius: 2px;
    box-shadow: 0 1px 3px var(--dp-surface-overlay-subtle);
}

/* ----------------------------------------------------------------------------
   Language name
   ---------------------------------------------------------------------------- */
.language-switcher .language-name[b-8y2uc5i98v] {
    font-size: 0.9375rem;
    vertical-align: middle;
}

/* ----------------------------------------------------------------------------
   Active check icon (animated entrance)
   ---------------------------------------------------------------------------- */
.language-switcher .fa-check-circle[b-8y2uc5i98v] {
    font-size: 1.1em;
    animation: languageSwitcherCheckIn-b-8y2uc5i98v 0.3s ease;
}

@keyframes languageSwitcherCheckIn-b-8y2uc5i98v {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ----------------------------------------------------------------------------
   Divider
   ---------------------------------------------------------------------------- */
.language-switcher .dropdown-divider[b-8y2uc5i98v] {
    margin: 0.25rem 0.5rem;
    opacity: 0.15;
    border-color: var(--dp-border-default);
}

/* ----------------------------------------------------------------------------
   Loading spinner
   ---------------------------------------------------------------------------- */
.language-switcher .spinner-border-sm[b-8y2uc5i98v] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15rem;
}

/* ----------------------------------------------------------------------------
   Mobile responsive
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .language-switcher .language-dropdown[b-8y2uc5i98v] {
        min-width: 160px;
        max-width: 180px;
    }

    .language-switcher .language-item[b-8y2uc5i98v] {
        padding: 0.5rem 0.875rem;
    }

    .language-switcher .language-flag[b-8y2uc5i98v] {
        font-size: 1.3em;
    }

    .language-switcher .language-name[b-8y2uc5i98v] {
        font-size: 0.875rem;
    }
}
/* _content/BlazorFrontend/Components/Shared/Licensing/LicenseActivationGate.razor.rz.scp.css */
/*
 * LicenseActivationGate scoped styles — ADR-031.
 *
 * Full-screen, undismissable gate. All colors via --dp-* tokens (variables.css);
 * no hardcoded hex / rgb. The gate replaces the shell (MainLayout does not render
 * nav / sidebar / @Body while it is active) so there is nothing interactive behind
 * it — this z-index simply guarantees it paints above any late-mounted chrome
 * (connection banner is 1080; we sit above it because the deployment is unusable
 * until activated and the gate must own the screen unconditionally).
 */

.dp-actgate[b-l3cvk23fr2] {
    position: fixed;
    inset: 0;
    z-index: 2147483000; /* above every app layer incl. connection banner (1080) */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 2.5rem 1rem;
    background-color: var(--dp-surface-page);
}

.dp-actgate__panel[b-l3cvk23fr2] {
    width: 100%;
    max-width: 560px;
    margin: auto;
    background-color: var(--dp-surface-primary);
    border: 1px solid var(--dp-border-default);
    border-radius: 0.75rem;
    box-shadow: 0 12px 40px var(--dp-surface-overlay-subtle);
    padding: 2rem;
    text-align: center;
}

/* ── Brand ──────────────────────────────────────────────────────────────── */

.dp-actgate__brand[b-l3cvk23fr2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.dp-actgate__brand-icon[b-l3cvk23fr2] {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.dp-actgate__brand-icon--light[b-l3cvk23fr2] { display: inline-block; }
.dp-actgate__brand-icon--dark[b-l3cvk23fr2] { display: none; }

:global([data-bs-theme="dark"]) .dp-actgate__brand-icon--light[b-l3cvk23fr2] { display: none; }
:global([data-bs-theme="dark"]) .dp-actgate__brand-icon--dark[b-l3cvk23fr2] { display: inline-block; }

.dp-actgate__brand-name[b-l3cvk23fr2] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--dp-text-primary);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.dp-actgate__icon[b-l3cvk23fr2] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--dp-status-warning-bg);
    color: var(--dp-status-warning);
    font-size: 1.75rem;
}

.dp-actgate__title[b-l3cvk23fr2] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dp-text-primary);
    margin-bottom: 0.75rem;
}

.dp-actgate__lead[b-l3cvk23fr2] {
    color: var(--dp-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.dp-actgate__section[b-l3cvk23fr2] {
    text-align: left;
    margin-bottom: 1.5rem;
}

.dp-actgate__label[b-l3cvk23fr2] {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--dp-text-primary);
    margin-bottom: 0.25rem;
}

.dp-actgate__hint[b-l3cvk23fr2] {
    font-size: 0.8125rem;
    color: var(--dp-text-muted);
    margin-bottom: 0.5rem;
}

/* ── Deployment ID ──────────────────────────────────────────────────────── */

.dp-actgate__depid[b-l3cvk23fr2] {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    flex-wrap: wrap;
}

.dp-actgate__depid-input[b-l3cvk23fr2] {
    flex: 1 1 240px;
    min-width: 0;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--dp-border-default);
    border-radius: 0.5rem;
    background-color: var(--dp-surface-secondary);
    color: var(--dp-text-primary);
}

.dp-actgate__depid-input:focus-visible[b-l3cvk23fr2] {
    outline: 2px solid var(--dp-border-focus);
    outline-offset: 2px;
}

.dp-actgate__copy[b-l3cvk23fr2] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ── Dropzone (mirrors Activate.razor) ──────────────────────────────────── */

.dp-actgate__dropzone[b-l3cvk23fr2] {
    position: relative;
    border: 2px dashed var(--dp-border-default);
    border-radius: 0.5rem;
    background-color: var(--dp-surface-secondary);
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.25rem;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.dp-actgate__dropzone--active[b-l3cvk23fr2],
.dp-actgate__dropzone:hover[b-l3cvk23fr2] {
    border-color: var(--dp-interactive-primary);
    background-color: var(--dp-surface-primary);
}

.dp-actgate__dropzone--filled[b-l3cvk23fr2] {
    border-style: solid;
    border-color: var(--dp-status-success);
}

/* InputFile renders its native input outside this component's CSS scope. */
.dp-actgate__dropzone[b-l3cvk23fr2]  .dp-actgate__dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.dp-actgate__dropzone:focus-within[b-l3cvk23fr2] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.dp-actgate__dropzone-content[b-l3cvk23fr2] {
    pointer-events: none;
    min-width: 0;
    width: 100%;
    overflow-wrap: anywhere;
}

.dp-actgate__dropzone-icon[b-l3cvk23fr2] {
    font-size: 2rem;
    color: var(--dp-text-secondary);
    margin-bottom: 0.5rem;
    display: block;
}

.dp-actgate__dropzone--active .dp-actgate__dropzone-icon[b-l3cvk23fr2],
.dp-actgate__dropzone--filled .dp-actgate__dropzone-icon[b-l3cvk23fr2] {
    color: var(--dp-interactive-primary);
}

.dp-actgate__dropzone-text[b-l3cvk23fr2] {
    color: var(--dp-text-primary);
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
}

.dp-actgate__dropzone-hint[b-l3cvk23fr2] {
    color: var(--dp-text-muted);
    font-size: 0.8125rem;
}

/* ── Submit / actions ───────────────────────────────────────────────────── */

.dp-actgate__submit[b-l3cvk23fr2] {
    width: 100%;
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ── Inline alerts ──────────────────────────────────────────────────────── */

.dp-actgate__alert[b-l3cvk23fr2] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    text-align: left;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    margin-top: 1rem;
}

.dp-actgate__alert--error[b-l3cvk23fr2] {
    background-color: var(--dp-status-danger-bg);
    color: var(--dp-status-danger-text);
    border: 1px solid var(--dp-status-danger-border);
}

.dp-actgate__alert--warning[b-l3cvk23fr2] {
    background-color: var(--dp-status-warning-bg);
    color: var(--dp-status-warning-text);
    border: 1px solid var(--dp-status-warning-border);
}

.dp-actgate__alert--success[b-l3cvk23fr2] {
    background-color: var(--dp-status-success-bg);
    color: var(--dp-status-success-text);
    border: 1px solid var(--dp-status-success-border);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.dp-actgate__footer[b-l3cvk23fr2] {
    margin-top: 1.5rem;
    margin-bottom: 0;
    font-size: 0.75rem;
    color: var(--dp-text-muted);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .dp-actgate[b-l3cvk23fr2] {
        padding: 1rem 0.5rem;
    }
    .dp-actgate__panel[b-l3cvk23fr2] {
        padding: 1.5rem 1.25rem;
    }
    .dp-actgate__copy span[b-l3cvk23fr2] {
        display: none; /* icon-only on narrow viewports */
    }
}
/* _content/BlazorFrontend/Components/Shared/Licensing/LicenseExpiredOverlay.razor.rz.scp.css */
/*
 * LicenseExpiredOverlay scoped styles — ADR-024 Rule 3.
 *
 * All colors must use --dp-* tokens (variables.css). No hardcoded hex values.
 * z-index 1051: above fixed navbar (Bootstrap 1030) and Bootstrap fixed-top
 * elements, but below Bootstrap modals (1055) and the connection banner
 * (connection-banner.css uses 1080) so a blocking session-ended modal can
 * still draw above the watermark.
 *
 * Position: fixed at the very top of the viewport. The component does NOT
 * push the navbar down — instead the navbar's own `top: 0` keeps it pinned
 * and this strip sits above it. The strip is intentionally compact (48px
 * desktop / auto-wrap on small viewports) so the loss of vertical real-estate
 * is acceptable on screens where renewal pressure is the priority.
 */

/* Edition notice is independent of the dismissible expiry warning. No interaction interception. */
.dp-license-edition-watermark[b-0g04xmstj9] {
    position: fixed;
    inset: 0;
    z-index: 1070;
    display: grid;
    place-items: center;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.dp-license-edition-watermark span[b-0g04xmstj9] {
    transform: rotate(-25deg);
    color: var(--dp-text-primary);
    opacity: 0.12;
    font-size: clamp(0.875rem, 3vw, 2.75rem);
    font-weight: 800;
    white-space: nowrap;
}

.dp-license-edition-notice[b-0g04xmstj9] {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1070;
    max-width: 100%;
    padding: 3px 12px;
    background: var(--dp-status-warning);
    color: var(--dp-text-on-danger);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
}

@media print {
    .dp-license-edition-watermark span[b-0g04xmstj9] {
        color: black;
        opacity: 0.2;
    }

    .dp-license-edition-notice[b-0g04xmstj9] {
        background: white;
        color: black;
        border: 1px solid black;
    }
}

.dp-license-overlay[b-0g04xmstj9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1051;
    min-height: 48px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    /* Smooth entrance — purely cosmetic, respects reduced-motion below. */
    animation: dp-license-overlay-slide-in-b-0g04xmstj9 240ms cubic-bezier(0, 0, 0.2, 1);
}

@keyframes dp-license-overlay-slide-in-b-0g04xmstj9 {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .dp-license-overlay[b-0g04xmstj9] { animation: none; }
}

.dp-license-overlay__inner[b-0g04xmstj9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1440px;
}

.dp-license-overlay__icon[b-0g04xmstj9] {
    font-size: 1.125rem;
    flex-shrink: 0;
}

.dp-license-overlay__message[b-0g04xmstj9] {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

.dp-license-overlay__actions[b-0g04xmstj9] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.dp-license-overlay__btn[b-0g04xmstj9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    min-height: 32px;
}

.dp-license-overlay__btn:focus-visible[b-0g04xmstj9] {
    outline: 2px solid var(--dp-focus-ring, var(--dp-interactive-primary));
    outline-offset: 2px;
}

.dp-license-overlay__btn--primary[b-0g04xmstj9] {
    background: var(--dp-surface-elevated);
    color: var(--dp-status-danger);
    border-color: var(--dp-surface-elevated);
}
.dp-license-overlay__btn--primary:hover[b-0g04xmstj9] {
    background: var(--dp-surface-elevated);
    color: var(--dp-status-danger-hover, var(--dp-status-danger));
}

.dp-license-overlay__btn--ghost[b-0g04xmstj9] {
    background: transparent;
    color: inherit;
    border-color: currentColor;
    opacity: 0.95;
}
.dp-license-overlay__btn--ghost:hover[b-0g04xmstj9] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
}

.dp-license-overlay__close[b-0g04xmstj9] {
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 120ms ease;
}
.dp-license-overlay__close:hover[b-0g04xmstj9] {
    background: rgba(0, 0, 0, 0.08);
}
.dp-license-overlay__close:focus-visible[b-0g04xmstj9] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── Variant: GraceWarning (yellow, dismissable) ───────────────────────── */

.dp-license-overlay--warning[b-0g04xmstj9] {
    background: var(--dp-status-warning);
    /*
     * --dp-status-warning is #B45309 (rgba 180,83,9). Pair white text on it:
     * contrast = 5.06:1 ≥ 4.5:1 (WCAG AA body text). Verified against the
     * variables.css comment on line 136 (warning-text 4.52:1 on warning-bg).
     */
    color: var(--dp-text-on-danger);
}

/* ── Variant: GraceExpired (red, undismissable) ────────────────────────── */

.dp-license-overlay--expired[b-0g04xmstj9] {
    background: var(--dp-status-danger);
    color: var(--dp-text-on-danger);
    /*
     * --dp-status-danger is #B91C1C. White text contrast = 6.65:1 (WCAG AAA).
     */
}

/* ── Variant: ReadOnly / Revoked (red + corner ribbon) ─────────────────── */

.dp-license-overlay--readonly[b-0g04xmstj9] {
    background: var(--dp-status-danger);
    color: var(--dp-text-on-danger);
}

/* ── Variant: Invalid (dark red — distinguishes API failure from policy) ── */

.dp-license-overlay--invalid[b-0g04xmstj9] {
    background: var(--dp-status-danger-hover, var(--dp-status-danger));
    color: var(--dp-text-on-danger);
}

/* ── Corner ribbon — CSS-only, no image asset ──────────────────────────── */

.dp-license-overlay__ribbon[b-0g04xmstj9] {
    position: fixed;
    top: 32px;
    right: -56px;
    transform: rotate(45deg);
    background: var(--dp-status-danger);
    color: var(--dp-text-on-danger);
    padding: 6px 64px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 1050;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    /* Sit just below the bar (1051) so they read as a single visual unit. */
    pointer-events: none;
    user-select: none;
}

.dp-license-overlay__ribbon span[b-0g04xmstj9] {
    display: inline-block;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .dp-license-overlay[b-0g04xmstj9] {
        padding: 8px 12px;
        font-size: 0.875rem;
    }
    .dp-license-overlay__message[b-0g04xmstj9] {
        text-align: left;
    }
    .dp-license-overlay__btn[b-0g04xmstj9] {
        padding: 4px 10px;
        font-size: 0.8125rem;
        min-height: 28px;
    }
    /* Hide the corner ribbon on very small screens — the colored strip
       already carries the message and the ribbon would clip awkwardly. */
    .dp-license-overlay__ribbon[b-0g04xmstj9] { display: none; }
}
/* _content/BlazorFrontend/Components/Shared/Loading/LazyMetricCard.razor.rz.scp.css */
/* ==========================================================================
   LazyMetricCard — scoped styles
   Spec: docs/design/LAZY_DASHBOARD_METRICS.md
   All colours via --dp-* tokens. New token: --dp-skeleton-bg (variables.css).
   ========================================================================== */

.dp-lmc[b-y87g8efjzw] {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    /* min-height locks the floor at 132px desktop / 116px mobile (see @media below) so
       short-content states (Loading skeleton) don't collapse. height: 100% makes the
       wrapper fill the grid cell so that taller siblings (Empty + CTA in vi locale)
       pull all cards in the row to the same height (CSS Grid default align-items: stretch). */
    min-height: 132px;
    height: 100%;
    padding: 20px;
    border-radius: 14px;
    background-color: var(--dp-surface-primary);
    box-shadow: var(--shadow-l1);
    overflow: hidden;
}

/* When Ready/Stale, the wrapper hands off layout to the inner real card (KpiCard).
   We strip our own padding/shadow/background so the KpiCard's own chrome is the
   single visual source of truth. */
.dp-lmc--ready[b-y87g8efjzw],
.dp-lmc--stale[b-y87g8efjzw] {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
}

/* Empty fallback inside Ready/Stale: .dp-lmc__empty has no card chrome of its own,
   so re-apply the wrapper chrome (matches .dp-kpi-card: padding 20px, radius 14px,
   --dp-surface-primary, --shadow-l1) to keep this card visually equal to sibling
   KpiCards in the strip. Without this the empty card renders flat and unstyled. */
.dp-lmc--ready.dp-lmc--showing-empty[b-y87g8efjzw],
.dp-lmc--stale.dp-lmc--showing-empty[b-y87g8efjzw] {
    padding: 20px;
    background-color: var(--dp-surface-primary);
    box-shadow: var(--dp-kpi-card-shadow, var(--shadow-l1));
}

.dp-lmc__inner[b-y87g8efjzw] {
    width: 100%;
    height: 100%;
}

.dp-lmc__inner[b-y87g8efjzw]  .dp-kpi-card {
    height: 100%;
}

.dp-lmc__inner[b-y87g8efjzw]  .kpi-card {
    height: 100%;
}

/* --------------------------------------------------------------------------
   Skeleton state — pulse animation 1.5s linear infinite (UI/UX spec §5.1)
   -------------------------------------------------------------------------- */
.dp-lmc__sk-head[b-y87g8efjzw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.dp-lmc__sk[b-y87g8efjzw] {
    display: block;
    background-color: var(--dp-skeleton-bg);
}

.dp-lmc__sk-icon[b-y87g8efjzw] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.dp-lmc__sk-sparkline[b-y87g8efjzw] {
    width: 64px;
    height: 22px;
    border-radius: 4px;
}

.dp-lmc__sk-label[b-y87g8efjzw] {
    width: 50%;
    height: 11px;
    border-radius: 4px;
}

.dp-lmc__sk-value[b-y87g8efjzw] {
    width: 60%;
    height: 32px;
    border-radius: 6px;
    margin-top: 8px;
}

.dp-lmc__sk-delta[b-y87g8efjzw] {
    width: 70%;
    height: 12px;
    border-radius: 4px;
    margin-top: 10px;
}

@keyframes dp-lmc-sk-pulse-b-y87g8efjzw {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

.dp-lmc__sk-pulse[b-y87g8efjzw] {
    animation: dp-lmc-sk-pulse-b-y87g8efjzw 1.5s linear infinite;
}

/* --------------------------------------------------------------------------
   Fade-in transition (Loading → Ready / Error / Empty) — 200ms ease-out
   -------------------------------------------------------------------------- */
@keyframes dp-lmc-fade-in-b-y87g8efjzw {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dp-lmc--fade-in[b-y87g8efjzw] {
    animation: dp-lmc-fade-in-b-y87g8efjzw 200ms cubic-bezier(0, 0, 0.2, 1) both;
}

/* --------------------------------------------------------------------------
   Error state
   -------------------------------------------------------------------------- */
.dp-lmc__error[b-y87g8efjzw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
}

.dp-lmc__error-icon[b-y87g8efjzw] {
    font-size: 24px;
    color: var(--dp-status-danger);
    margin-bottom: 4px;
}

.dp-lmc__error-label[b-y87g8efjzw] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dp-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-lmc__error-msg[b-y87g8efjzw] {
    font-size: 13px;
    color: var(--dp-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-lmc__retry[b-y87g8efjzw] {
    align-self: flex-start;
    margin-top: auto;
}

/* --------------------------------------------------------------------------
   Empty state
   Mirrors .dp-kpi-card vertical rhythm so empty cards have the same visual
   hierarchy as populated sibling cards in a KPI strip:
     [38×38 icon block] → mb 14px
     [11px uppercase label] → mb 4px
     [message in value slot, sized like .dp-kpi-card__value]
   This is what makes card 3 ("Consent Coverage / Not enough data yet") look
   structurally identical to card 1/2/4 instead of cluttered top-left.
   -------------------------------------------------------------------------- */
.dp-lmc__empty[b-y87g8efjzw] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Icon now uses the same colored-block treatment as .dp-kpi-card__icon
   (38×38, border-radius 10px, neutral tint). The font-size drop from 24→16px
   is intentional — the visual weight comes from the tinted background. */
.dp-lmc__empty-icon[b-y87g8efjzw] {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md, 10px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    background: var(--dp-bg-tint, rgba(0, 0, 0, 0.04));
    color: var(--dp-text-secondary);
    margin-bottom: 16px;
}

.dp-lmc__empty-label[b-y87g8efjzw] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dp-text-muted);
    margin-bottom: 6px;
}

/* Message sits in the same vertical slot as .dp-kpi-card__value (which uses
   margin: 4px 0 8px). Slightly larger font + line-height so the slot fills
   visually even though the empty card has no big number. */
.dp-lmc__empty-msg[b-y87g8efjzw] {
    font-size: 15px;
    font-weight: 500;
    color: var(--dp-text-secondary);
    margin: 0 0 8px;
    line-height: 1.4;
}

/* Empty + CTA spacing. Visual rhythm: icon → label (gap:6) → msg (gap:6) → CTA (12px).
   The strip parent uses align-items: stretch so taller cards (vi locale) pull siblings up. */
.dp-lmc__empty-cta[b-y87g8efjzw] {
    margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Stale state — manual refresh while previous value remains visible
   -------------------------------------------------------------------------- */
.dp-lmc__stale-overlay[b-y87g8efjzw] {
    position: absolute;
    inset: 0;
    background-color: var(--dp-surface-loading);
    pointer-events: none;
    border-radius: 14px;
}

.dp-lmc__stale-bar[b-y87g8efjzw] {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 30%;
    background-color: var(--dp-interactive-primary);
    border-radius: 0 3px 0 0;
    animation: dp-lmc-stale-bar-b-y87g8efjzw 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes dp-lmc-stale-bar-b-y87g8efjzw {
    0%   { left: 0; width: 0; }
    50%  { left: 30%; width: 40%; }
    100% { left: 100%; width: 0; }
}

/* --------------------------------------------------------------------------
   Responsive — mobile drops sparkline placeholder, reduces min-height
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .dp-lmc[b-y87g8efjzw] {
        min-height: 116px;
    }
    .dp-lmc__sk-sparkline[b-y87g8efjzw] {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion — pause pulse and disable fade-in
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .dp-lmc__sk-pulse[b-y87g8efjzw] {
        animation: none;
        opacity: 0.7;
    }
    .dp-lmc--fade-in[b-y87g8efjzw] {
        animation: none;
    }
    .dp-lmc__stale-bar[b-y87g8efjzw] {
        animation: none;
        width: 30%;
    }
}
/* _content/BlazorFrontend/Components/Shared/Onboarding/ModuleGuide.razor.rz.scp.css */
/* ── ModuleGuide — Layer 3 Guided Tour ─────────────────────────────────────── */

/* Dark semi-transparent backdrop */
.module-guide-backdrop[b-0pmwq0whse] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1049;
    cursor: default;
}

/* Spotlight: white punched-out box over target element */
.module-guide-spotlight[b-0pmwq0whse] {
    position: absolute;
    z-index: 1050;
    border-radius: 6px;
    box-shadow:
        0 0 0 9999px rgba(0, 0, 0, 0.55),
        0 0 0 3px var(--dp-interactive-primary),
        0 4px 16px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}

/* Tooltip card */
.module-guide-card[b-0pmwq0whse] {
    position: fixed;
    z-index: 1051;
    width: 320px;
    background: var(--dp-surface-primary);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 1rem 1.125rem 0.875rem;
    transition: top 0.25s ease, left 0.25s ease;
}

/* Fade-in animation */
@keyframes guideCardFadeIn-b-0pmwq0whse {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.guide-fade-in[b-0pmwq0whse] {
    animation: guideCardFadeIn-b-0pmwq0whse 0.22s ease-out forwards;
}

/* Step indicator dots */
.module-guide-step-indicator[b-0pmwq0whse] {
    display: flex;
    gap: 5px;
    margin-bottom: 0.6rem;
}

.guide-dot[b-0pmwq0whse] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dp-border-default);
    transition: background 0.2s;
}

.guide-dot.active[b-0pmwq0whse] {
    background: var(--dp-interactive-primary);
    width: 20px;
    border-radius: 4px;
}

/* Step badge */
.guide-step-badge[b-0pmwq0whse] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--dp-interactive-primary);
    background: var(--dp-surface-selected);
    border-radius: 4px;
    padding: 1px 6px;
    margin-right: 0.4rem;
    vertical-align: middle;
}

/* Title */
.module-guide-title[b-0pmwq0whse] {
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

/* Description */
.module-guide-desc[b-0pmwq0whse] {
    font-size: 0.825rem;
    color: var(--dp-text-secondary);
    margin-bottom: 0.875rem;
    line-height: 1.5;
}

/* Action row */
.module-guide-actions[b-0pmwq0whse] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--dp-border-subtle);
    padding-top: 0.625rem;
    margin-top: 0.25rem;
}

/* Focus management for keyboard navigation */
.module-guide-card:focus-within[b-0pmwq0whse] {
    outline: none;
}

.module-guide-card button:focus-visible[b-0pmwq0whse] {
    outline: 2px solid var(--dp-interactive-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Dark-mode support */
[data-bs-theme="dark"] .module-guide-card[b-0pmwq0whse] {
    background: var(--dp-surface-primary);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .module-guide-title[b-0pmwq0whse] {
    color: var(--dp-text-primary);
}

[data-bs-theme="dark"] .module-guide-desc[b-0pmwq0whse] {
    color: var(--dp-text-secondary);
}

[data-bs-theme="dark"] .module-guide-actions[b-0pmwq0whse] {
    border-top-color: var(--dp-border-default);
}

/* Reduced-motion: disable animations */
@media (prefers-reduced-motion: reduce) {
    .guide-fade-in[b-0pmwq0whse] {
        animation: none;
    }

    .module-guide-spotlight[b-0pmwq0whse],
    .module-guide-card[b-0pmwq0whse] {
        transition: none;
    }
}
/* _content/BlazorFrontend/Components/Shared/Onboarding/OnboardingTooltip.razor.rz.scp.css */
/* OnboardingTooltip — scoped layout/chrome styles. Colours via --dp-* tokens. */
.tooltip-actions[b-xwn4xjlsl6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.tooltip-actions-group[b-xwn4xjlsl6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.onboarding-tooltip-close[b-xwn4xjlsl6] {
    position: absolute;
    top: 8px;
    right: 8px;
    border: 0;
    background: transparent;
    color: var(--dp-text-tertiary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
}

    .onboarding-tooltip-close:hover[b-xwn4xjlsl6] {
        background-color: var(--dp-surface-hover);
        color: var(--dp-text-primary);
    }

    .onboarding-tooltip-close:focus-visible[b-xwn4xjlsl6] {
        outline: 2px solid var(--dp-border-focus);
        outline-offset: 2px;
    }
/* _content/BlazorFrontend/Components/Shared/Onboarding/OnboardingWizard.razor.rz.scp.css */
/* ==========================================================================
   OnboardingWizard — scoped chrome tweaks layered over onboarding.css.
   Colours via --dp-* tokens only.
   ========================================================================== */

/* Large step illustration icon (brand-coloured, hover scale) */
.step-icon[b-vegxkb53hk] {
    color: var(--dp-interactive-primary);
    display: flex;
    justify-content: center;
}

    .step-icon .ds-icon[b-vegxkb53hk] {
        transition: transform 0.3s ease;
    }

    .step-icon:hover .ds-icon[b-vegxkb53hk] {
        transform: scale(1.1);
    }

/* Feature bullet check */
.feature-check[b-vegxkb53hk] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--dp-interactive-primary);
}

/* Watch-video link styled as a primary pill (anchor, so not a DsButton) */
.wizard-video-link[b-vegxkb53hk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
    border-radius: var(--radius-md, 8px);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

    .wizard-video-link:hover[b-vegxkb53hk] {
        background-color: var(--dp-interactive-primary-hover);
        color: var(--dp-text-on-primary);
    }

    .wizard-video-link:focus-visible[b-vegxkb53hk] {
        outline: 2px solid var(--dp-border-focus);
        outline-offset: 2px;
    }

/* Actions row layout (replaces Bootstrap d-flex utilities) */
.onboarding-actions-row[b-vegxkb53hk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.step-counter[b-vegxkb53hk] {
    font-size: 0.8125rem;
    color: var(--dp-text-tertiary);
    white-space: nowrap;
}

/* Close button (positioned by onboarding.css .onboarding-close; this adds the glyph chrome) */
.onboarding-close[b-vegxkb53hk] {
    border: 0;
    background: transparent;
    color: var(--dp-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
}

    .onboarding-close:hover[b-vegxkb53hk] {
        background-color: var(--dp-surface-hover);
        color: var(--dp-text-primary);
    }

    .onboarding-close:focus-visible[b-vegxkb53hk] {
        outline: 2px solid var(--dp-border-focus);
        outline-offset: 2px;
    }

@media (prefers-reduced-motion: reduce) {
    .step-icon .ds-icon[b-vegxkb53hk],
    .wizard-video-link[b-vegxkb53hk] {
        transition: none;
    }
}
/* _content/BlazorFrontend/Components/Shared/Onboarding/VideoTutorialCard.razor.rz.scp.css */
/* ==========================================================================
   VideoTutorialCard — scoped media-card styles. Colours via --dp-* tokens.
   ========================================================================== */

.vtc-card[b-gveqmlhbzg] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--dp-surface-primary);
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .vtc-card:hover[b-gveqmlhbzg] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    .vtc-card--new[b-gveqmlhbzg] {
        border-color: var(--dp-interactive-primary);
    }

.vtc-new-badge[b-gveqmlhbzg] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

/* Thumbnail */
.vtc-thumb[b-gveqmlhbzg] {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: var(--dp-surface-secondary);
}

.vtc-thumb-img[b-gveqmlhbzg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vtc-thumb-placeholder[b-gveqmlhbzg] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dp-text-tertiary);
    background-color: var(--dp-surface-secondary);
}

.vtc-play-overlay[b-gveqmlhbzg] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dp-surface-overlay);
    opacity: 0;
    transition: opacity 0.2s ease;
    text-decoration: none;
}

.vtc-card:hover .vtc-play-overlay[b-gveqmlhbzg],
.vtc-play-overlay:focus-visible[b-gveqmlhbzg] {
    opacity: 1;
}

.vtc-play-button[b-gveqmlhbzg] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.vtc-play-overlay:hover .vtc-play-button[b-gveqmlhbzg] {
    transform: scale(1.1);
}

.vtc-duration[b-gveqmlhbzg] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: var(--dp-surface-overlay);
    color: var(--dp-text-on-primary);
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
}

/* Body */
.vtc-body[b-gveqmlhbzg] {
    padding: 0.875rem 1rem;
    flex: 1 1 auto;
}

.vtc-title[b-gveqmlhbzg] {
    margin: 0 0 0.35rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.vtc-desc[b-gveqmlhbzg] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    line-height: 1.45;
}

/* Footer / progress */
.vtc-footer[b-gveqmlhbzg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--dp-border-default);
}

.vtc-progress-label[b-gveqmlhbzg] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    white-space: nowrap;
}

    .vtc-progress-label .ds-icon[b-gveqmlhbzg] {
        color: var(--dp-status-success);
    }

.vtc-progress-track[b-gveqmlhbzg] {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 999px;
    background-color: var(--dp-surface-secondary);
    overflow: hidden;
}

.vtc-progress-bar[b-gveqmlhbzg] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-color: var(--dp-interactive-primary);
}

@media (prefers-reduced-motion: reduce) {
    .vtc-card[b-gveqmlhbzg],
    .vtc-play-overlay[b-gveqmlhbzg],
    .vtc-play-button[b-gveqmlhbzg] {
        transition: none;
    }
}
/* _content/BlazorFrontend/Components/Sso/SsoProviderForm.razor.rz.scp.css */
/*
 * SsoProviderForm.razor.css
 * Scoped styles for the shared SSO provider create/edit form.
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

.dm-skeleton[b-nfufc9ol6z] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-nfufc9ol6z] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-nfufc9ol6z] {
    height: 56px;
    width: 100%;
}

.spf-callback-row[b-nfufc9ol6z] {
    margin-bottom: var(--space-2);
    font-size: 0.875rem;
}

.spf-code[b-nfufc9ol6z] {
    display: block;
    margin-top: 4px;
    padding: var(--space-2) var(--space-3);
    background-color: var(--dp-surface-secondary);
    border-radius: var(--radius-md);
    font-family: var(--dp-font-mono, monospace);
    font-size: 0.8125rem;
    color: var(--dp-text-primary);
    user-select: all;
    overflow-wrap: anywhere;
}

.spf-row-2[b-nfufc9ol6z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 767px) {
    .spf-row-2[b-nfufc9ol6z] {
        grid-template-columns: 1fr;
    }
}

.spf-field[b-nfufc9ol6z] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.spf-field--full[b-nfufc9ol6z] {
    margin-bottom: var(--space-4);
}

.spf-label[b-nfufc9ol6z] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
}

.spf-required[b-nfufc9ol6z] {
    color: var(--dp-status-danger);
}

/* ::deep required on .spf-input/.spf-input--mono: applied to InputText/
   InputSelect/InputTextArea (Microsoft built-ins), which render their own
   element internally — Blazor CSS isolation never propagates the scope
   attribute into child components, so a plain selector would never match.
   (.spf-input--sm is only ever paired with a plain native <input> in this
   file, so it doesn't need ::deep.) */
[b-nfufc9ol6z] .spf-input {
    padding: 8px 12px;
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md);
    background-color: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-size: 0.875rem;
    width: 100%;
}

[b-nfufc9ol6z] .spf-input:focus {
    outline: none;
    border-color: var(--dp-border-focus);
    box-shadow: 0 0 0 3px var(--dp-border-focus);
}

[b-nfufc9ol6z] .spf-input:disabled {
    background-color: var(--dp-surface-secondary);
    color: var(--dp-text-secondary);
}

[b-nfufc9ol6z] .spf-input--mono {
    font-family: var(--dp-font-mono, monospace);
    font-size: 0.8125rem;
}

.spf-input--sm[b-nfufc9ol6z] {
    padding: 6px 10px;
    font-size: 0.8125rem;
}

.spf-validation[b-nfufc9ol6z] {
    color: var(--dp-status-danger);
    font-size: 0.8125rem;
}

.spf-checkbox-inline[b-nfufc9ol6z] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dp-text-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

.spf-hint[b-nfufc9ol6z] {
    color: var(--dp-text-tertiary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.spf-mapping-row[b-nfufc9ol6z] {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.spf-empty[b-nfufc9ol6z] {
    text-align: center;
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
    margin: 0;
    padding: var(--space-3) 0;
}

.spf-form-actions[b-nfufc9ol6z] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
/* _content/BlazorFrontend/Components/Sso/SsoProviderSetupGuide.razor.rz.scp.css */
.sso-setup-guide[b-vdxslno8n3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    color: var(--dp-text-primary);
    line-height: 1.6;
}

.sso-setup-guide__section[b-vdxslno8n3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.sso-setup-guide__section h3[b-vdxslno8n3] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.sso-setup-guide__section p[b-vdxslno8n3],
.sso-setup-guide__section ol[b-vdxslno8n3],
.sso-setup-guide__section dl[b-vdxslno8n3] {
    margin: 0;
}

.sso-setup-guide__section ol[b-vdxslno8n3] {
    padding-inline-start: var(--space-5);
}

.sso-setup-guide__section li + li[b-vdxslno8n3],
.sso-setup-guide__section dt + dd[b-vdxslno8n3],
.sso-setup-guide__section dd + dt[b-vdxslno8n3] {
    margin-top: var(--space-2);
}

.sso-setup-guide__section dd[b-vdxslno8n3] {
    margin-inline-start: 0;
}

.sso-setup-guide__section code[b-vdxslno8n3] {
    overflow-wrap: anywhere;
    font-family: var(--dp-font-mono, monospace);
    color: var(--dp-text-primary);
}
/* _content/BlazorFrontend/Components/UniversalConsent/DsrLinkPicker.razor.rz.scp.css */
/* ─── DSR linkage picker (REQ-UC-WD-DSR-001) ──────────────────────────────────── */

/* Moved verbatim from UserProfileDetail.razor.css when this block became a shared component: CSS
   isolation scopes a rule to the component that OWNS the markup, so these rules no longer match
   anything from the page's stylesheet. Same tokens, same values — no visual change intended.

   No dark-mode block anywhere below: every --dp-* token flips itself through ds-bridge.css, so a
   second declaration would freeze one theme's colour into the other.
   No opacity is used to de-emphasise the ineligible rows either — --dp-text-secondary at 50% alpha
   measures ~2.8:1 and fails AA. De-emphasis is done with the secondary surface/text tokens. */

/* The .upd-modal-* / .upd-required rules below are a deliberate duplicate of the page's: the legend
   and the in-place create form use them, and an isolated stylesheet cannot inherit a sibling's.
   Keep them identical to UserProfileDetail.razor.css if either side is ever touched. */

.upd-modal-field[b-z4pl2fyiu9] {
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.upd-modal-label[b-z4pl2fyiu9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--dp-text-primary);
    font-size: var(--apple-font-body-size, 0.875rem);
    font-weight: 600;
}

.upd-modal-textarea[b-z4pl2fyiu9] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: var(--apple-font-body-size, 0.875rem);
    resize: vertical;
}

/* FE-BUG-1: --focus-ring is a box-shadow value, so `outline: var(--focus-ring)` was an invalid
   declaration the browser dropped — this textarea had no visible focus indicator at all. Replaced with
   a solid outline that also clears SC 1.4.11 (the DS ring alpha resolves to ~1.6:1). */
.upd-modal-textarea:focus[b-z4pl2fyiu9] {
    outline: 2px solid var(--dp-interactive-primary);
    outline-offset: 2px;
    border-color: var(--dp-interactive-primary);
}

.upd-required[b-z4pl2fyiu9] {
    color: var(--dp-status-danger);
}

.upd-dsr[b-z4pl2fyiu9] {
    margin: var(--space-3) 0 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.upd-dsr__hint[b-z4pl2fyiu9] {
    margin: var(--space-1) 0 var(--space-2);
    font-size: var(--apple-font-caption-size, 0.75rem);
    color: var(--dp-text-secondary);
}

.upd-dsr__skeleton[b-z4pl2fyiu9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.upd-dsr__skeleton-row[b-z4pl2fyiu9] {
    height: 64px;
    width: 100%;
}

.upd-dsr__retry[b-z4pl2fyiu9] {
    margin-top: var(--space-2);
}

/* FR-BW-17 scope notice — spacing only. The banner itself is the shared DsAlert (info tone), so no
   colour, surface or border is declared here and nothing new has to flip for dark mode. */
.upd-dsr__scope[b-z4pl2fyiu9] {
    margin-top: var(--space-3);
}

.upd-dsr__scope-line[b-z4pl2fyiu9] {
    margin: 0;
}

.upd-dsr__scope-line + .upd-dsr__scope-line[b-z4pl2fyiu9] {
    margin-top: var(--space-1);
}

/* Own scroll region so the modal height is independent of how many candidates exist (C-12); the
   footer lives outside .ds-modal-body, so the confirm button is always reachable without scrolling. */
.upd-dsr__list[b-z4pl2fyiu9] {
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md);
    background: var(--dp-surface-primary);
    max-height: min(300px, 38vh);
    overflow-y: auto;
}

.upd-dsr__option[b-z4pl2fyiu9] {
    position: relative; /* anchors the visually-hidden radio inside its own row */
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--dp-border-subtle);
    border-left: 3px solid transparent;
    color: var(--dp-text-primary);
    cursor: pointer;
    min-height: 64px;
    margin: 0;
}

.upd-dsr__option:last-child[b-z4pl2fyiu9] {
    border-bottom: none;
}

.upd-dsr__option:hover[b-z4pl2fyiu9] {
    background: var(--dp-surface-hover);
}

/* Selection is signalled by shape as well as colour: the radio dot fills in (below) on top of the
   tinted surface and the 3px rail. */
.upd-dsr__option--selected[b-z4pl2fyiu9] {
    background: var(--dp-surface-selected);
    border-left-color: var(--dp-interactive-primary);
}

/* The native radio is the accessible control and keeps arrow-key group navigation and the disabled
   semantics; .upd-dsr__mark is only its visual stand-in. Hidden by size+alpha rather than
   display:none / visibility:hidden, both of which would take it out of the focus order. (This is the
   one place alpha is used, and it hides a control outright — it is not the de-emphasis banned above.) */
.upd-dsr__radio[b-z4pl2fyiu9] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* Solid outline rather than the DS --ring: that token resolves to ~1.6:1 and misses SC 1.4.11. */
.upd-dsr__option:has(.upd-dsr__radio:focus-visible)[b-z4pl2fyiu9] {
    outline: 2px solid var(--dp-interactive-primary);
    outline-offset: 2px;
}

.upd-dsr__mark[b-z4pl2fyiu9] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 1.5px solid var(--dp-border-strong);
    border-radius: 50%;
    background: transparent;
}

.upd-dsr__option--selected .upd-dsr__mark[b-z4pl2fyiu9] {
    border-color: var(--dp-interactive-primary);
    background: radial-gradient(circle, var(--dp-interactive-primary) 0 45%, transparent 46%);
}

.upd-dsr__body[b-z4pl2fyiu9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    flex: 1;
}

.upd-dsr__head[b-z4pl2fyiu9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.upd-dsr__ref[b-z4pl2fyiu9] {
    font-family: var(--font-mono, monospace);
    font-size: var(--apple-font-caption-size, 0.75rem);
    color: var(--dp-interactive-primary);
    background: var(--dp-surface-input);
    border-radius: var(--radius-sm);
    padding: 2px var(--space-2);
}

.upd-dsr__meta[b-z4pl2fyiu9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    font-size: var(--apple-font-caption-size, 0.75rem);
    color: var(--dp-text-secondary);
}

.upd-dsr__meta > span[b-z4pl2fyiu9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}

/* Legal-bearing strings wrap; they are never truncated with an ellipsis. Only the email breaks
   mid-token, because a long masked address has no wrap opportunity of its own. */
.upd-dsr__email[b-z4pl2fyiu9] {
    overflow-wrap: anywhere;
}

.upd-dsr__flags[b-z4pl2fyiu9] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.upd-dsr__option--disabled[b-z4pl2fyiu9] {
    background: var(--dp-surface-secondary);
    color: var(--dp-text-secondary);
    cursor: default;
}

.upd-dsr__option--disabled:hover[b-z4pl2fyiu9] {
    background: var(--dp-surface-secondary);
}

.upd-dsr__ineligible[b-z4pl2fyiu9] {
    margin-top: var(--space-3);
}

.upd-dsr__ineligible > summary[b-z4pl2fyiu9] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    color: var(--dp-text-secondary);
    font-size: var(--apple-font-caption-size, 0.75rem);
    font-weight: 600;
    padding: var(--space-1) 0;
}

.upd-dsr__ineligible > summary:focus-visible[b-z4pl2fyiu9] {
    outline: 2px solid var(--dp-interactive-primary);
    outline-offset: 2px;
}

/* The chevron is the ONLY open/closed affordance left — summary{display:flex} above drops the
   browser's default marker. The svg is rendered by DsIcon, so it carries ITS scope id, not this
   component's: without ::deep this rule matches nothing and the chevron never rotates. */
.upd-dsr__ineligible[open] > summary[b-z4pl2fyiu9]  .ds-icon {
    transform: rotate(90deg);
}

.upd-dsr__list--ineligible[b-z4pl2fyiu9] {
    margin-top: var(--space-2);
}

/* ─── In-place DSR creation (FR-06/FR-07) ─────────────────────────────────────── */

.upd-dsr-create[b-z4pl2fyiu9] {
    background: var(--dp-surface-secondary);
    border-left: 3px solid var(--dp-interactive-primary);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.upd-dsr-create__title[b-z4pl2fyiu9] {
    margin: 0;
    font-size: var(--apple-font-body-size, 0.875rem);
    font-weight: 600;
    color: var(--dp-text-primary);
}

.upd-dsr-create__intro[b-z4pl2fyiu9] {
    margin: var(--space-1) 0 var(--space-3);
    font-size: var(--apple-font-caption-size, 0.75rem);
    color: var(--dp-text-secondary);
}

.upd-dsr-create__readonly[b-z4pl2fyiu9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
}

.upd-dsr-create__row[b-z4pl2fyiu9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.upd-dsr-create__row dt[b-z4pl2fyiu9] {
    font-size: var(--apple-font-caption-size, 0.75rem);
    color: var(--dp-text-secondary);
    font-weight: 500;
    margin: 0;
}

.upd-dsr-create__row dd[b-z4pl2fyiu9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--apple-font-body-size, 0.875rem);
    color: var(--dp-text-primary);
    overflow-wrap: anywhere;
}

.upd-dsr-create__hint[b-z4pl2fyiu9] {
    font-size: var(--apple-font-caption-size, 0.75rem);
    color: var(--dp-text-secondary);
}

.upd-dsr-create__actions[b-z4pl2fyiu9] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Candidate row stacks fully: the status badge drops to its own line and each meta item takes a
       line of its own, so nothing is squeezed at 320px. Touch target grows past 44px. */
    .upd-dsr__list[b-z4pl2fyiu9] {
        max-height: min(240px, 34vh);
    }

    .upd-dsr__option[b-z4pl2fyiu9] {
        min-height: 72px;
    }

    .upd-dsr__head[b-z4pl2fyiu9] {
        flex-direction: column;
        align-items: flex-start;
    }

    .upd-dsr__meta[b-z4pl2fyiu9] {
        flex-direction: column;
    }

    /* Stacked, primary action first — the row would otherwise squeeze two buttons into ~272px. */
    .upd-dsr-create__actions[b-z4pl2fyiu9] {
        flex-direction: column-reverse;
    }
}
/* _content/BlazorFrontend/Components/UniversalConsent/Shared/LegalBasisSelector.razor.rz.scp.css */
/* LegalBasisSelector (REQ-1, UX spec v1.3 §1.2 / §2 / §4). Layout only; colours are --dp-* tokens. */
.lbs[b-sygypee1wi] { min-width: 0; }

/* Content that spans the whole options column (alerts, current value, list mode). */
.lbs[b-sygypee1wi]  .ds-alert,
.lbs-current[b-sygypee1wi],
.lbs-search[b-sygypee1wi],
.lbs-list[b-sygypee1wi],
.lbs-pagination[b-sygypee1wi] {
    align-self: stretch;
    flex-basis: 100%;
}

.lbs-current[b-sygypee1wi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.lbs-muted[b-sygypee1wi] { color: var(--dp-text-muted); }

/* QA G-6 (UX v1.4.1 §2/§4): every option row is a 44 px touch target, in every mode and at every width.
   DsRadio is a <label> wrapping the input, so the whole row is the hit area. Specificity 0,3,0 beats
   DsRadio's `.ds-radio--stacked` (0,2,0), which would otherwise keep custom rows top-aligned. */
.lbs[b-sygypee1wi]  .ds-field-group .ds-radio {
    min-block-size: 44px;
    align-items: center;
    padding-block: var(--space-1);
}

/* Two options (horizontal): allow wrapping so a full-width row (CCPA note, current value) moves to its
   own line instead of squeezing the radios. Ds Lg + horizontal sets nowrap with specificity 0,4,0
   (DsFieldGroup.razor.css), so this selector is deliberately 0,5,0. */
.lbs.lbs--two[b-sygypee1wi]  .ds-field-group .ds-field-group-options {
    flex-wrap: wrap;
}

/* List mode: pinned selection + at most 25 rows in a bounded scroll area. */
.lbs-list[b-sygypee1wi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 18rem;
    overflow-y: auto;
    padding: var(--space-3);
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md);
    background: var(--dp-surface-primary);
}

.lbs-pinned[b-sygypee1wi] {
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--dp-border-subtle);
}

.lbs-pagination[b-sygypee1wi] {
    display: flex;
    justify-content: flex-end;
}

/* Two options sit side by side from 768 px; below that they stack (UX §4). */
@media (max-width: 767px) {
    .lbs.lbs--two[b-sygypee1wi]  .ds-field-group .ds-field-group-options {
        flex-direction: column;
        align-items: stretch;
    }

    .lbs-pagination[b-sygypee1wi] { justify-content: center; }
}
/* _content/BlazorFrontend/Components/UserGuide/UserGuideArticle.razor.rz.scp.css */
.ug-article[b-9v9xm5yk8g] {
    background-color: var(--dp-surface-page);
    color: var(--dp-text-primary);
    padding: 1rem 1.5rem 4rem;
    max-width: 760px;
    margin: 0 auto;
    outline: none;
}

.ug-article__header[b-9v9xm5yk8g] {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--dp-border-subtle);
}

.ug-article__title[b-9v9xm5yk8g] {
    color: var(--dp-text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.25;
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
}

.ug-article__summary[b-9v9xm5yk8g] {
    color: var(--dp-text-secondary);
    font-size: 1.0625rem;
    line-height: 1.55;
    margin: 0 0 0.75rem;
}

.ug-article__meta[b-9v9xm5yk8g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.ug-meta-version[b-9v9xm5yk8g] {
    background-color: var(--dp-surface-brand-subtle);
    color: var(--dp-interactive-primary);
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-full, 999px);
    font-weight: 600;
}

.ug-meta-time[b-9v9xm5yk8g] {
    color: var(--dp-text-muted);
}

.ug-meta-persona[b-9v9xm5yk8g] {
    background-color: var(--dp-status-info-bg);
    color: var(--dp-status-info);
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-full, 999px);
}

.ug-meta-lang[b-9v9xm5yk8g] {
    background-color: var(--dp-surface-secondary);
    color: var(--dp-text-secondary);
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-full, 999px);
    text-transform: uppercase;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* ============================================================
   .ug-prose — typography reset for server-rendered Markdig HTML
   All colors via --dp-* tokens.
   ::deep is needed because the rendered HTML belongs to the page,
   not the scoped component.
   ============================================================ */
.ug-prose[b-9v9xm5yk8g] {
    line-height: 1.65;
    font-size: 1rem;
}

    .ug-prose[b-9v9xm5yk8g]  h1,
    .ug-prose[b-9v9xm5yk8g]  h2,
    .ug-prose[b-9v9xm5yk8g]  h3,
    .ug-prose[b-9v9xm5yk8g]  h4 {
        color: var(--dp-text-primary);
        font-weight: 700;
        line-height: 1.3;
        margin: 1.75em 0 0.5em;
        scroll-margin-top: 5rem;
    }

    .ug-prose[b-9v9xm5yk8g]  h1 { font-size: 1.875rem; }
    .ug-prose[b-9v9xm5yk8g]  h2 { font-size: 1.5rem;  border-bottom: 1px solid var(--dp-border-subtle); padding-bottom: 0.25em; }
    .ug-prose[b-9v9xm5yk8g]  h3 { font-size: 1.25rem; }
    .ug-prose[b-9v9xm5yk8g]  h4 { font-size: 1.0625rem; }

    .ug-prose[b-9v9xm5yk8g]  p,
    .ug-prose[b-9v9xm5yk8g]  li {
        color: var(--dp-text-primary);
        margin: 0.75em 0;
    }

    .ug-prose[b-9v9xm5yk8g]  a {
        color: var(--dp-text-link);
        text-decoration: underline;
        text-underline-offset: 0.15em;
    }

        .ug-prose[b-9v9xm5yk8g]  a:hover {
            color: var(--dp-text-link-hover);
        }

        .ug-prose[b-9v9xm5yk8g]  a:focus-visible {
            outline: 2px solid var(--dp-border-focus);
            outline-offset: 2px;
            border-radius: 2px;
        }

    .ug-prose[b-9v9xm5yk8g]  blockquote {
        border-left: 4px solid var(--dp-border-strong);
        background-color: var(--dp-surface-secondary);
        color: var(--dp-text-secondary);
        margin: 1em 0;
        padding: 0.75em 1em;
        border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
    }

    .ug-prose[b-9v9xm5yk8g]  code {
        background-color: var(--dp-surface-input);
        color: var(--dp-text-primary);
        border-radius: var(--radius-xs, 3px);
        padding: 0.125em 0.375em;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.875em;
    }

    .ug-prose[b-9v9xm5yk8g]  pre {
        background-color: var(--dp-surface-secondary);
        border: 1px solid var(--dp-border-default);
        border-radius: var(--radius-md, 8px);
        padding: 1rem;
        overflow-x: auto;
    }

        .ug-prose[b-9v9xm5yk8g]  pre code {
            background-color: transparent;
            color: var(--dp-text-primary);
            padding: 0;
            font-size: 0.875rem;
        }

    .ug-prose[b-9v9xm5yk8g]  table {
        border-collapse: collapse;
        border: 1px solid var(--dp-border-default);
        width: 100%;
        margin: 1em 0;
        font-size: 0.9375rem;
    }

    .ug-prose[b-9v9xm5yk8g]  thead {
        background-color: var(--dp-surface-secondary);
    }

    .ug-prose[b-9v9xm5yk8g]  th,
    .ug-prose[b-9v9xm5yk8g]  td {
        text-align: left;
        padding: 0.5rem 0.75rem;
        color: var(--dp-text-primary);
    }

    .ug-prose[b-9v9xm5yk8g]  tbody tr + tr {
        border-top: 1px solid var(--dp-border-subtle);
    }

    .ug-prose[b-9v9xm5yk8g]  tbody tr:hover {
        background-color: var(--dp-surface-hover);
    }

    .ug-prose[b-9v9xm5yk8g]  hr {
        border: 0;
        border-top: 1px solid var(--dp-border-default);
        margin: 1.5em 0;
    }

    .ug-prose[b-9v9xm5yk8g]  img {
        max-width: 100%;
        border-radius: var(--radius-md, 8px);
        border: 1px solid var(--dp-border-default);
    }

    /* Mermaid diagram container */
    .ug-prose[b-9v9xm5yk8g]  pre.mermaid {
        background-color: var(--dp-surface-primary);
        border: 1px solid var(--dp-border-default);
        padding: 1rem;
        border-radius: var(--radius-md, 8px);
        text-align: center;
    }

    .ug-prose[b-9v9xm5yk8g]  pre.mermaid.ug-mermaid-error {
        color: var(--dp-status-danger);
        background-color: var(--dp-status-danger-bg);
        border-color: var(--dp-status-danger-border);
    }

    /* Markdig-rendered callouts (sanitizer allowlist permits class) */
    .ug-prose[b-9v9xm5yk8g]  .callout,
    .ug-prose[b-9v9xm5yk8g]  .callout-info,
    .ug-prose[b-9v9xm5yk8g]  .callout-warning,
    .ug-prose[b-9v9xm5yk8g]  .callout-danger,
    .ug-prose[b-9v9xm5yk8g]  .callout-success {
        border-left: 4px solid var(--dp-status-info);
        background-color: var(--dp-status-info-bg);
        padding: 0.75rem 1rem;
        margin: 1em 0;
        border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
        color: var(--dp-text-primary);
    }

    .ug-prose[b-9v9xm5yk8g]  .callout-warning {
        border-left-color: var(--dp-status-warning);
        background-color: var(--dp-status-warning-bg);
    }

    .ug-prose[b-9v9xm5yk8g]  .callout-danger {
        border-left-color: var(--dp-status-danger);
        background-color: var(--dp-status-danger-bg);
    }

    .ug-prose[b-9v9xm5yk8g]  .callout-success {
        border-left-color: var(--dp-status-success);
        background-color: var(--dp-status-success-bg);
    }

@media (max-width: 767.98px) {
    .ug-article[b-9v9xm5yk8g] {
        padding: 0.75rem 1rem 3rem;
    }

    .ug-article__title[b-9v9xm5yk8g] {
        font-size: 1.5rem;
    }

    .ug-prose[b-9v9xm5yk8g]  pre code {
        font-size: 0.8125rem;
    }

    .ug-prose[b-9v9xm5yk8g]  table {
        display: block;
        overflow-x: auto;
    }
}
/* _content/BlazorFrontend/Components/UserGuide/UserGuideMobileDrawer.razor.rz.scp.css */
.ug-drawer__backdrop[b-6ucepjo5vn] {
    position: fixed;
    inset: 0;
    background-color: var(--dp-surface-overlay);
    z-index: 1040;
    animation: ug-drawer-fadein-b-6ucepjo5vn 0.2s ease;
}

.ug-drawer[b-6ucepjo5vn] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 85vw;
    max-width: 360px;
    background-color: var(--dp-nav-bg);
    box-shadow: var(--dp-shadow-drawer);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    animation: ug-drawer-slidein-b-6ucepjo5vn 0.25s ease;
}

.ug-drawer__header[b-6ucepjo5vn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--dp-nav-divider);
}

.ug-drawer__title[b-6ucepjo5vn] {
    font-weight: 600;
    color: var(--dp-text-primary);
    font-size: 1rem;
}

.ug-drawer__close[b-6ucepjo5vn] {
    background: transparent;
    border: 0;
    color: var(--dp-text-secondary);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md, 8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.125rem;
}

    .ug-drawer__close:hover[b-6ucepjo5vn] {
        background-color: var(--dp-surface-hover);
        color: var(--dp-text-primary);
    }

    .ug-drawer__close:focus-visible[b-6ucepjo5vn] {
        outline: 2px solid var(--dp-border-focus);
        outline-offset: 2px;
    }

.ug-drawer__body[b-6ucepjo5vn] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem;
}

@keyframes ug-drawer-fadein-b-6ucepjo5vn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ug-drawer-slidein-b-6ucepjo5vn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@media (min-width: 768px) {
    .ug-drawer[b-6ucepjo5vn],
    .ug-drawer__backdrop[b-6ucepjo5vn] {
        display: none;
    }
}
/* _content/BlazorFrontend/Components/UserGuide/UserGuideOnThisPage.razor.rz.scp.css */
/* Nested "on this page" list, rendered inside the active UserGuideToc entry.
   No longer a sticky right-hand column — the TOC column it lives in owns the
   sticky/scroll behaviour, so this only handles indentation and link states. */
.ug-onthispage[b-7ju3vm7nog] {
    margin: 0.125rem 0 0.375rem;
}

.ug-otp__list[b-7ju3vm7nog] {
    list-style: none;
    margin: 0;
    /* Indent so the anchors read as children of the article link above them, and
       carry a rail that lines up with the article item's own left edge. */
    padding: 0 0 0 0.75rem;
    border-left: 1px solid var(--dp-border-subtle);
}

.ug-otp__link[b-7ju3vm7nog] {
    display: block;
    padding: 0.1875rem 0.5rem;
    color: var(--dp-text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    border-left: 2px solid transparent;
    line-height: 1.4;
    border-radius: 0 var(--radius-xs, 3px) var(--radius-xs, 3px) 0;
    transition: color 0.12s ease, border-color 0.12s ease;
}

    .ug-otp__link:hover[b-7ju3vm7nog] {
        color: var(--dp-text-primary);
    }

    .ug-otp__link:focus-visible[b-7ju3vm7nog] {
        outline: 2px solid var(--dp-border-focus);
        outline-offset: 2px;
    }

    .ug-otp__link--h3[b-7ju3vm7nog] {
        padding-left: 1.25rem;
        font-size: 0.78125rem;
    }

    .ug-otp__link--active[b-7ju3vm7nog] {
        color: var(--dp-interactive-primary);
        font-weight: 600;
        border-left-color: var(--dp-interactive-primary);
        background-color: var(--dp-surface-brand-subtle);
    }
/* _content/BlazorFrontend/Components/UserGuide/UserGuidePersonaSwitcher.razor.rz.scp.css */
.ug-persona[b-7au2728yc6] {
    display: inline-flex;
    background-color: var(--dp-surface-secondary);
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-full, 999px);
    padding: 2px;
    gap: 2px;
}

.ug-persona__seg[b-7au2728yc6] {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--dp-text-secondary);
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    border-radius: var(--radius-full, 999px);
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .ug-persona__seg:hover[b-7au2728yc6] {
        background-color: var(--dp-surface-hover);
        color: var(--dp-text-primary);
    }

    .ug-persona__seg:focus-visible[b-7au2728yc6] {
        outline: 2px solid var(--dp-border-focus);
        outline-offset: 2px;
    }

    .ug-persona__seg--selected[b-7au2728yc6] {
        background-color: var(--dp-interactive-primary);
        color: var(--dp-text-on-primary);
    }

        .ug-persona__seg--selected:hover[b-7au2728yc6] {
            background-color: var(--dp-interactive-primary-hover);
            color: var(--dp-text-on-primary);
        }

@media (max-width: 767.98px) {
    .ug-persona[b-7au2728yc6] {
        width: 100%;
        justify-content: space-between;
    }

    .ug-persona__seg[b-7au2728yc6] {
        flex: 1 1 0;
        text-align: center;
        padding: 0.5rem 0.5rem;
        font-size: 0.8125rem;
    }
}
/* _content/BlazorFrontend/Components/UserGuide/UserGuideSearchBox.razor.rz.scp.css */
.ug-search[b-exgvyoefwj] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--dp-surface-input);
    border: 1px solid transparent;
    border-radius: var(--radius-full, 999px);
    padding: 0.375rem 0.875rem;
    min-width: 14rem;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

    .ug-search:hover[b-exgvyoefwj] {
        background-color: var(--dp-auth-input-bg-hover);
    }

    .ug-search:focus-within[b-exgvyoefwj] {
        background-color: var(--dp-surface-input-focus);
        box-shadow: 0 0 0 4px var(--dp-border-focus);
        border-color: var(--dp-border-focus);
    }

.ug-search__icon[b-exgvyoefwj] {
    color: var(--dp-text-tertiary);
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.ug-search__input[b-exgvyoefwj] {
    flex: 1 1 auto;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--dp-text-primary);
    font-size: 0.9375rem;
    min-width: 0;
}

    .ug-search__input[b-exgvyoefwj]::placeholder {
        color: var(--dp-text-tertiary);
    }

    /* Hide the default clear-control rendered by some browsers for input[type=search] */
    .ug-search__input[b-exgvyoefwj]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }

.ug-search__clear[b-exgvyoefwj] {
    background: transparent;
    border: 0;
    color: var(--dp-text-secondary);
    border-radius: var(--radius-full, 999px);
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .ug-search__clear:hover[b-exgvyoefwj] {
        background-color: var(--dp-interactive-ghost-hover);
        color: var(--dp-text-primary);
    }

    .ug-search__clear:focus-visible[b-exgvyoefwj] {
        outline: 2px solid var(--dp-border-focus);
        outline-offset: 2px;
    }

.ug-search__count-badge[b-exgvyoefwj] {
    font-size: 0.75rem;
    color: var(--dp-interactive-primary);
    background-color: var(--dp-surface-brand-subtle);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full, 999px);
    line-height: 1.2;
    white-space: nowrap;
}

    .ug-search__count-badge:empty[b-exgvyoefwj] {
        display: none;
    }

@media (max-width: 767.98px) {
    .ug-search[b-exgvyoefwj] {
        width: 100%;
    }
}
/* _content/BlazorFrontend/Components/UserGuide/UserGuideToc.razor.rz.scp.css */
.ug-toc[b-wr75repzxb] {
    background-color: var(--dp-nav-bg);
    border-right: 1px solid var(--dp-nav-divider);
    padding: 1rem 0.75rem;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 7rem);
    position: sticky;
    top: 5rem;
}

    /* Custom scrollbar — replaces hardcoded values from old UserGuide.razor */
    .ug-toc[b-wr75repzxb]::-webkit-scrollbar {
        width: 6px;
    }

    .ug-toc[b-wr75repzxb]::-webkit-scrollbar-track {
        background-color: var(--dp-surface-secondary);
        border-radius: 3px;
    }

    .ug-toc[b-wr75repzxb]::-webkit-scrollbar-thumb {
        background-color: var(--dp-border-strong);
        border-radius: 3px;
    }

        .ug-toc[b-wr75repzxb]::-webkit-scrollbar-thumb:hover {
            background-color: var(--dp-interactive-primary);
        }

.ug-toc__section + .ug-toc__section[b-wr75repzxb] {
    margin-top: 1.25rem;
}

.ug-toc__section-label[b-wr75repzxb] {
    color: var(--dp-nav-section-label);
    text-transform: uppercase;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 0 0.5rem 0.375rem;
}

.ug-toc__list[b-wr75repzxb] {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .ug-toc__list li + li[b-wr75repzxb] {
        margin-top: 1px;
    }

.ug-toc__item[b-wr75repzxb] {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--dp-nav-text);
    text-decoration: none;
    font-size: 0.9375rem;
    border-radius: var(--radius-md, 8px);
    transition: background-color 0.12s ease, color 0.12s ease;
    line-height: 1.35;
}

    .ug-toc__item:hover[b-wr75repzxb] {
        background-color: var(--dp-nav-hover);
        color: var(--dp-text-primary);
    }

    .ug-toc__item:focus-visible[b-wr75repzxb] {
        outline: 2px solid var(--dp-border-focus);
        outline-offset: 2px;
    }

    .ug-toc__item--active[b-wr75repzxb] {
        background-color: var(--dp-nav-active-bg);
        color: var(--dp-nav-active-text);
        font-weight: 600;
    }

        .ug-toc__item--active:hover[b-wr75repzxb] {
            background-color: var(--dp-nav-active-bg);
            color: var(--dp-nav-active-text);
        }

    .ug-toc__item[b-wr75repzxb]  mark {
        background-color: var(--dp-status-warning-bg);
        color: var(--dp-status-warning-text);
        padding: 0 2px;
        border-radius: 3px;
    }

.ug-toc__empty[b-wr75repzxb] {
    color: var(--dp-text-secondary);
    text-align: center;
    padding: 2rem 1rem;
}

    .ug-toc__empty p[b-wr75repzxb] {
        margin: 0 0 0.75rem;
        font-size: 0.875rem;
    }

@media (max-width: 767.98px) {
    .ug-toc[b-wr75repzxb] {
        position: static;
        max-height: none;
        border-right: 0;
    }

        .ug-toc .ug-toc__item[b-wr75repzxb] {
            padding: 0.75rem 1rem; /* >= 44px touch target */
        }
}

.visually-hidden[b-wr75repzxb] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* _content/BlazorFrontend/Components/UserGuide/UserGuideTranslationBanner.razor.rz.scp.css */
.ug-translation-banner[b-id7cw6bhvd] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    background-color: var(--dp-status-info-bg);
    border: 1px solid var(--dp-status-info-border);
    color: var(--dp-text-primary);
    border-radius: var(--radius-md, 8px);
    padding: 0.625rem 0.875rem;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

    .ug-translation-banner i[b-id7cw6bhvd] {
        color: var(--dp-status-info);
        font-size: 1rem;
    }

.ug-translation-banner__text[b-id7cw6bhvd] {
    line-height: 1.4;
}
/* _content/BlazorFrontend/Components/Workspace/BulkActionsModal.razor.rz.scp.css */
/*
 * BulkActionsModal.razor.css
 * Scoped styles for the shared bulk-actions modal.
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

.bam-user-list[b-br9jae73t6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 220px;
    overflow-y: auto;
}

.bam-user-row[b-br9jae73t6] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background-color: var(--dp-surface-secondary);
}

.bam-avatar[b-br9jae73t6] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background-color: var(--dp-interactive-primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.bam-user-text[b-br9jae73t6] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.bam-user-text strong[b-br9jae73t6] {
    font-size: 0.875rem;
    color: var(--dp-text-primary);
}

.bam-user-text span[b-br9jae73t6] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.bam-more[b-br9jae73t6] {
    text-align: center;
    padding: var(--space-2) 0;
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

.bam-action-grid[b-br9jae73t6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

@media (max-width: 599px) {
    .bam-action-grid[b-br9jae73t6] {
        grid-template-columns: 1fr;
    }
}

.bam-action-card[b-br9jae73t6] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: var(--space-4);
    border: 2px solid var(--dp-border-default);
    border-radius: var(--radius-md);
    background-color: var(--dp-surface-primary);
    color: var(--dp-interactive-primary);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bam-action-card:hover[b-br9jae73t6] {
    border-color: var(--dp-interactive-primary);
    transform: translateY(-1px);
}

.bam-action-card--danger[b-br9jae73t6] {
    color: var(--dp-status-danger);
}

.bam-action-card h4[b-br9jae73t6] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--dp-text-primary);
}

.bam-action-card p[b-br9jae73t6] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.bam-action-card--selected-success[b-br9jae73t6] {
    border-color: var(--dp-status-success);
    background-color: var(--dp-status-success-bg);
}

.bam-action-card--selected-warning[b-br9jae73t6] {
    border-color: var(--dp-status-warning);
    background-color: var(--dp-status-warning-bg);
}

.bam-action-card--selected-danger[b-br9jae73t6] {
    border-color: var(--dp-status-danger);
    background-color: var(--dp-status-danger-bg);
}

.bam-action-card--selected-info[b-br9jae73t6] {
    border-color: var(--dp-status-info);
    background-color: var(--dp-status-info-bg);
}

.bam-processing[b-br9jae73t6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

.bam-empty[b-br9jae73t6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) 0;
    color: var(--dp-text-secondary);
    text-align: center;
}

.bam-empty h4[b-br9jae73t6] {
    margin: 0;
    color: var(--dp-text-primary);
}

.bam-empty p[b-br9jae73t6] {
    margin: 0;
    font-size: 0.875rem;
}
/* _content/BlazorFrontend/Components/Workspace/EditUserModal.razor.rz.scp.css */
/*
 * EditUserModal.razor.css
 * Scoped styles for the shared edit-user modal.
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

.eum-loading[b-2woqhbyj06] {
    padding: var(--space-2) 0;
}

.eum-row-2[b-2woqhbyj06] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 599px) {
    .eum-row-2[b-2woqhbyj06] {
        grid-template-columns: 1fr;
    }
}

.eum-field[b-2woqhbyj06] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.eum-label[b-2woqhbyj06] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
}

.eum-required[b-2woqhbyj06] {
    color: var(--dp-status-danger);
}

/* ::deep required: applied to InputText (Microsoft built-in), which renders its
   own <input> internally — Blazor CSS isolation never propagates the scope
   attribute into child components, so a plain selector would never match. */
[b-2woqhbyj06] .eum-input {
    padding: 8px 12px;
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md);
    background-color: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-size: 0.875rem;
    width: 100%;
}

[b-2woqhbyj06] .eum-input:focus {
    outline: none;
    border-color: var(--dp-border-focus);
    box-shadow: 0 0 0 3px var(--dp-border-focus);
}

.eum-validation[b-2woqhbyj06] {
    display: block;
    color: var(--dp-status-danger);
    font-size: 0.8125rem;
    margin-top: 2px;
}

.eum-switch-field[b-2woqhbyj06] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.eum-checkbox-inline[b-2woqhbyj06] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.eum-hint[b-2woqhbyj06] {
    color: var(--dp-text-tertiary);
    font-size: 0.75rem;
}
/* _content/BlazorFrontend/Components/Workspace/InviteUserModal.razor.rz.scp.css */
/*
 * InviteUserModal.razor.css
 * Scoped styles for the shared invite-user modal.
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

.ium-loading[b-dlrlqq1yd5] {
    padding: var(--space-2) 0;
}

.ium-row-2[b-dlrlqq1yd5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 599px) {
    .ium-row-2[b-dlrlqq1yd5] {
        grid-template-columns: 1fr;
    }
}

.ium-field[b-dlrlqq1yd5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ium-field--full[b-dlrlqq1yd5] {
    margin-bottom: var(--space-4);
}

.ium-label[b-dlrlqq1yd5] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
}

.ium-required[b-dlrlqq1yd5] {
    color: var(--dp-status-danger);
}

/* ::deep required: applied to InputText/InputSelect (Microsoft built-ins),
   which render their own element internally — Blazor CSS isolation never
   propagates the scope attribute into child components, so a plain selector
   would never match. */
[b-dlrlqq1yd5] .ium-input {
    padding: 8px 12px;
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md);
    background-color: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-size: 0.875rem;
    width: 100%;
}

[b-dlrlqq1yd5] .ium-input:focus {
    outline: none;
    border-color: var(--dp-border-focus);
    box-shadow: 0 0 0 3px var(--dp-border-focus);
}

.ium-validation[b-dlrlqq1yd5] {
    display: block;
    color: var(--dp-status-danger);
    font-size: 0.8125rem;
    margin-top: 2px;
}
/* _content/BlazorFrontend/Components/Workspace/RoleManagementModal.razor.rz.scp.css */
/* Role assignment follows the DS v2 overlay-task contract: one vertical decision
   flow, intrinsic sizing, and a single independently scrollable option list. */

.rmm-loading[b-9yaf4933sr],
.rmm-user-summary[b-9yaf4933sr],
.rmm-section[b-9yaf4933sr],
.rmm-role-list[b-9yaf4933sr],
.rmm-role-row[b-9yaf4933sr],
.rmm-role-text[b-9yaf4933sr],
.rmm-user-copy[b-9yaf4933sr] {
    min-width: 0;
}

.rmm-loading-block[b-9yaf4933sr] {
    width: 100%;
    height: 260px;
}

.rmm-user-summary[b-9yaf4933sr] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
}

.rmm-avatar[b-9yaf4933sr] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--soft-white);
    font-size: var(--text-lg);
    font-weight: 700;
}

.rmm-user-name[b-9yaf4933sr] {
    margin: 0;
    color: var(--text-strong);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
}

.rmm-user-email[b-9yaf4933sr] {
    display: block;
    margin-top: 2px;
    overflow-wrap: anywhere;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.rmm-status-row[b-9yaf4933sr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.rmm-current-role[b-9yaf4933sr] {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.rmm-current-role strong[b-9yaf4933sr] {
    color: var(--text-strong);
}

.rmm-section[b-9yaf4933sr] {
    padding-top: var(--space-4);
    border-top: var(--border-separator);
}

.rmm-section-title[b-9yaf4933sr] {
    margin: 0 0 var(--space-3);
    color: var(--text-strong);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
}

.rmm-assigned-list[b-9yaf4933sr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.rmm-assigned-chip[b-9yaf4933sr] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    color: var(--text-strong);
    font-size: var(--text-sm);
}

.rmm-assigned-chip strong[b-9yaf4933sr] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.rmm-empty[b-9yaf4933sr],
.rmm-empty-block[b-9yaf4933sr] {
    margin: 0;
    padding: var(--space-3) 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

.rmm-empty-block[b-9yaf4933sr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: var(--accent);
}

.rmm-empty-block p[b-9yaf4933sr] {
    margin: 0;
}

.rmm-role-list[b-9yaf4933sr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: min(42vh, 408px);
    padding-right: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

.rmm-role-row[b-9yaf4933sr] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
    border: var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

.rmm-role-row:hover[b-9yaf4933sr] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-xs);
}

.rmm-role-row--selected[b-9yaf4933sr] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.rmm-role-text[b-9yaf4933sr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rmm-role-name[b-9yaf4933sr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
    color: var(--text-strong);
    font-size: var(--text-sm);
    font-weight: 600;
}

.rmm-role-name > span:first-of-type[b-9yaf4933sr] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.rmm-role-desc[b-9yaf4933sr] {
    max-width: 62ch;
    overflow-wrap: anywhere;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.rmm-role-control[b-9yaf4933sr] {
    display: inline-flex;
    flex: 0 0 auto;
}

.rmm-role-control[b-9yaf4933sr]  .ds-switch-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 575px) {
    .rmm-user-summary[b-9yaf4933sr] {
        align-items: start;
        padding: var(--space-3);
    }

    .rmm-role-row[b-9yaf4933sr] {
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .rmm-role-list[b-9yaf4933sr] {
        max-height: 46vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rmm-role-row[b-9yaf4933sr] {
        transition: none;
    }
}
/* _content/BlazorFrontend/Layout/MainLayout.razor.rz.scp.css */
/* Figma shell: 252px/72px full-height navigation rail + a content column whose
   40px TOP row starts 12px below the viewport edge. */

.ds-shell[b-7uz5ihib1s] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-canvas);
    font-family: var(--font-body);
}

.ds-shell-body[b-7uz5ihib1s] {
    --ds-shell-content-max-width: var(--content-narrow);
    --ds-shell-current-sidebar-width: var(--sidebar-width);
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Figma Tổng quan/menu-short (338:7868): the short navigation releases its
   horizontal space to the content column. The 1371px cap is inherited by page
   layouts through --ds-shell-content-max-width; full mode remains 1188px. */
.ds-shell-body--menu-short[b-7uz5ihib1s] {
    --ds-shell-content-max-width: 1371px;
    --ds-shell-current-sidebar-width: var(--sidebar-collapsed-width);
}

.ds-shell-main[b-7uz5ihib1s] {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}

.ds-login-language[b-7uz5ihib1s] {
    position: fixed;
    z-index: 50;
    top: 38px;
    right: 38px;
}

@media (max-width: 899.98px) {
    .ds-login-language[b-7uz5ihib1s] {
        top: 16px;
        right: 16px;
    }
}

/* ── Sidebar column / mobile drawer ──────────────────────────────────────── */

.ds-sidebar-brand-link[b-7uz5ihib1s] {
    display: flex;
    width: auto;
    max-width: 180px;
    height: 40px;
    align-items: center;
    overflow: hidden;
    color: var(--text-strong);
    text-decoration: none;
}

.ds-sidebar-brand-link:hover[b-7uz5ihib1s] {
    color: var(--text-strong);
    text-decoration: none;
}

.ds-sidebar-brand-custom[b-7uz5ihib1s] {
    display: block;
    width: 95px;
    height: 32px;
    object-fit: contain;
    object-position: left center;
}

.ds-drawer[b-7uz5ihib1s] {
    position: relative;
    z-index: 25;
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-subtle);
    border-right: 1px solid var(--border-subtle);
    will-change: transform; /* own compositor layer for the slide animation */
}

.ds-drawer-scroll[b-7uz5ihib1s] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The DsSidebarNav aside scrolls internally and must fill the drawer column. */
.ds-drawer-scroll[b-7uz5ihib1s]  .ds-sidebar {
    flex: 1;
    min-height: 0;
    width: 100%;
    border-right: none; /* the drawer owns the separator */
}

/* Mobile-only user footer pinned at the drawer bottom */
.ds-drawer-user[b-7uz5ihib1s] {
    flex-shrink: 0;
    border-top: 1px solid var(--border-subtle);
    padding: 0.75rem 1rem;
    background: var(--bg-subtle);
}

.ds-drawer-user-info[b-7uz5ihib1s] {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.ds-drawer-user-actions[b-7uz5ihib1s] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ds-drawer-backdrop[b-7uz5ihib1s] {
    display: none;
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1030;
}

.ds-drawer-backdrop.show[b-7uz5ihib1s] { display: block; }

@media (max-width: 991.98px) {
    /* Mobile: sidebar is a fixed drawer sliding under the topnav */
    .ds-drawer[b-7uz5ihib1s] {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        width: 280px;
        max-width: 85vw;
        height: calc(100vh - var(--navbar-height));
        height: calc(100dvh - var(--navbar-height));
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform var(--transition-base);
    }

    .ds-drawer--open[b-7uz5ihib1s] { transform: translateX(0); }

    /* Mobile content: space for MobileBottomNav (64px + safe-area + breathing room) */
    .ds-shell-content[b-7uz5ihib1s] {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px);
    }
}

@media (min-width: 992px) {
    .ds-drawer[b-7uz5ihib1s] {
        transform: none;
        position: static;
    }

    .ds-drawer--collapsed[b-7uz5ihib1s] {
        width: var(--sidebar-collapsed-width);
        flex-basis: var(--sidebar-collapsed-width);
    }

    .ds-drawer-backdrop[b-7uz5ihib1s] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ds-drawer[b-7uz5ihib1s] { transition: none; }
}

/* ── Content column ──────────────────────────────────────────────────────── */

.ds-shell-content[b-7uz5ihib1s] {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-y: auto;
    /* Explicit: overflow-y:auto alone would compute overflow-x:auto, and legacy
       Bootstrap negative-margin rows could then open a horizontal scrollbar.
       Mirrors the old .main-content-column guard (responsive.css). */
    overflow-x: hidden;
    background: var(--bg-canvas);
    display: flex;
    flex-direction: column;
    padding: 0 24px 24px;
}

/* Legacy-page overflow guards, ported from responsive.css's .main-content-column
   scope (now inert since Phase 2 renamed the shell classes). Keeps un-reskinned
   Bootstrap pages from breaking the content column until their wave lands. */
.ds-shell-content[b-7uz5ihib1s]  .row {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

.ds-shell-content[b-7uz5ihib1s]  .row > [class*="col-"] {
    min-width: 0;
}

.ds-shell-content[b-7uz5ihib1s]  .card {
    max-width: 100%;
    overflow: hidden;
}

.ds-shell-content[b-7uz5ihib1s]  table {
    max-width: 100%;
}

.ds-shell-content[b-7uz5ihib1s]  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ds-shell-content:focus[b-7uz5ihib1s] {
    outline: none; /* skip-link target — landmark focus needs no visible ring */
}

.ds-content-inner[b-7uz5ihib1s] {
    flex: 1;
    width: 100%;
    max-width: var(--ds-shell-content-max-width, var(--content-narrow));
    margin: 0 auto;
    animation: ds-page-enter-b-7uz5ihib1s var(--transition-base) backwards;
}

/* The top nav already sits OUTSIDE this scrollport. Sticky offsets are relative
   to its top (0), not --navbar-height. No DOM reparenting: page CSS and Blazor
   event handlers keep their original owners, including calendar/menu popups. */
.ds-shell-content:not(.ds-shell-content--auth)[b-7uz5ihib1s] {
    --ds-pagehead-height: 0px;
    scroll-padding-top: calc(var(--ds-pagehead-height) + var(--space-4));
}

.ds-shell-content:where(:not(.ds-shell-content--auth))[b-7uz5ihib1s]  .ds-pagehead--sticky,
.ds-shell-content:where(:not(.ds-shell-content--auth))[b-7uz5ihib1s]  [data-ds-sticky-pagehead] {
    position: sticky;
    top: 0;
    z-index: 10; /* content/KPI < page heading < top nav (20) < overlays */
    background: var(--bg-canvas);
}

/* A header-only page wrapper, such as DPO's heading + live region, owns sticky.
   Sticking just the child would constrain it to the short wrapper's bounds. */
.ds-shell-content[b-7uz5ihib1s]  [data-ds-sticky-pagehead] .ds-pagehead,
.ds-shell-content[b-7uz5ihib1s]  [data-ds-sticky-disabled],
.ds-shell-content[b-7uz5ihib1s]  [role="dialog"] .ds-pagehead {
    position: static;
    z-index: auto;
}

@media (max-width: 991.98px) {
    .ds-shell-content[b-7uz5ihib1s] {
        padding: 0 var(--space-4) var(--space-4);
    }

    /* Put the initial mobile inset in the content, not the scrollport: sticky
       top:0 otherwise stops 16px below the nav, leaving a see-through strip. */
    .ds-content-inner[b-7uz5ihib1s] {
        padding-top: var(--space-4);
    }
}

/* Auth pages keep the plain column without the 1160px clamp (login owns its layout). */
.ds-shell-content--auth[b-7uz5ihib1s] {
    padding: 0;
}

@keyframes ds-page-enter-b-7uz5ihib1s {
    from {
        transform: translateY(6px);
    }
    to {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-content-inner[b-7uz5ihib1s] { animation: none; }
}

.ds-shell-footer[b-7uz5ihib1s] {
    min-height: 52px;
    margin-top: var(--space-6);
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--border-subtle);
    /* Keep the shell footer on the page surface in both theme modes. */
    background: var(--dp-surface-page);
}

.ds-shell-footer-text[b-7uz5ihib1s] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-subtle);
}

/* ── App-shell skeleton (first paint of every non-auth route) ────────────── */

.ds-skeleton-topnav[b-7uz5ihib1s] {
    box-sizing: border-box;
    height: 40px;
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: 12px;
    padding: 0 24px;
}

.ds-skeleton-topnav-right[b-7uz5ihib1s] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ds-skeleton-crumb[b-7uz5ihib1s] { width: 83px; height: 18px; }
.ds-skeleton-action[b-7uz5ihib1s] { width: 40px; height: 40px; }

.ds-skeleton-sidebar[b-7uz5ihib1s] {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    flex-direction: column;
    gap: 16px;
    padding: 12px;
    background: var(--bg-subtle);
    border-right: 1px solid var(--border-subtle);
}

.ds-skeleton-sidebar-head[b-7uz5ihib1s] {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ds-skeleton-brand[b-7uz5ihib1s] { width: 95px; height: 32px; }
.ds-skeleton-collapse[b-7uz5ihib1s] { width: 16px; height: 16px; }

.ds-skeleton-nav-item[b-7uz5ihib1s] { height: 36px; }
.ds-skeleton-nav-item--0[b-7uz5ihib1s] { width: 90%; }
.ds-skeleton-nav-item--1[b-7uz5ihib1s] { width: 75%; }
.ds-skeleton-nav-item--2[b-7uz5ihib1s] { width: 85%; }

.ds-skeleton-title[b-7uz5ihib1s] { height: 28px; width: 220px; margin-bottom: var(--space-4); }
.ds-skeleton-kpi-label[b-7uz5ihib1s] { height: 16px; width: 60%; }
.ds-skeleton-kpi-value[b-7uz5ihib1s] { height: 32px; width: 40%; }
.ds-skeleton-panel-title[b-7uz5ihib1s] { height: 20px; width: 180px; }
.ds-skeleton-line[b-7uz5ihib1s] { height: 14px; }
.ds-skeleton-line--full[b-7uz5ihib1s] { width: 100%; }
.ds-skeleton-line--short[b-7uz5ihib1s] { width: 85%; }

/* ── Print: unclip the shell so tables/reports render in full ───────────────
   .ds-shell fixes height to 100vh/100dvh and .ds-shell-content scrolls with
   overflow-y: auto — both are correct for the interactive app but clip
   printed output to one viewport-height page. This override MUST live here
   (scoped MainLayout.razor.css), not in the global app.css: Blazor CSS
   isolation compiles this file's selectors to `.ds-shell[b-xxxxx]`
   (specificity 0,2,0), which outranks a plain `.ds-shell` rule written in
   app.css (0,1,0) — a global override would silently lose and do nothing,
   exactly as happened before this fix. html/body's own print reset stays in
   app.css since those elements are outside this component's scope. */
@media print {
    .ds-shell[b-7uz5ihib1s] {
        height: auto;
        overflow: visible;
    }

    .ds-shell-content[b-7uz5ihib1s] {
        overflow-y: visible;
        overflow-x: visible;
    }

    .ds-shell-content[b-7uz5ihib1s]  .ds-pagehead--sticky,
    .ds-shell-content[b-7uz5ihib1s]  [data-ds-sticky-pagehead] {
        position: static;
    }
}
/* _content/BlazorFrontend/Pages/Account/Notifications.razor.rz.scp.css */
.an-page[b-ncszs7wm6v] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.an-grid[b-ncszs7wm6v],
.an-skeleton[b-ncszs7wm6v] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.an-skeleton-panel[b-ncszs7wm6v] {
    min-height: 280px;
}

.an-setting-list[b-ncszs7wm6v] {
    display: flex;
    flex-direction: column;
}

.an-setting-row[b-ncszs7wm6v],
.an-digest-row[b-ncszs7wm6v] {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    min-height: 88px;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--dp-border-subtle);
}

.an-setting-row:first-child[b-ncszs7wm6v],
.an-digest-row:first-child[b-ncszs7wm6v] {
    padding-top: 0;
}

.an-setting-row:last-child[b-ncszs7wm6v],
.an-digest-row:last-child[b-ncszs7wm6v] {
    padding-bottom: 0;
    border-bottom: 0;
}

.an-setting-icon[b-ncszs7wm6v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    color: var(--dp-interactive-primary);
    background: var(--dp-interactive-primary-subtle);
}

.an-setting-copy h3[b-ncszs7wm6v] {
    margin: 0 0 4px;
    color: var(--dp-text-primary);
    font-size: 0.9375rem;
    font-weight: 650;
}

.an-setting-copy p[b-ncszs7wm6v] {
    margin: 0;
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.an-digest-row[b-ncszs7wm6v] {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
}

.an-digest-copy[b-ncszs7wm6v] {
    min-width: 0;
}

@media (max-width: 900px) {
    .an-grid[b-ncszs7wm6v],
    .an-skeleton[b-ncszs7wm6v] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .an-setting-row[b-ncszs7wm6v] {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .an-setting-row :deep(.ds-switch)[b-ncszs7wm6v] {
        grid-column: 2;
        justify-self: start;
    }
}
/* _content/BlazorFrontend/Pages/Admin/UserGuides/Editor.razor.rz.scp.css */
.ug-editor-page[b-z4fyorfsb4] {
    padding: 1rem 1.25rem 6rem;
    background-color: var(--dp-surface-page);
    color: var(--dp-text-primary);
    min-height: calc(100vh - 60px);
}

.ug-editor-header[b-z4fyorfsb4] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.ug-editor-header__title[b-z4fyorfsb4] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.ug-editor-meta[b-z4fyorfsb4] {
    background-color: var(--dp-surface-primary);
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md, 8px);
    padding: 1rem;
    margin: 1rem 0;
}

[b-z4fyorfsb4] .ug-editor-meta .form-label {
    color: var(--dp-text-primary);
    font-size: 0.875rem;
    font-weight: 600;
}

[b-z4fyorfsb4] .ug-editor-meta .form-text {
    color: var(--dp-text-tertiary);
    font-size: 0.75rem;
}

.ug-editor-split[b-z4fyorfsb4] {
    --ug-edit-split-pct: 50%;
    display: grid;
    grid-template-columns: var(--ug-edit-split-pct) 8px 1fr;
    gap: 0;
    background-color: var(--dp-surface-primary);
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    min-height: 60vh;
}

.ug-splitter[b-z4fyorfsb4] {
    width: 8px;
    cursor: col-resize;
    background-color: var(--dp-border-default);
    transition: background-color 120ms ease-in-out;
    user-select: none;
    touch-action: none;
}

    .ug-splitter:hover[b-z4fyorfsb4],
    .ug-splitter:focus-visible[b-z4fyorfsb4] {
        background-color: var(--dp-interactive-primary);
    }

    .ug-splitter:focus-visible[b-z4fyorfsb4] {
        outline: 2px solid var(--dp-border-focus);
        outline-offset: -2px;
    }

:global(body.ug-splitter-dragging)[b-z4fyorfsb4] {
    cursor: col-resize;
    user-select: none;
}

.ug-editor-pane[b-z4fyorfsb4] {
    display: flex;
    flex-direction: column;
    min-height: 60vh;
}

.ug-editor-pane--preview[b-z4fyorfsb4] {
    border-left: 1px solid var(--dp-border-default);
    background-color: var(--dp-surface-page);
    position: relative;
}

.ug-edit-toolbar[b-z4fyorfsb4] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0.375rem 0.5rem;
    background-color: var(--dp-surface-secondary);
    border-bottom: 1px solid var(--dp-border-default);
    flex-wrap: wrap;
}

.ug-edit-toolbar__btn[b-z4fyorfsb4] {
    background: transparent;
    border: 0;
    color: var(--dp-text-secondary);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ug-edit-toolbar__btn:hover[b-z4fyorfsb4] {
        background-color: var(--dp-surface-hover);
        color: var(--dp-text-primary);
    }

    .ug-edit-toolbar__btn:focus-visible[b-z4fyorfsb4] {
        outline: 2px solid var(--dp-border-focus);
        outline-offset: 2px;
    }

.ug-edit-textarea[b-z4fyorfsb4] {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    outline: 0;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    color: var(--dp-text-primary);
    background-color: var(--dp-surface-primary);
    padding: 1rem;
    line-height: 1.55;
    min-height: 50vh;
}

    .ug-edit-textarea:focus[b-z4fyorfsb4] {
        background-color: var(--dp-surface-input-focus);
    }

.ug-edit-textarea__footer[b-z4fyorfsb4] {
    border-top: 1px solid var(--dp-border-subtle);
    padding: 0.375rem 0.875rem;
    color: var(--dp-text-tertiary);
    font-size: 0.75rem;
    background-color: var(--dp-surface-secondary);
}

.ug-preview-tag[b-z4fyorfsb4] {
    position: absolute;
    top: 0.625rem;
    right: 0.75rem;
    background-color: var(--dp-surface-brand-subtle);
    color: var(--dp-interactive-primary);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full, 999px);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ug-preview-body[b-z4fyorfsb4] {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1 1 auto;
    color: var(--dp-text-primary);
}

.ug-preview-loading[b-z4fyorfsb4],
.ug-preview-empty[b-z4fyorfsb4] {
    color: var(--dp-text-secondary);
    font-style: italic;
}

.ug-preview-error[b-z4fyorfsb4] {
    color: var(--dp-status-danger);
    background-color: var(--dp-status-danger-bg);
    border: 1px solid var(--dp-status-danger-border);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md, 8px);
}

.ug-editor-sticky-footer[b-z4fyorfsb4] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background-color: var(--dp-surface-primary);
    border-top: 1px solid var(--dp-border-default);
    box-shadow: var(--dp-shadow-sticky-footer);
    padding: 0.625rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    flex-wrap: wrap;
}

.ug-editor-sticky-footer__status[b-z4fyorfsb4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

.ug-editor-sticky-footer__hash[b-z4fyorfsb4] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--dp-text-tertiary);
}

.ug-dirty-dot[b-z4fyorfsb4] {
    width: 8px;
    height: 8px;
    background-color: var(--dp-status-warning);
    border-radius: 50%;
    animation: ug-dirty-pulse-b-z4fyorfsb4 2s ease-in-out infinite;
}

.ug-editor-sticky-footer__actions[b-z4fyorfsb4] {
    display: flex;
    gap: 0.5rem;
}

@keyframes ug-dirty-pulse-b-z4fyorfsb4 {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.ug-status-badge[b-z4fyorfsb4] {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-full, 999px);
    font-size: 0.75rem;
    font-weight: 600;
}

    .ug-status-badge--draft[b-z4fyorfsb4] {
        background-color: var(--dp-surface-secondary);
        color: var(--dp-text-secondary);
    }

    .ug-status-badge--published[b-z4fyorfsb4] {
        background-color: var(--dp-status-success-bg);
        color: var(--dp-status-success-text);
    }

    .ug-status-badge--archived[b-z4fyorfsb4] {
        background-color: var(--dp-status-warning-bg);
        color: var(--dp-status-warning-text);
    }

.ug-slug-input[b-z4fyorfsb4] {
    position: relative;
    display: block;
}

    .ug-slug-input .form-control[b-z4fyorfsb4] {
        padding-right: 4.5rem;
    }

.ug-slug-input__lock[b-z4fyorfsb4] {
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--dp-text-tertiary);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ug-slug-input__lock:hover[b-z4fyorfsb4] {
        background-color: var(--dp-surface-hover);
        color: var(--dp-text-primary);
    }

    .ug-slug-input__lock[aria-pressed="true"][b-z4fyorfsb4] {
        color: var(--dp-interactive-primary);
    }

    .ug-slug-input__lock:focus-visible[b-z4fyorfsb4] {
        outline: 2px solid var(--dp-border-focus);
        outline-offset: 2px;
    }

.ug-slug-input__validity[b-z4fyorfsb4] {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

    .ug-slug-input__validity--ok[b-z4fyorfsb4] {
        color: var(--dp-status-success);
    }

    .ug-slug-input__validity--bad[b-z4fyorfsb4] {
        color: var(--dp-status-danger);
    }

.ug-edit-toolbar__callout[b-z4fyorfsb4] {
    position: relative;
    display: inline-flex;
}

.ug-edit-toolbar__callout-menu[b-z4fyorfsb4] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    background-color: var(--dp-surface-primary);
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--dp-shadow-drawer);
    padding: 0.25rem;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ug-edit-toolbar__callout-item[b-z4fyorfsb4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 0;
    color: var(--dp-text-primary);
    text-align: left;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    font-size: 0.8125rem;
}

    .ug-edit-toolbar__callout-item:hover[b-z4fyorfsb4] {
        background-color: var(--dp-surface-hover);
    }

    .ug-edit-toolbar__callout-item:focus-visible[b-z4fyorfsb4] {
        outline: 2px solid var(--dp-border-focus);
        outline-offset: -2px;
    }

    .ug-edit-toolbar__callout-item--info i[b-z4fyorfsb4] { color: var(--dp-status-info); }
    .ug-edit-toolbar__callout-item--warning i[b-z4fyorfsb4] { color: var(--dp-status-warning); }
    .ug-edit-toolbar__callout-item--danger i[b-z4fyorfsb4] { color: var(--dp-status-danger); }
    .ug-edit-toolbar__callout-item--success i[b-z4fyorfsb4] { color: var(--dp-status-success); }

@media (max-width: 1023.98px) {
    .ug-editor-split[b-z4fyorfsb4] {
        grid-template-columns: 1fr;
    }

    .ug-splitter[b-z4fyorfsb4] {
        display: none;
    }

    .ug-editor-pane--preview[b-z4fyorfsb4] {
        border-left: 0;
        border-top: 1px solid var(--dp-border-default);
    }
}

@media (max-width: 767.98px) {
    .ug-editor-page[b-z4fyorfsb4] {
        padding: 0.75rem;
    }
}
/* _content/BlazorFrontend/Pages/Admin/UserGuides/Index.razor.rz.scp.css */
.ug-admin-page[b-p8l9enbc55] {
    padding: 1.25rem 1.5rem 3rem;
    background-color: var(--dp-surface-page);
    color: var(--dp-text-primary);
    min-height: calc(100vh - 60px);
}

.ug-admin-header[b-p8l9enbc55] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.ug-admin-header__title[b-p8l9enbc55] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dp-text-primary);
    margin: 0 0 0.25rem;
}

.ug-admin-header__subtitle[b-p8l9enbc55] {
    font-size: 0.9375rem;
    color: var(--dp-text-secondary);
    margin: 0;
}

.ug-admin-filterbar[b-p8l9enbc55] {
    background-color: var(--dp-surface-secondary);
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md, 8px);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.ug-admin-filterbar__row[b-p8l9enbc55] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
}

.ug-admin-filterbar__field[b-p8l9enbc55] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 8rem;
    flex: 0 0 auto;
}

    .ug-admin-filterbar__field span[b-p8l9enbc55] {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--dp-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .ug-admin-filterbar__field--grow[b-p8l9enbc55] {
        flex: 1 1 16rem;
    }

.ug-admin-tablewrap[b-p8l9enbc55] {
    background-color: var(--dp-surface-primary);
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

.ug-admin-loading[b-p8l9enbc55] {
    padding: 2rem;
    text-align: center;
    color: var(--dp-text-secondary);
}

/* ADR-046 W5 lô (f) — bảng danh sách bài hướng dẫn nay là DsDataTable, nên `.ug-admin-table`
   (khung, border-collapse, cỡ chữ, thead nền, th hoa/nhỏ, td padding/đường kẻ, hover hàng) đã xoá:
   `.ds-table-wrap`/`.ds-table` vẽ đúng những thứ đó. Khác biệt thị giác đã biết của lần hội tụ:
   cỡ chữ thân bảng 0.9375rem → 0.85rem và ô 12/14 → 13/20 (Comfortable), giống mọi bảng W5 khác.
   Rule `@media (max-width: 1023.98px) { .ug-admin-table { display:block; overflow-x:auto } }` cũng
   đi theo: `.ds-table-wrap` đã có overflow-x:auto ở MỌI bề rộng, giữ lại là lồng hai scroller.
   Chỉ còn `nowrap` của cột thao tác — phần `text-align: right` do DsColumn Align="right"
   (`.ds-table-cell--end`) lo nên không khai lại. `::deep` là bắt buộc: <th>/<td> do DsDataTable
   render nên mang scope id CỦA DS; `.ug-admin-table__actions` trần ở đây sẽ biên dịch thành
   `.ug-admin-table__actions[b-<Index>]` và không khớp gì. Điểm neo `.ug-admin-tablewrap` là
   <section> do chính trang viết (tiền lệ `.au-table-wrap` lô (b), `.tup-table-wrap` lô (e)). */
.ug-admin-tablewrap[b-p8l9enbc55]  .ug-admin-table__actions {
    white-space: nowrap;
}

/* Chế độ thẻ (≤767.98px, do DsDataTable mang lại): ô thao tác không in nhãn cột — cùng quy ước với
   hai bảng còn lại của lô (f) và với `.dp-grid > tbody > tr > td:not([data-label])::before` mà bảng
   viết tay dùng. Cột này có tối đa 5 nút (Sửa, Xem trước, Xuất bản|Lưu trữ, Lịch sử, Xoá) = cùng
   ngưỡng đã đo tràn 48px ở bảng công việc con DSRRequestDetail; ở đây thêm `nowrap` phía trên nên
   nhãn chắc chắn đẩy nút ra ngoài thẻ.
   CHƯA KIỂM CHỨNG TRÊN TRÌNH DUYỆT: /admin/user-guides đòi `system.userguide.edit` (chỉ SystemAdmin
   / ContentAdmin), không persona QA nào có — đã báo @tech-lead. Rule dựa trên cùng phép đo của
   bảng công việc con, không phải phỏng đoán mới. */
@media (max-width: 767.98px) {
    .ug-admin-tablewrap[b-p8l9enbc55]  td.ug-admin-table__actions::before {
        display: none;
    }
}

.ug-admin-slug[b-p8l9enbc55] {
    font-size: 0.75rem;
    color: var(--dp-text-tertiary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.ug-lang-chip[b-p8l9enbc55] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full, 999px);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

    .ug-lang-chip--vi[b-p8l9enbc55] { background-color: var(--dp-status-info-bg); color: var(--dp-status-info); }
    .ug-lang-chip--en[b-p8l9enbc55] { background-color: var(--dp-surface-brand-subtle); color: var(--dp-interactive-primary); }
    .ug-lang-chip--id[b-p8l9enbc55] { background-color: var(--dp-status-success-bg); color: var(--dp-status-success); }

.ug-status-badge[b-p8l9enbc55] {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-full, 999px);
    font-size: 0.75rem;
    font-weight: 600;
}

    .ug-status-badge--draft[b-p8l9enbc55] {
        background-color: var(--dp-surface-secondary);
        color: var(--dp-text-secondary);
    }

    .ug-status-badge--published[b-p8l9enbc55] {
        background-color: var(--dp-status-success-bg);
        color: var(--dp-status-success-text);
    }

    .ug-status-badge--archived[b-p8l9enbc55] {
        background-color: var(--dp-status-warning-bg);
        color: var(--dp-status-warning-text);
    }

.dp-actions[b-p8l9enbc55] {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
}

.ug-admin-pagination[b-p8l9enbc55] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--dp-surface-secondary);
    border-top: 1px solid var(--dp-border-default);
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
}

/* _content/BlazorFrontend/Pages/Admin/UserGuides/Preview.razor.rz.scp.css */
.ug-preview-page[b-r5a0l2peot] {
    background-color: var(--dp-surface-page);
    min-height: 100vh;
    padding-top: 2.5rem;
}

.ug-preview-ribbon[b-r5a0l2peot] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    background-color: var(--dp-status-warning-bg);
    color: var(--dp-status-warning-text);
    border-bottom: 1px solid var(--dp-status-warning-border);
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.ug-preview-page__body[b-r5a0l2peot] {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

.ug-preview-page__loading[b-r5a0l2peot] {
    text-align: center;
    color: var(--dp-text-secondary);
    padding: 4rem 2rem;
}
/* _content/BlazorFrontend/Pages/Administration/Audit.razor.rz.scp.css */
/* Audit registry composition; shared DS components own their chrome. */
.au-page[b-id29yb0cz3],
.au-page-body[b-id29yb0cz3] {
    min-width: 0;
}
.au-page-body[b-id29yb0cz3] {
    display: grid;
    gap: var(--space-4);
    padding-top: var(--space-4);
}
.au-page-body > *[b-id29yb0cz3],
.au-table-wrap[b-id29yb0cz3],
.au-pagination[b-id29yb0cz3] {
    min-width: 0;
}
.au-code[b-id29yb0cz3] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--dp-text-primary);
    background: transparent;
    white-space: normal;
    overflow-wrap: anywhere;
}
.au-table-wrap[b-id29yb0cz3]  .au-mono {
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}
.au-table-wrap[b-id29yb0cz3]  .au-muted {
    color: var(--dp-text-secondary);
}
.au-table-wrap[b-id29yb0cz3]  .ds-table-td {
    white-space: normal;
    overflow-wrap: anywhere;
}
@media (min-width: 768px) {
    /* Preserve reading widths; scroll inside the table instead of clipping key fields. */
    .au-table-wrap[b-id29yb0cz3]  .ds-table {
        min-width: 1060px;
    }
}
/* _content/BlazorFrontend/Pages/Administration/AuditLogDetail.razor.rz.scp.css */
/* Detail composition: stable Registry heading, 16px rhythm, 2:1 content and rail. */
.audit-detail-page[b-1tm3jldgwt],
.audit-detail-page-body[b-1tm3jldgwt],
.audit-detail-col[b-1tm3jldgwt],
.audit-detail-dl > div[b-1tm3jldgwt] {
    min-width: 0;
}
.audit-detail-page-body[b-1tm3jldgwt] {
    display: grid;
    gap: var(--space-4);
    padding-top: var(--space-4);
}
.audit-detail-loading[b-1tm3jldgwt] {
    display: grid;
    gap: var(--space-3);
}
.audit-detail-loading-label[b-1tm3jldgwt] {
    color: var(--dp-text-secondary);
    font-size: var(--text-sm);
}
/* ─── 2-column grid ─────────────────────────────────────────────────────── */

.audit-detail-grid[b-1tm3jldgwt] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.audit-detail-col[b-1tm3jldgwt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 991px) {
    .audit-detail-grid[b-1tm3jldgwt] {
        grid-template-columns: 1fr;
    }
}

/* ─── Definition lists ──────────────────────────────────────────────────── */

.audit-detail-dl[b-1tm3jldgwt] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
}

.audit-detail-dl__full[b-1tm3jldgwt] {
    grid-column: 1 / -1;
}

.audit-detail-dl dt[b-1tm3jldgwt] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    margin-bottom: 4px;
}

.audit-detail-dl dd[b-1tm3jldgwt] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 575px) {
    .audit-detail-dl[b-1tm3jldgwt] {
        grid-template-columns: 1fr;
    }
}

.audit-detail-code[b-1tm3jldgwt] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--dp-text-primary);
    background: var(--dp-surface-secondary);
    padding: 1px var(--space-1);
    border-radius: var(--radius-xs);
}

.audit-detail-break[b-1tm3jldgwt] {
    overflow-wrap: anywhere;
    word-break: normal;
}

.audit-detail-hash[b-1tm3jldgwt] {
    align-items: center;
}

.audit-detail-storage[b-1tm3jldgwt] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: 500;
    color: var(--dp-text-secondary);
}

/* ─── JSON payload viewer ───────────────────────────────────────────────── */

.audit-detail-json[b-1tm3jldgwt] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--dp-text-primary);
    background: var(--dp-surface-secondary);
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    max-height: 480px;
    overflow: auto;
    tab-size: 2;
}
/* _content/BlazorFrontend/Pages/Administration/EncryptionMigration.razor.rz.scp.css */
/*
 * EncryptionMigration.razor.css
 * Scoped DATA UI v2 design for /administration/encryption-migration.
 *
 * Rules:
 *   - All colors via --dp-* tokens only (no hardcoded hex/rgb).
 *   - No inline style="" in markup.
 *   - Responsive: 1-column ≤767px, 2-column 768-1279px, 3-column ≥1280px.
 *   - WCAG 2.2 AA: all text pairs meet 4.5:1 minimum contrast via tokens.
 */

.em-page[b-9z5fxu092y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ─── Alerts rail ─────────────────────────────────────────────────────────── */

.em-page[b-9z5fxu092y]  .em-alerts {
    margin: 0;
}

/* ─── Key configuration KPI strip ─────────────────────────────────────────── */

/* ─── Migration status panel ──────────────────────────────────────────────── */

.em-status-message[b-9z5fxu092y] {
    color: var(--dp-text-secondary);
    margin-bottom: var(--space-4);
}

.em-stat-grid[b-9z5fxu092y] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

@media (max-width: 1023px) {
    .em-stat-grid[b-9z5fxu092y] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599px) {
    .em-stat-grid[b-9z5fxu092y] {
        grid-template-columns: 1fr;
    }
}

.em-stat-tile[b-9z5fxu092y] {
    background-color: var(--dp-surface-secondary);
    border: 1px solid var(--dp-border-separator);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
}

.em-stat-value[b-9z5fxu092y] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    line-height: 1.2;
    margin-bottom: var(--space-1);
}

.em-stat-value--danger[b-9z5fxu092y] {
    color: var(--dp-status-danger);
}

.em-stat-value--ok[b-9z5fxu092y] {
    color: var(--dp-status-success);
}

.em-stat-label[b-9z5fxu092y] {
    font-size: 0.8125rem;
    color: var(--dp-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── Progress meter legend ───────────────────────────────────────────────── */

.em-page[b-9z5fxu092y]  .em-progress {
    margin-top: var(--space-3);
}

.em-progress-legend[b-9z5fxu092y] {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-2);
}

.em-progress-legend__item[b-9z5fxu092y] {
    font-size: 0.8125rem;
}

.em-progress-legend__item--ok[b-9z5fxu092y] {
    color: var(--dp-status-success);
}

.em-progress-legend__item--legacy[b-9z5fxu092y] {
    color: var(--dp-status-warning);
}

/* ─── Action grid (Run / Test / Guide) ────────────────────────────────────── */

.em-action-grid[b-9z5fxu092y] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
}

@media (max-width: 1279px) {
    .em-action-grid[b-9z5fxu092y] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .em-action-grid[b-9z5fxu092y] {
        grid-template-columns: 1fr;
    }
}

/* ─── Run panel ───────────────────────────────────────────────────────────── */

.em-page[b-9z5fxu092y]  .em-run-panel .ds-panel-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.em-run-controls[b-9z5fxu092y] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.em-batch-field[b-9z5fxu092y] {
    width: 120px;
    flex-shrink: 0;
}

.em-run-result[b-9z5fxu092y] {
    margin-top: var(--space-3);
}

.em-run-result-grid[b-9z5fxu092y] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.em-run-result-tile[b-9z5fxu092y] {
    text-align: center;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--dp-surface-secondary);
}

.em-run-result-tile strong[b-9z5fxu092y] {
    display: block;
    font-size: 1.25rem;
    margin-bottom: var(--space-1);
}

.em-run-result-tile small[b-9z5fxu092y] {
    color: var(--dp-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

.em-run-result-tile--ok strong[b-9z5fxu092y] {
    color: var(--dp-status-success);
}

.em-run-result-tile--neutral strong[b-9z5fxu092y] {
    color: var(--dp-text-secondary);
}

.em-run-result-tile--danger strong[b-9z5fxu092y] {
    color: var(--dp-status-danger);
}

/* ─── Test panel ──────────────────────────────────────────────────────────── */

.em-test-desc[b-9z5fxu092y] {
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
    margin-bottom: var(--space-3);
}

.em-page[b-9z5fxu092y]  .em-test-btn {
    margin-bottom: var(--space-3);
}

.em-test-result[b-9z5fxu092y] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.em-test-row[b-9z5fxu092y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--dp-border-separator);
}

.em-test-row:last-child[b-9z5fxu092y] {
    border-bottom: none;
}

.em-test-row dt[b-9z5fxu092y] {
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
    font-weight: 400;
    margin: 0;
}

.em-test-row dd[b-9z5fxu092y] {
    color: var(--dp-text-primary);
    font-size: 0.875rem;
    margin: 0;
    text-align: right;
}

.em-test-ok[b-9z5fxu092y] {
    color: var(--dp-status-success);
}

.em-test-bad[b-9z5fxu092y] {
    color: var(--dp-status-danger);
}

.em-test-warn[b-9z5fxu092y] {
    color: var(--dp-status-warning);
}

/* ─── Guide panel ─────────────────────────────────────────────────────────── */

.em-guide-list[b-9z5fxu092y] {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
}

.em-guide-list li[b-9z5fxu092y] {
    margin-bottom: var(--space-2);
    line-height: 1.5;
}

.em-guide-list li:last-child[b-9z5fxu092y] {
    margin-bottom: 0;
}

.em-guide-list[b-9z5fxu092y]  code {
    background-color: var(--dp-surface-secondary);
    color: var(--dp-text-primary);
    padding: 1px var(--space-1);
    border-radius: var(--radius-xs);
    font-size: 0.8125rem;
}

/* ─── Confirm migration modal ─────────────────────────────────────────────── */

.em-confirm-copy[b-9z5fxu092y] {
    margin: 0 0 var(--space-3);
    color: var(--dp-text-primary);
}

.em-confirm-list[b-9z5fxu092y] {
    margin: var(--space-2) 0 0 0;
    padding-left: var(--space-5);
    color: var(--dp-text-secondary);
}

.em-confirm-list li[b-9z5fxu092y] {
    margin-bottom: var(--space-1);
}
/* _content/BlazorFrontend/Pages/Administration/Licensing/Activate.razor.rz.scp.css */
/* ADR-025 — Activate bundle page. All colors come from --dp-* tokens. */

.dp-activate[b-68hus6s2zw] {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.dp-activate-dropzone[b-68hus6s2zw] {
    position: relative;
    border: 2px dashed var(--dp-border-default);
    border-radius: 0.5rem;
    background-color: var(--dp-surface-elevated);
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
    padding: 1.5rem;
}

.dp-activate-dropzone--active[b-68hus6s2zw],
.dp-activate-dropzone:hover[b-68hus6s2zw] {
    border-color: var(--dp-interactive-primary);
    background-color: var(--dp-surface-primary);
}

.dp-activate-dropzone--filled[b-68hus6s2zw] {
    border-style: solid;
    border-color: var(--dp-status-success);
}

/* InputFile renders a child component; the input does not inherit this scope. */
.dp-activate-dropzone[b-68hus6s2zw]  .dp-activate-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.dp-activate-dropzone:focus-within[b-68hus6s2zw] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.dp-activate-dropzone-content[b-68hus6s2zw] {
    pointer-events: none;
    min-width: 0;
    width: 100%;
    overflow-wrap: anywhere;
}

.dp-activate-dropzone-icon[b-68hus6s2zw] {
    display: block;
    color: var(--dp-text-secondary);
    margin-bottom: 0.75rem;
}

.dp-activate-dropzone--active .dp-activate-dropzone-icon[b-68hus6s2zw],
.dp-activate-dropzone--filled .dp-activate-dropzone-icon[b-68hus6s2zw] {
    color: var(--dp-interactive-primary);
}

.dp-activate-dropzone-text[b-68hus6s2zw] {
    color: var(--dp-text-primary);
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.dp-activate-dropzone-hint[b-68hus6s2zw] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

/* ── Actions ─────────────────────────────────────────────────────────────── */
.dp-activate-actions[b-68hus6s2zw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* ── Result ──────────────────────────────────────────────────────────────── */
.dp-activate-result[b-68hus6s2zw] {
    margin-top: var(--space-4);
}

.act-dl[b-68hus6s2zw] {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
}

.act-dl > div[b-68hus6s2zw] {
    display: contents;
}

.act-dl dt[b-68hus6s2zw] {
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    margin: 0;
}

.act-dl dd[b-68hus6s2zw] {
    font-size: 0.8125rem;
    color: var(--dp-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.act-yes[b-68hus6s2zw] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--dp-status-success-text);
}

.act-result-cta[b-68hus6s2zw] {
    margin-top: var(--space-3);
}

.lic-mono[b-68hus6s2zw] {
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

.lic-muted[b-68hus6s2zw] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--dp-text-secondary);
}
/* _content/BlazorFrontend/Pages/Administration/Licensing/Audit.razor.rz.scp.css */
/* Licensing audit journal — filters + table. Token-only styling. */

.lic-filter[b-gxes90foh0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    align-items: end;
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-3);
}

@media (max-width: 767px) {
    .lic-filter[b-gxes90foh0] {
        grid-template-columns: 1fr;
    }
}

.lic-filter__label[b-gxes90foh0] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
    margin-bottom: var(--space-1);
}

.lic-filter__count[b-gxes90foh0] {
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    text-align: right;
    padding-bottom: var(--space-2);
}

.lic-input[b-gxes90foh0] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

.lic-input:focus[b-gxes90foh0] {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}

.lic-mono[b-gxes90foh0] {
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

.lic-strong[b-gxes90foh0] {
    font-weight: 600;
    color: var(--dp-text-primary);
}

.lic-muted[b-gxes90foh0] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

.lic-link[b-gxes90foh0] {
    text-decoration: none;
    color: var(--dp-interactive-accent);
}

.lic-link:hover[b-gxes90foh0] {
    text-decoration: underline;
}

/* ── Loading skeleton ─────────────────────────────────────────────────── */
.dm-skeleton[b-gxes90foh0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-row[b-gxes90foh0] {
    height: 44px;
    width: 100%;
}
/* _content/BlazorFrontend/Pages/Administration/Licensing/CustomerEdit.razor.rz.scp.css */
/* CustomerEdit — khuôn C form. Token-only styling, no inline styles. */

.cu-back-link[b-0hw73y4c12] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: var(--space-2);
}

.cu-back-link:hover[b-0hw73y4c12] {
    color: var(--dp-text-primary);
}

[b-0hw73y4c12] .ds-panel {
    margin-bottom: var(--space-4);
}

/* ── Field rows ──────────────────────────────────────────────────────────── */
.cu-row2[b-0hw73y4c12] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.cu-row2:first-child[b-0hw73y4c12] {
    margin-top: 0;
}

.cu-row-3-9[b-0hw73y4c12] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: var(--space-4);
}

@media (max-width: 767px) {
    .cu-row2[b-0hw73y4c12],
    .cu-row-3-9[b-0hw73y4c12] {
        grid-template-columns: 1fr;
    }
}

.cu-field[b-0hw73y4c12] {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-3);
}

.cu-field:first-child[b-0hw73y4c12] {
    margin-top: 0;
}

.cu-field--top[b-0hw73y4c12] {
    margin-top: var(--space-4);
}

.cu-label[b-0hw73y4c12] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.cu-req[b-0hw73y4c12] {
    color: var(--dp-status-danger-text);
}

.cu-hint[b-0hw73y4c12] {
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.cu-input[b-0hw73y4c12],
.cu-textarea[b-0hw73y4c12] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

.cu-textarea[b-0hw73y4c12] {
    resize: vertical;
}

.cu-textarea--mono[b-0hw73y4c12] {
    font-family: monospace;
    font-size: 0.8125rem;
}

.cu-input:focus[b-0hw73y4c12],
.cu-textarea:focus[b-0hw73y4c12] {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}

.cu-input[readonly][b-0hw73y4c12] {
    background: var(--dp-surface-elevated);
    color: var(--dp-text-secondary);
}

/* ── Actions ─────────────────────────────────────────────────────────────── */
.cu-actions[b-0hw73y4c12] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* ── Loading skeleton ─────────────────────────────────────────────────────── */
.dm-skeleton[b-0hw73y4c12] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-row[b-0hw73y4c12] {
    height: 56px;
    width: 100%;
}
/* _content/BlazorFrontend/Pages/Administration/Licensing/Customers.razor.rz.scp.css */
/* Accounts hub — Customers/Contracts tabs. Token-only styling. */

.lic-tabs-wrap[b-3c8vm26xzc] {
    margin-bottom: var(--space-4);
}

.lic-result-count[b-3c8vm26xzc] {
    margin-bottom: var(--space-2);
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    text-align: right;
}

.lic-mono[b-3c8vm26xzc] {
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

.lic-strong[b-3c8vm26xzc] {
    font-weight: 600;
    color: var(--dp-text-primary);
}

.lic-muted[b-3c8vm26xzc] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

/* ADR-066 L2a — the .dm-skeleton block that stood here is gone: the waiting state is now the
   placeholder rows DsDataTable renders inside the real table, so there is no second description of
   this table's geometry to drift. */
/* _content/BlazorFrontend/Pages/Administration/Licensing/Dashboard.razor.rz.scp.css */
/* Licensing Overview — KPI grid. Token-only styling, no hardcoded colors. */

.lic-dash-kpi[b-xpjrlovxm6] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (max-width: 1279px) {
    .lic-dash-kpi[b-xpjrlovxm6] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .lic-dash-kpi[b-xpjrlovxm6] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Loading skeleton ─────────────────────────────────────────────────── */
.dm-skeleton[b-xpjrlovxm6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.dm-skeleton-title[b-xpjrlovxm6] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-card[b-xpjrlovxm6] {
    height: 104px;
    width: 100%;
}
/* _content/BlazorFrontend/Pages/Administration/Licensing/HeartbeatStatus.razor.rz.scp.css */
/* Operations hub — heartbeat table + filters. Token-only styling. */

.lic-tabs-wrap[b-086n07hcfj] {
    margin-bottom: var(--space-4);
}

/* ── Filter row ────────────────────────────────────────────────────────── */
.hb-filter[b-086n07hcfj] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

@media (max-width: 767px) {
    .hb-filter[b-086n07hcfj] {
        grid-template-columns: 1fr;
    }
}

.hb-filter__label[b-086n07hcfj] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
    margin-bottom: var(--space-1);
}

.hb-filter__count[b-086n07hcfj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    padding-bottom: var(--space-2);
}

.lic-select[b-086n07hcfj],
.lic-input[b-086n07hcfj] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

.lic-select:focus[b-086n07hcfj],
.lic-input:focus[b-086n07hcfj] {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}

/* ── Table ─────────────────────────────────────────────────────────────── */
/* ADR-046 W5: `.hb-table` (khung, border-collapse, thead th, tbody td, đường kẻ hàng cuối) đã xoá —
   bảng heartbeat nay là DsDataTable, khung/scroller/đường kẻ do `.ds-table-wrap`/`.ds-table` vẽ.
   `.hb-table-wrap` không còn là scroller (`.ds-table-wrap` đã có overflow-x:auto) nhưng được GIỮ
   làm điểm neo do TRANG sở hữu cho rule ::deep bên dưới: `<tr>`/`<td>` do DsDataTable render nên
   mang scope id của DS, một selector trần `.hb-row--suspect td` từ file này sẽ biên dịch thành
   `.hb-row--suspect td[b-<HeartbeatStatus>]` và không khớp gì cả. Tiền lệ: `.au-table-wrap` lô (b),
   `.tup-table-wrap` lô (e). `.lic-mono`/`.lic-muted` KHÔNG cần ::deep vì chúng nằm trên
   <code>/<span> do chính trang viết trong template ô (tiền lệ `.tup-muted` lô (e)). */
.hb-table-wrap[b-086n07hcfj] {
    width: 100%;
}

/* Hàng "nghi ngờ clone" — tín hiệu bảo mật, không phải trang trí: nền cảnh báo giữ nguyên giá trị
   `.hb-row--suspect td` vốn có, không tính lại. Lớp tới `<tr>` qua tham số DS `RowCssClass`. */
.hb-table-wrap[b-086n07hcfj]  .hb-row--suspect td {
    background: var(--dp-status-warning-bg);
}

.lic-mono[b-086n07hcfj] {
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

.lic-muted[b-086n07hcfj] {
    color: var(--dp-text-secondary);
}

/* ADR-066 L2a — the .dm-skeleton block that stood here is gone: the waiting state is now the
   placeholder rows DsDataTable renders inside the real table, so there is no second description of
   this table's geometry to drift. */
/* _content/BlazorFrontend/Pages/Administration/Licensing/LicenseCreate.razor.rz.scp.css */
/* LicenseCreate — khuôn C validated form. Token-only styling, no inline styles. */

.lc-back-link[b-4hyfx4cepa] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: var(--space-2);
}

.lc-back-link:hover[b-4hyfx4cepa] {
    color: var(--dp-text-primary);
}

[b-4hyfx4cepa] .ds-panel {
    margin-bottom: var(--space-4);
}

/* ── Field rows ──────────────────────────────────────────────────────────── */
.lc-row2[b-4hyfx4cepa] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.lc-row3[b-4hyfx4cepa] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.lc-row4[b-4hyfx4cepa] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.lc-row2:first-child[b-4hyfx4cepa],
.lc-row3:first-child[b-4hyfx4cepa] {
    margin-top: 0;
}

@media (max-width: 1023px) {
    .lc-row4[b-4hyfx4cepa] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .lc-row2[b-4hyfx4cepa],
    .lc-row3[b-4hyfx4cepa],
    .lc-row4[b-4hyfx4cepa] {
        grid-template-columns: 1fr;
    }
}

.lc-field[b-4hyfx4cepa] {
    display: flex;
    flex-direction: column;
}

.lc-field--top[b-4hyfx4cepa] {
    margin-top: var(--space-4);
}

.lc-label[b-4hyfx4cepa] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.lc-req[b-4hyfx4cepa] {
    color: var(--dp-status-danger-text);
}

.lc-hint[b-4hyfx4cepa] {
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.lc-input[b-4hyfx4cepa],
.lc-select[b-4hyfx4cepa],
.lc-textarea[b-4hyfx4cepa] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

.lc-textarea[b-4hyfx4cepa] {
    resize: vertical;
}

.lc-input:focus[b-4hyfx4cepa],
.lc-select:focus[b-4hyfx4cepa],
.lc-textarea:focus[b-4hyfx4cepa] {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}

/* ── Features ────────────────────────────────────────────────────────────── */
.lc-features[b-4hyfx4cepa] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (max-width: 1023px) {
    .lc-features[b-4hyfx4cepa] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .lc-features[b-4hyfx4cepa] {
        grid-template-columns: 1fr;
    }
}

.lc-warn[b-4hyfx4cepa] {
    margin-top: var(--space-3);
}

/* ── Actions ─────────────────────────────────────────────────────────────── */
.lc-actions[b-4hyfx4cepa] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
/* _content/BlazorFrontend/Pages/Administration/Licensing/LicenseDetail.razor.rz.scp.css */
/* LicenseDetail — 2-column detail grid (khuôn C). Token-only styling, no inline styles. */

.ld-back-link[b-2dinw2m4yu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: var(--space-2);
}

.ld-back-link:hover[b-2dinw2m4yu] {
    color: var(--dp-text-primary);
}

.ld-grid[b-2dinw2m4yu] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.ld-grid__col[b-2dinw2m4yu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 1279px) {
    .ld-grid[b-2dinw2m4yu] {
        grid-template-columns: 1fr;
    }
}

/* ── Definition lists ────────────────────────────────────────────────────── */
.ld-dl[b-2dinw2m4yu] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--space-6);
}

.ld-dl dt[b-2dinw2m4yu] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    margin-bottom: 4px;
}

.ld-dl dd[b-2dinw2m4yu] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--dp-text-primary);
    word-break: break-all;
}

@media (max-width: 767px) {
    .ld-dl[b-2dinw2m4yu] {
        grid-template-columns: 1fr;
    }
}

.ld-strong[b-2dinw2m4yu] {
    font-weight: 600;
    color: var(--dp-text-primary);
}

.ld-danger[b-2dinw2m4yu] {
    color: var(--dp-status-danger-text);
}

.lic-mono[b-2dinw2m4yu] {
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    word-break: break-all;
}

.lic-muted[b-2dinw2m4yu] {
    color: var(--dp-text-secondary);
}

/* ── Payload ─────────────────────────────────────────────────────────────── */
.ld-payload-meta[b-2dinw2m4yu] {
    font-size: 0.8125rem;
    line-height: 1.6;
    margin: 0 0 var(--space-2);
}

.ld-payload[b-2dinw2m4yu] {
    max-height: 400px;
    overflow: auto;
    margin: 0;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-elevated);
    border: 1px solid var(--dp-border-subtle);
    color: var(--dp-text-primary);
    font-size: 0.8125rem;
    white-space: pre;
}

/* ── Audit trail ─────────────────────────────────────────────────────────── */
.ld-audit[b-2dinw2m4yu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: 0.875rem;
    color: var(--dp-text-primary);
}

.ld-audit p[b-2dinw2m4yu] {
    margin: 0;
}

.ld-audit-label[b-2dinw2m4yu] {
    font-weight: 600;
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

.ld-link[b-2dinw2m4yu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--dp-interactive-accent);
    font-size: 0.875rem;
}

.ld-link:hover[b-2dinw2m4yu] {
    text-decoration: underline;
}

/* ── Actions (stacked full-width) ────────────────────────────────────────── */
.ld-actions[b-2dinw2m4yu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ── Dialog reason field ─────────────────────────────────────────────────── */
.ld-field[b-2dinw2m4yu] {
    display: flex;
    flex-direction: column;
}

.ld-label[b-2dinw2m4yu] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.ld-textarea[b-2dinw2m4yu] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    resize: vertical;
}

.ld-textarea:focus[b-2dinw2m4yu] {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}

/* ── Loading skeleton ─────────────────────────────────────────────────────── */
.dm-skeleton[b-2dinw2m4yu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-row[b-2dinw2m4yu] {
    height: 60px;
    width: 100%;
}
/* _content/BlazorFrontend/Pages/Administration/Licensing/LicenseList.razor.rz.scp.css */
/* Licenses hub — filter row, table cells + "Issue license" split-button.
   Token-only styling. No hardcoded colours, no inline styles. */

.lic-tabs-wrap[b-uzaro238on] {
    margin-bottom: var(--space-4);
}

/* ── Filter row ────────────────────────────────────────────────────────── */
.lic-filter[b-uzaro238on] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

@media (max-width: 767px) {
    .lic-filter[b-uzaro238on] {
        grid-template-columns: 1fr;
    }
}

.lic-filter__label[b-uzaro238on] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
    margin-bottom: var(--space-1);
}

.lic-filter__count[b-uzaro238on] {
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    text-align: right;
    padding-bottom: var(--space-2);
}

.lic-select[b-uzaro238on],
.lic-input[b-uzaro238on] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

.lic-select:focus[b-uzaro238on],
.lic-input:focus[b-uzaro238on] {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}

/* ── Table cell helpers ────────────────────────────────────────────────── */
.lic-mono[b-uzaro238on] {
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

.lic-strong[b-uzaro238on] {
    font-weight: 600;
    color: var(--dp-text-primary);
}

.lic-muted[b-uzaro238on] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

.lic-expiry[b-uzaro238on] {
    font-size: 0.8125rem;
}

.lic-expiry--warning[b-uzaro238on] {
    color: var(--dp-status-warning-text);
    font-weight: 600;
}

.lic-expiry--danger[b-uzaro238on] {
    color: var(--dp-status-danger-text);
    font-weight: 600;
}

.lic-loadmore[b-uzaro238on] {
    display: flex;
    justify-content: center;
    margin-top: var(--space-3);
}

/* ── Loading skeleton ─────────────────────────────────────────────────── */
.dm-skeleton[b-uzaro238on] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-row[b-uzaro238on] {
    height: 52px;
    width: 100%;
}

/* ── Issue split-button dropdown ───────────────────────────────────────── */
.lic-issue-split[b-uzaro238on] {
    display: inline-flex;
}

.lic-issue-split[b-uzaro238on]  .ds-dropmenu-panel {
    min-width: 16rem;
}
/* _content/BlazorFrontend/Pages/Administration/Licensing/MyLicense.razor.rz.scp.css */
/* DS detail archetype: main information + contextual rail, stacked on mobile. */
.ml-content[b-ofc6f6z8no], .ml-grid__col[b-ofc6f6z8no] { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ml-grid[b-ofc6f6z8no] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.ml-dl[b-ofc6f6z8no] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); margin: 0; }
.ml-dl > div[b-ofc6f6z8no] { min-width: 0; }
.ml-dl dt[b-ofc6f6z8no], .ml-label[b-ofc6f6z8no] { margin: 0 0 var(--space-1); color: var(--text-muted); font-size: 12px; font-weight: 500; line-height: 18px; }
.ml-dl dd[b-ofc6f6z8no] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0; color: var(--text-body); font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
.ml-hint[b-ofc6f6z8no] { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.ml-strong[b-ofc6f6z8no] { margin: 0; color: var(--text-strong); font-size: 14px; font-weight: 600; line-height: 22px; }
.ml-mono[b-ofc6f6z8no], .lic-mono[b-ofc6f6z8no] { font-family: var(--font-mono); color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.lic-muted[b-ofc6f6z8no] { color: var(--text-muted); }
.ml-identity[b-ofc6f6z8no] { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.ml-identity > div[b-ofc6f6z8no] { min-width: 0; }
.ml-customer[b-ofc6f6z8no] { margin: 0 0 var(--space-1); color: var(--text-strong); font-size: 18px; line-height: 26px; font-weight: 600; overflow-wrap: anywhere; }
.ml-icon-tile[b-ofc6f6z8no] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--text-muted); }
.ml-validity[b-ofc6f6z8no] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-5); border: var(--border-separator); border-radius: var(--radius-md); background: var(--bg-subtle); }
.ml-expiry-date[b-ofc6f6z8no] { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); color: var(--text-strong); font-size: 20px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ml-modules[b-ofc6f6z8no] { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; }
.ml-module[b-ofc6f6z8no] { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.ml-module-copy[b-ofc6f6z8no] { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ml-module-name[b-ofc6f6z8no] { color: var(--text-strong); font-size: 14px; line-height: 20px; font-weight: 500; overflow-wrap: anywhere; }
.ml-module-status[b-ofc6f6z8no] { display: flex; align-items: center; gap: var(--space-1); color: var(--success-strong); font-size: 12px; line-height: 18px; }
.ml-module-status[b-ofc6f6z8no]  .ds-icon { flex-shrink: 0; }
.ml-general[b-ofc6f6z8no] { border-top: var(--border-separator); padding-top: var(--space-4); margin-top: var(--space-5); }
.ml-empty-line[b-ofc6f6z8no] { margin: 0; font-size: 14px; }
.ml-limits > div[b-ofc6f6z8no] { padding-bottom: var(--space-3); border-bottom: var(--border-separator); }
.ml-limits dd[b-ofc6f6z8no] { font-weight: 500; font-variant-numeric: tabular-nums; }
.ml-unlimited[b-ofc6f6z8no] { display: inline-flex; align-items: center; gap: var(--space-2); }
.ml-heartbeat-summary[b-ofc6f6z8no] { display: flex; align-items: flex-start; gap: var(--space-3); }
.ml-heartbeat-summary .ml-hint[b-ofc6f6z8no] { margin-top: var(--space-1); }
.ml-heartbeat-summary--enabled .ml-icon-tile[b-ofc6f6z8no] { color: var(--info); background: var(--info-soft); }
.ml-policy-note[b-ofc6f6z8no] { display: flex; align-items: flex-start; gap: var(--space-2); border-top: var(--border-separator); margin-top: var(--space-4); padding-top: var(--space-4); }
.ml-policy-note[b-ofc6f6z8no]  .ds-icon { flex: 0 0 auto; margin-top: 1px; }
.ml-deployment-id[b-ofc6f6z8no] { display: block; padding: var(--space-3); margin-bottom: var(--space-3); border: var(--border-separator); border-radius: var(--radius-sm); background: var(--bg-subtle); color: var(--text-body); font-family: var(--font-mono); font-size: 12px; line-height: 20px; overflow-wrap: anywhere; user-select: all; }
.ml-deployment-mode[b-ofc6f6z8no] { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-separator); color: var(--text-muted); font-size: 14px; line-height: 22px; }
.ml-details[b-ofc6f6z8no] { border: var(--border-default); border-radius: var(--radius-lg); background: var(--bg-surface); }
.ml-details summary[b-ofc6f6z8no] { display: flex; align-items: center; gap: var(--space-2); list-style: none; padding: var(--space-4); color: var(--text-muted); font-size: 14px; line-height: 22px; font-weight: 500; cursor: pointer; border-radius: inherit; }
.ml-details summary[b-ofc6f6z8no]::-webkit-details-marker { display: none; }
.ml-details summary[b-ofc6f6z8no]  .ds-icon:last-child { margin-left: auto; flex-shrink: 0; }
.ml-details[open] summary[b-ofc6f6z8no]  .ds-icon:last-child { transform: rotate(180deg); }
.ml-details summary:focus-visible[b-ofc6f6z8no] { outline: var(--focus-ring); outline-offset: 2px; }
.ml-dl--single[b-ofc6f6z8no] { grid-template-columns: minmax(0, 1fr); padding: 0 var(--space-4) var(--space-4); }
.dm-skeleton[b-ofc6f6z8no] { display: flex; flex-direction: column; gap: var(--space-3); }
.dm-skeleton-row[b-ofc6f6z8no] { height: 60px; width: 100%; }
@media (max-width: 1199px) { .ml-grid[b-ofc6f6z8no] { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
    .ml-dl[b-ofc6f6z8no], .ml-modules[b-ofc6f6z8no] { grid-template-columns: minmax(0, 1fr); }
    .ml-content[b-ofc6f6z8no]  .ds-panel-head { flex-wrap: wrap; }
    .ml-content[b-ofc6f6z8no]  .ds-panel-body { padding: var(--space-4); }
}
/* _content/BlazorFrontend/Pages/Administration/Licensing/QuickIssue.razor.rz.scp.css */
/* ADR-025 — Quick Issue page. Token-only styling, no inline styles, no hardcoded colours. */

.dp-quick-issue[b-zr66s8s0xd] {
    max-width: var(--container-lg, 960px);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.qi-inline-link[b-zr66s8s0xd] {
    color: var(--dp-interactive-accent);
    text-decoration: none;
}

.qi-inline-link:hover[b-zr66s8s0xd] {
    text-decoration: underline;
}

.qi-subhint[b-zr66s8s0xd] {
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    margin: var(--space-1) 0 0;
}

.qi-subhint--lead[b-zr66s8s0xd] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0 0 var(--space-2);
}

/* ── Fields ──────────────────────────────────────────────────────────────── */
.qi-field[b-zr66s8s0xd] {
    display: flex;
    flex-direction: column;
}

.qi-field--top[b-zr66s8s0xd] {
    margin-top: var(--space-4);
}

.qi-label[b-zr66s8s0xd] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}


.qi-req[b-zr66s8s0xd] {
    color: var(--dp-status-danger-text);
}

.qi-hint[b-zr66s8s0xd] {
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}


/* ── Deployment id row (input + generate button) ─────────────────────────── */
.qi-row-dep[b-zr66s8s0xd] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    margin-top: var(--space-4);
}

.qi-dep-generate[b-zr66s8s0xd] {
    display: flex;
    align-items: flex-start;
    padding-top: 1.65rem;
}

@media (max-width: 767px) {
    .qi-row-dep[b-zr66s8s0xd] {
        grid-template-columns: 1fr;
    }

    .qi-dep-generate[b-zr66s8s0xd] {
        padding-top: 0;
    }
}


/* ── Duration presets ────────────────────────────────────────────────────── */
.qi-duration-row[b-zr66s8s0xd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-2);
}


/* ── Features / limits grids ─────────────────────────────────────────────── */
.qi-features[b-zr66s8s0xd] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.qi-payment[b-zr66s8s0xd] {
    display: grid;
    gap: var(--space-3);
}

.qi-module-group[b-zr66s8s0xd] { margin-top: var(--space-6); }

.qi-limits[b-zr66s8s0xd] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (max-width: 767px) {
    .qi-features[b-zr66s8s0xd],
    .qi-limits[b-zr66s8s0xd] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 479px) {
    .qi-features[b-zr66s8s0xd],
    .qi-limits[b-zr66s8s0xd] { grid-template-columns: 1fr; }
}

/* ── Collapsible sections ────────────────────────────────────────────────── */
.qi-unpaired[b-zr66s8s0xd],
.qi-advanced[b-zr66s8s0xd] {
    margin-top: var(--space-3);
}

.qi-unpaired-summary[b-zr66s8s0xd],
.qi-advanced-summary[b-zr66s8s0xd] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    cursor: pointer;
    user-select: none;
}

.qi-unpaired-summary:hover[b-zr66s8s0xd],
.qi-advanced-summary:hover[b-zr66s8s0xd] {
    color: var(--dp-interactive-primary);
}

.qi-advanced-body[b-zr66s8s0xd] {
    margin-top: var(--space-3);
}

/* ── Actions + error ─────────────────────────────────────────────────────── */
.qi-actions[b-zr66s8s0xd] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.qi-error[b-zr66s8s0xd] {
    margin-top: var(--space-3);
}
/* _content/BlazorFrontend/Pages/Administration/Overview.razor.rz.scp.css */
.ao-page[b-vd6pq5w9o4] {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
}

.ao-page > *[b-vd6pq5w9o4],
.ao-main-grid > *[b-vd6pq5w9o4] {
    min-width: 0;
}

.ao-quick-grid[b-vd6pq5w9o4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-5);
}

.ao-main-grid[b-vd6pq5w9o4] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: stretch;
    gap: var(--space-5);
}

.ao-main-grid[b-vd6pq5w9o4]  .ds-panel {
    height: 100%;
    min-width: 0;
}

.ao-alert-action[b-vd6pq5w9o4] {
    margin-top: var(--space-3);
}

.ao-activity-title[b-vd6pq5w9o4] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-primary, var(--text-strong));
    font-weight: 600;
}

.ao-activity-meta[b-vd6pq5w9o4] {
    overflow: hidden;
    margin-top: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.75rem;
}

.ao-activity-icon[b-vd6pq5w9o4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
}

.ao-activity-icon--brand[b-vd6pq5w9o4] {
    background: var(--color-bg-surface-brand-secondary, var(--accent-soft));
    color: var(--color-text-brand, var(--accent));
}

.ao-activity-icon--success[b-vd6pq5w9o4] {
    background: var(--color-bg-surface-success-secondary, var(--success-soft));
    color: var(--color-text-success, var(--success));
}

.ao-activity-icon--info[b-vd6pq5w9o4],
.ao-activity-icon--cyan[b-vd6pq5w9o4] {
    background: var(--color-bg-surface-info-secondary, var(--info-soft));
    color: var(--color-text-info, var(--info));
}

.ao-activity-icon--neutral[b-vd6pq5w9o4] {
    background: var(--color-bg-surface-base-tertiary, var(--bg-inset));
    color: var(--color-text-secondary, var(--text-muted));
}

.ao-status-list[b-vd6pq5w9o4] {
    display: grid;
    gap: var(--space-5);
}

.ao-status-item[b-vd6pq5w9o4] {
    display: grid;
    gap: var(--space-2);
}

.ao-status-item small[b-vd6pq5w9o4],
.ao-status-footer time[b-vd6pq5w9o4] {
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.75rem;
}

.ao-status-footer[b-vd6pq5w9o4] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    color: var(--color-text-primary, var(--text-body));
    font-size: 0.75rem;
}

@media (max-width: 991.98px) {
    .ao-main-grid[b-vd6pq5w9o4] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 699.98px) {
    .ao-quick-grid[b-vd6pq5w9o4] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/BlazorFrontend/Pages/Administration/Permissions/AbacRuleManagement.razor.rz.scp.css */
/*
 * AbacRuleManagement.razor.css
 * Scoped styles for /admin/permissions/abac-rules (ABAC rule list).
 * Datanomics.Ds design system — --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

/* ── Loading skeleton ──────────────────────────────────────────────── */
.dm-skeleton[b-08nipk28ly] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-08nipk28ly] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-08nipk28ly] {
    height: 56px;
    width: 100%;
}

/* ── KPI strip ─────────────────────────────────────────────────────── */
.abac-kpi-strip[b-08nipk28ly] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 991px) {
    .abac-kpi-strip[b-08nipk28ly] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .abac-kpi-strip[b-08nipk28ly] {
        grid-template-columns: 1fr;
    }
}

/* ── Table ─────────────────────────────────────────────────────────── */
.abac-table-wrap[b-08nipk28ly] {
    overflow-x: auto;
    width: 100%;
}

.abac-table[b-08nipk28ly] {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.abac-table thead th[b-08nipk28ly] {
    padding: var(--space-3) var(--space-4);
    background: var(--dp-surface-secondary);
    border-bottom: 1px solid var(--dp-border-separator);
    color: var(--dp-text-secondary);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.abac-table tbody td[b-08nipk28ly] {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--dp-border-subtle);
    vertical-align: middle;
}

.abac-table tbody tr:hover td[b-08nipk28ly] {
    background: var(--dp-surface-hover);
}

.abac-row--selected td[b-08nipk28ly] {
    background: var(--dp-surface-selected);
}

.abac-col-check[b-08nipk28ly] {
    width: 44px;
    text-align: center;
}

.abac-col-actions[b-08nipk28ly] {
    width: 140px;
    text-align: right;
}

.abac-row-actions[b-08nipk28ly] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    white-space: nowrap;
}

.abac-rule-name[b-08nipk28ly] {
    font-weight: 600;
    color: var(--dp-text-primary);
}

.abac-rule-desc[b-08nipk28ly] {
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
    FR-30 — a rule the permission engine cannot evaluate. Deliberately NOT truncated like the description
    above it: the reason is the instruction for repairing the rule, so it wraps rather than ends in an
    ellipsis. Warning tokens are the same trio the Rule Builder badge uses, so the two screens read as one
    fact (light 4.56:1, dark 6.6:1 — both above the 4.5:1 floor for this size).
*/
.abac-unevaluable[b-08nipk28ly] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    margin-top: var(--space-1);
    max-width: 280px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--dp-status-warning-text);
}

.abac-res-action[b-08nipk28ly] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--dp-text-tertiary);
}

.abac-resource[b-08nipk28ly] {
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-secondary);
    color: var(--dp-text-primary);
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
}

.abac-meta[b-08nipk28ly] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    white-space: nowrap;
}

/* ── Delete modal body ─────────────────────────────────────────────── */
.abac-delete-body[b-08nipk28ly] {
    margin: 0 0 var(--space-3);
    color: var(--dp-text-primary);
}
/* _content/BlazorFrontend/Pages/Administration/Permissions/Dashboard.razor.rz.scp.css */
/*
 * Dashboard.razor.css
 * Scoped styles for /admin/permissions/dashboard (permission management dashboard).
 * Datanomics.Ds design system — --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

/* ADR-066 L2a — the .dm-skeleton block that stood here is gone: the waiting state is now the
   placeholder rows DsDataTable renders inside the recent-activities table, so there is no second
   description of that table's geometry to drift. */

/* ── Layout grids ──────────────────────────────────────────────────── */
.pdb-kpi-strip[b-m0udb03a5x] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.pdb-tools-grid[b-m0udb03a5x] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 991px) {
    .pdb-kpi-strip[b-m0udb03a5x] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pdb-tools-grid[b-m0udb03a5x] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .pdb-kpi-strip[b-m0udb03a5x] {
        grid-template-columns: 1fr;
    }
}

/* ── Search panel ──────────────────────────────────────────────────── */
.pdb-search-row[b-m0udb03a5x] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.pdb-search-input[b-m0udb03a5x] {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

.pdb-search-input:focus[b-m0udb03a5x] {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}

.pdb-results[b-m0udb03a5x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-3);
}

.pdb-result-item[b-m0udb03a5x] {
    display: flex;
    flex-direction: column;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-secondary);
}

.pdb-result-name[b-m0udb03a5x] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.pdb-result-desc[b-m0udb03a5x] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

/* ── Filter panel ──────────────────────────────────────────────────── */
.pdb-filter-body[b-m0udb03a5x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ── Quick actions ─────────────────────────────────────────────────── */
.pdb-quick-actions[b-m0udb03a5x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ── Table cells ───────────────────────────────────────────────────── */
.pdb-cell-strong[b-m0udb03a5x] {
    font-weight: 600;
    color: var(--dp-text-primary);
}

.pdb-cell-muted[b-m0udb03a5x] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

/* ── Modal form fields ─────────────────────────────────────────────── */
.pdb-field[b-m0udb03a5x] {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-4);
}

.pdb-label[b-m0udb03a5x] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

/* ::deep required: applied to InputText/InputSelect/InputTextArea (Microsoft
   built-ins), which render their own element internally — Blazor CSS isolation
   never propagates the scope attribute into child components, so a plain
   selector would never match. (.pdb-search-input above is a plain native
   <input>, so it doesn't need ::deep.) */
[b-m0udb03a5x] .pdb-input,
[b-m0udb03a5x] .pdb-select,
[b-m0udb03a5x] .pdb-textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

[b-m0udb03a5x] .pdb-textarea {
    resize: vertical;
}

[b-m0udb03a5x] .pdb-input:focus,
[b-m0udb03a5x] .pdb-select:focus,
[b-m0udb03a5x] .pdb-textarea:focus {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}

.pdb-validation[b-m0udb03a5x] {
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-status-danger);
}

.pdb-modal-foot[b-m0udb03a5x] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-5);
}
/* _content/BlazorFrontend/Pages/Administration/Permissions/PermissionDashboard.razor.rz.scp.css */
/*
 * PermissionDashboard.razor.css
 * Scoped styles for /admin/permissions (RBAC/ABAC analytics dashboard).
 * Datanomics.Ds design system — --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

/* ── Loading skeleton ──────────────────────────────────────────────── */
.dm-skeleton[b-6nmonigpt3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-6nmonigpt3] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-6nmonigpt3] {
    height: 56px;
    width: 100%;
}

/* ── Layout grids ──────────────────────────────────────────────────── */
.pd-kpi-strip[b-6nmonigpt3] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.pd-two-col[b-6nmonigpt3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 991px) {
    .pd-kpi-strip[b-6nmonigpt3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-two-col[b-6nmonigpt3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .pd-kpi-strip[b-6nmonigpt3] {
        grid-template-columns: 1fr;
    }
}

/* ── Chart frame ───────────────────────────────────────────────────── */
.pd-chart-frame[b-6nmonigpt3] {
    position: relative;
    height: 260px;
}

.pd-chart-frame .dp-chart-md[b-6nmonigpt3] {
    width: 100%;
    height: 100%;
}

/* ── Activity feed ─────────────────────────────────────────────────── */
.pd-activity-feed[b-6nmonigpt3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.pd-activity-summary[b-6nmonigpt3] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pd-activity-item[b-6nmonigpt3] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.pd-activity-dot[b-6nmonigpt3] {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: var(--radius-full);
}

.pd-activity-dot--allowed[b-6nmonigpt3] {
    background: var(--dp-status-success);
}

.pd-activity-dot--denied[b-6nmonigpt3] {
    background: var(--dp-status-danger);
}

.pd-activity-body[b-6nmonigpt3] {
    min-width: 0;
    flex: 1 1 auto;
}

.pd-activity-row[b-6nmonigpt3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.pd-activity-user[b-6nmonigpt3] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-activity-meta[b-6nmonigpt3] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--dp-text-tertiary);
}

.pd-activity-permission[b-6nmonigpt3] {
    margin-top: 2px;
    color: var(--dp-text-primary);
    font-family: var(--font-family-mono, monospace);
    font-size: 0.75rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.pd-activity-reason[b-6nmonigpt3] {
    margin-top: var(--space-1);
    color: var(--dp-status-danger);
    font-size: 0.75rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.pd-activity-resource[b-6nmonigpt3] {
    color: var(--dp-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-activity-sep[b-6nmonigpt3] {
    color: var(--dp-text-tertiary);
}

/* ── Top permissions list ──────────────────────────────────────────── */
.pd-perm-list[b-6nmonigpt3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.pd-perm-head[b-6nmonigpt3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.pd-perm-identity[b-6nmonigpt3] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.pd-perm-name[b-6nmonigpt3] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--dp-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-perm-code[b-6nmonigpt3] {
    color: var(--dp-text-tertiary);
    font-family: var(--font-family-mono, monospace);
    font-size: 0.6875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-perm-count[b-6nmonigpt3] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    font-variant-numeric: tabular-nums;
}

.pd-perm-cat[b-6nmonigpt3] {
    font-size: 0.75rem;
    color: var(--dp-text-tertiary);
}

/* ── Quick-actions grid ────────────────────────────────────────────── */
.pd-actions-grid[b-6nmonigpt3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
}

@media (max-width: 767px) {
    .pd-actions-grid[b-6nmonigpt3] {
        grid-template-columns: 1fr;
    }
}
/* _content/BlazorFrontend/Pages/Administration/Permissions/PermissionMatrix.razor.rz.scp.css */
/*
 * PermissionMatrix.razor.css
 * Scoped styles for /admin/permissions/matrix (role × permission grid).
 * Datanomics.Ds design system — --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

/* ── Loading skeleton ──────────────────────────────────────────────── */
.dm-skeleton[b-2chw7mi8z5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-2chw7mi8z5] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-2chw7mi8z5] {
    height: 56px;
    width: 100%;
}

/* ── Matrix table ──────────────────────────────────────────────────── */
.pm-table-wrap[b-2chw7mi8z5] {
    overflow-x: auto;
    width: 100%;
}

.pm-table[b-2chw7mi8z5] {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.pm-table thead th[b-2chw7mi8z5] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: var(--space-3) var(--space-4);
    background: var(--dp-surface-secondary);
    border-bottom: 1px solid var(--dp-border-separator);
    color: var(--dp-text-secondary);
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.pm-table tbody td[b-2chw7mi8z5] {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--dp-border-subtle);
    vertical-align: middle;
    text-align: center;
}

.pm-table tbody tr:hover td[b-2chw7mi8z5] {
    background: var(--dp-surface-hover);
}

/* Sticky permission column */
.pm-col-perm[b-2chw7mi8z5] {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 280px;
    text-align: left !important;
    background: var(--dp-surface-primary);
}

.pm-table thead th.pm-col-perm[b-2chw7mi8z5] {
    z-index: 4;
    background: var(--dp-surface-secondary);
}

.pm-table tbody tr:hover td.pm-col-perm[b-2chw7mi8z5] {
    background: var(--dp-surface-hover);
}

.pm-col-role[b-2chw7mi8z5] {
    min-width: 116px;
}

.pm-role-head[b-2chw7mi8z5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    color: var(--dp-text-primary);
}

.pm-perm-name[b-2chw7mi8z5] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pm-perm-title[b-2chw7mi8z5] {
    font-weight: 600;
    color: var(--dp-text-primary);
}

.pm-perm-desc[b-2chw7mi8z5] {
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.pm-perm-level[b-2chw7mi8z5] {
    margin-top: 2px;
    font-size: 0.6875rem;
    color: var(--dp-text-tertiary);
}

.pm-cell[b-2chw7mi8z5] {
    width: 116px;
}

.pm-check[b-2chw7mi8z5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pm-check--yes[b-2chw7mi8z5] {
    color: var(--dp-status-success);
}

.pm-check--no[b-2chw7mi8z5] {
    color: var(--dp-status-danger);
}

/* ── Pagination ────────────────────────────────────────────────────── */
.pm-pagination[b-2chw7mi8z5] {
    margin-top: var(--space-4);
}

/* ── Legend ────────────────────────────────────────────────────────── */
.pm-legend[b-2chw7mi8z5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

@media (max-width: 767px) {
    .pm-legend[b-2chw7mi8z5] {
        grid-template-columns: 1fr;
    }
}

.pm-legend-head[b-2chw7mi8z5] {
    margin: 0 0 var(--space-3);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.pm-legend-list[b-2chw7mi8z5] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pm-legend-list li[b-2chw7mi8z5] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}
/* _content/BlazorFrontend/Pages/Administration/Permissions/PermissionTesting.razor.rz.scp.css */
/*
 * PermissionTesting.razor.css
 * Scoped styles for /admin/permissions/testing (permission testing lab).
 * Datanomics.Ds design system — --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

/* ── Layout ────────────────────────────────────────────────────────── */
.pt-grid[b-abhbol4vsg] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

@media (max-width: 991px) {
    .pt-grid[b-abhbol4vsg] {
        grid-template-columns: 1fr;
    }
}

.pt-main[b-abhbol4vsg],
.pt-side[b-abhbol4vsg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* ── Scenarios ─────────────────────────────────────────────────────── */
.pt-scenarios[b-abhbol4vsg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 70vh;
    overflow-y: auto;
}

.pt-scenario[b-abhbol4vsg] {
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-md);
    background: var(--dp-surface-secondary);
    padding: var(--space-3);
}

.pt-scenario--selected[b-abhbol4vsg] {
    border-color: var(--dp-border-interactive);
}

.pt-scenario-head[b-abhbol4vsg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.pt-scenario-actions[b-abhbol4vsg] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

.pt-scenario-fields[b-abhbol4vsg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (max-width: 575px) {
    .pt-scenario-fields[b-abhbol4vsg] {
        grid-template-columns: 1fr;
    }
}

.pt-scenario-desc[b-abhbol4vsg] {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-3);
}

.pt-label[b-abhbol4vsg] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.pt-textarea[b-abhbol4vsg] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    resize: vertical;
}

.pt-textarea:focus[b-abhbol4vsg] {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}

.pt-scenario-result[b-abhbol4vsg] {
    margin-top: var(--space-3);
}

.pt-result-line[b-abhbol4vsg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.pt-result-time[b-abhbol4vsg] {
    font-size: 0.75rem;
    color: var(--dp-text-tertiary);
}

.pt-result-details[b-abhbol4vsg] {
    margin-top: var(--space-1);
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

/* ── Quick test ────────────────────────────────────────────────────── */
.pt-quick-fields[b-abhbol4vsg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.pt-quick-result[b-abhbol4vsg] {
    margin-bottom: var(--space-4);
}

/* ── Summary ───────────────────────────────────────────────────────── */
.pt-summary-stats[b-abhbol4vsg] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    text-align: center;
}

.pt-stat[b-abhbol4vsg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.pt-stat-value[b-abhbol4vsg] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dp-text-primary);
    font-variant-numeric: tabular-nums;
}

.pt-stat-value--ok[b-abhbol4vsg] {
    color: var(--dp-status-success);
}

.pt-stat-value--fail[b-abhbol4vsg] {
    color: var(--dp-status-danger);
}

.pt-stat-label[b-abhbol4vsg] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.pt-summary-rate[b-abhbol4vsg] {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pt-summary-rate-label[b-abhbol4vsg] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    text-align: center;
}

.pt-summary-lastrun[b-abhbol4vsg] {
    margin: var(--space-3) 0 0;
    font-size: 0.75rem;
    color: var(--dp-text-tertiary);
    text-align: center;
}

/* ── Templates ─────────────────────────────────────────────────────── */
.pt-templates[b-abhbol4vsg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* _content/BlazorFrontend/Pages/Administration/Permissions/RoleManagement.razor.rz.scp.css */
/*
 * RoleManagement.razor.css
 * Scoped styles for /admin/permissions/roles (RBAC role management — LIVE screen).
 * Datanomics.Ds design system — --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

/* ── Loading skeleton ──────────────────────────────────────────────── */
.dm-skeleton[b-gzoq0a158d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-gzoq0a158d] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-gzoq0a158d] {
    height: 56px;
    width: 100%;
}

/* ── Table cells ───────────────────────────────────────────────────── */
.rm-role-cell[b-gzoq0a158d] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.rm-role-icon[b-gzoq0a158d] {
    display: inline-flex;
    color: var(--dp-text-secondary);
}

.rm-role-name[b-gzoq0a158d] {
    font-weight: 600;
    color: var(--dp-text-primary);
}

.rm-muted[b-gzoq0a158d] {
    color: var(--dp-text-secondary);
}

.rm-row-actions[b-gzoq0a158d] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    white-space: nowrap;
}

/* ── Details modal ─────────────────────────────────────────────────── */
.rm-detail-grid[b-gzoq0a158d] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

@media (max-width: 575px) {
    .rm-detail-grid[b-gzoq0a158d] {
        grid-template-columns: 1fr;
    }
}

.rm-detail-head[b-gzoq0a158d] {
    margin: 0 0 var(--space-3);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.rm-detail-list[b-gzoq0a158d] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rm-detail-row[b-gzoq0a158d] {
    display: flex;
    gap: var(--space-3);
    font-size: 0.8125rem;
}

.rm-detail-row dt[b-gzoq0a158d] {
    flex: 0 0 42%;
    margin: 0;
    color: var(--dp-text-secondary);
    font-weight: 500;
}

.rm-detail-row dd[b-gzoq0a158d] {
    margin: 0;
    color: var(--dp-text-primary);
}

.rm-detail-section[b-gzoq0a158d] {
    margin-top: var(--space-5);
}

.rm-perm-tags[b-gzoq0a158d] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ── Modal footer ──────────────────────────────────────────────────── */
.rm-modal-foot[b-gzoq0a158d] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--dp-border-subtle);
}

/* ── Validated form fields ─────────────────────────────────────────── */
.rm-field[b-gzoq0a158d] {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-4);
}

.rm-label[b-gzoq0a158d] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.rm-required[b-gzoq0a158d] {
    color: var(--dp-status-danger);
}

/* ::deep required: applied to InputText/InputSelect/InputTextArea (Microsoft
   built-ins), which render their own element internally — Blazor CSS isolation
   never propagates the scope attribute into child components, so a plain
   selector would never match. (.rm-search-input below is a plain native
   <input>, so it doesn't need ::deep.) */
[b-gzoq0a158d] .rm-input,
[b-gzoq0a158d] .rm-select,
[b-gzoq0a158d] .rm-textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

[b-gzoq0a158d] .rm-textarea {
    resize: vertical;
}

[b-gzoq0a158d] .rm-input:focus,
[b-gzoq0a158d] .rm-select:focus,
[b-gzoq0a158d] .rm-textarea:focus {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}

.rm-validation[b-gzoq0a158d] {
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-status-danger);
}

.rm-hint[b-gzoq0a158d] {
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-text-tertiary);
}

/* ── Assign permissions modal ──────────────────────────────────────── */
.rm-loading[b-gzoq0a158d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8) 0;
    color: var(--dp-text-secondary);
}

.rm-assign-filters[b-gzoq0a158d] {
    display: grid;
    grid-template-columns: 1fr 220px auto;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-4);
}

@media (max-width: 767px) {
    .rm-assign-filters[b-gzoq0a158d] {
        grid-template-columns: 1fr;
    }
}

.rm-search-input[b-gzoq0a158d] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

.rm-search-input:focus[b-gzoq0a158d] {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}

.rm-bulk-row[b-gzoq0a158d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    font-size: 0.8125rem;
}

.rm-bulk-actions[b-gzoq0a158d] {
    display: flex;
    gap: var(--space-2);
}

.rm-cat-list[b-gzoq0a158d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 420px;
    overflow-y: auto;
}

.rm-cat[b-gzoq0a158d] {
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.rm-cat-head[b-gzoq0a158d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--dp-surface-secondary);
    border-bottom: 1px solid var(--dp-border-subtle);
}

.rm-cat-title[b-gzoq0a158d] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.rm-perm-grid[b-gzoq0a158d] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3);
}

@media (max-width: 575px) {
    .rm-perm-grid[b-gzoq0a158d] {
        grid-template-columns: 1fr;
    }
}
/* _content/BlazorFrontend/Pages/Administration/Permissions/RuleBuilder.razor.rz.scp.css */
/*
 * RuleBuilder.razor.css
 * Scoped styles for /admin/permissions/rule-builder (ABAC rule builder).
 * Datanomics.Ds design system — --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

/* ── Layout ────────────────────────────────────────────────────────── */
.rb-grid[b-q1sb5sqlzj] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

@media (max-width: 991px) {
    .rb-grid[b-q1sb5sqlzj] {
        grid-template-columns: 1fr;
    }
}

.rb-main[b-q1sb5sqlzj],
.rb-side[b-q1sb5sqlzj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* ── Config form ───────────────────────────────────────────────────── */
.rb-row2[b-q1sb5sqlzj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.rb-row3[b-q1sb5sqlzj] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 767px) {
    .rb-row2[b-q1sb5sqlzj],
    .rb-row3[b-q1sb5sqlzj] {
        grid-template-columns: 1fr;
    }
}

.rb-field[b-q1sb5sqlzj] {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-4);
}

.rb-label[b-q1sb5sqlzj] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.rb-textarea[b-q1sb5sqlzj] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    resize: vertical;
}

.rb-textarea:focus[b-q1sb5sqlzj] {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}

/* ── Conditions ────────────────────────────────────────────────────── */
.rb-conditions[b-q1sb5sqlzj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.rb-condition[b-q1sb5sqlzj] {
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-md);
    background: var(--dp-surface-secondary);
    padding: var(--space-3);
}

.rb-condition-head[b-q1sb5sqlzj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.rb-condition-title[b-q1sb5sqlzj] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.rb-condition-grid[b-q1sb5sqlzj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.rb-condition-grid > *[b-q1sb5sqlzj] {
    flex: 1 1 150px;
    min-width: 0;
}

.rb-condition-check[b-q1sb5sqlzj] {
    display: flex;
    align-items: flex-end;
    padding-bottom: var(--space-2);
}

.rb-empty[b-q1sb5sqlzj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6);
    margin-top: var(--space-3);
    border: 1px dashed var(--dp-border-strong);
    border-radius: var(--radius-md);
    color: var(--dp-text-tertiary);
    text-align: center;
}

.rb-empty p[b-q1sb5sqlzj] {
    margin: 0;
}

.rb-preview[b-q1sb5sqlzj] {
    margin-top: var(--space-4);
}

/* ── Test panel ────────────────────────────────────────────────────── */
.rb-test-fields[b-q1sb5sqlzj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.rb-test-result[b-q1sb5sqlzj] {
    margin-bottom: var(--space-4);
}

/* ── Saved rules ───────────────────────────────────────────────────── */
.rb-saved-list[b-q1sb5sqlzj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rb-saved-item[b-q1sb5sqlzj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-md);
}

.rb-saved-info[b-q1sb5sqlzj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rb-saved-actions[b-q1sb5sqlzj] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

.rb-saved-name[b-q1sb5sqlzj] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.rb-saved-meta[b-q1sb5sqlzj] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

/*
    FR-30 — "Cannot be evaluated" badge on a saved rule.

    Warning, not danger: the rule is not broken data and nothing has failed — it simply can never
    match, so it must not be mistaken for an active control. Danger red would put it on a par with
    a destructive action; warning reads as "needs review", which is the actual instruction.
    Colours come from the --dp-status-warning-* token set (light + dark handled by variables.css),
    so no hardcoded values and contrast holds in both themes.
*/
.rb-unevaluable-badge[b-q1sb5sqlzj] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: var(--space-2);
    padding: 0.0625rem 0.375rem;
    border: 1px solid var(--dp-status-warning-border);
    border-radius: var(--radius-sm);
    background: var(--dp-status-warning-bg);
    color: var(--dp-status-warning-text);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    /* The label is the longest string in Indonesian ("Tidak dapat dievaluasi"); allow it to wrap
       onto its own line on narrow viewports instead of overflowing the sidebar card. */
    white-space: normal;
    vertical-align: middle;
}

/*
    FR-30 / ADR-040 §5.4 — the same fact as the badge, spelled out inside the panel for the rule being
    edited: which part of the condition cannot be evaluated and why. Sits in a DsAlert, which already
    supplies the warning surface and text colour, so this only removes the paragraph's default margin.
*/
.rb-unevaluable-detail[b-q1sb5sqlzj] {
    margin: 0;
}

/*
    FR-31 — read-only raw condition for a rule the visual builder cannot represent.
    Monospace + wrapping so a long nested condition stays readable and scrollable rather than
    stretching the panel; scrollable region is focusable for keyboard users (tabindex="0").
*/
.rb-raw-condition[b-q1sb5sqlzj] {
    margin: var(--space-2) 0 0;
    padding: var(--space-2);
    max-height: 16rem;
    overflow: auto;
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-sunken);
    color: var(--dp-text-primary);
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
/* _content/BlazorFrontend/Pages/Administration/Permissions/UserPermissions.razor.rz.scp.css */
/* Page composition only. Shared controls, states and geometry are owned by Datanomics.Ds. */

.up-page[b-tdqcaj4kbp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    min-width: 0;
}

.up-registry-panel[b-tdqcaj4kbp] {
    min-width: 0;
}

.up-filter-wrap[b-tdqcaj4kbp] {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--color-bg-surface-base-secondary, var(--bg-subtle));
}

.up-filter-wrap[b-tdqcaj4kbp]  .ds-filterbar {
    margin: 0;
}

.up-state-wrap[b-tdqcaj4kbp] {
    padding: var(--space-4) var(--space-6);
}

.up-state-wrap[b-tdqcaj4kbp]  .ds-alert-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.up-user-cell[b-tdqcaj4kbp] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.up-user-copy[b-tdqcaj4kbp] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.up-user-copy strong[b-tdqcaj4kbp],
.up-user-copy small[b-tdqcaj4kbp] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.up-user-copy strong[b-tdqcaj4kbp] {
    color: var(--color-text-primary, var(--text-body));
}

.up-user-copy small[b-tdqcaj4kbp],
.up-muted[b-tdqcaj4kbp],
.up-context[b-tdqcaj4kbp] {
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.8125rem;
}

.up-role-stack[b-tdqcaj4kbp],
.up-row-actions[b-tdqcaj4kbp],
.up-detail-actions[b-tdqcaj4kbp] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.up-role-stack[b-tdqcaj4kbp] {
    flex-wrap: wrap;
}

.up-row-actions[b-tdqcaj4kbp] {
    justify-content: flex-end;
}

.up-registry-panel[b-tdqcaj4kbp]  .up-row--selected {
    background: var(--color-bg-surface-additional-1-secondary, var(--accent-soft));
}

.up-pagination[b-tdqcaj4kbp] {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-subtle);
    background: var(--color-bg-surface-base-primary, var(--bg-surface));
}

.up-detail-section[b-tdqcaj4kbp],
.up-detail-main[b-tdqcaj4kbp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.up-details-grid[b-tdqcaj4kbp] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
}

.up-details-grid > div[b-tdqcaj4kbp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.up-details-grid span[b-tdqcaj4kbp] {
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.75rem;
}

.up-details-grid strong[b-tdqcaj4kbp] {
    overflow-wrap: anywhere;
    color: var(--color-text-primary, var(--text-body));
    font-size: 0.875rem;
    font-weight: 600;
}

.up-detail-loading[b-tdqcaj4kbp] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
}

.up-perms-grid[b-tdqcaj4kbp] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.up-perm-group h4[b-tdqcaj4kbp],
.up-modal-title[b-tdqcaj4kbp],
.up-permission-editor-group h4[b-tdqcaj4kbp] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    color: var(--color-text-primary, var(--text-body));
    font-size: 0.875rem;
    font-weight: 600;
}

.up-perm-group ul[b-tdqcaj4kbp] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.up-perm-group li[b-tdqcaj4kbp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--color-text-primary, var(--text-body));
    font-size: 0.8125rem;
}

.up-perm-group li span:first-child[b-tdqcaj4kbp] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.up-show-more[b-tdqcaj4kbp] {
    display: flex;
    justify-content: center;
    padding-top: var(--space-4);
}

.up-permission-editor[b-tdqcaj4kbp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: min(58vh, 560px);
    margin-top: var(--space-4);
    padding-right: var(--space-1);
    overflow-y: auto;
}

.up-permission-editor-group[b-tdqcaj4kbp] {
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-base-primary, var(--bg-surface));
}

.up-permission-editor-row[b-tdqcaj4kbp],
.up-role-card[b-tdqcaj4kbp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.up-permission-editor-row:last-child[b-tdqcaj4kbp],
.up-role-card:last-child[b-tdqcaj4kbp] {
    border-bottom: 0;
}

.up-permission-editor-row > span[b-tdqcaj4kbp],
.up-role-card > span[b-tdqcaj4kbp],
.up-static-field[b-tdqcaj4kbp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.up-permission-editor-row small[b-tdqcaj4kbp],
.up-role-card small[b-tdqcaj4kbp],
.up-static-field small[b-tdqcaj4kbp],
.up-static-field > span[b-tdqcaj4kbp] {
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.75rem;
}

.up-scope-picker[b-tdqcaj4kbp] {
    max-width: 360px;
    margin-bottom: var(--space-4);
}

.up-role-modal-grid[b-tdqcaj4kbp] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: start;
}

.up-card-list[b-tdqcaj4kbp] {
    display: flex;
    flex-direction: column;
    max-height: min(52vh, 480px);
    padding: 0 var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow-y: auto;
}

.up-role-card--muted[b-tdqcaj4kbp] {
    opacity: 0.72;
}

.up-modal-foot[b-tdqcaj4kbp] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.up-static-field[b-tdqcaj4kbp] {
    margin-bottom: var(--space-4);
}

@media (max-width: 991.98px) {
    .up-details-grid[b-tdqcaj4kbp] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .up-detail-loading[b-tdqcaj4kbp] { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .up-filter-wrap[b-tdqcaj4kbp],
    .up-state-wrap[b-tdqcaj4kbp],
    .up-pagination[b-tdqcaj4kbp] {
        padding-inline: var(--space-4);
    }

    .up-pagination[b-tdqcaj4kbp]  .ds-pagination {
        justify-content: flex-end;
    }

    .up-detail-actions[b-tdqcaj4kbp] {
        flex-wrap: wrap;
    }

    .up-details-grid[b-tdqcaj4kbp],
    .up-perms-grid[b-tdqcaj4kbp],
    .up-role-modal-grid[b-tdqcaj4kbp] {
        grid-template-columns: 1fr;
    }
}
/* _content/BlazorFrontend/Pages/Administration/RoleManagement.razor.rz.scp.css */
.rm-page[b-xd6f201vyg] {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
}

.rm-page > *[b-xd6f201vyg] {
    min-width: 0;
}

.rm-results-meta[b-xd6f201vyg] {
    display: flex;
    justify-content: flex-end;
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.8125rem;
}

.rm-alert-action[b-xd6f201vyg] {
    margin-top: var(--space-3);
}

.rm-role-identity[b-xd6f201vyg],
.rm-row-actions[b-xd6f201vyg] {
    display: flex;
    min-width: 0;
    align-items: center;
}

.rm-role-identity[b-xd6f201vyg] {
    gap: var(--space-2);
}

.rm-role-icon[b-xd6f201vyg] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-brand-secondary, var(--accent-soft));
    color: var(--color-text-brand, var(--accent));
}

.rm-role-copy[b-xd6f201vyg] {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--space-2);
}

.rm-role-copy strong[b-xd6f201vyg] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-primary, var(--text-strong));
}

.rm-role-copy small[b-xd6f201vyg] {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-secondary, var(--text-muted));
}

.rm-muted[b-xd6f201vyg] {
    color: var(--color-text-secondary, var(--text-muted));
}

.rm-row-actions[b-xd6f201vyg] {
    justify-content: flex-end;
    gap: var(--space-1);
}

.rm-detail-grid[b-xd6f201vyg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.rm-detail-section[b-xd6f201vyg],
.rm-permissions-section[b-xd6f201vyg] {
    min-width: 0;
}

.rm-detail-section h4[b-xd6f201vyg],
.rm-permissions-section h4[b-xd6f201vyg],
.rm-description h4[b-xd6f201vyg] {
    margin: 0 0 var(--space-3);
    color: var(--color-text-primary, var(--text-strong));
    font-size: 0.875rem;
    font-weight: 600;
}

.rm-detail-list[b-xd6f201vyg] {
    display: grid;
    margin: 0;
}

.rm-detail-list > div[b-xd6f201vyg] {
    display: grid;
    grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.rm-detail-list dt[b-xd6f201vyg],
.rm-detail-list dd[b-xd6f201vyg] {
    min-width: 0;
    margin: 0;
}

.rm-detail-list dt[b-xd6f201vyg] {
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.8125rem;
}

.rm-detail-list dd[b-xd6f201vyg] {
    overflow-wrap: anywhere;
    color: var(--color-text-primary, var(--text-body));
    font-weight: 500;
}

.rm-detail-stats[b-xd6f201vyg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.rm-description[b-xd6f201vyg] {
    margin-top: var(--space-5);
}

.rm-description p[b-xd6f201vyg] {
    margin: 0;
    color: var(--color-text-secondary, var(--text-muted));
    line-height: 1.55;
}

.rm-permissions-section[b-xd6f201vyg] {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.rm-permission-tags[b-xd6f201vyg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.rm-form[b-xd6f201vyg] {
    display: grid;
    gap: var(--space-4);
}

.rm-form[b-xd6f201vyg]  .validation-message {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-danger-active, var(--danger));
    font-size: 0.75rem;
}

.rm-modal-actions[b-xd6f201vyg] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

@media (max-width: 699.98px) {
    .rm-detail-grid[b-xd6f201vyg],
    .rm-detail-stats[b-xd6f201vyg] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/BlazorFrontend/Pages/Administration/ServiceProviderAdd.razor.rz.scp.css */
/*
 * ServiceProviderAdd.razor.css
 * Scoped styles for /administration/service-providers/add (khuôn C: back-link → PageHeader → form panels).
 * Rules: --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

.af-back-link[b-q2hw1snmvq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: var(--space-2);
}

.af-back-link:hover[b-q2hw1snmvq] {
    color: var(--dp-text-primary);
}

.af-wrap[b-q2hw1snmvq] {
    max-width: 860px;
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.af-row2[b-q2hw1snmvq],
.af-row3[b-q2hw1snmvq] {
    display: grid;
    gap: var(--space-4);
}

.af-row2[b-q2hw1snmvq] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.af-row3[b-q2hw1snmvq] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.af-row2--top[b-q2hw1snmvq],
.af-row3--top[b-q2hw1snmvq] {
    margin-top: var(--space-4);
}

@media (max-width: 767px) {
    .af-row2[b-q2hw1snmvq],
    .af-row3[b-q2hw1snmvq] {
        grid-template-columns: 1fr;
    }
}

.af-field[b-q2hw1snmvq] {
    display: flex;
    flex-direction: column;
}

.af-field--top[b-q2hw1snmvq] {
    margin-top: var(--space-4);
}

.af-label[b-q2hw1snmvq] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.af-required[b-q2hw1snmvq] {
    color: var(--dp-status-danger);
}

.af-hint[b-q2hw1snmvq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.af-validation[b-q2hw1snmvq] {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-status-danger);
}

/* ::deep required: applied to InputText/InputTextArea/InputSelect (Microsoft
   built-ins), which render their own element internally — Blazor CSS isolation
   never propagates the scope attribute into child components, so a plain
   selector would never match. */
[b-q2hw1snmvq] .af-input,
[b-q2hw1snmvq] .af-textarea,
[b-q2hw1snmvq] .af-select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

[b-q2hw1snmvq] .af-textarea {
    resize: vertical;
}

[b-q2hw1snmvq] .af-input:focus,
[b-q2hw1snmvq] .af-textarea:focus,
[b-q2hw1snmvq] .af-select:focus {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}
/* _content/BlazorFrontend/Pages/Administration/ServiceProviderEdit.razor.rz.scp.css */
/*
 * ServiceProviderEdit.razor.css
 * Scoped styles for /administration/service-providers/edit/{id} (khuôn C).
 * Rules: --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

.dm-skeleton[b-hzmozhmluk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-hzmozhmluk] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-hzmozhmluk] {
    height: 56px;
    width: 100%;
}

.af-back-link[b-hzmozhmluk] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: var(--space-2);
}

.af-back-link:hover[b-hzmozhmluk] {
    color: var(--dp-text-primary);
}

.af-wrap[b-hzmozhmluk] {
    max-width: 860px;
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.af-row2[b-hzmozhmluk],
.af-row3[b-hzmozhmluk] {
    display: grid;
    gap: var(--space-4);
}

.af-row2[b-hzmozhmluk] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.af-row3[b-hzmozhmluk] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.af-row2--top[b-hzmozhmluk],
.af-row3--top[b-hzmozhmluk] {
    margin-top: var(--space-4);
}

@media (max-width: 767px) {
    .af-row2[b-hzmozhmluk],
    .af-row3[b-hzmozhmluk] {
        grid-template-columns: 1fr;
    }
}

.af-field[b-hzmozhmluk] {
    display: flex;
    flex-direction: column;
}

.af-field--top[b-hzmozhmluk] {
    margin-top: var(--space-4);
}

.af-label[b-hzmozhmluk] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.af-required[b-hzmozhmluk] {
    color: var(--dp-status-danger);
}

.af-hint[b-hzmozhmluk] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.af-validation[b-hzmozhmluk] {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-status-danger);
}

/* ::deep required: applied to InputText/InputTextArea/InputSelect (Microsoft
   built-ins), which render their own element internally — Blazor CSS isolation
   never propagates the scope attribute into child components, so a plain
   selector would never match. */
[b-hzmozhmluk] .af-input,
[b-hzmozhmluk] .af-textarea,
[b-hzmozhmluk] .af-select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

[b-hzmozhmluk] .af-textarea {
    resize: vertical;
}

[b-hzmozhmluk] .af-input:focus,
[b-hzmozhmluk] .af-textarea:focus,
[b-hzmozhmluk] .af-select:focus {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}
/* _content/BlazorFrontend/Pages/Administration/ServiceProviderManagement.razor.rz.scp.css */
/*
 * ServiceProviderManagement.razor.css
 * Scoped styles for /administration/service-providers (khuôn B: PageHeader + FilterBar + table).
 * Rules: --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

/* ADR-066 L2a — the .dm-skeleton block that stood here is gone: the waiting state is now the
   placeholder rows DsDataTable renders inside the real table, so there is no second description of
   this table's geometry to drift. */

.sp-cell[b-jdildf9uo3] {
    min-width: 0;
}

.sp-cell__name[b-jdildf9uo3] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.sp-cell__sub[b-jdildf9uo3] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.sp-muted[b-jdildf9uo3] {
    color: var(--dp-text-secondary);
}

.sp-link[b-jdildf9uo3] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--dp-interactive-accent);
    text-decoration: none;
}

.sp-link:hover[b-jdildf9uo3] {
    text-decoration: underline;
}

.sp-policies[b-jdildf9uo3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.sp-chip[b-jdildf9uo3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
    border: 1px solid var(--dp-border-subtle);
    background: var(--dp-surface-secondary);
    color: var(--dp-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
}

.sp-chip:hover[b-jdildf9uo3] {
    color: var(--dp-text-primary);
    border-color: var(--dp-interactive-primary);
}
/* _content/BlazorFrontend/Pages/Administration/SubscriptionPlans.razor.rz.scp.css */
/*
 * SubscriptionPlans.razor.css
 * Scoped styles for /administration/subscription-plans (khuôn B: KPI + FilterBar + table + DsModal).
 * Rules: --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

/* ADR-066 L2a — the .dm-skeleton block that stood here is gone: the waiting state is now the
   placeholder rows DsDataTable renders inside the real table, so there is no second description of
   this table's geometry to drift. */

/* KPI strip */
.sp-kpi-strip[b-doa1rwisfa] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 767px) {
    .sp-kpi-strip[b-doa1rwisfa] {
        grid-template-columns: 1fr;
    }
}

/* Table cells */
.sp-cell[b-doa1rwisfa] {
    min-width: 0;
}

.sp-cell__name[b-doa1rwisfa] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.sp-cell__sub[b-doa1rwisfa] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.sp-price[b-doa1rwisfa] {
    font-weight: 600;
    color: var(--dp-text-primary);
}

.sp-limit[b-doa1rwisfa] {
    color: var(--dp-text-secondary);
}

/* Modal form */
.spm-grid2[b-doa1rwisfa] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.spm-grid2--top[b-doa1rwisfa] {
    margin-top: var(--space-3);
}

@media (max-width: 575px) {
    .spm-grid2[b-doa1rwisfa] {
        grid-template-columns: 1fr;
    }
}

.spm-field[b-doa1rwisfa] {
    display: flex;
    flex-direction: column;
}

.spm-field--top[b-doa1rwisfa] {
    margin-top: var(--space-3);
}

.spm-field--switch[b-doa1rwisfa] {
    justify-content: flex-start;
}

.spm-label[b-doa1rwisfa] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.spm-required[b-doa1rwisfa] {
    color: var(--dp-status-danger);
}

.spm-input[b-doa1rwisfa],
.spm-select[b-doa1rwisfa],
.spm-textarea[b-doa1rwisfa] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

.spm-textarea[b-doa1rwisfa] {
    resize: vertical;
}

.spm-input:focus[b-doa1rwisfa],
.spm-select:focus[b-doa1rwisfa],
.spm-textarea:focus[b-doa1rwisfa] {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}

.spm-section-label[b-doa1rwisfa] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dp-text-secondary);
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
}

.spm-note[b-doa1rwisfa] {
    margin: 0 0 var(--space-3);
    font-size: 0.75rem;
    color: var(--dp-text-tertiary);
}

.spm-features[b-doa1rwisfa] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
}

@media (max-width: 575px) {
    .spm-features[b-doa1rwisfa] {
        grid-template-columns: 1fr;
    }
}
/* _content/BlazorFrontend/Pages/Administration/SupportAccess.razor.rz.scp.css */
/*
 * SupportAccess.razor.css
 * Scoped styles for /administration/support-access (khuôn B: KPI + tabs + tables + DsModal).
 * Rules: --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

/* ADR-066 L2a — the .dm-skeleton block that stood here is gone: the waiting state is now the
   placeholder rows DsDataTable renders inside the two real tables, so there is no second description
   of their geometry to drift. */

/* ─── Create dropdown ───────────────────────────────────────────────────── */

.sa-create[b-kvzh2jgm99] {
    position: relative;
}

.sa-menu[b-kvzh2jgm99] {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2));
    z-index: 40;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    min-width: 280px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--dp-surface-input);
    border: 1px solid var(--dp-border-separator);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.sa-menu-item[b-kvzh2jgm99] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.sa-menu-item:hover[b-kvzh2jgm99] {
    background: var(--dp-surface-hover);
}

.sa-menu-name[b-kvzh2jgm99] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.sa-menu-code[b-kvzh2jgm99] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

/* ─── Error row ─────────────────────────────────────────────────────────── */

.sa-error[b-kvzh2jgm99] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ─── KPI strip ─────────────────────────────────────────────────────────── */

.sa-kpi-strip[b-kvzh2jgm99] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 1279px) {
    .sa-kpi-strip[b-kvzh2jgm99] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .sa-kpi-strip[b-kvzh2jgm99] {
        grid-template-columns: 1fr;
    }
}

.sa-tabs[b-kvzh2jgm99] {
    margin-bottom: var(--space-4);
}

/* ─── Table cells ───────────────────────────────────────────────────────── */

.sa-row-action[b-kvzh2jgm99] {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
}

.sa-cell[b-kvzh2jgm99] {
    min-width: 0;
}

.sa-cell__name[b-kvzh2jgm99] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.sa-cell__sub[b-kvzh2jgm99] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    margin-top: 2px;
}

.sa-muted[b-kvzh2jgm99] {
    color: var(--dp-text-secondary);
}

.sa-mono[b-kvzh2jgm99] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.sa-code[b-kvzh2jgm99] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--dp-text-primary);
    background: var(--dp-surface-secondary);
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
}

/* ─── Filter row ────────────────────────────────────────────────────────── */

.sa-filter[b-kvzh2jgm99] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-3) 0 var(--space-4);
}

/* ─── Modal form fields ─────────────────────────────────────────────────── */

.sa-field[b-kvzh2jgm99] {
    display: flex;
    flex-direction: column;
}

.sa-field--top[b-kvzh2jgm99] {
    margin-top: var(--space-4);
}

.sa-label[b-kvzh2jgm99] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.sa-required[b-kvzh2jgm99] {
    color: var(--dp-status-danger);
}

.sa-hint[b-kvzh2jgm99] {
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.sa-hint--error[b-kvzh2jgm99] {
    color: var(--dp-status-danger);
}

.sa-input[b-kvzh2jgm99],
.sa-textarea[b-kvzh2jgm99] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

.sa-textarea[b-kvzh2jgm99] {
    resize: vertical;
}

.sa-input:focus[b-kvzh2jgm99],
.sa-textarea:focus[b-kvzh2jgm99] {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}

.sa-input[aria-invalid="true"][b-kvzh2jgm99] {
    border-color: var(--dp-status-danger);
}

/* ─── Credentials ───────────────────────────────────────────────────────── */

.sa-cred[b-kvzh2jgm99] {
    margin: var(--space-4) 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--dp-surface-secondary);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-md);
}

.sa-cred__full[b-kvzh2jgm99] {
    grid-column: 1 / -1;
}

.sa-cred dt[b-kvzh2jgm99] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    margin-bottom: 4px;
}

.sa-cred dd[b-kvzh2jgm99] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.sa-cred__copy[b-kvzh2jgm99] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sa-code--block[b-kvzh2jgm99] {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    font-weight: 400;
    word-break: break-all;
}

.sa-usage-label[b-kvzh2jgm99] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-top: var(--space-3);
    margin-bottom: var(--space-2);
}

.sa-usage-list[b-kvzh2jgm99] {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

.sa-usage-list li[b-kvzh2jgm99] {
    margin-bottom: var(--space-1);
    line-height: 1.5;
}

.sa-cred-foot[b-kvzh2jgm99] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}
/* _content/BlazorFrontend/Pages/Administration/SystemAdminDashboard.razor.rz.scp.css */
.sad-page[b-hb53dyz76n] {
    display: grid;
    min-width: 0;
    gap: var(--space-6);
}

/* DsPageHeader already carries a standalone trailing margin. Inside the page grid the gap owns
   section rhythm; keeping both produces a 44px void instead of the DS 24px dashboard gutter. */
.sad-page[b-hb53dyz76n]  .ds-pagehead {
    margin-bottom: 0;
}

.sad-page > *[b-hb53dyz76n],
.sad-dashboard-section > *[b-hb53dyz76n],
.sad-overview-grid > *[b-hb53dyz76n],
.sad-management-grid > *[b-hb53dyz76n] {
    min-width: 0;
}

.sad-dashboard-section[b-hb53dyz76n] {
    display: grid;
    min-width: 0;
    gap: var(--space-4);
}

.sad-snapshot[b-hb53dyz76n] {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-secondary, var(--text-muted));
    font-size: var(--text-label, 0.75rem);
    white-space: nowrap;
}

.sad-snapshot time[b-hb53dyz76n] {
    color: var(--color-text-primary, var(--text-body));
    font-variant-numeric: tabular-nums;
}

.sad-alert-action[b-hb53dyz76n] {
    margin-top: var(--space-3);
}

.sad-overview-grid[b-hb53dyz76n],
.sad-management-grid[b-hb53dyz76n] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: stretch;
    gap: var(--space-5);
}

.sad-overview-grid[b-hb53dyz76n]  .ds-panel,
.sad-management-grid[b-hb53dyz76n]  .ds-panel {
    height: 100%;
    min-width: 0;
}

.sad-system-overview[b-hb53dyz76n] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

.sad-status-summary h4[b-hb53dyz76n],
.sad-resource-summary h4[b-hb53dyz76n] {
    margin: 0 0 var(--space-3);
    color: var(--color-text-primary, var(--text-strong));
    font-size: 0.875rem;
    font-weight: 600;
}

.sad-facts[b-hb53dyz76n] {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
}

.sad-facts > div[b-hb53dyz76n] {
    display: grid;
    grid-template-columns: minmax(100px, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-3);
    align-items: baseline;
}

.sad-facts dt[b-hb53dyz76n],
.sad-facts dd[b-hb53dyz76n] {
    margin: 0;
}

.sad-facts dt[b-hb53dyz76n],
.sad-user-copy small[b-hb53dyz76n],
.sad-tenant-copy small[b-hb53dyz76n] {
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.75rem;
}

.sad-facts dd[b-hb53dyz76n] {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--color-text-primary, var(--text-body));
    font-weight: 500;
}

.sad-meter-list[b-hb53dyz76n] {
    display: grid;
    gap: var(--space-5);
}

.sad-status-list[b-hb53dyz76n],
.sad-user-list[b-hb53dyz76n] {
    display: grid;
}

.sad-status-row[b-hb53dyz76n],
.sad-user-row[b-hb53dyz76n] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.sad-status-row:first-child[b-hb53dyz76n],
.sad-user-row:first-child[b-hb53dyz76n] {
    padding-top: 0;
}

.sad-status-row:last-child[b-hb53dyz76n],
.sad-user-row:last-child[b-hb53dyz76n] {
    padding-bottom: 0;
    border-bottom: 0;
}

.sad-status-row > span:first-child[b-hb53dyz76n] {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-primary, var(--text-body));
    font-weight: 500;
}

.sad-tenant-filter[b-hb53dyz76n] {
    margin-bottom: var(--space-4);
}

.sad-tenant-filter[b-hb53dyz76n]  .ds-filterbar-search {
    flex: 1 1 280px;
}

.sad-tenant-table[b-hb53dyz76n]  .sad-col--tenant { width: 25%; }
.sad-tenant-table[b-hb53dyz76n]  .sad-col--code { width: 10%; }
.sad-tenant-table[b-hb53dyz76n]  .sad-col--status { width: 14%; }
.sad-tenant-table[b-hb53dyz76n]  .sad-col--admin { width: 21%; }
.sad-tenant-table[b-hb53dyz76n]  .sad-col--created { width: 13%; }
.sad-tenant-table[b-hb53dyz76n]  .sad-col--actions { width: 17%; }

.sad-tenant-identity[b-hb53dyz76n],
.sad-row-actions[b-hb53dyz76n] {
    display: flex;
    min-width: 0;
    align-items: center;
}

.sad-tenant-identity[b-hb53dyz76n] {
    gap: var(--space-2);
}

.sad-row-actions[b-hb53dyz76n] {
    justify-content: center;
    gap: var(--space-1);
}

.sad-tenant-icon[b-hb53dyz76n],
.sad-user-avatar[b-hb53dyz76n] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-brand-secondary, var(--accent-soft));
    color: var(--color-text-brand, var(--accent));
}

.sad-tenant-copy[b-hb53dyz76n],
.sad-user-copy[b-hb53dyz76n] {
    display: grid;
    min-width: 0;
}

.sad-tenant-copy strong[b-hb53dyz76n],
.sad-tenant-copy small[b-hb53dyz76n],
.sad-user-copy strong[b-hb53dyz76n],
.sad-user-copy small[b-hb53dyz76n] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sad-tenant-copy strong[b-hb53dyz76n],
.sad-user-copy strong[b-hb53dyz76n] {
    color: var(--color-text-primary, var(--text-strong));
    font-weight: 600;
}

.sad-user-copy[b-hb53dyz76n] {
    flex: 1;
}

.sad-panel-footer[b-hb53dyz76n] {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

@media (max-width: 1099.98px) {
    .sad-overview-grid[b-hb53dyz76n],
    .sad-management-grid[b-hb53dyz76n] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 699.98px) {
    .sad-snapshot span[b-hb53dyz76n] {
        display: none;
    }

    .sad-system-overview[b-hb53dyz76n] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/BlazorFrontend/Pages/Administration/TenantManagement.razor.rz.scp.css */
/* TenantManagement.razor.css — scoped styles for the Tenant Management admin page.
   All colors reference --dp-* design tokens. No hardcoded hex/rgb values.
*/

/* ============================================================
   LAYOUT — KPI row, tabs, section heads.
   ============================================================ */

.tm-kpi-row[b-5vjb3o150c] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.tm-kpi-row--services[b-5vjb3o150c] {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

@media (max-width: 1023px) {
    .tm-kpi-row[b-5vjb3o150c] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599px) {
    .tm-kpi-row[b-5vjb3o150c] {
        grid-template-columns: 1fr;
    }
}

.tm-tabs[b-5vjb3o150c] {
    margin-bottom: var(--space-4);
}

.tm-tab-body[b-5vjb3o150c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tm-section-head[b-5vjb3o150c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.tm-section-head h3[b-5vjb3o150c] {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--dp-text-primary);
}

.tm-section-head p[b-5vjb3o150c] {
    margin: var(--space-1) 0 0;
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.tm-view-toggle[b-5vjb3o150c] {
    display: flex;
    gap: var(--space-2);
}

.tm-two-col[b-5vjb3o150c] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-4);
    align-items: start;
}

@media (max-width: 1023px) {
    .tm-two-col[b-5vjb3o150c] {
        grid-template-columns: 1fr;
    }
}

.tm-muted[b-5vjb3o150c] {
    color: var(--dp-text-secondary);
}

.tm-empty[b-5vjb3o150c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) 0;
    color: var(--dp-text-secondary);
    text-align: center;
}

.tm-empty h4[b-5vjb3o150c] {
    margin: 0;
    color: var(--dp-text-primary);
}

.tm-empty p[b-5vjb3o150c] {
    margin: 0;
    font-size: 0.875rem;
}

.tm-table-section[b-5vjb3o150c] {
    overflow: hidden;
    border: 1px solid var(--dp-border-separator);
    border-radius: var(--radius-lg);
    background: var(--dp-surface-primary);
}

.tm-tenant-cell[b-5vjb3o150c] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tm-tenant-cell strong[b-5vjb3o150c],
.tm-tenant-cell span[b-5vjb3o150c] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-tenant-cell span[b-5vjb3o150c] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

.tm-row-action[b-5vjb3o150c] {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
}

.tm-pagination[b-5vjb3o150c] {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--dp-border-separator);
    background: var(--dp-surface-subtle);
}

/* ============================================================
   TENANT CARD GRID (Tenants tab)
   ============================================================ */

.tm-grid[b-5vjb3o150c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

/* Waiting placeholder for one tenant card: 180px is the height a populated card settles at
   (name + code + badge + the two meta rows), so the grid does not jump when the cards land. */
.tm-card-skeleton[b-5vjb3o150c] {
    height: 180px;
}

.tm-tenant-card[b-5vjb3o150c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tm-tenant-card__head[b-5vjb3o150c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.tm-tenant-card__head h4[b-5vjb3o150c] {
    margin: 0;
    font-size: 1rem;
    color: var(--dp-text-primary);
}

.tm-tenant-card__row[b-5vjb3o150c] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

.tm-tenant-card__desc[b-5vjb3o150c] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

.tm-tenant-card__actions[b-5vjb3o150c] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--dp-border-separator);
}

/* ============================================================
   SERVICES TAB — tenant picker list, stat row, table cells.
   ============================================================ */

.tm-tenant-list[b-5vjb3o150c] {
    display: flex;
    flex-direction: column;
    max-height: 480px;
    overflow-y: auto;
}

.tm-tenant-list__row[b-5vjb3o150c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: none;
    border-bottom: 1px solid var(--dp-border-separator);
    background: none;
    text-align: left;
    cursor: pointer;
    color: var(--dp-text-primary);
}

.tm-tenant-list__row:hover[b-5vjb3o150c] {
    background-color: var(--dp-surface-secondary);
}

.tm-tenant-list__row--active[b-5vjb3o150c] {
    background-color: var(--dp-surface-selected);
}

.tm-tenant-list__name[b-5vjb3o150c] {
    font-weight: 600;
    font-size: 0.875rem;
}

.tm-tenant-list__code[b-5vjb3o150c] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.tm-stat-row[b-5vjb3o150c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    padding: var(--space-4);
}

.tm-coming-soon[b-5vjb3o150c] {
    display: block;
    font-size: 0.75rem;
    color: var(--dp-interactive-primary);
}

.tm-service-cell[b-5vjb3o150c] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================
   SUBSCRIPTION PLANS TAB
   ============================================================ */

.tm-plan-kpi-row[b-5vjb3o150c] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 767px) {
    .tm-plan-kpi-row[b-5vjb3o150c] {
        grid-template-columns: 1fr;
    }
}

.tm-plan-cell[b-5vjb3o150c] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tm-plan-cell strong[b-5vjb3o150c] {
    color: var(--dp-text-primary);
    font-size: 0.875rem;
}

.tm-plan-cell span[b-5vjb3o150c] {
    overflow: hidden;
    color: var(--dp-text-secondary);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-plan-hint[b-5vjb3o150c] {
    font-size: 0.75rem;
    color: var(--dp-interactive-primary);
}

.tm-plan-hint--danger[b-5vjb3o150c] {
    color: var(--dp-status-danger);
}

/* ============================================================
   ANALYTICS TAB
   ============================================================ */

.tm-split-stat[b-5vjb3o150c] {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.tm-split-stat h3[b-5vjb3o150c] {
    margin: 0;
    color: var(--dp-interactive-primary);
    font-size: 1.75rem;
}

.tm-split-stat span[b-5vjb3o150c] {
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

.tm-adoption-row[b-5vjb3o150c] {
    margin-bottom: var(--space-3);
}

.tm-adoption-row__head[b-5vjb3o150c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 0.875rem;
}

.tm-adoption-row__head strong[b-5vjb3o150c] {
    color: var(--dp-interactive-primary);
}

.tm-adoption-footnote[b-5vjb3o150c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: var(--space-3) 0 0;
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

/* ============================================================
   ADR-027 — TenantKind badge + kind-picker cards.
   All colors come from --dp-* tokens (info for SaaS, warning for
   OnPrem — both pairs are WCAG AA verified in variables.css).
   ============================================================ */

.tm-kind-badge[b-5vjb3o150c],
[b-5vjb3o150c] .tm-kind-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}

.tm-kind-badge--saas[b-5vjb3o150c],
[b-5vjb3o150c] .tm-kind-badge--saas {
    background-color: var(--dp-status-info-bg);
    color: var(--dp-status-info);
    border-color: var(--dp-status-info-border);
}

.tm-kind-badge--onprem[b-5vjb3o150c],
[b-5vjb3o150c] .tm-kind-badge--onprem {
    background-color: var(--dp-status-warning-bg);
    color: var(--dp-status-warning-text);
    border-color: var(--dp-status-warning-border);
}

.tm-kind-picker[b-5vjb3o150c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

@media (max-width: 599px) {
    .tm-kind-picker[b-5vjb3o150c] {
        grid-template-columns: 1fr;
    }
}

/* Kind picker cards on the create wizard step 1. */
.tm-kind-card[b-5vjb3o150c],
[b-5vjb3o150c] .tm-kind-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background-color: var(--dp-surface-elevated);
    border: 1px solid var(--dp-border-default);
    border-radius: 12px;
    color: var(--dp-text-primary);
    transition: border-color 0.15s ease, transform 0.15s ease;
    cursor: pointer;
    min-height: 140px;
    text-align: left;
}

.tm-kind-card:hover[b-5vjb3o150c],
.tm-kind-card:focus-visible[b-5vjb3o150c],
[b-5vjb3o150c] .tm-kind-card:hover,
[b-5vjb3o150c] .tm-kind-card:focus-visible {
    border-color: var(--dp-interactive-primary);
    transform: translateY(-1px);
    outline: none;
}

.tm-kind-card__header[b-5vjb3o150c],
[b-5vjb3o150c] .tm-kind-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tm-kind-card__body[b-5vjb3o150c],
[b-5vjb3o150c] .tm-kind-card__body {
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ============================================================
   FORM FIELDS — subscription-plan & assign-plan modals, plus
   the FormModal CustomContent slot (::deep — content projected
   into the shared FormModal component).
   ============================================================ */

.tm-row-2[b-5vjb3o150c],
[b-5vjb3o150c] .tm-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 599px) {
    .tm-row-2[b-5vjb3o150c],
    [b-5vjb3o150c] .tm-row-2 {
        grid-template-columns: 1fr;
    }
}

.tm-field[b-5vjb3o150c],
[b-5vjb3o150c] .tm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tm-field--full[b-5vjb3o150c],
[b-5vjb3o150c] .tm-field--full {
    margin-bottom: var(--space-4);
}

.tm-label[b-5vjb3o150c],
[b-5vjb3o150c] .tm-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
}

.tm-input[b-5vjb3o150c],
[b-5vjb3o150c] .tm-input {
    padding: 8px 12px;
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md);
    background-color: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-size: 0.875rem;
    width: 100%;
}

.tm-input:focus[b-5vjb3o150c],
[b-5vjb3o150c] .tm-input:focus {
    outline: none;
    border-color: var(--dp-border-focus);
    box-shadow: 0 0 0 3px var(--dp-border-focus);
}

.tm-validation[b-5vjb3o150c],
[b-5vjb3o150c] .tm-validation {
    display: block;
    color: var(--dp-status-danger);
    font-size: 0.8125rem;
    margin-top: 2px;
}

.tm-hint[b-5vjb3o150c],
[b-5vjb3o150c] .tm-hint {
    color: var(--dp-text-tertiary);
    font-size: 0.75rem;
}

.tm-assignment-context[b-5vjb3o150c],
[b-5vjb3o150c] .tm-assignment-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--dp-border-separator);
    border-radius: var(--radius-lg);
    background: var(--dp-surface-secondary);
}

.tm-assignment-context__identity[b-5vjb3o150c],
[b-5vjb3o150c] .tm-assignment-context__identity,
.tm-assignment-context__current[b-5vjb3o150c],
[b-5vjb3o150c] .tm-assignment-context__current {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tm-assignment-context__identity strong[b-5vjb3o150c],
[b-5vjb3o150c] .tm-assignment-context__identity strong,
.tm-assignment-context__current strong[b-5vjb3o150c],
[b-5vjb3o150c] .tm-assignment-context__current strong {
    overflow: hidden;
    color: var(--dp-text-primary);
    font-size: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-assignment-context__identity > span[b-5vjb3o150c],
[b-5vjb3o150c] .tm-assignment-context__identity > span,
.tm-assignment-context__current > span[b-5vjb3o150c],
[b-5vjb3o150c] .tm-assignment-context__current > span {
    color: var(--dp-text-secondary);
    font-size: 0.75rem;
}

.tm-assignment-context__eyebrow[b-5vjb3o150c],
[b-5vjb3o150c] .tm-assignment-context__eyebrow {
    color: var(--dp-text-tertiary) !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tm-assignment-context__current[b-5vjb3o150c],
[b-5vjb3o150c] .tm-assignment-context__current {
    align-items: flex-end;
    text-align: right;
}

@media (max-width: 599px) {
    .tm-assignment-context[b-5vjb3o150c],
    [b-5vjb3o150c] .tm-assignment-context {
        align-items: flex-start;
        flex-direction: column;
    }

    .tm-assignment-context__current[b-5vjb3o150c],
    [b-5vjb3o150c] .tm-assignment-context__current {
        align-items: flex-start;
        text-align: left;
    }
}

.tm-check-grid[b-5vjb3o150c],
[b-5vjb3o150c] .tm-check-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 767px) {
    .tm-check-grid[b-5vjb3o150c],
    [b-5vjb3o150c] .tm-check-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.tm-checkbox-inline[b-5vjb3o150c],
[b-5vjb3o150c] .tm-checkbox-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--dp-text-primary);
}
/* _content/BlazorFrontend/Pages/Administration/TenantServicesManagement.razor.rz.scp.css */
/*
 * TenantServicesManagement.razor.css
 * Scoped styles for /administration/tenant-services (khuôn B: KPI + tabs hub).
 * Rules: --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

.dm-skeleton[b-yiq4v9jg48] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-yiq4v9jg48] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-yiq4v9jg48] {
    height: 56px;
    width: 100%;
}

/* KPI strip */
.ts-kpi-strip[b-yiq4v9jg48] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 1279px) {
    .ts-kpi-strip[b-yiq4v9jg48] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .ts-kpi-strip[b-yiq4v9jg48] {
        grid-template-columns: 1fr;
    }
}

.ts-tabs[b-yiq4v9jg48] {
    margin-bottom: var(--space-4);
}

/* ─── Service cards grid (overview) ─────────────────────────────────────── */

.ts-service-grid[b-yiq4v9jg48] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 1279px) {
    .ts-service-grid[b-yiq4v9jg48] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .ts-service-grid[b-yiq4v9jg48] {
        grid-template-columns: 1fr;
    }
}

.ts-svc-head[b-yiq4v9jg48] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ts-svc-icon[b-yiq4v9jg48] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--dp-surface-secondary);
    color: var(--dp-interactive-primary);
    flex-shrink: 0;
}

.ts-svc-name[b-yiq4v9jg48] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.ts-svc-desc[b-yiq4v9jg48] {
    margin: var(--space-3) 0;
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    line-height: 1.5;
}

.ts-svc-foot[b-yiq4v9jg48] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.ts-svc-count[b-yiq4v9jg48] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-interactive-primary);
}

/* ─── By-service list ───────────────────────────────────────────────────── */

.ts-svc-list[b-yiq4v9jg48] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ts-svc-row[b-yiq4v9jg48] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.ts-svc-row__main[b-yiq4v9jg48] {
    flex: 1;
    min-width: 0;
}

.ts-svc-row__main .ts-svc-usage[b-yiq4v9jg48] {
    display: block;
    margin-top: var(--space-2);
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.ts-svc-row__actions[b-yiq4v9jg48] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .ts-svc-row[b-yiq4v9jg48] {
        flex-direction: column;
    }

    .ts-svc-row__actions[b-yiq4v9jg48] {
        flex-direction: row;
        width: 100%;
    }
}

/* ─── By-tenant table ───────────────────────────────────────────────────── */

/* The table shell (.ts-table-wrap / .ts-table / .ts-col-num / .ts-col-actions) was deleted with
   the hand-written markup it styled — ADR-046 W5 lot (a). DsDataTable owns the wrap, the header
   type, the row separators and the column steps now; alignment comes from DsColumn.Align. Only the
   cell-content classes below survive, because those elements are still written by this page and so
   still carry this stylesheet's scope id. */

.ts-tenant[b-yiq4v9jg48] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ts-tenant-icon[b-yiq4v9jg48] {
    color: var(--dp-interactive-primary);
    display: inline-flex;
}

.ts-tenant-text[b-yiq4v9jg48] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ts-tenant-name[b-yiq4v9jg48] {
    font-weight: 600;
    color: var(--dp-text-primary);
}

.ts-tenant-code[b-yiq4v9jg48] {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--dp-text-secondary);
}
/* _content/BlazorFrontend/Pages/Administration/UsageDashboard.razor.rz.scp.css */
/*
 * UsageDashboard.razor.css
 * Scoped styles for /administration/usage-dashboard (Datanomics.Ds reskin).
 * Rules: --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

/* ADR-066 L2a — the .dm-skeleton block that stood here is gone: this page's waiting state is now the
   shared PageLoading dashboard layout, so there is no per-page description of it left to drift. */

/* ─── KPI strip ─────────────────────────────────────────────────────────── */

.ud-kpi-strip[b-6ow1s3bby9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 1279px) {
    .ud-kpi-strip[b-6ow1s3bby9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .ud-kpi-strip[b-6ow1s3bby9] {
        grid-template-columns: 1fr;
    }
}

/* ─── Two-column layout ─────────────────────────────────────────────────── */

.ud-two-col[b-6ow1s3bby9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
    margin-bottom: var(--space-4);
}

@media (max-width: 1023px) {
    .ud-two-col[b-6ow1s3bby9] {
        grid-template-columns: 1fr;
    }
}

/* ─── Tables ────────────────────────────────────────────────────────────── */

/* The four table shells (.ud-table / .ud-table--compact / .ud-col-num / .ud-col-share /
   .ud-col-actions / .ud-table-wrap) were deleted with the hand-written markup they styled —
   ADR-046 W5 lot (a). DsDataTable owns the wrap, the header type, the separators and the compact
   density (Density="Compact" on the per-service metric tables); alignment and width steps come
   from DsColumn.Align / DsColumn.Size. The cell-content classes below survive: those elements are
   still written by this page and so still carry this stylesheet's scope id. */

.ud-strong[b-6ow1s3bby9] {
    font-weight: 700;
    color: var(--dp-text-primary);
}

.ud-muted[b-6ow1s3bby9] {
    color: var(--dp-text-secondary);
}

.ud-mono[b-6ow1s3bby9] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.ud-share[b-6ow1s3bby9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ud-share :first-child[b-6ow1s3bby9] {
    flex: 1;
}

.ud-share-pct[b-6ow1s3bby9] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
    min-width: 46px;
    text-align: right;
}

.ud-chip-row[b-6ow1s3bby9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.ud-unlimited[b-6ow1s3bby9] {
    margin-left: 4px;
    font-weight: 700;
    color: var(--dp-interactive-primary);
}

/* ─── Alert list ────────────────────────────────────────────────────────── */

.ud-alert-list[b-6ow1s3bby9] {
    display: flex;
    flex-direction: column;
}

.ud-alert-row[b-6ow1s3bby9] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--dp-border-subtle);
    border-left: 3px solid transparent;
}

.ud-alert-row:last-child[b-6ow1s3bby9] {
    border-bottom: none;
}

.ud-alert-row--danger[b-6ow1s3bby9] {
    border-left-color: var(--dp-status-danger);
}

.ud-alert-row--warning[b-6ow1s3bby9] {
    border-left-color: var(--dp-status-warning);
}

.ud-alert-row--danger .ud-alert-row__icon[b-6ow1s3bby9] {
    color: var(--dp-status-danger);
}

.ud-alert-row--warning .ud-alert-row__icon[b-6ow1s3bby9] {
    color: var(--dp-status-warning);
}

.ud-alert-row__icon[b-6ow1s3bby9] {
    display: inline-flex;
    margin-top: 2px;
}

.ud-alert-row__title[b-6ow1s3bby9] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.ud-alert-row__meta[b-6ow1s3bby9] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    margin-top: 2px;
}

.ud-alert-row__time[b-6ow1s3bby9] {
    font-size: 0.6875rem;
    color: var(--dp-text-tertiary);
    margin-top: 2px;
}

/* ─── Service usage cards ───────────────────────────────────────────────── */

.ud-service-grid[b-6ow1s3bby9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 1023px) {
    .ud-service-grid[b-6ow1s3bby9] {
        grid-template-columns: 1fr;
    }
}

.ud-service-card[b-6ow1s3bby9] {
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ud-service-card__head[b-6ow1s3bby9] {
    padding: var(--space-3) var(--space-4);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    background: var(--dp-surface-secondary);
    border-bottom: 1px solid var(--dp-border-subtle);
}

/* ─── Tenant info header ────────────────────────────────────────────────── */

.ud-tenant-info[b-6ow1s3bby9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.ud-tenant-info__name[b-6ow1s3bby9] {
    margin: 0 0 var(--space-2);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--dp-text-primary);
}

.ud-tenant-info__meta[b-6ow1s3bby9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ud-tenant-info__expiry[b-6ow1s3bby9] {
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

/* ─── Metrics grid ──────────────────────────────────────────────────────── */

.ud-metrics-grid[b-6ow1s3bby9] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 1023px) {
    .ud-metrics-grid[b-6ow1s3bby9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .ud-metrics-grid[b-6ow1s3bby9] {
        grid-template-columns: 1fr;
    }
}

.ud-metric-card[b-6ow1s3bby9] {
    padding: var(--space-4);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-md);
    background: var(--dp-surface-input);
}

.ud-metric-card--warning[b-6ow1s3bby9] {
    border-color: var(--dp-status-warning);
}

.ud-metric-card--danger[b-6ow1s3bby9] {
    border-color: var(--dp-status-danger);
}

.ud-metric-card__head[b-6ow1s3bby9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.ud-metric-card__title[b-6ow1s3bby9] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.ud-metric-card__value[b-6ow1s3bby9] {
    margin-bottom: var(--space-2);
}

.ud-metric-card__current[b-6ow1s3bby9] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dp-text-primary);
}

.ud-metric-card__limit[b-6ow1s3bby9] {
    font-size: 0.9375rem;
    color: var(--dp-text-secondary);
}

.ud-metric-card__pct[b-6ow1s3bby9] {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.ud-metric-card__footer[b-6ow1s3bby9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.ud-metric-card__footer .ud-muted[b-6ow1s3bby9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.6875rem;
}

.ud-icon-success[b-6ow1s3bby9] {
    color: var(--dp-status-success);
    display: inline-flex;
}
/* _content/BlazorFrontend/Pages/Administration/VendorAdd.razor.rz.scp.css */
/*
 * VendorAdd.razor.css
 * Scoped styles for /administration/vendor-add (khuôn C: back-link → PageHeader → form panel).
 * Rules: --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

.af-back-link[b-752yvxluzg] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: var(--space-2);
}

.af-back-link:hover[b-752yvxluzg] {
    color: var(--dp-text-primary);
}

.af-wrap[b-752yvxluzg] {
    max-width: 860px;
    margin-top: var(--space-4);
}

.af-row2[b-752yvxluzg],
.af-row3[b-752yvxluzg] {
    display: grid;
    gap: var(--space-4);
}

.af-row2[b-752yvxluzg] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.af-row3[b-752yvxluzg] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.af-row2--top[b-752yvxluzg],
.af-row3--top[b-752yvxluzg] {
    margin-top: var(--space-4);
}

@media (max-width: 767px) {
    .af-row2[b-752yvxluzg],
    .af-row3[b-752yvxluzg] {
        grid-template-columns: 1fr;
    }
}

.af-field[b-752yvxluzg] {
    display: flex;
    flex-direction: column;
}

.af-field--top[b-752yvxluzg] {
    margin-top: var(--space-4);
}

.af-label[b-752yvxluzg] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.af-required[b-752yvxluzg] {
    color: var(--dp-status-danger);
}

.af-hint[b-752yvxluzg] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.af-validation[b-752yvxluzg] {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-status-danger);
}

/* ::deep required: applied to InputText/InputTextArea/InputSelect (Microsoft
   built-ins), which render their own element internally — Blazor CSS isolation
   never propagates the scope attribute into child components, so a plain
   selector would never match. */
[b-752yvxluzg] .af-input,
[b-752yvxluzg] .af-textarea,
[b-752yvxluzg] .af-select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

[b-752yvxluzg] .af-textarea {
    resize: vertical;
}

[b-752yvxluzg] .af-input:focus,
[b-752yvxluzg] .af-textarea:focus,
[b-752yvxluzg] .af-select:focus {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}
/* _content/BlazorFrontend/Pages/Administration/VendorEdit.razor.rz.scp.css */
/*
 * VendorEdit.razor.css
 * Scoped styles for /administration/vendor-edit/{id} (khuôn C: back-link → PageHeader → form panel).
 * Rules: --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

.dm-skeleton[b-d3c28o6uok] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-d3c28o6uok] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-d3c28o6uok] {
    height: 56px;
    width: 100%;
}

.af-back-link[b-d3c28o6uok] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: var(--space-2);
}

.af-back-link:hover[b-d3c28o6uok] {
    color: var(--dp-text-primary);
}

.af-wrap[b-d3c28o6uok] {
    max-width: 860px;
    margin-top: var(--space-4);
}

.af-row2[b-d3c28o6uok],
.af-row3[b-d3c28o6uok] {
    display: grid;
    gap: var(--space-4);
}

.af-row2[b-d3c28o6uok] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.af-row3[b-d3c28o6uok] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.af-row2--top[b-d3c28o6uok],
.af-row3--top[b-d3c28o6uok] {
    margin-top: var(--space-4);
}

@media (max-width: 767px) {
    .af-row2[b-d3c28o6uok],
    .af-row3[b-d3c28o6uok] {
        grid-template-columns: 1fr;
    }
}

.af-field[b-d3c28o6uok] {
    display: flex;
    flex-direction: column;
}

.af-field--top[b-d3c28o6uok] {
    margin-top: var(--space-4);
}

.af-label[b-d3c28o6uok] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.af-required[b-d3c28o6uok] {
    color: var(--dp-status-danger);
}

.af-hint[b-d3c28o6uok] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.af-validation[b-d3c28o6uok] {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-status-danger);
}

/* ::deep required: applied to InputText/InputTextArea/InputSelect (Microsoft
   built-ins), which render their own element internally — Blazor CSS isolation
   never propagates the scope attribute into child components, so a plain
   selector would never match. */
[b-d3c28o6uok] .af-input,
[b-d3c28o6uok] .af-textarea,
[b-d3c28o6uok] .af-select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

[b-d3c28o6uok] .af-textarea {
    resize: vertical;
}

[b-d3c28o6uok] .af-input:focus,
[b-d3c28o6uok] .af-textarea:focus,
[b-d3c28o6uok] .af-select:focus {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}
/* _content/BlazorFrontend/Pages/Administration/VendorManagement.razor.rz.scp.css */
/*
 * VendorManagement.razor.css
 * Scoped styles for /administration/vendor-management (khuôn B: PageHeader + FilterBar + table).
 * Rules: --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

/* ADR-066 L2a — the .dm-skeleton block that stood here is gone: the waiting state is now the
   placeholder rows DsDataTable renders inside the real table, so there is no second description of
   this table's geometry to drift. */

.vm-name[b-6f3evv6lma] {
    font-weight: 600;
    color: var(--dp-text-primary);
}

.vm-muted[b-6f3evv6lma] {
    color: var(--dp-text-secondary);
}

.vm-truncate[b-6f3evv6lma] {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vm-link[b-6f3evv6lma] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--dp-interactive-accent);
    text-decoration: none;
}

.vm-link:hover[b-6f3evv6lma] {
    text-decoration: underline;
}
/* _content/BlazorFrontend/Pages/Analytics/ComplianceReports.razor.rz.scp.css */
/*
 * ComplianceReports.razor.css
 * Scoped styles for /analytics/compliance-reports (ADR-046 W5 lot (b)).
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

/* Actions column — three buttons, i.e. exactly what --ds-table-col-actions (124px) is sized for,
   and the same value `.dp-col--actions` bound before the migration (data-grid.css). DsColumnSize
   has no `Actions` step, so the width is declared here and reaches the column through
   DsColumn.CssClass — the ConsentRecords precedent (ADR-046 W4), not a new mechanism.
   ::deep is required: the <th>/<td> are rendered by DsDataTable and carry ITS scope id, not this
   page's. */

/* Desktop/tablet only — the same media gate `.dp-grid .dp-col--actions` sat behind
   (data-grid.css). Column widths are a desktop concern: below 768px DsDataTable stacks each row
   into a card and releases the steps with `.ds-table .ds-table-td { width: auto }`. Without the
   gate this rule is more specific than that reset AND lives in a bundle ordered after it, so it
   would pin the actions card line at 124px and clip the three buttons. */
@media (min-width: 768px) {
    .cr-reports-table[b-1pb7fin3js]  .cr-col--actions {
        width: var(--ds-table-col-actions);
    }
}
/* _content/BlazorFrontend/Pages/Analytics/ServiceMetrics.razor.rz.scp.css */
/*
 * ServiceMetrics.razor.css
 * Scoped styles for /analytics/service-metrics (ADR-046 W5 lot (b)).
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

/* Actions column — three buttons, i.e. exactly what --ds-table-col-actions (124px) is sized for,
   and the same value `.dp-col--actions` bound before the migration (data-grid.css). DsColumnSize
   has no `Actions` step, so the width is declared here and reaches the column through
   DsColumn.CssClass — the ConsentRecords precedent (ADR-046 W4), not a new mechanism.
   ::deep is required: the <th>/<td> are rendered by DsDataTable and carry ITS scope id, not this
   page's. */

/* Desktop/tablet only — the same media gate `.dp-grid .dp-col--actions` sat behind
   (data-grid.css). Column widths are a desktop concern: below 768px DsDataTable stacks each row
   into a card and releases the steps with `.ds-table .ds-table-td { width: auto }`. Without the
   gate this rule is more specific than that reset AND lives in a bundle ordered after it, so it
   would pin the actions card line at 124px and clip the three buttons. */
@media (min-width: 768px) {
    .sm-services-table[b-udlbj6t9wz]  .sm-col--actions {
        width: var(--ds-table-col-actions);
    }
}
/* _content/BlazorFrontend/Pages/Assessment/Analytics.razor.rz.scp.css */
.assessment-page[b-lacywt0ben],
.assessment-body[b-lacywt0ben] {
    min-width: 0;
}

@media (min-width: 900px) and (max-width: 1279.98px) {
    .assessment-body[b-lacywt0ben]  > .ds-statgrid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.assessment-body[b-lacywt0ben] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The body stack owns spacing; component margins must not add a second gap. */
.assessment-body[b-lacywt0ben]  > .ds-statgrid,
.assessment-body[b-lacywt0ben]  > .ds-filterbar,
.assessment-body[b-lacywt0ben]  > .ds-tabs {
    margin-bottom: 0;
}

.assessment-page[b-lacywt0ben]  td.assessment-col-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Assessment analytics — Design System v2 dashboard composition.
   Component anatomy lives in Datanomics.Ds; this file owns only page layout. */

.aa-loading[b-lacywt0ben] {
    padding-block: var(--spacing-6xl);
}

.aa-chart-grid[b-lacywt0ben] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-3xl);
    margin-bottom: 0;
}

.aa-chart-grid__wide[b-lacywt0ben] {
    grid-column: 1 / -1;
    min-width: 0;
}

.aa-chart[b-lacywt0ben] {
    width: 100%;
    min-width: 0;
    height: 300px;
}

.aa-chart--cohort[b-lacywt0ben] {
    height: 320px;
}

.aa-chart-note[b-lacywt0ben] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin: var(--spacing-xl) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
    line-height: 1.5;
    white-space: normal;
}

.aa-chart-note--warning[b-lacywt0ben] {
    color: var(--color-text-warning-active);
}

.aa-recent-table[b-lacywt0ben] {
    --ds-table-col-actions: var(--ds-table-col-chip);
}

@media (min-width: 768px) {
    .aa-recent-table[b-lacywt0ben]  .aa-col--actions {
        width: var(--ds-table-col-actions);
    }
}

@media (max-width: 899.98px) {
    .aa-chart-grid[b-lacywt0ben] {
        grid-template-columns: minmax(0, 1fr);
    }

    .aa-chart-grid__wide[b-lacywt0ben] {
        grid-column: auto;
    }
}

@media (max-width: 575.98px) {
    .aa-chart[b-lacywt0ben],
    .aa-chart--cohort[b-lacywt0ben] {
        height: 260px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aa-chart[b-lacywt0ben] {
        scroll-behavior: auto;
    }
}
/* _content/BlazorFrontend/Pages/Assessment/Create.razor.rz.scp.css */
.assessment-page[b-dm3htz5y56],
.assessment-body[b-dm3htz5y56] {
    min-width: 0;
}

.at-stepper-wrap[b-dm3htz5y56] { min-width: 0; max-width: 100%; overflow-x: auto; }
.at-stepper-wrap:focus-visible[b-dm3htz5y56] { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.assessment-body[b-dm3htz5y56] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The body stack owns spacing; component margins must not add a second gap. */
.assessment-body[b-dm3htz5y56]  > .ds-statgrid,
.assessment-body[b-dm3htz5y56]  > .ds-filterbar,
.assessment-body[b-dm3htz5y56]  > .ds-tabs {
    margin-bottom: 0;
}

.assessment-page[b-dm3htz5y56]  td.assessment-col-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ============================================================
   Assessment Create (5-step wizard) — scoped styles
   Datanomics.Ds v2 composition; semantic tokens only, no inline colors.
   ============================================================ */

.at-stepper-wrap[b-dm3htz5y56] {
    margin: 0;
}

.at-step-desc[b-dm3htz5y56] {
    margin: 0 0 var(--space-4);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
}

.at-step-head[b-dm3htz5y56] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ---- Type selection cards ---- */
.at-type-grid[b-dm3htz5y56] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 767px) {
    .at-type-grid[b-dm3htz5y56] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Choice cards (template / purpose selection) ---- */
.at-choice-list[b-dm3htz5y56] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.at-choice-list--grid[b-dm3htz5y56] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767px) {
    .at-choice-list--grid[b-dm3htz5y56] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.at-choice-meta[b-dm3htz5y56] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: var(--space-3) 0 0;
    overflow-wrap: anywhere;
}

/* ---- Form fields ---- */
.at-field[b-dm3htz5y56] {
    margin-top: var(--space-3);
}

.at-field:first-child[b-dm3htz5y56] {
    margin-top: 0;
}

.at-field--top[b-dm3htz5y56] {
    margin-top: var(--space-4);
}

.at-row2[b-dm3htz5y56] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}

@media (max-width: 767px) {
    .at-row2[b-dm3htz5y56] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Review cards ---- */
.at-review__dl[b-dm3htz5y56] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-6);
    padding: 0;
}

.at-review__full[b-dm3htz5y56] {
    grid-column: 1 / -1;
}

.at-review__dl dt[b-dm3htz5y56] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.at-review__dl dd[b-dm3htz5y56] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

@media (max-width: 575px) {
    .at-review__dl[b-dm3htz5y56] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.at-review__tags[b-dm3htz5y56] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0;
}

/* ---- Wizard footer ---- */
.at-wizard-footer[b-dm3htz5y56] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.at-wizard-footer__right[b-dm3htz5y56] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
/* _content/BlazorFrontend/Pages/Assessment/Details.razor.rz.scp.css */
.assessment-page[b-6q92d1gb4q],
.assessment-body[b-6q92d1gb4q] {
    min-width: 0;
}

.ad-tabs[b-6q92d1gb4q] { min-width: 0; max-width: 100%; overflow-x: auto; }
.ad-tabs[b-6q92d1gb4q]  .ds-tabs { min-width: max-content; margin-bottom: 0; }

.assessment-body[b-6q92d1gb4q] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The body stack owns spacing; component margins must not add a second gap. */
.assessment-body[b-6q92d1gb4q]  > .ds-statgrid,
.assessment-body[b-6q92d1gb4q]  > .ds-filterbar,
.assessment-body[b-6q92d1gb4q]  > .ds-tabs {
    margin-bottom: 0;
}

.assessment-page[b-6q92d1gb4q]  td.assessment-col-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ============================================================
   Assessment Details — scoped styles (Datanomics.Ds reskin)
   khuôn C: back-link → PageHeader → KPI → tabs → tab content.
   Design System v2 semantic tokens only, no inline colors.
   ============================================================ */

/* Bounded display for uploaded / section images. */
.dp-assessment-uploaded-image[b-6q92d1gb4q] {
    max-height: 300px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-surface-base-primary);
}

.ad-back-actions[b-6q92d1gb4q] {
    margin-top: var(--space-3);
}

.ad-kpi[b-6q92d1gb4q] {
    margin-bottom: 0;
}

.ad-tabs[b-6q92d1gb4q] {
    margin-bottom: 0;
}

/* ---- 2-column grid (overview / workflow) ---- */
.ad-grid[b-6q92d1gb4q] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.ad-grid__side[b-6q92d1gb4q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Workflow tab for readers without history access: only the side column, full width. */
.ad-grid--single[b-6q92d1gb4q] {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 991.98px) {
    .ad-grid[b-6q92d1gb4q] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Definition lists ---- */
.ad-dl[b-6q92d1gb4q] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
}

.ad-dl--single[b-6q92d1gb4q] {
    grid-template-columns: minmax(0, 1fr);
}

.ad-dl__full[b-6q92d1gb4q] {
    grid-column: 1 / -1;
}

.ad-dl dt[b-6q92d1gb4q] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.ad-dl dd[b-6q92d1gb4q] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.5;
}

@media (max-width: 575px) {
    .ad-dl[b-6q92d1gb4q] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ad-tags[b-6q92d1gb4q] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ad-muted[b-6q92d1gb4q] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

/* ---- Progress ---- */
.ad-progress[b-6q92d1gb4q] {
    margin-top: var(--space-4);
}

.ad-progress__head[b-6q92d1gb4q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.ad-progress__pct[b-6q92d1gb4q] {
    font-weight: 700;
    color: var(--color-text-primary);
}

/* ---- Accordion (sections tab) ---- */
.ad-acc-list[b-6q92d1gb4q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ---- Question block ---- */
.ad-q[b-6q92d1gb4q] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--color-bg-surface-base-primary);
}

.ad-q:last-child[b-6q92d1gb4q] {
    margin-bottom: 0;
}

.ad-q__head[b-6q92d1gb4q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.ad-q__title-wrap[b-6q92d1gb4q] {
    min-width: 0;
}

.ad-q__title[b-6q92d1gb4q] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.5;
}

.ad-req[b-6q92d1gb4q] {
    color: var(--color-text-danger-active);
    margin-left: 4px;
}

.ad-q__help[b-6q92d1gb4q] {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin-top: 4px;
}

.ad-q__input[b-6q92d1gb4q] {
    margin-top: var(--space-3);
}

/* ---- Section content ---- */
.ad-sec-content[b-6q92d1gb4q] {
    background: var(--color-bg-surface-base-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.ad-sec-content__img[b-6q92d1gb4q] {
    text-align: center;
    margin-bottom: var(--space-3);
}

.ad-sec-content__desc[b-6q92d1gb4q] {
    font-size: 0.875rem;
    color: var(--color-text-primary);
    line-height: 1.6;
}

.ad-field[b-6q92d1gb4q] {
    margin-top: var(--space-3);
}

.ad-field:first-child[b-6q92d1gb4q] {
    margin-top: 0;
}

.ad-row2[b-6q92d1gb4q] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}

@media (max-width: 767px) {
    .ad-row2[b-6q92d1gb4q] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Yes / No ---- */
.ad-yesno[b-6q92d1gb4q] {
    display: flex;
    gap: var(--space-2);
}

/* ---- Options ---- */
.ad-opts[b-6q92d1gb4q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Native rating choices use DS radio anatomy; the page owns the row only. */
.ad-rating[b-6q92d1gb4q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* ---- Image / uploading ---- */
.ad-image[b-6q92d1gb4q] {
    text-align: center;
}

.ad-uploading[b-6q92d1gb4q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--accent);
    font-size: 0.8125rem;
    padding: var(--space-4);
}

.ad-spinner[b-6q92d1gb4q] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--accent);
    border-radius: var(--radius-pill);
    animation: ad-spin-b-6q92d1gb4q 0.7s linear infinite;
}

@keyframes ad-spin-b-6q92d1gb4q {
    to { transform: rotate(360deg); }
}

.ad-saved[b-6q92d1gb4q] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.75rem;
    color: var(--color-text-success-active);
    margin-top: var(--space-2);
}

/* ---- Workflow timeline ---- */
.ad-flow[b-6q92d1gb4q] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ad-flow[b-6q92d1gb4q]::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--border-subtle);
}

.ad-flow__item[b-6q92d1gb4q] {
    position: relative;
    display: flex;
    gap: var(--space-3);
}

.ad-flow__dot[b-6q92d1gb4q] {
    position: relative;
    z-index: 1;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-surface-base-primary);
    border: 2px solid var(--accent);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ad-flow__body[b-6q92d1gb4q] {
    min-width: 0;
    padding-top: 2px;
}

.ad-flow__meta[b-6q92d1gb4q] {
    margin: var(--space-2) 0 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.ad-flow__sep[b-6q92d1gb4q] {
    margin: 0 var(--space-1);
}

.ad-flow__comment[b-6q92d1gb4q] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-surface-base-secondary);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

/* ---- Current status / actions panels ---- */
.ad-status-panel[b-6q92d1gb4q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}

.ad-status-panel__updated[b-6q92d1gb4q] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.ad-actions[b-6q92d1gb4q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.assessment-body[b-6q92d1gb4q]  .ds-tabs { margin-bottom: 0; }
/* _content/BlazorFrontend/Pages/Assessment/Edit.razor.rz.scp.css */
.assessment-page[b-67y0cihg48],
.assessment-body[b-67y0cihg48] {
    min-width: 0;
}

.ae-tabs[b-67y0cihg48] { min-width: 0; max-width: 100%; overflow-x: auto; }
.ae-tabs[b-67y0cihg48]  .ds-tabs { min-width: max-content; margin-bottom: 0; }

.assessment-body[b-67y0cihg48] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The body stack owns spacing; component margins must not add a second gap. */
.assessment-body[b-67y0cihg48]  > .ds-statgrid,
.assessment-body[b-67y0cihg48]  > .ds-filterbar,
.assessment-body[b-67y0cihg48]  > .ds-tabs {
    margin-bottom: 0;
}

.assessment-page[b-67y0cihg48]  td.assessment-col-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ============================================================
   Assessment Edit — scoped styles (Datanomics.Ds reskin)
   khuôn C form chrome (shared visual language with Create):
   back-link → PageHeader → tabs → 2-col grid. EditForm inputs kept.
   Design System v2 semantic tokens only, no inline colors.
   ============================================================ */

.ae-back-actions[b-67y0cihg48] {
    margin-top: var(--space-3);
}

.ae-tabs[b-67y0cihg48] {
    margin-bottom: 0;
}

/* ---- Grid ---- */
.ae-grid[b-67y0cihg48] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.ae-grid--sections[b-67y0cihg48] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.ae-grid__col[b-67y0cihg48] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 991.98px) {
    .ae-grid[b-67y0cihg48],
    .ae-grid--sections[b-67y0cihg48] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Form fields ---- */
.ae-field[b-67y0cihg48] {
    margin-top: var(--space-3);
}

.ae-field:first-child[b-67y0cihg48] {
    margin-top: 0;
}

.ae-field--check[b-67y0cihg48] {
    display: flex;
    align-items: flex-end;
}

.ae-validation[b-67y0cihg48] {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--color-text-danger-active);
}

.ae-row2[b-67y0cihg48] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}

@media (max-width: 767px) {
    .ae-row2[b-67y0cihg48] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Metadata panel ---- */
.ae-meta[b-67y0cihg48] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: 0.8125rem;
}

.ae-meta__row[b-67y0cihg48] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.ae-meta__row > span:first-child[b-67y0cihg48] {
    color: var(--color-text-secondary);
}

.ae-meta__row > span:last-child[b-67y0cihg48] {
    color: var(--color-text-primary);
    font-weight: 600;
}

.ae-mono[b-67y0cihg48] {
    font-family: var(--font-mono, monospace);
}

.ae-actions[b-67y0cihg48] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ---- Section list ---- */
.ae-sec-list[b-67y0cihg48] {
    display: flex;
    flex-direction: column;
}

.ae-sec-item[b-67y0cihg48] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    cursor: pointer;
    color: var(--color-text-primary);
}

.ae-sec-item:last-child[b-67y0cihg48] {
    border-bottom: none;
}

.ae-sec-item:hover[b-67y0cihg48] {
    background: var(--color-bg-surface-base-secondary);
}

.ae-sec-item--active[b-67y0cihg48] {
    background: var(--accent-soft);
}

.ae-sec-order[b-67y0cihg48] {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-surface-base-secondary);
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.ae-sec-item--active .ae-sec-order[b-67y0cihg48] {
    background: var(--accent);
    color: var(--accent-contrast);
}

.ae-sec-title[b-67y0cihg48] {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ae-sec-empty[b-67y0cihg48] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    text-align: center;
}

.ae-panel-actions[b-67y0cihg48] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.ae-desc[b-67y0cihg48] {
    margin: 0 0 var(--space-4);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* ---- Question list ---- */
.ae-qhead[b-67y0cihg48] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin: var(--space-2) 0 var(--space-3);
}

.ae-qhead__label[b-67y0cihg48] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.ae-q-list[b-67y0cihg48] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ae-q[b-67y0cihg48] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-surface-base-primary);
}

.ae-q__head[b-67y0cihg48] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.ae-q__text[b-67y0cihg48] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.5;
}

.ae-q__num[b-67y0cihg48] {
    color: var(--color-text-secondary);
    margin-right: var(--space-2);
}

.ae-req[b-67y0cihg48] {
    color: var(--color-text-danger-active);
    margin-left: 4px;
}

.ae-q__actions[b-67y0cihg48] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: none;
}

.ae-q__help[b-67y0cihg48] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-top: var(--space-2);
}

.assessment-body[b-67y0cihg48]  .ds-tabs { margin-bottom: 0; }
/* _content/BlazorFrontend/Pages/Assessment/FilingTracker.razor.rz.scp.css */
.assessment-page[b-jhnh2a2uwk],
.assessment-body[b-jhnh2a2uwk] {
    min-width: 0;
}

.assessment-pagination[b-jhnh2a2uwk] { display: flex; justify-content: flex-end; min-width: 0; }

.assessment-body[b-jhnh2a2uwk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The body stack owns spacing; component margins must not add a second gap. */
.assessment-body[b-jhnh2a2uwk]  > .ds-statgrid,
.assessment-body[b-jhnh2a2uwk]  > .ds-filterbar,
.assessment-body[b-jhnh2a2uwk]  > .ds-tabs {
    margin-bottom: 0;
}

.assessment-page[b-jhnh2a2uwk]  td.assessment-col-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Filing tracker — Design System v2 registry + overlay-task composition. */

.aft-loading[b-jhnh2a2uwk] {
    padding-block: var(--spacing-6xl);
}

.aft-muted[b-jhnh2a2uwk] {
    color: var(--color-text-secondary);
}

.aft-history[b-jhnh2a2uwk] {
    padding-bottom: var(--spacing-5xl);
    border-bottom: 1px solid var(--border-subtle);
}

.aft-section-title[b-jhnh2a2uwk] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: 0 0 var(--spacing-xl);
    color: var(--color-text-primary);
    font-size: var(--text-h3);
    font-weight: 600;
}

.aft-activity-list[b-jhnh2a2uwk] {
    display: grid;
    gap: var(--spacing-md);
}

.aft-event-meta[b-jhnh2a2uwk] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
}

.aft-event-notes[b-jhnh2a2uwk] {
    margin: var(--spacing-sm) 0 0;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.aft-form-grid[b-jhnh2a2uwk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-3xl);
}

@media (max-width: 767.98px) {
    .aft-form-grid[b-jhnh2a2uwk] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/BlazorFrontend/Pages/Assessment/Fill.razor.rz.scp.css */
.assessment-page[b-v1t1iwf9pr],
.assessment-body[b-v1t1iwf9pr] {
    min-width: 0;
}

.assessment-body[b-v1t1iwf9pr] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The body stack owns spacing; component margins must not add a second gap. */
.assessment-body[b-v1t1iwf9pr]  > .ds-statgrid,
.assessment-body[b-v1t1iwf9pr]  > .ds-filterbar,
.assessment-body[b-v1t1iwf9pr]  > .ds-tabs {
    margin-bottom: 0;
}

.assessment-page[b-v1t1iwf9pr]  td.assessment-col-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ============================================================
   Assessment Fill (questionnaire) — scoped styles (Datanomics.Ds reskin)
   Design System v2 semantic tokens only, no inline colors.
   ============================================================ */

/* Bounded display for uploaded preview images. */
.dp-assessment-uploaded-image[b-v1t1iwf9pr] {
    max-height: 300px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-surface-base-primary);
}

.at-fl-back-actions[b-v1t1iwf9pr] {
    margin-top: var(--space-3);
}

/* ---- Progress ---- */
.at-fl-progress[b-v1t1iwf9pr] {
    background: var(--color-bg-surface-base-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: 0;
}

.at-fl-progress__top[b-v1t1iwf9pr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.at-fl-progress__label[b-v1t1iwf9pr] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ---- Layout grid ---- */
.at-fl-grid[b-v1t1iwf9pr] {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

@media (max-width: 1023px) {
    .at-fl-grid[b-v1t1iwf9pr] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Section nav ---- */
.at-fl-nav[b-v1t1iwf9pr] {
    position: sticky;
    top: calc(var(--ds-pagehead-height, 0px) + var(--space-4));
    background: var(--color-bg-surface-base-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-height: 60dvh;
    overflow-y: auto;
}

@media (max-width: 1023px) {
    .at-fl-nav[b-v1t1iwf9pr] {
        position: static;
        max-height: none;
    }
}

.at-fl-nav__head[b-v1t1iwf9pr] {
    padding: var(--space-3) var(--space-4);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--border-subtle);
}

.at-fl-nav__item[b-v1t1iwf9pr] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--border-subtle);
}

.at-fl-nav__item:last-child[b-v1t1iwf9pr] {
    border-bottom: none;
}

.at-fl-nav__item:hover[b-v1t1iwf9pr] {
    background: var(--color-bg-surface-base-secondary);
}

.at-fl-nav__item--active[b-v1t1iwf9pr] {
    background: var(--accent-soft);
}

.at-fl-nav__num[b-v1t1iwf9pr] {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-surface-base-secondary);
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.at-fl-nav__num--active[b-v1t1iwf9pr] {
    background: var(--accent);
    color: var(--accent-contrast);
}

.at-fl-nav__title[b-v1t1iwf9pr] {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.at-fl-nav__ic[b-v1t1iwf9pr] {
    flex: none;
    display: inline-flex;
}

.at-fl-nav__ic--done[b-v1t1iwf9pr] {
    color: var(--color-text-success-active);
}

.at-fl-nav__ic--req[b-v1t1iwf9pr] {
    color: var(--color-text-danger-active);
}

.at-fl-nav__empty[b-v1t1iwf9pr] {
    padding: var(--space-5) var(--space-4);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

/* ---- Section main ---- */
.at-fl-sec-head[b-v1t1iwf9pr] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.at-fl-sec-head__title[b-v1t1iwf9pr] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 1rem;
    color: var(--color-text-primary);
}

.at-fl-sec-head__desc[b-v1t1iwf9pr] {
    margin: var(--space-2) 0 0;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

/* ---- Question ---- */
.at-fl-q[b-v1t1iwf9pr] {
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.at-fl-q:last-of-type[b-v1t1iwf9pr] {
    border-bottom: none;
    margin-bottom: 0;
}

.at-fl-field[b-v1t1iwf9pr] {
    margin-top: var(--space-3);
}

/* Rating is a native radio choice; only its row layout belongs to the page. */
.at-fl-rating[b-v1t1iwf9pr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ---- File / image ---- */
.at-fl-file[b-v1t1iwf9pr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.at-fl-uploading[b-v1t1iwf9pr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--accent);
    font-size: 0.8125rem;
    margin-top: var(--space-2);
}

.at-fl-spinner[b-v1t1iwf9pr] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--accent);
    border-radius: var(--radius-pill);
    animation: at-fl-spin-b-v1t1iwf9pr 0.7s linear infinite;
}

@keyframes at-fl-spin-b-v1t1iwf9pr {
    to { transform: rotate(360deg); }
}

.at-fl-attachments[b-v1t1iwf9pr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.at-fl-attachments__label[b-v1t1iwf9pr] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.at-fl-att[b-v1t1iwf9pr] {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    overflow-wrap: anywhere;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.at-fl-att__link[b-v1t1iwf9pr] {
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    align-items: center;
    gap: var(--space-1);
    color: var(--accent);
    text-decoration: none;
}

.at-fl-att__link:hover[b-v1t1iwf9pr] {
    text-decoration: underline;
}

.at-fl-att__size[b-v1t1iwf9pr] {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.at-fl-att__fail[b-v1t1iwf9pr] {
    color: var(--color-text-secondary);
}

.at-fl-att__err[b-v1t1iwf9pr] {
    color: var(--color-text-danger-active);
    font-size: 0.75rem;
}

.at-fl-imagebox[b-v1t1iwf9pr] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--color-bg-surface-base-primary);
}

.at-fl-image[b-v1t1iwf9pr] {
    position: relative;
    text-align: center;
    margin-bottom: var(--space-3);
}

.at-fl-image__action[b-v1t1iwf9pr] {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
}

/* ---- Optional attachment ---- */
.at-fl-optattach[b-v1t1iwf9pr] {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

.at-fl-optattach__head[b-v1t1iwf9pr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.at-fl-saved[b-v1t1iwf9pr] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.75rem;
    color: var(--color-text-success-active);
    margin-top: var(--space-2);
}

/* ---- Footer ---- */
.at-fl-footer[b-v1t1iwf9pr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.at-fl-main[b-v1t1iwf9pr],
.at-fl-sec-head__text[b-v1t1iwf9pr] {
    min-width: 0;
}

.assessment-body[b-v1t1iwf9pr]  .ds-tabs { margin-bottom: 0; }
/* _content/BlazorFrontend/Pages/Assessment/Index.razor.rz.scp.css */
.assessment-page[b-c0mq2hhxmr],
.assessment-body[b-c0mq2hhxmr] {
    min-width: 0;
}

.assessment-body[b-c0mq2hhxmr] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The body stack owns spacing; component margins must not add a second gap. */
.assessment-body[b-c0mq2hhxmr]  > .ds-statgrid,
.assessment-body[b-c0mq2hhxmr]  > .ds-filterbar,
.assessment-body[b-c0mq2hhxmr]  > .ds-tabs {
    margin-bottom: 0;
}

.assessment-page[b-c0mq2hhxmr]  td.assessment-col-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ============================================================
   Assessment Index (dashboard + list hub) — scoped styles
   Datanomics.Ds v2 composition; semantic tokens only, no inline colors.
   ============================================================ */

.at-page[b-c0mq2hhxmr] {
    width: 100%;
    min-width: 0;
}

.at-registry-panel[b-c0mq2hhxmr] {
    min-width: 0;
}

.at-registry-toolbar[b-c0mq2hhxmr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0;

}

.at-registry-heading[b-c0mq2hhxmr] {
    min-width: 0;
}

.at-registry-heading h2[b-c0mq2hhxmr] {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.at-registry-heading p[b-c0mq2hhxmr] {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.5;
}

.at-registry-utilities[b-c0mq2hhxmr] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

.at-filter-wrap[b-c0mq2hhxmr] {
    min-width: 0;
}

.at-filter-wrap[b-c0mq2hhxmr]  .ds-filterbar {
    margin-bottom: 0;
}

.at-feedback[b-c0mq2hhxmr] {
    padding: var(--space-6);
}

.at-table[b-c0mq2hhxmr] {
    min-width: 0;
}

.at-row-actions[b-c0mq2hhxmr] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Table primary cell (name + description) */
.at-cell[b-c0mq2hhxmr] {
    min-width: 0;
}

.at-cell__name[b-c0mq2hhxmr] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: hidden;
    text-overflow: ellipsis;
}

.at-cell__sub[b-c0mq2hhxmr] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: normal;
    overflow-wrap: anywhere;
    margin-top: 2px;
}

.at-muted[b-c0mq2hhxmr] {
    color: var(--color-text-secondary);
}

/* Due-date emphasis */
.at-due[b-c0mq2hhxmr] {
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.at-due--overdue[b-c0mq2hhxmr] {
    color: var(--color-text-danger-active);
}

.at-due--soon[b-c0mq2hhxmr] {
    color: var(--accent);
}

.at-pagination[b-c0mq2hhxmr] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 767.98px) {
    .at-registry-toolbar[b-c0mq2hhxmr] {
        align-items: flex-start;
        padding: 0;
    }

    .at-registry-utilities[b-c0mq2hhxmr] {
        flex-direction: column;
        align-items: flex-end;
    }

    .at-filter-wrap[b-c0mq2hhxmr] {
        padding-inline: 0;
    }

}
/* _content/BlazorFrontend/Pages/Assessment/ReviewSchedule.razor.rz.scp.css */
.assessment-page[b-f9mlhjci6k],
.assessment-body[b-f9mlhjci6k] {
    min-width: 0;
}

.assessment-pagination[b-f9mlhjci6k] { display: flex; justify-content: flex-end; min-width: 0; }

.assessment-body[b-f9mlhjci6k] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The body stack owns spacing; component margins must not add a second gap. */
.assessment-body[b-f9mlhjci6k]  > .ds-statgrid,
.assessment-body[b-f9mlhjci6k]  > .ds-filterbar,
.assessment-body[b-f9mlhjci6k]  > .ds-tabs {
    margin-bottom: 0;
}

.assessment-page[b-f9mlhjci6k]  td.assessment-col-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Review schedule — Design System v2 registry/calendar composition. */

.ars-loading[b-f9mlhjci6k] {
    padding-block: var(--spacing-6xl);
}

.ars-filter[b-f9mlhjci6k] {
    display: flex;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: 0;
}

.ars-assessment[b-f9mlhjci6k] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    min-width: 0;
}

.ars-muted[b-f9mlhjci6k] {
    color: var(--color-text-secondary);
}

.ars-actions[b-f9mlhjci6k] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.ars-modal-fields[b-f9mlhjci6k] {
    display: grid;
    gap: var(--spacing-3xl);
    margin-top: var(--spacing-3xl);
}

@media (max-width: 767.98px) {
    .ars-filter[b-f9mlhjci6k] {
        display: block;
    }

    .ars-filter[b-f9mlhjci6k]  .ds-segmented {
        width: max-content;
        min-width: 100%;
    }
}
/* _content/BlazorFrontend/Pages/Assessment/TemplateDetails.razor.rz.scp.css */
.assessment-page[b-88odbzw3cs],
.assessment-body[b-88odbzw3cs] {
    min-width: 0;
}

.atd-tabs[b-88odbzw3cs] { min-width: 0; max-width: 100%; overflow-x: auto; }
.atd-tabs[b-88odbzw3cs]  .ds-tabs { min-width: max-content; margin-bottom: 0; }

.assessment-body[b-88odbzw3cs] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The body stack owns spacing; component margins must not add a second gap. */
.assessment-body[b-88odbzw3cs]  > .ds-statgrid,
.assessment-body[b-88odbzw3cs]  > .ds-filterbar,
.assessment-body[b-88odbzw3cs]  > .ds-tabs {
    margin-bottom: 0;
}

.assessment-page[b-88odbzw3cs]  td.assessment-col-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ============================================================
   Assessment Template detail — scoped styles (Datanomics.Ds reskin)
   khuôn C: back-link → PageHeader → status → KPI → tabs → 2-col grid.
   Design System v2 semantic tokens only, no inline colors.
   ============================================================ */

.atd-back-actions[b-88odbzw3cs] {
    margin-top: var(--space-3);
}

.atd-tabs[b-88odbzw3cs] {
    margin-bottom: 0;
}

.atd-grid[b-88odbzw3cs] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.atd-grid--sections[b-88odbzw3cs] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

@media (max-width: 991.98px) {
    .atd-grid[b-88odbzw3cs],
    .atd-grid--sections[b-88odbzw3cs] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.atd-desc[b-88odbzw3cs] {
    margin: 0 0 var(--space-4);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.atd-dl[b-88odbzw3cs] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
}

.atd-dl dt[b-88odbzw3cs] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.atd-dl dd[b-88odbzw3cs] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.atd-muted[b-88odbzw3cs] {
    color: var(--color-text-secondary);
    font-weight: 400;
}

.atd-meta[b-88odbzw3cs] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: 0.8125rem;
}

.atd-meta__row[b-88odbzw3cs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.atd-meta__row > span:first-child[b-88odbzw3cs] {
    color: var(--color-text-secondary);
}

.atd-meta__row > span:last-child[b-88odbzw3cs] {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* ---- Section list ---- */
.atd-sec-list[b-88odbzw3cs] {
    display: flex;
    flex-direction: column;
}

.atd-sec-item[b-88odbzw3cs] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    cursor: pointer;
    color: var(--color-text-primary);
}

.atd-sec-item:last-child[b-88odbzw3cs] {
    border-bottom: none;
}

.atd-sec-item:hover[b-88odbzw3cs] {
    background: var(--color-bg-surface-base-secondary);
}

.atd-sec-item--active[b-88odbzw3cs] {
    background: var(--accent-soft);
}

.atd-sec-order[b-88odbzw3cs] {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-surface-base-secondary);
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.atd-sec-item--active .atd-sec-order[b-88odbzw3cs] {
    background: var(--accent);
    color: var(--accent-contrast);
}

.atd-sec-title[b-88odbzw3cs] {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.atd-sec-empty[b-88odbzw3cs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    text-align: center;
}

.atd-panel-actions[b-88odbzw3cs] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* ---- Question list ---- */
.atd-qhead[b-88odbzw3cs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin: var(--space-2) 0 var(--space-3);
}

.atd-qhead__label[b-88odbzw3cs] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.atd-q-list[b-88odbzw3cs] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.atd-q[b-88odbzw3cs] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-surface-base-primary);
}

.atd-q__head[b-88odbzw3cs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.atd-q__text[b-88odbzw3cs] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.5;
}

.atd-q__num[b-88odbzw3cs] {
    color: var(--color-text-secondary);
    margin-right: var(--space-2);
}

.atd-req[b-88odbzw3cs] {
    color: var(--color-text-danger-active);
    margin-left: 4px;
}

.atd-q__actions[b-88odbzw3cs] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: none;
}

.atd-q__help[b-88odbzw3cs] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-top: var(--space-2);
}

/* ---- Modal form fields ---- */
.atd-field[b-88odbzw3cs] {
    margin-top: var(--space-3);
}

.atd-field:first-child[b-88odbzw3cs] {
    margin-top: 0;
}

.atd-row2[b-88odbzw3cs] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}

@media (max-width: 767px) {
    .atd-row2[b-88odbzw3cs] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.assessment-body[b-88odbzw3cs]  .ds-tabs { margin-bottom: 0; }
/* _content/BlazorFrontend/Pages/Assessment/Templates.razor.rz.scp.css */
.assessment-page[b-nh6zy6xlkz],
.assessment-body[b-nh6zy6xlkz] {
    min-width: 0;
}

.assessment-body[b-nh6zy6xlkz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The body stack owns spacing; component margins must not add a second gap. */
.assessment-body[b-nh6zy6xlkz]  > .ds-statgrid,
.assessment-body[b-nh6zy6xlkz]  > .ds-filterbar,
.assessment-body[b-nh6zy6xlkz]  > .ds-tabs {
    margin-bottom: 0;
}

.assessment-page[b-nh6zy6xlkz]  td.assessment-col-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ============================================================
   Assessment Templates — scoped styles (Datanomics.Ds reskin)
   Uses Design System v2 semantic tokens only. No hardcoded colors.
   ============================================================ */

/* ---- Template card grid ---- */
.at-tpl-grid[b-nh6zy6xlkz] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 1279px) {
    .at-tpl-grid[b-nh6zy6xlkz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .at-tpl-grid[b-nh6zy6xlkz] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.at-tpl-card[b-nh6zy6xlkz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
}

.at-tpl-card__head[b-nh6zy6xlkz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.at-tpl-card__title-wrap[b-nh6zy6xlkz] {
    min-width: 0;
}

.at-tpl-card__name[b-nh6zy6xlkz] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.35;
}

.at-tpl-card__sub[b-nh6zy6xlkz] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.35;
    margin-top: 2px;
}

.at-tpl-card__desc[b-nh6zy6xlkz] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.at-tpl-card__badges[b-nh6zy6xlkz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.at-tpl-card__meta[b-nh6zy6xlkz] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: auto;
}

.at-tpl-card__meta span[b-nh6zy6xlkz] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.at-tpl-card__actions[b-nh6zy6xlkz] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.at-tpl-card__actions > :first-child[b-nh6zy6xlkz] {
    flex: 1;
}

.at-tpl-card__foot[b-nh6zy6xlkz] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-2);
}

.at-pagination[b-nh6zy6xlkz] {
    display: flex;
    justify-content: flex-end;
}

/* ---- Modal form fields ---- */
.at-form-field[b-nh6zy6xlkz] {
    margin-top: var(--space-3);
}

.at-form-field:first-child[b-nh6zy6xlkz] {
    margin-top: 0;
}

.at-form-row2[b-nh6zy6xlkz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}

@media (max-width: 767px) {
    .at-form-row2[b-nh6zy6xlkz] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/BlazorFrontend/Pages/Audit/AuditDashboard.razor.rz.scp.css */
.ad-page[b-97xnaxd2oj] {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
}

.ad-page > *[b-97xnaxd2oj] {
    min-width: 0;
}

.ad-chart-grid[b-97xnaxd2oj],
.ad-main-grid[b-97xnaxd2oj] {
    display: grid;
    min-width: 0;
    gap: var(--space-4);
}

.ad-chart-grid[b-97xnaxd2oj] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ad-main-grid[b-97xnaxd2oj] {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: start;
}

.ad-chart[b-97xnaxd2oj] {
    width: 100%;
    min-height: 300px;
}

.ad-alerts-table[b-97xnaxd2oj] {
    --ds-table-col-actions: 56px;
    min-width: 0;
}

.ad-alert-title[b-97xnaxd2oj] {
    color: var(--color-text-primary, var(--text-strong));
    font-weight: 600;
}

.ad-muted[b-97xnaxd2oj] {
    color: var(--color-text-secondary, var(--text-muted));
}

.ad-action-list[b-97xnaxd2oj] {
    display: grid;
    gap: var(--space-2);
}

.ad-compliance[b-97xnaxd2oj] {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.ad-compliance-note[b-97xnaxd2oj] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.8125rem;
    font-weight: 600;
}

.ad-compliance-note--success[b-97xnaxd2oj] {
    color: var(--color-text-success, var(--success));
}

.ad-compliance-note--brand[b-97xnaxd2oj] {
    color: var(--color-text-brand, var(--accent));
}

.ad-compliance-note--danger[b-97xnaxd2oj] {
    color: var(--color-text-danger, var(--danger));
}

@media (min-width: 768px) {
    .ad-alerts-table[b-97xnaxd2oj]  .ad-col--actions {
        width: var(--ds-table-col-actions);
    }
}

@media (max-width: 1099.98px) {
    .ad-main-grid[b-97xnaxd2oj] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .ad-chart-grid[b-97xnaxd2oj] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ad-chart[b-97xnaxd2oj] {
        min-height: 260px;
    }
}
/* _content/BlazorFrontend/Pages/Auth/Login.razor.rz.scp.css */
/* Login screen migrated from local Figma frame 477:28571 / 478:28773.
   DsAuthPanel owns the split-panel geometry; this file owns login states. */

.auth-login-stage[b-0dsf7c0yxb] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 100%;
    padding: 24px;
    background: var(--bg-canvas);
}

.auth-login-card[b-0dsf7c0yxb] {
    --accent: var(--teal-700);
    --accent-hover: var(--teal-700);
    --accent-soft: var(--teal-50);
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
}

[data-pp-theme="dark"] .auth-login-card[b-0dsf7c0yxb] {
    /* Provisional dark conversion of the Figma light CTA: raise the teal
       luminance and pair it with the dark inverse foreground. */
    --accent: var(--teal-400);
    --accent-hover: var(--teal-500);
    --accent-contrast: var(--text-inverse);
}

.auth-login-card[b-0dsf7c0yxb]  .ds-auth-panel {
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
}

.auth-login-visual[b-0dsf7c0yxb] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
}

.auth-login-card[b-0dsf7c0yxb]  .ds-auth-panel-notice:empty {
    display: none;
}

.auth-login-card[b-0dsf7c0yxb]  .ds-auth-panel-content {
    transform: translateY(-24px);
}

.auth-login-card[b-0dsf7c0yxb]  .auth-form-head {
    gap: 20px;
}

.auth-login-card[b-0dsf7c0yxb]  .auth-form-head p {
    margin-top: 0;
}

.auth-login-card[b-0dsf7c0yxb]  .ds-alert {
    margin-bottom: 8px;
}

.auth-login-card[b-0dsf7c0yxb]  .auth-login-form,
.auth-login-flow[b-0dsf7c0yxb] {
    display: grid;
    gap: 16px;
}

.auth-login-field[b-0dsf7c0yxb] {
    gap: 4px;
    margin: 0;
}

.auth-login-input-shell[b-0dsf7c0yxb] {
    position: relative;
    display: flex;
    width: 100%;
    height: 52px;
}

.auth-login-input[b-0dsf7c0yxb],
.auth-field__input-group .auth-login-input[b-0dsf7c0yxb] {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    padding: 15px 12px 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    /* Figma's outline input is a white/surface control. The legacy
       .auth-field__input rule is loaded globally with a grey inset surface. */
    background: var(--bg-surface) !important;
    color: var(--text-strong);
    font: 400 14px/20px var(--font-body);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-field__input-group .auth-login-input[b-0dsf7c0yxb] {
    padding-right: 44px;
}

.auth-login-input[b-0dsf7c0yxb]::placeholder {
    color: var(--text-subtle);
}

.auth-login-input:hover:not(:disabled)[b-0dsf7c0yxb] {
    border-color: var(--border-control);
}

.auth-login-input:focus[b-0dsf7c0yxb] {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--ring);
}

.auth-login-input[aria-invalid="true"][b-0dsf7c0yxb] {
    border-color: var(--danger);
}

.auth-login-input:-webkit-autofill[b-0dsf7c0yxb],
.auth-login-input:-webkit-autofill:hover[b-0dsf7c0yxb],
.auth-login-input:-webkit-autofill:focus[b-0dsf7c0yxb] {
    -webkit-text-fill-color: var(--text-strong);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-surface) inset;
    caret-color: var(--text-strong);
}

.auth-login-floating-label[b-0dsf7c0yxb] {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 12px;
    max-width: calc(100% - 24px);
    padding: 0 4px;
    transform: translateY(-50%);
    overflow: hidden;
    background: var(--bg-surface) !important;
    color: var(--text-muted);
    font: 500 12px/18px var(--font-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-field__required[b-0dsf7c0yxb] {
    color: var(--danger);
}

.auth-login-hint[b-0dsf7c0yxb] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 16px;
    color: var(--text-muted);
    font: 400 12px/16px var(--font-body);
}

.auth-field__error[b-0dsf7c0yxb] {
    color: var(--danger);
    font: 400 12px/16px var(--font-body);
}

.auth-login-card[b-0dsf7c0yxb]  .auth-login-submit.ds-btn {
    min-height: 52px;
    padding: 15px 24px;
    border-radius: var(--radius-sm);
    font: 700 14px/20px var(--font-display);
}

.auth-login-support[b-0dsf7c0yxb] {
    margin-top: 24px;
}

.auth-login-support-link[b-0dsf7c0yxb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.auth-inline-link[b-0dsf7c0yxb],
.auth-login-change-button[b-0dsf7c0yxb] {
    color: var(--accent);
    font: 600 14px/20px var(--font-body);
    text-decoration: none;
}

.auth-inline-link:hover[b-0dsf7c0yxb],
.auth-login-change-button:hover[b-0dsf7c0yxb] {
    color: var(--accent-hover);
    text-decoration: underline;
}

.auth-login-identity[b-0dsf7c0yxb] {
    display: flex;
    min-height: 80px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-align: center;
}

.auth-login-identity p[b-0dsf7c0yxb] {
    margin: 0;
    color: var(--text-muted);
    font: 400 14px/20px var(--font-body);
}

.auth-login-identity .auth-identity-chip__email[b-0dsf7c0yxb] {
    display: block;
    width: 100%;
    overflow: hidden;
    color: var(--text-strong);
    font: 500 16px/24px var(--font-body);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-login-change-email[b-0dsf7c0yxb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-muted);
    font: 400 14px/20px var(--font-body);
}

.auth-login-change-button[b-0dsf7c0yxb] {
    display: inline;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    cursor: pointer;
}

.auth-login-change-button:hover[b-0dsf7c0yxb] {
    background: transparent;
}

.auth-login-password-field[b-0dsf7c0yxb] {
    min-height: 80px;
}

.auth-login-card .auth-field__reveal[b-0dsf7c0yxb] {
    right: 8px;
    width: 36px;
    height: 36px;
    color: var(--text-muted);
}

.auth-login-card .auth-field__reveal:hover[b-0dsf7c0yxb] {
    background: var(--bg-subtle);
    color: var(--text-strong);
}

.auth-login-forgot-row[b-0dsf7c0yxb] {
    display: flex;
    min-height: 20px;
    align-items: center;
    justify-content: flex-end;
}

.auth-login-forgot-row .auth-inline-link[b-0dsf7c0yxb] {
    font-size: 13px;
}

.auth-sso-complete[b-0dsf7c0yxb] {
    display: block;
    padding-block: 16px;
}

.auth-divider-text[b-0dsf7c0yxb] {
    color: var(--text-muted);
}

@media (max-width: 899.98px) {
    .auth-login-stage[b-0dsf7c0yxb] {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0;
    }

    .auth-login-card[b-0dsf7c0yxb],
    .auth-login-card[b-0dsf7c0yxb]  .ds-auth-panel {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .auth-login-card[b-0dsf7c0yxb]  .ds-auth-panel--separated {
        gap: 0;
    }

    .auth-login-card[b-0dsf7c0yxb]  .ds-auth-panel--separated .ds-auth-panel-card {
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    .auth-login-card[b-0dsf7c0yxb]  .ds-auth-panel-brand {
        justify-content: flex-start;
        padding-inline: 20px;
    }

    .auth-login-card[b-0dsf7c0yxb]  .ds-auth-panel-content {
        width: min(calc(100% - 40px), 432px);
        transform: none;
    }

    .auth-login-card[b-0dsf7c0yxb]  .ds-auth-panel h1,
    .auth-login-card[b-0dsf7c0yxb]  .ds-auth-panel h2 {
        font-size: 28px;
        line-height: 36px;
    }

    .auth-login-change-email[b-0dsf7c0yxb] {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-login-input[b-0dsf7c0yxb] {
        transition-duration: 0.001ms;
    }
}
/* _content/BlazorFrontend/Pages/Auth/Profile.razor.rz.scp.css */
/* Profile account hub — Design System v2 surfaces and semantic account actions. */

.dm-skeleton[b-dnw8tnumwx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.dm-skeleton-title[b-dnw8tnumwx] {
    width: min(360px, 80%);
    height: 52px;
}

.dm-skeleton-hero[b-dnw8tnumwx] {
    width: 100%;
    height: 120px;
}

.dm-skeleton-grid[b-dnw8tnumwx] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: var(--space-4);
}

.dm-skeleton-panel[b-dnw8tnumwx] {
    width: 100%;
    height: 380px;
}

.pf-page[b-dnw8tnumwx] {
    display: flex;
    flex-direction: column;
}

.pf-page[b-dnw8tnumwx]  .pf-hero-card {
    border-radius: var(--radius-lg);
}

.pf-identity[b-dnw8tnumwx] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-width: 0;
}

.pf-identity[b-dnw8tnumwx]  .ds-avatar {
    flex: 0 0 auto;
}

.pf-identity-copy[b-dnw8tnumwx] {
    min-width: 0;
}

.pf-identity-copy h2[b-dnw8tnumwx] {
    margin: 0;
    color: var(--soft-white);
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 700;
    letter-spacing: var(--ls-heading);
}

.pf-identity-copy p[b-dnw8tnumwx] {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    color: var(--slate-300);
    font-size: var(--text-sm);
}

.pf-badges[b-dnw8tnumwx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.pf-content-grid[b-dnw8tnumwx] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    align-items: start;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.pf-info-grid[b-dnw8tnumwx] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.pf-info-row[b-dnw8tnumwx] {
    display: grid;
    grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
    min-height: 50px;
    padding: var(--space-2) 0;
    border-bottom: var(--border-separator);
}

.pf-info-row:first-child[b-dnw8tnumwx] {
    padding-top: 0;
}

.pf-info-row:last-child[b-dnw8tnumwx] {
    padding-bottom: 0;
    border-bottom: 0;
}

.pf-info-label[b-dnw8tnumwx],
.pf-info-value[b-dnw8tnumwx] {
    margin: 0;
}

.pf-info-label[b-dnw8tnumwx] {
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
}

.pf-info-value[b-dnw8tnumwx] {
    min-width: 0;
    color: var(--text-strong);
    font-size: var(--text-sm);
    font-weight: 500;
}

.pf-break-word[b-dnw8tnumwx] {
    overflow-wrap: anywhere;
}

.pf-muted[b-dnw8tnumwx] {
    color: var(--text-subtle);
    font-weight: 400;
}

.pf-action-list[b-dnw8tnumwx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@media (max-width: 1023px) {
    .dm-skeleton-grid[b-dnw8tnumwx],
    .pf-content-grid[b-dnw8tnumwx] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .pf-identity[b-dnw8tnumwx] {
        align-items: flex-start;
        gap: var(--space-3);
    }

    .pf-identity-copy h2[b-dnw8tnumwx] {
        font-size: var(--text-h3);
    }

    .pf-info-row[b-dnw8tnumwx] {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: var(--space-3) 0;
    }
}
/* _content/BlazorFrontend/Pages/Compliance/CookieConsent/Analytics.razor.rz.scp.css */
/* Same heading/content inset as the Cookie Consent registries and subpages. */
.ana-page[b-tq523g5enr] { width: 100%; min-width: 0; }
.ana-page-body[b-tq523g5enr] { min-width: 0; padding-top: var(--space-4); }

/* CK-02 Cookie Consent Analytics (Phase 4 wave 4a). Token-only, layout-only rules —
   every component visual comes from Datanomics.Ds. */

/* The .ana-skeleton block that stood here was deleted with the markup that used it (ADR-066 D6:
   a screen's own skeleton CSS goes in the same diff as the screen, so no orphan rules are left
   behind). The loading geometry now comes from the table itself — .ds-table-ph in
   DsDataTable.razor.css. */
/* _content/BlazorFrontend/Pages/Compliance/CookieConsent/BannerConfiguration.razor.rz.scp.css */
/* CK-05 Banner Configuration + CK-06 Mã nhúng (mockup PrivacyPlatform.dc.html 2581-2621).
   Token-only, layout-only rules — every component visual comes from Datanomics.Ds. */

/* The .bc-skeleton block that stood here was deleted with the markup that used it (ADR-066 D6:
   a screen's own skeleton CSS goes in the same diff as the screen, so no orphan rules are left
   behind). The loading geometry now comes from the table itself — .ds-table-ph in
   DsDataTable.razor.css. */

/* ── Page frame ──────────────────────────────────────────────────────────── */

/* DS v2: the page owns the single 16px gap below its heading (and optional tabs). */
.bc-page-body[b-jmt0jotooy] {
    min-width: 0;
    padding-top: var(--space-4);
}

.bc-registry-page[b-jmt0jotooy],
.bc-table[b-jmt0jotooy] {
    width: 100%;
}

.bc-domain-context[b-jmt0jotooy] {
    margin-bottom: var(--space-4);
}

.bc-table-toolbar[b-jmt0jotooy]  .ds-filterbar-search {
    flex: 1 1 320px;
}

.bc-table-actions[b-jmt0jotooy] {
    display: flex;
    flex-wrap: wrap;
    order: 1;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.bc-alert-action[b-jmt0jotooy] {
    margin-top: var(--space-2);
}

/* ── Table cells ─────────────────────────────────────────────────────────── */

/* This registry is a ratio table, not a fixed-width canvas. The previous pixel tracks totalled
   1175px, so the common 1140px content frame always overflowed even though every value has a
   bounded/wrapping presentation. Keep the column budget at exactly 100%; DsDataTable.FixedLayout
   then distributes the available container instead of manufacturing a desktop scroller. The
   actions track retains 11% so its 76px trigger plus cell insets still fits at the DS 900px tablet
   floor. Genuine narrower viewports continue to use DsDataTable's tablet scroll/mobile cards. */
.bc-table[b-jmt0jotooy]  .bc-col--domain { width: 17%; }
.bc-table[b-jmt0jotooy]  .bc-col--title { width: 16%; }
.bc-table[b-jmt0jotooy]  .bc-col--theme { width: 8%; }
.bc-table[b-jmt0jotooy]  .bc-col--position { width: 10%; }
.bc-table[b-jmt0jotooy]  .bc-col--status { width: 12%; }
.bc-table[b-jmt0jotooy]  .bc-col--binding { width: 16%; }
.bc-table[b-jmt0jotooy]  .bc-col--updated { width: 10%; }
.bc-table[b-jmt0jotooy]  .bc-col--actions { width: 11%; }

.bc-row-actions[b-jmt0jotooy] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bc-domain-cell[b-jmt0jotooy] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.bc-domain-cell > div[b-jmt0jotooy] {
    min-width: 0;
}

.bc-domain-cell .bc-cell-primary[b-jmt0jotooy],
.bc-domain-cell .bc-cell-secondary[b-jmt0jotooy] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Data table title/message cell. */
.bc-title-cell[b-jmt0jotooy] {
    max-width: 220px;
}

.bc-cell-primary[b-jmt0jotooy] {
    font-weight: 600;
    color: var(--color-text-primary, var(--text-strong));
}

.bc-title-cell .bc-cell-primary[b-jmt0jotooy] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bc-cell-secondary[b-jmt0jotooy] {
    color: var(--color-text-secondary, var(--text-muted));
}

.bc-cell-block[b-jmt0jotooy] {
    display: block;
    line-height: 1.35;
    white-space: normal;
}

/* Domain/host cells read as identifiers, not prose (contract: monospace cells). */
.mono[b-jmt0jotooy] {
    font-family: var(--font-mono);
}

/* ── Editor form ─────────────────────────────────────────────────────────── */

/* Create/Edit modal scroll wrapper (long multi-section form). */
.bc-modal-scroll[b-jmt0jotooy] {
    max-height: 65vh;
    overflow-y: auto;
    padding-right: var(--space-2);
}

.bc-form[b-jmt0jotooy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Replaces the Bootstrap row/col-md-* scaffolding: a two-column field grid, with
   3-column and upload variants, collapsing to a single column on narrow viewports. */
.bc-grid[b-jmt0jotooy] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.bc-grid + .bc-grid[b-jmt0jotooy] {
    margin-top: var(--space-4);
}

.bc-grid--3[b-jmt0jotooy] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bc-grid--logo[b-jmt0jotooy] {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.bc-span-full[b-jmt0jotooy] {
    grid-column: 1 / -1;
}

/* A control with no label of its own sits on the baseline of its labelled neighbours. */
.bc-field-aligned[b-jmt0jotooy] {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin-top: 22px;
}

.bc-switch-list[b-jmt0jotooy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Colour fields ───────────────────────────────────────────────────────── */

.bc-color-row[b-jmt0jotooy] {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.bc-color-row--4[b-jmt0jotooy] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bc-color-row--2[b-jmt0jotooy] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The native swatch inside DsInput's AddonLeft slot. It paints the TENANT's chosen banner
   colour, which is data rather than a theme token, so no --dp/--ds colour applies to its
   fill; only its geometry and its own border are styled here. */
.bc-swatch[b-jmt0jotooy] {
    width: 28px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--color-border-base-subtle, var(--border-subtle));
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
}

.bc-color-row[b-jmt0jotooy]  .ds-input-addon {
    padding-inline-end: 0;
}

/* ── Logo upload section ─────────────────────────────────────────────────── */

.bc-logo-empty[b-jmt0jotooy] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.8125rem;
}

/*
 * Logo preview row. Logo height is data-driven (configured per banner:
 * 20-80px), so we expose --bc-logo-max-height as a CSS custom property and
 * consume it inside the scoped image rule. Approved exception to the
 * "no inline style" rule — only the dynamic CSS variable is set inline,
 * all other styling is resolved via tokens.
 */
.bc-logo-preview[b-jmt0jotooy] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border-base-subtle, var(--border-subtle));
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-base-secondary, var(--bg-subtle));
}

.bc-logo-preview__img[b-jmt0jotooy] {
    max-height: var(--bc-logo-max-height, 40px);
    width: auto;
    object-fit: contain;
}

.bc-logo-preview__status[b-jmt0jotooy] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-grow: 1;
    color: var(--color-text-brand, var(--accent));
    font-weight: 500;
}

/* ── Live preview modal (iframe embed of real SDK) ───────────────────────── */

/* The iframe hosts the tenant's own banner on a simulated page: --white is the
   component surface token in both themes, so the frame stays a page-like canvas
   without introducing a raw colour value. */
.bc-preview-iframe[b-jmt0jotooy] {
    width: 100%;
    height: 70vh;
    border: 1px solid var(--color-border-base-subtle, var(--border-subtle));
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-base-primary, var(--white));
}

.bc-preview-loading[b-jmt0jotooy] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70vh;
    color: var(--color-text-secondary, var(--text-muted));
}

.bc-preview-hint[b-jmt0jotooy] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.8125rem;
    margin: var(--space-3) 0 0;
}

.bc-modal-actions[b-jmt0jotooy] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* ── Mã nhúng (mockup 2612-2619) ─────────────────────────────────────────── */

/* --navy-deep is dark in BOTH themes (the plain --navy token flips to a light value
   under [data-pp-theme="dark"]), so the snippet keeps soft-white text on a dark
   surface in dark mode too. */
.bc-embed-code[b-jmt0jotooy] {
    margin: 0;
    padding: 18px;
    border-radius: var(--radius-md);
    background: var(--navy-deep);
    color: var(--soft-white);
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.7;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    .bc-grid[b-jmt0jotooy],
    .bc-grid--3[b-jmt0jotooy],
    .bc-grid--logo[b-jmt0jotooy] {
        grid-template-columns: minmax(0, 1fr);
    }

    .bc-field-aligned[b-jmt0jotooy] {
        margin-top: 0;
    }

    .bc-color-row[b-jmt0jotooy],
    .bc-color-row--4[b-jmt0jotooy] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .bc-table-actions[b-jmt0jotooy] {
        flex-basis: 100%;
        margin-left: 0;
    }

    .bc-table-actions[b-jmt0jotooy]  .ds-btn {
        flex: 1;
    }

    .bc-color-row[b-jmt0jotooy],
    .bc-color-row--4[b-jmt0jotooy],
    .bc-color-row--2[b-jmt0jotooy] {
        grid-template-columns: minmax(0, 1fr);
    }

    .bc-logo-preview[b-jmt0jotooy] {
        flex-wrap: wrap;
    }
}
/* _content/BlazorFrontend/Pages/Compliance/CookieConsent/CookieBlockingIncidents.razor.rz.scp.css */
/* CK-03 Cookie Blocking Incidents (Phase 4 wave 4a). Token-only, layout-only rules —
   every component visual comes from Datanomics.Ds. */

/* The .cbi-skeleton block that stood here was deleted with the markup that used it (ADR-066 D6:
   a screen's own skeleton CSS goes in the same diff as the screen, so no orphan rules are left
   behind). The loading geometry now comes from the table itself — .ds-table-ph in
   DsDataTable.razor.css. */

/* DS v2: the page owns the single 16px gap below its heading (and optional tabs). */
.cbi-page-body[b-b86w08hnjn] {
    min-width: 0;
    padding-top: var(--space-4);
}

.cbi-page[b-b86w08hnjn],
.cbi-table[b-b86w08hnjn] {
    width: 100%;
}

/* The date filter's label is an accessible name only — the filter row already reads as a
   filter row, and a visible label would break its shared 40px control height. */
.cbi-date-filter[b-b86w08hnjn]  .ds-special-input {
    gap: 0;
}

.cbi-date-filter[b-b86w08hnjn]  .ds-special-input > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.cbi-table-toolbar[b-b86w08hnjn]  .ds-filterbar-search {
    flex: 1 1 320px;
}

.cbi-table-actions[b-b86w08hnjn] {
    display: flex;
    flex-wrap: wrap;
    order: 1;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.cbi-alert-action[b-b86w08hnjn] {
    margin-top: var(--space-2);
}

/* ── Table cells ──────────────────────────────────────────────────────────── */
.cbi-table[b-b86w08hnjn]  .cbi-col--timestamp { width: 175px; }
.cbi-table[b-b86w08hnjn]  .cbi-col--category { width: 140px; }
.cbi-table[b-b86w08hnjn]  .cbi-col--status { width: 110px; }
.cbi-table[b-b86w08hnjn]  .cbi-col--agent { width: 120px; }
.cbi-table[b-b86w08hnjn]  .cbi-col--ip { width: 140px; }
.cbi-table[b-b86w08hnjn]  .cbi-col--actions { width: 135px; }

.cbi-row-actions[b-b86w08hnjn] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cbi-timestamp[b-b86w08hnjn] {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.8125rem;
}

.cbi-domain-sub[b-b86w08hnjn] {
    display: block;
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.75rem;
}

.cbi-reason[b-b86w08hnjn] {
    color: var(--color-text-tertiary, var(--text-subtle));
    font-size: 0.8125rem;
}

.cbi-useragent[b-b86w08hnjn] {
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.8125rem;
}

.cbi-ip[b-b86w08hnjn] {
    background: var(--color-bg-surface-base-secondary, var(--bg-subtle));
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-size: 0.8125rem;
}

.cbi-pagination-wrap[b-b86w08hnjn] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

/* ── Incident details modal ──────────────────────────────────────────────── */
.cbi-modal-grid[b-b86w08hnjn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

@media (max-width: 767.98px) {
    .cbi-table-actions[b-b86w08hnjn] {
        flex-basis: 100%;
        margin-left: 0;
    }

    .cbi-table-actions[b-b86w08hnjn]  .ds-btn {
        flex: 1;
    }

    .cbi-modal-grid[b-b86w08hnjn] {
        grid-template-columns: 1fr;
    }
}

.cbi-modal-col[b-b86w08hnjn] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-3);
}

.cbi-detail-list[b-b86w08hnjn] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--space-2) var(--space-3);
    margin: 0;
}

.cbi-detail-list dt[b-b86w08hnjn] {
    font-weight: 600;
    color: var(--color-text-tertiary, var(--text-subtle));
    font-size: 0.8125rem;
}

.cbi-detail-list dd[b-b86w08hnjn] {
    margin: 0;
    color: var(--color-text-primary, var(--ink));
    font-size: 0.875rem;
}

.cbi-modal-useragent-box[b-b86w08hnjn] {
    background: var(--color-bg-surface-base-secondary, var(--bg-subtle));
    border: 1px solid var(--color-border-base-subtle, var(--border-subtle));
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-secondary, var(--text-muted));
    word-break: break-word;
}

.cbi-modal-actions[b-b86w08hnjn] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
/* _content/BlazorFrontend/Pages/Compliance/CookieConsent/CookieBlockingManagement.razor.rz.scp.css */
/* CK-03 Cookie Blocking Management (Phase 4 wave 4a). Token-only, layout-only rules —
   every component visual comes from Datanomics.Ds. */

/* DS v2: the page owns the single 16px gap below its heading (and optional tabs). */
.cbm-page-body[b-zs7kpw0tif] {
    min-width: 0;
    padding-top: var(--space-4);
}

.cbm-page[b-zs7kpw0tif],
.cbm-loading[b-zs7kpw0tif] {
    width: 100%;
}

/* ── Saved-state banner (mockup :2626) ───────────────────────────────────── */
.cbm-state-alert[b-zs7kpw0tif] {
    margin-bottom: var(--space-4);
}

/* ── Two-column layout: form (main) + stats (side) ───────────────────────── */
.cbm-layout[b-zs7kpw0tif] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.cbm-main[b-zs7kpw0tif],
.cbm-side[b-zs7kpw0tif] {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .cbm-layout[b-zs7kpw0tif] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cbm-main[b-zs7kpw0tif]  .ds-panel {
    margin-bottom: var(--space-4);
}

.cbm-side[b-zs7kpw0tif] {
    position: sticky;
    top: calc(var(--ds-pagehead-height, 0px) + var(--space-4));
}

/* ── Panel forms (replaces the bootstrap row/col-md grid) ─────────────────── */
.cbm-grid[b-zs7kpw0tif] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.cbm-grid--spaced[b-zs7kpw0tif] {
    margin-top: var(--space-4);
}

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

.cbm-check-list[b-zs7kpw0tif] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Mockup :2628 — the category rules are a 6px-gap switch column. */
.cbm-rule-list[b-zs7kpw0tif] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cbm-rule[b-zs7kpw0tif] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.cbm-rule__desc[b-zs7kpw0tif] {
    flex-basis: 100%;
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.75rem;
}

.cbm-panel-note[b-zs7kpw0tif] {
    margin-top: var(--space-4);
}

/* ── Whitelist add row (replaces the bootstrap input-group) ───────────────── */
.cbm-whitelist-add[b-zs7kpw0tif] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.cbm-whitelist-add[b-zs7kpw0tif]  .ds-field {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Whitelist tags ───────────────────────────────────────────────────────── */
.cbm-whitelist-chips[b-zs7kpw0tif] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ── Form action row ──────────────────────────────────────────────────────── */
.cbm-actions[b-zs7kpw0tif] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.cbm-actions__right[b-zs7kpw0tif] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

@media (max-width: 991.98px) {
    .cbm-side[b-zs7kpw0tif] {
        position: static;
    }
}

/* ── Statistics panel ─────────────────────────────────────────────────────── */
.cbm-stat-row[b-zs7kpw0tif] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.cbm-stat-row--single[b-zs7kpw0tif] {
    grid-template-columns: 1fr;
}

.cbm-side-heading[b-zs7kpw0tif] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text-tertiary, var(--text-subtle));
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: var(--space-4) 0 var(--space-2);
}

.cbm-cat-breakdown[b-zs7kpw0tif] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.cbm-cat-row__head[b-zs7kpw0tif] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: 0.8125rem;
}

.cbm-cat-row__name[b-zs7kpw0tif] {
    font-weight: 600;
    color: var(--color-text-primary, var(--ink));
}

.cbm-cat-row__count[b-zs7kpw0tif] {
    color: var(--color-text-secondary, var(--text-muted));
}

.cbm-top-list[b-zs7kpw0tif] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cbm-top-list__row[b-zs7kpw0tif] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-base-subtle, var(--border-subtle));
    font-size: 0.875rem;
}

.cbm-top-list__row:last-child[b-zs7kpw0tif] {
    border-bottom: none;
}

.cbm-top-list__cat[b-zs7kpw0tif] {
    display: block;
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.75rem;
}

.cbm-side-actions[b-zs7kpw0tif] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ── Test Blocking modal ──────────────────────────────────────────────────── */
.cbm-modal-form[b-zs7kpw0tif] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.cbm-modal-result[b-zs7kpw0tif] {
    margin-top: var(--space-3);
}

.cbm-modal-actions[b-zs7kpw0tif] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
/* _content/BlazorFrontend/Pages/Compliance/CookieConsent/CookieConfiguration.razor.rz.scp.css */
/* CK-01 Cookie Configuration — merged Domains/Categories/Management (Phase 4 wave 4a).
   Token-only, layout-only rules — every component visual comes from Datanomics.Ds.
   Composition follows the hub reference implementation, Purposes.razor(.css). */

/* ── Hub frame: sync meta + tab bar ─────────────────────────────────────────── */

/* DS v2: the page owns the single 16px gap below its heading (and optional tabs). */
.ck-page-body[b-9sg2fusi5k] {
    min-width: 0;
    padding-top: var(--space-4);
}

.ck-registry-page[b-9sg2fusi5k],
.ck-table[b-9sg2fusi5k] {
    width: 100%;
}

/* Mockup :2489 — supporting text in DsPageHeader.Metadata. The shared header
   owns its spacing and includes this line in its measured sticky height. */
.ck-sync-meta[b-9sg2fusi5k] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.78rem;
    color: var(--color-text-tertiary, var(--text-subtle));
}

.ck-sync-meta-dot[b-9sg2fusi5k] {
    display: inline-block;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-fill-additional-1-primary, var(--accent-2));
}

/* ── Toolbar: filters left, page actions right ──────────────────────────────── */

/* A tabbed hub carries its page actions in the active tab's toolbar, not in the page header
   (Purposes.razor:40-63). `order` keeps DsFilterBar's own Lọc button with the filter controls it
   applies, even though the action group is declared before it in the DOM. */
.ck-table-toolbar[b-9sg2fusi5k]  .ds-filterbar-search {
    flex: 1 1 320px;
}

/* Vietnamese scan-state labels are longer than the generic compact select. Give this
   specific filter enough room without relaxing the shared filter-bar density contract. */
.ck-table-toolbar[b-9sg2fusi5k]  [data-filter="scan-status"] {
    flex-basis: 210px;
    max-width: 210px;
}

.ck-table-actions[b-9sg2fusi5k] {
    display: flex;
    flex-wrap: wrap;
    order: 1;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

/* ── Table cells ────────────────────────────────────────────────────────────── */
.ck-table[b-9sg2fusi5k]  .ck-domain-col--name { width: 300px; }
.ck-table[b-9sg2fusi5k]  .ck-domain-col--status { width: 160px; }
.ck-table[b-9sg2fusi5k]  .ck-domain-col--date { width: 180px; }
.ck-table[b-9sg2fusi5k]  .ck-domain-col--actions,
.ck-table[b-9sg2fusi5k]  .ck-category-col--actions { width: 135px; }

/* Cookie registry column budget. The primary identifiers get 37% of the table instead of sharing
   the remainder equally with short values such as duration/source. Percent tracks keep the table
   flush with the registry frame at every desktop width; DsDataTable owns tablet scrolling/cards. */
.ck-table--cookies[b-9sg2fusi5k]  .ck-cookie-col--select {
    width: 4%;
    padding-inline: var(--space-3);
}

.ck-table--cookies[b-9sg2fusi5k]  .ck-cookie-col--name { width: 20%; }
.ck-table--cookies[b-9sg2fusi5k]  .ck-cookie-col--category { width: 17%; }
.ck-table--cookies[b-9sg2fusi5k]  .ck-cookie-col--domain { width: 11%; }
.ck-table--cookies[b-9sg2fusi5k]  .ck-cookie-col--provider { width: 10%; }
.ck-table--cookies[b-9sg2fusi5k]  .ck-cookie-col--duration { width: 8%; }
.ck-table--cookies[b-9sg2fusi5k]  .ck-cookie-col--source { width: 8%; }
.ck-table--cookies[b-9sg2fusi5k]  .ck-cookie-col--status { width: 12%; }
.ck-table--cookies[b-9sg2fusi5k]  .ck-cookie-col--actions { width: 10%; }

.ck-row-select[b-9sg2fusi5k],
.ck-row-actions[b-9sg2fusi5k] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ck-name-cell[b-9sg2fusi5k] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

/* Status badges are atomic labels. Do not let the table's fixed layout compress a Vietnamese
   caption such as “Đang hoạt động” onto two lines; the domain name yields first instead. */
.ck-name-cell[b-9sg2fusi5k]  .ds-badge {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ck-name-cell > .ck-mono[b-9sg2fusi5k] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ck-mono[b-9sg2fusi5k] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

.ck-muted[b-9sg2fusi5k] {
    color: var(--color-text-secondary, var(--text-muted));
}

.ck-cookie-name[b-9sg2fusi5k] {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-text-primary, var(--text-strong));
}

.ck-cat-name[b-9sg2fusi5k] {
    font-weight: 600;
    color: var(--color-text-primary, var(--text-strong));
}

/* ── Table footer — result text left, pagination right (mockup :2515-2523) ───── */
.ck-results-meta[b-9sg2fusi5k] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: var(--space-4);
    font-size: 0.78rem;
    color: var(--color-text-secondary, var(--text-muted));
}

.ck-pagination-wrap[b-9sg2fusi5k] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

/* ── Category colour accents — one class per category, values from tokens ─────
   Replaces the inline `style="--ck-cat-color: …"` the two cells used to carry
   (CLAUDE.md: no inline styles). Set by GetCategoryColorClass. */
.ck-cat--necessary[b-9sg2fusi5k]   { --ck-cat-color: var(--color-bg-fill-success-primary, var(--success)); }
.ck-cat--analytics[b-9sg2fusi5k]   { --ck-cat-color: var(--color-bg-fill-additional-2-primary, var(--accent)); }
.ck-cat--marketing[b-9sg2fusi5k]   { --ck-cat-color: var(--color-bg-fill-warning-primary, var(--warning)); }
.ck-cat--functional[b-9sg2fusi5k]  { --ck-cat-color: var(--color-bg-fill-additional-1-primary, var(--accent-2)); }
.ck-cat--preferences[b-9sg2fusi5k] { --ck-cat-color: var(--color-border-warning-solid, var(--warning)); }
.ck-cat--performance[b-9sg2fusi5k] { --ck-cat-color: var(--color-border-additional-2-solid, var(--yellow)); }
.ck-cat--other[b-9sg2fusi5k]       { --ck-cat-color: var(--color-border-solid, var(--text-subtle)); }

.ck-cat-dot[b-9sg2fusi5k] {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-pill);
    background: var(--ck-cat-color, var(--color-border-brand-solid, var(--accent)));
    flex-shrink: 0;
}

.ck-cat-name-sub[b-9sg2fusi5k] {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-tertiary, var(--text-subtle));
}

.ck-cat-match-more[b-9sg2fusi5k] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary, var(--text-subtle));
    margin-left: 4px;
}

/* Retry button inside the DsAlert failed-state (was the `mt-2` utility). */
.ck-alert-action[b-9sg2fusi5k] {
    margin-top: var(--space-2);
}

/* ── Modal forms ────────────────────────────────────────────────────────────── */

/* Long modal bodies scroll inside the DsModal frame. */
.ck-modal-scroll[b-9sg2fusi5k] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.ck-modal-scroll > *[b-9sg2fusi5k] {
    min-width: 0;
    max-width: 100%;
}

/* The vertical rhythm the `mb-3` utilities used to provide, owned by the page. */
.ck-form-stack[b-9sg2fusi5k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Two-up field pairs — replaces the Bootstrap `row` / `col-md-6` grid. */
.ck-form-row[b-9sg2fusi5k] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 767.98px) {
    .ck-form-row[b-9sg2fusi5k] {
        grid-template-columns: 1fr;
    }

    .ck-table-actions[b-9sg2fusi5k] {
        flex-basis: 100%;
        margin-left: 0;
        justify-content: stretch;
    }

    .ck-table-actions[b-9sg2fusi5k]  .ds-btn {
        flex: 1;
    }
}

.ck-field-block[b-9sg2fusi5k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ck-field-label[b-9sg2fusi5k] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary, var(--text-body));
}

.ck-field-hint[b-9sg2fusi5k] {
    font-size: 0.75rem;
    color: var(--color-text-tertiary, var(--text-subtle));
}

.ck-field-heading[b-9sg2fusi5k] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary, var(--text-subtle));
    margin-bottom: var(--space-3);
}

.ck-steps[b-9sg2fusi5k] {
    margin: 0;
    padding-left: var(--space-5);
    font-size: 0.8125rem;
    color: var(--color-text-secondary, var(--text-muted));
}

.ck-switch-field[b-9sg2fusi5k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ck-tag-list[b-9sg2fusi5k] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ── Form helpers (Add/Edit Cookie modal toggles) ───────────────────────────── */
.ck-form-toggles[b-9sg2fusi5k] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-surface-base-secondary, var(--bg-subtle));
    border-radius: var(--radius-md);
}

/* ── Sync options box ────────────────────────────────────────────────────────── */
.ck-sync-options[b-9sg2fusi5k] {
    background: var(--color-bg-surface-base-secondary, var(--bg-subtle));
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

/* ── Embed code modal ────────────────────────────────────────────────────────── */
.ck-embed-code-wrap[b-9sg2fusi5k] {
    position: relative;
}

.ck-embed-code-block[b-9sg2fusi5k] {
    max-height: 300px;
    overflow-y: auto;
    background: var(--color-bg-surface-base-secondary, var(--bg-subtle));
    border: 1px solid var(--color-border-base-subtle, var(--border-subtle));
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-size: 0.8125rem;
    line-height: 1.6;
    margin-bottom: var(--space-2);
}

.ck-embed-demo-link[b-9sg2fusi5k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-brand, var(--accent));
    text-decoration: none;
}

.ck-embed-demo-link:hover[b-9sg2fusi5k] {
    text-decoration: underline;
}

.ck-embed-loading[b-9sg2fusi5k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-tertiary, var(--text-subtle));
}

.ck-modal-actions[b-9sg2fusi5k] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

/* The .ck-skeleton block that stood here was deleted with the markup that used it (ADR-066 D6:
   a screen's own skeleton CSS goes in the same diff as the screen, so no orphan rules are left
   behind). The loading geometry now comes from the tables themselves — .ds-table-ph in
   DsDataTable.razor.css. */
/* _content/BlazorFrontend/Pages/Compliance/CookieConsent/CookieResults.razor.rz.scp.css */
/* CK-03 Cookie Results (Phase 4 wave 4a). Token-only, layout-only rules —
   every component visual comes from Datanomics.Ds. */

/* The .cr-skeleton block that stood here was deleted with the markup that used it (ADR-066 L1 / D6:
   a screen's own skeleton CSS goes in the same diff as the screen, so no orphan rules are left behind).
   The loading geometry now comes from the table itself — .ds-table-ph in DsDataTable.razor.css. */

/* DS v2: the page owns the single 16px gap below its heading (and optional tabs). */
.cr-page-body[b-nft2zh98bj] {
    min-width: 0;
    padding-top: var(--space-4);
}

.cr-results-page[b-nft2zh98bj],
.cr-table[b-nft2zh98bj] {
    width: 100%;
}

.cr-table-toolbar[b-nft2zh98bj]  .ds-filterbar-search {
    flex: 1 1 320px;
}

.cr-table-actions[b-nft2zh98bj] {
    display: flex;
    flex-wrap: wrap;
    order: 1;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.cr-table[b-nft2zh98bj]  .cr-col--actions {
    width: 135px;
}

.cr-row-actions[b-nft2zh98bj] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cr-pagination-wrap[b-nft2zh98bj] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

.cr-alert-action[b-nft2zh98bj] {
    margin-top: var(--space-2);
}

/* Category taxonomy is rendered by DsTag, so the page owns no custom pill colours. */

/* Footer action row under the table (mockup:2549). */
.cr-footer-actions[b-nft2zh98bj] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* Edit-category modal fields. */
.cr-modal-form[b-nft2zh98bj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Read-only detail list (View Cookie modal). */
.cr-detail-list[b-nft2zh98bj] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0;
}

.cr-detail-list dt[b-nft2zh98bj] {
    font-weight: 600;
    color: var(--color-text-tertiary, var(--text-subtle));
}

.cr-detail-list dd[b-nft2zh98bj] {
    margin: 0;
    color: var(--color-text-primary, var(--ink));
}

.cr-modal-actions[b-nft2zh98bj] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

@media (max-width: 767.98px) {
    .cr-table-actions[b-nft2zh98bj] {
        flex-basis: 100%;
        margin-left: 0;
    }

    .cr-table-actions[b-nft2zh98bj]  .ds-btn {
        flex: 1;
    }

    .cr-footer-actions[b-nft2zh98bj] {
        flex-direction: column;
    }
}
/* _content/BlazorFrontend/Pages/Compliance/CookieConsent/CookieScanner.razor.rz.scp.css */
/* CK-03 Cookie Scanner (Phase 4 wave 4a). Token-only, layout-only rules —
   every component visual comes from Datanomics.Ds. */

/* The .cs-skeleton block that stood here was deleted with the markup that used it (ADR-066 D6:
   a screen's own skeleton CSS goes in the same diff as the screen, so no orphan rules are left
   behind). The loading geometry now comes from the table itself — .ds-table-ph in
   DsDataTable.razor.css. */

/* DS v2: the page owns the single 16px gap below its heading (and optional tabs). */
.cs-page-body[b-bou6cadn18] {
    min-width: 0;
    padding-top: var(--space-4);
}

.cs-scanner-page[b-bou6cadn18],
.cs-table[b-bou6cadn18] {
    width: 100%;
}

/* ── Toolbar row: tabs left, relocated header utilities right ─────────────── */
.cs-toolbar[b-bou6cadn18] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.cs-toolbar-actions[b-bou6cadn18] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.cs-table[b-bou6cadn18]  .cs-domain-col--status { width: 160px; }
.cs-table[b-bou6cadn18]  .cs-domain-col--date { width: 180px; }
.cs-table[b-bou6cadn18]  .cs-domain-col--count { width: 100px; }
.cs-table[b-bou6cadn18]  .cs-domain-col--actions { width: 135px; }

.cs-row-actions[b-bou6cadn18] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-alert-action[b-bou6cadn18] {
    margin-top: var(--space-2);
}

@media (max-width: 767.98px) {
    .cs-toolbar-actions[b-bou6cadn18] {
        width: 100%;
    }

    .cs-toolbar-actions[b-bou6cadn18]  .ds-btn {
        flex: 1;
    }
}

/* ── Compact progress strip (only rendered while scanning) ───────────────── */
.cs-progress-strip[b-bou6cadn18] {
    background: var(--color-bg-surface-base-secondary, var(--bg-subtle));
    border: 1px solid var(--color-border-base-subtle, var(--border-subtle));
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

.cs-progress-strip__head[b-bou6cadn18] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.cs-progress-strip__title[b-bou6cadn18] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--color-text-additional-2-active, var(--info, var(--accent)));
}

.cs-progress-strip__summary[b-bou6cadn18] {
    color: var(--color-text-tertiary, var(--text-subtle));
    font-size: 0.8125rem;
}

.cs-progress-strip__pct[b-bou6cadn18] {
    margin-left: auto;
    font-weight: 700;
    color: var(--color-text-primary, var(--ink));
    font-variant-numeric: tabular-nums;
}

/* The .cs-progress-bar / __fill pair that stood here was deleted with the markup that used it:
   the track and the fill are DsProgressIndicator's now, so a second description of them would
   only drift (and the fill width was the page's one inline style). */

/* ── Domain cell ──────────────────────────────────────────────────────────── */
.cs-domain-cell[b-bou6cadn18] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.cs-domain-cell__text[b-bou6cadn18] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.cs-domain-cell__name[b-bou6cadn18] {
    font-weight: 600;
    color: var(--color-text-primary, var(--ink));
}

.cs-domain-cell__url[b-bou6cadn18] {
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.8125rem;
}

.cs-muted[b-bou6cadn18] {
    color: var(--color-text-secondary, var(--text-muted));
}

.cs-block[b-bou6cadn18] {
    display: block;
}

.cs-cookie-cell__count[b-bou6cadn18] {
    font-weight: 600;
    color: var(--color-text-primary, var(--ink));
    font-variant-numeric: tabular-nums;
}

/* ── Allowlist guide modal ───────────────────────────────────────────────── */
.cs-modal-scroll[b-bou6cadn18] {
    max-height: 60vh;
    overflow-y: auto;
}

.cs-modal-actions[b-bou6cadn18] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

.cs-allowlist__lead[b-bou6cadn18] {
    margin-bottom: 1rem;
    color: var(--color-text-secondary, var(--text-muted));
}

.cs-allowlist__h[b-bou6cadn18] {
    margin-top: 1.25rem;
    margin-bottom: 0.4rem;
    font-weight: 600;
    color: var(--color-text-primary, var(--ink));
}

.cs-allowlist__note[b-bou6cadn18] {
    font-size: 0.85rem;
    color: var(--color-text-secondary, var(--text-muted));
    margin: 0.4rem 0 0;
}

.cs-allowlist__doc[b-bou6cadn18] {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary, var(--text-muted));
}

.cs-code[b-bou6cadn18] {
    background: var(--color-bg-surface-base-secondary, var(--bg-subtle));
    color: var(--color-text-primary, var(--ink));
    border: 1px solid var(--color-border-base-subtle, var(--border-subtle));
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.9rem;
    margin: 0.5rem 0;
    font-size: 0.82rem;
    line-height: 1.45;
    overflow-x: auto;
    white-space: pre;
}

.cs-code code[b-bou6cadn18] {
    background: none;
    color: inherit;
    padding: 0;
}

.cs-egress[b-bou6cadn18] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.cs-egress__ip[b-bou6cadn18] {
    font-size: 1.05rem;
    font-weight: 600;
    background: var(--color-bg-surface-base-secondary, var(--bg-subtle));
    color: var(--color-text-primary, var(--ink));
    border: 1px solid var(--color-border-base-subtle, var(--border-subtle));
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.65rem;
    letter-spacing: 0.02em;
}
/* _content/BlazorFrontend/Pages/Compliance/CookieConsent/CookieScriptInventory.razor.rz.scp.css */
/* Component visuals come from Datanomics.Ds; only layout and DS text tokens live here. */
.script-inventory[b-8gclbnreuf] { display: flex; flex-direction: column; gap: var(--space-4); margin-block: var(--space-6); min-width: 0; }
.script-url[b-8gclbnreuf] { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.script-meta[b-8gclbnreuf] { margin: 0; color: var(--text-muted); font-size: var(--text-caption); }
.script-secondary[b-8gclbnreuf] { display: block; color: var(--text-muted); font-size: var(--text-caption); overflow-wrap: anywhere; }
.script-pagination[b-8gclbnreuf] { display: flex; justify-content: flex-end; margin-top: var(--space-4); }
.script-row-actions[b-8gclbnreuf] { display: flex; align-items: center; justify-content: center; }
.script-details[b-8gclbnreuf] { display: flex; flex-direction: column; gap: var(--space-4); }
.script-details dl[b-8gclbnreuf] { margin: 0; }
.script-details dt[b-8gclbnreuf] { font-weight: 600; color: var(--text-subtle); margin-top: var(--space-3); }
.script-details dd[b-8gclbnreuf] { margin: var(--space-1) 0 0; color: var(--text-strong); overflow-wrap: anywhere; }
@media (min-width: 768px) {
    .script-inventory .script-url[b-8gclbnreuf] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* _content/BlazorFrontend/Pages/Compliance/DataSubjectRight/DataSubjectRights.razor.rz.scp.css */
/*
 * DataSubjectRights.razor.css
 * Scoped styles for /privacy/data-subject-rights Dashboard page.
 *
 * Rules:
 *   - All colors via --dp-* tokens only (no hardcoded hex/rgb).
 *   - No inline style="" in markup except data-driven values.
 *   - Responsive: 1-column at ≤767px, 2-column at 768-1279px, full at ≥1280px.
 *   - WCAG 2.2 AA: all text pairs meet 4.5:1 minimum contrast via token system.
 */

/* ─── Modal overlay ──────────────────────────────────────────────────────── */
/*
 * Replaces inline style="background-color: rgba(...)"
 * Uses CSS custom properties so light/dark mode inherits correctly.
 */

.dsr-dashboard-body[b-mng80f8d2r] {
    min-width: 0;
    padding-top: var(--space-4);
}

.dsr-dashboard-body > .pp-dashboard[b-mng80f8d2r] {
    gap: var(--space-4);
}

.dsr-dashboard-modal[b-mng80f8d2r] {
    min-width: 0;
}

.dsr-modal-actions[b-mng80f8d2r] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
}

.dsr-dashboard-pagination[b-mng80f8d2r] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    padding: var(--space-4);
}

/* ─── Status meters inside Hero ──────────────────────────────────────────── */

.dsr-status-meters[b-mng80f8d2r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.dsr-status-meter-row[b-mng80f8d2r] {
    display: grid;
    grid-template-columns: 140px 1fr 40px;
    align-items: center;
    gap: var(--space-3);
}

.dsr-status-meter-label[b-mng80f8d2r] {
    font-size: var(--apple-font-label-size);
    font-weight: 500;
    color: var(--dp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.dsr-status-meter-count[b-mng80f8d2r] {
    font-size: var(--apple-font-label-size);
    font-weight: 600;
    color: var(--dp-text-primary);
    text-align: right;
}

@media (max-width: 767px) {
    .dsr-status-meter-row[b-mng80f8d2r] {
        grid-template-columns: 1fr 40px;
    }

    .dsr-status-meter-label[b-mng80f8d2r] {
        grid-column: 1 / -1;
    }
}

/* ─── Status chart grid (Section 3 — Requests by Status) ─────────────────── */

.dsr-status-chart-grid[b-mng80f8d2r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) 0;
}

.dsr-status-chart-row[b-mng80f8d2r] {
    display: grid;
    grid-template-columns: 200px 1fr 80px;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
}

.dsr-status-chart-label[b-mng80f8d2r] {
    display: flex;
    align-items: center;
}

.dsr-status-chart-bar-wrap[b-mng80f8d2r] {
    min-width: 0;
}

.dsr-status-chart-count[b-mng80f8d2r] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
}

.dsr-count-value[b-mng80f8d2r] {
    font-size: var(--apple-font-body-size);
    font-weight: 600;
    color: var(--dp-text-primary);
    line-height: 1.2;
}

.dsr-count-pct[b-mng80f8d2r] {
    font-size: var(--apple-font-caption-size);
    color: var(--dp-text-secondary);
    line-height: 1.2;
}

@media (max-width: 767px) {
    .dsr-status-chart-row[b-mng80f8d2r] {
        grid-template-columns: 1fr 50px;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-3);
    }

    .dsr-status-chart-label[b-mng80f8d2r] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1023px) and (min-width: 768px) {
    .dsr-status-chart-row[b-mng80f8d2r] {
        grid-template-columns: 160px 1fr 70px;
        gap: var(--space-3);
    }
}

/* ─── Table empty state wrapper ──────────────────────────────────────────── */

.dsr-table-empty[b-mng80f8d2r] {
    padding: var(--space-8) var(--space-4);
    display: flex;
    justify-content: center;
}

/* ─── Requests table: status cell opts out of truncation (ADR-046 W2) ────── */
/*
 * Replaces `.dp-grid .dp-cell--overflow-visible` from the hand-written table. That rule is scoped
 * to `.dp-grid`, so it does not reach `.ds-table`; the DsColumn passes `dsr-cell--wrap` instead.
 *
 * `::deep` is required, not optional: the <td> is rendered by DsDataTable and therefore carries
 * DsDataTable's scope id, not this page's — a plain `.dsr-cell--wrap` here would compile to
 * `.dsr-cell--wrap[b-<this page>]` and match nothing. `::deep` moves the scope attribute onto the
 * `.dsr-requests-table` wrapper, which IS this page's own element.
 *
 * `td.` prefix is deliberate: it lifts specificity to (0,3,1) so this beats
 * `.ds-table--fixed .ds-table-td` (0,3,0) on specificity rather than on stylesheet order, which
 * would otherwise depend on how the RCL and the app bundles happen to be concatenated.
 */
.dsr-requests-table[b-mng80f8d2r]  td.dsr-cell--wrap {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}

/* ─── Email cell in table ────────────────────────────────────────────────── */

.dsr-email-cell[b-mng80f8d2r] {
    font-size: var(--apple-font-caption-size);
    background-color: var(--dp-surface-subtle, transparent);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--dp-font-mono, ui-monospace, monospace);
    color: var(--dp-text-primary);
    border: 1px solid var(--dp-border-subtle);
}

/* ─── Overdue date styling ───────────────────────────────────────────────── */

.dsr-overdue-date[b-mng80f8d2r] {
    color: var(--dp-status-danger);
    font-weight: 600;
}

.dsr-overdue-icon[b-mng80f8d2r] {
    color: var(--dp-status-danger);
    font-size: 0.8em;
}

/* ─── Verification expired hint ──────────────────────────────────────────── */

.dsr-expired-hint[b-mng80f8d2r] {
    font-size: var(--apple-font-caption-size);
    color: var(--dp-text-secondary);
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* ─── Assignee text ──────────────────────────────────────────────────────── */

.dsr-assignee[b-mng80f8d2r] {
    font-size: var(--apple-font-caption-size);
    font-weight: 500;
    color: var(--dp-text-primary);
}

/* ─── Detail modal content box ───────────────────────────────────────────── */
/*
 * Replaces inline .p-3.bg-light.rounded markup.
 * Uses dp-* tokens for background + border.
 */

.dsr-content-box[b-mng80f8d2r] {
    padding: var(--space-3) var(--space-4);
    background-color: var(--dp-surface-subtle);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--dp-radius-md, 8px);
    font-size: var(--apple-font-body-size);
    color: var(--dp-text-primary);
    line-height: var(--apple-font-body-leading);
    word-break: break-word;
}

/* ─── Detail hint text ───────────────────────────────────────────────────── */

.dsr-detail-hint[b-mng80f8d2r] {
    font-size: var(--apple-font-caption-size);
    color: var(--dp-text-secondary);
}

/* ─── Legal rights accordion ─────────────────────────────────────────────── */
/*
 * Overrides Bootstrap accordion defaults with dp-* token colors.
 * Keeps native accordion behavior (data-bs-toggle) intact.
 */

.dsr-rights-accordion[b-mng80f8d2r] {
    border: none;
    background: transparent;
}

.dsr-accordion-item[b-mng80f8d2r] {
    background-color: var(--dp-surface-card, var(--dp-surface-primary));
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--dp-radius-md, 8px);
    margin-bottom: var(--space-2);
    overflow: hidden;
}

.dsr-accordion-item:last-child[b-mng80f8d2r] {
    margin-bottom: 0;
}

.dsr-accordion-btn[b-mng80f8d2r] {
    background-color: var(--dp-surface-card, var(--dp-surface-primary)) !important;
    color: var(--dp-text-primary) !important;
    font-weight: 600;
    font-size: var(--apple-font-body-size);
    padding: var(--space-4) var(--space-5);
    box-shadow: none !important;
    border-radius: 0 !important;
}

.dsr-accordion-btn:not(.collapsed)[b-mng80f8d2r] {
    background-color: var(--dp-surface-hover, var(--dp-surface-subtle)) !important;
    color: var(--dp-interactive-primary, var(--dp-text-primary)) !important;
}

.dsr-accordion-btn[b-mng80f8d2r]::after {
    filter: var(--dp-accordion-chevron-filter, none);
}

.dsr-accordion-body[b-mng80f8d2r] {
    padding: var(--space-4) var(--space-5);
    background-color: var(--dp-surface-card, var(--dp-surface-primary));
}

/* ─── Legal rights list ──────────────────────────────────────────────────── */

.dsr-rights-list[b-mng80f8d2r] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dsr-rights-list li[b-mng80f8d2r] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--apple-font-body-size);
    color: var(--dp-text-primary);
    line-height: var(--apple-font-body-leading);
}

.dsr-rights-check[b-mng80f8d2r] {
    color: var(--dp-status-success, var(--dp-interactive-primary));
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 0.875rem;
}
/* _content/BlazorFrontend/Pages/Compliance/DataSubjectRight/DSRConfiguration.razor.rz.scp.css */
/*
 * DSRConfiguration.razor.css
 * Scoped styles for /privacy/data-subject-rights/configuration page.
 *
 * Rules:
 *   - All colors via --dp-* tokens only (no hardcoded hex/rgb).
 *   - No inline style="" except modal overlay variables (existing pattern) and
 *     iframe sandbox container — all moved to classes here.
 *   - WCAG 2.2 AA: text/background pairs meet 4.5:1 minimum contrast.
 *
 * Figma 474:28525: overview 442:29587, editor 470:48289, scroll 470:49147.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE COLUMN WIDTHS
   Replaces inline style="width: N%;" / style="width: N px;" on <th> elements.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Review fix: the 4 day/count columns hold a form-control-sm number spinner whose visible
   content is at most 2-3 digits — a percentage share of a ~700-900px table (this page's content
   column, next to the Quick Stats/Preview sidebar) rendered too narrow to show the number without
   truncation ("3(" instead of "30"). Fixed px widths sized for that content, freeing more room for
   Custom Label (a real text input) fixes both. dsr-cfg-col-third-party-extension previously had no
   rule at all, so its width was whatever the table's auto layout left over. */
.dsr-cfg-col-enable[b-gr9ta9dion] {
    width: 64px;
    text-align: center;
}

.dsr-cfg-col-request-type[b-gr9ta9dion] {
    width: 22%;
}

.dsr-cfg-col-custom-label[b-gr9ta9dion] {
    width: 28%;
}

.dsr-cfg-col-response-days[b-gr9ta9dion],
.dsr-cfg-col-processing-days[b-gr9ta9dion],
.dsr-cfg-col-max-extensions[b-gr9ta9dion],
.dsr-cfg-col-third-party-extension[b-gr9ta9dion] {
    width: 100px;
    min-width: 100px;
}

.dsr-cfg-col-actions[b-gr9ta9dion] {
    width: 120px;
    text-align: center;
}

/* ADR-046 W5 lô (f) — bảng bản dịch đã chuyển sang DsDataTable, nên `.dsr-cfg-col-actions` ở trên
   KHÔNG còn với tới cột Thao tác của nó: <th>/<td> do DsDataTable render nên mang scope id CỦA DS,
   selector trần bên trên biên dịch thành `.dsr-cfg-col-actions[b-<DSRConfiguration>]` và chỉ khớp
   bảng ma trận thời hạn (Class B, vẫn do trang tự viết) — đúng như mong muốn, không xoá nó.
   Bề rộng cho cột của bảng DS khai lại tại đây qua ::deep, neo vào `.dsr-cfg-translations-table` là
   div do CHÍNH TRANG viết (tiền lệ `.au-table-wrap` lô (b), `.tup-table-wrap` lô (e)).
   Chỉ bề rộng: căn giữa nay do DsColumn Align="center" (`.ds-table-cell--center`) lo, không khai
   hai lần. 120px giữ nguyên con số cũ, không tính lại (2 nút chỉ cần 2×32 + 6 + 12 = 82px).
   Gate ≥768px: dưới ngưỡng đó DsDataTable xếp hàng thành thẻ và nhả bậc bề rộng bằng
   `.ds-table .ds-table-td { width: auto }`; không gate thì rule này (đặc hiệu hơn, bundle sau) sẽ
   ghim dòng thẻ ở 120px và cắt nội dung. */
@media (min-width: 768px) {
    .dsr-cfg-translations-table[b-gr9ta9dion]  .dsr-cfg-col-actions {
        width: 120px;
    }
}

/* Chế độ thẻ (≤767.98px): ô thao tác KHÔNG in nhãn cột, đúng như bảng viết tay trước đây — ô đó cố
   tình không có `data-label` ("theo quy ước của DataGrid.razor") và data-grid.css ẩn ::before cho
   những ô như vậy. DsDataTable thì luôn đổ data-label từ Title và chỉ tự ẩn khi Title RỖNG, mà cột
   này phải giữ tiêu đề "Thao tác" ở desktop y như cũ; nên trang ẩn lại nhãn ở chế độ thẻ.
   Ở bảng này 2 nút chưa đủ làm tràn thẻ (đo ở 375px: ô 249px, không tràn) — rule ở đây là để
   GIỮ ĐÚNG hành vi cũ, cùng một quy ước với bảng công việc con ở DSRRequestDetail (nơi 5 nút làm
   tràn thật 48px). */
@media (max-width: 767.98px) {
    .dsr-cfg-translations-table[b-gr9ta9dion]  td.dsr-cfg-col-actions::before {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIGMA 474:28525 — DSR FORM OVERVIEW / CONFIGURATION
   The design is a 1140px work area: 752px form preview + 12px gutter + 376px
   information rail. All paint continues to come from Datanomics.Ds tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

.dsr-configuration[b-gr9ta9dion] {
    container: dsr-configuration / inline-size;
    width: 100%;
    min-width: 0;
    margin-inline: auto;
}

.dsr-cfg-pagehead[b-gr9ta9dion] {
    margin: 0;
}

.dsr-cfg-body[b-gr9ta9dion] {
    min-width: 0;
    padding-top: var(--space-4);
}

.dsr-cfg-pagehead[b-gr9ta9dion]  .ds-tabs {
    min-height: 48px;
    margin-bottom: 0;
}

.dsr-cfg-pagehead--editing[b-gr9ta9dion]  .ds-pagehead { min-height: 72px; }
.dsr-cfg-pagehead--editing[b-gr9ta9dion]  .ds-pagehead-title { font-size: 18px; font-weight: 700; line-height: 26px; }
.dsr-cfg-pagehead[b-gr9ta9dion]  .ds-pagehead-actions:empty { display: none; }

.dsr-cfg-overview[b-gr9ta9dion] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 12px;
    align-items: start;
    justify-content: space-between;
    margin-inline: auto;
}

.dsr-cfg-published-card[b-gr9ta9dion],
.dsr-cfg-info-panel[b-gr9ta9dion] {
    min-width: 0;
}

.dsr-cfg-info-panel[b-gr9ta9dion]  .ds-panel-head {
    min-height: 56px;
    box-sizing: border-box;
    padding: 12px 16px;
}

.dsr-cfg-info-panel[b-gr9ta9dion]  .ds-panel-title {
    font-size: 16px;
    line-height: 24px;
}

.dsr-cfg-published-card[b-gr9ta9dion] {
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
}

.dsr-cfg-published-card > header[b-gr9ta9dion] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 64px;
    box-sizing: border-box;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.dsr-cfg-published-card__title[b-gr9ta9dion] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.dsr-cfg-published-card__title h2[b-gr9ta9dion] {
    margin: 0;
    color: var(--text-strong);
    font: 600 16px/24px var(--font-heading);
    white-space: nowrap;
}

.dsr-cfg-published-card__title[b-gr9ta9dion]  .ds-switch {
    min-width: 0;
    --accent: var(--success);
}

.dsr-cfg-published-card__title[b-gr9ta9dion]  .ds-switch-label { color: var(--success); }

.dsr-cfg-published-card__body[b-gr9ta9dion] {
    padding: 16px;
    background: var(--bg-subtle);
}

.dsr-cfg-preview-toolbar[b-gr9ta9dion] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    min-height: 38px;
    padding: 0 0 var(--space-3);
}

.dsr-cfg-preview-language[b-gr9ta9dion] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-body);
    font-size: var(--text-sm);
}
.dsr-cfg-preview-language[b-gr9ta9dion]  .ds-field { width: 116px; flex: 0 0 116px; }

.dsr-cfg-form-preview[b-gr9ta9dion],
.dsr-cfg-notification-preview[b-gr9ta9dion] {
    width: 100%;
    max-width: 720px;
    box-sizing: border-box;
    margin: 0 auto;
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    color: var(--text-body);
}

.dsr-cfg-form-preview[b-gr9ta9dion] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6) var(--spacing-11xl);
}
.dsr-cfg-form-preview__intro[b-gr9ta9dion] { text-align: center; }

.dsr-cfg-form-preview__intro > span[b-gr9ta9dion],
.dsr-cfg-notification-preview__eyebrow[b-gr9ta9dion] {
    display: block;
    margin-bottom: 4px;
    color: var(--accent-active, var(--accent));
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 24px;
    text-transform: none;
}

.dsr-cfg-form-preview__intro h2[b-gr9ta9dion],
.dsr-cfg-notification-preview h2[b-gr9ta9dion] {
    margin: 0;
    color: var(--text-strong);
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
}

.dsr-cfg-form-preview__intro p[b-gr9ta9dion] {
    margin: var(--space-2) 0 0;
    color: var(--text-body);
    font-size: 12px;
    line-height: 18px;
}

.dsr-cfg-form-preview[b-gr9ta9dion]  .ds-alert {
    margin: 0;
}

.dsr-cfg-form-preview__choice[b-gr9ta9dion],
.dsr-cfg-form-preview__terms[b-gr9ta9dion] {
    padding: var(--space-4);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
}

.dsr-cfg-form-preview__terms[b-gr9ta9dion] { background: var(--info-soft); }
.dsr-cfg-form-preview__choice[b-gr9ta9dion]  .ds-switch { align-items: flex-start; }
.dsr-cfg-form-preview__choice[b-gr9ta9dion]  .ds-switch-label,
.dsr-cfg-form-preview__terms[b-gr9ta9dion]  .ds-checkbox-label { font: 400 16px/24px var(--font-body); }

.dsr-cfg-form-preview__fields[b-gr9ta9dion] {
    display: grid;
    gap: var(--space-4);
    padding: 0;
    border: 0;
}

.dsr-cfg-form-preview__fields h3[b-gr9ta9dion] {
    margin: 0;
    color: var(--text-subtle);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-transform: uppercase;
}

.dsr-cfg-form-preview__upload[b-gr9ta9dion] {
    display: grid;
    gap: 6px;
}

.dsr-cfg-form-preview__label[b-gr9ta9dion] {
    color: var(--text-body);
    font-size: 16px;
    font-weight: 500;
}

.dsr-cfg-form-preview__footer[b-gr9ta9dion] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    text-align: center;
}

.dsr-cfg-form-preview__footer > p[b-gr9ta9dion] {
    width: 100%;
    margin: 0 0 var(--space-4);
    color: var(--text-muted);
    font-size: 13px;
    line-height: 20px;
}

.dsr-cfg-form-preview__copyright[b-gr9ta9dion] {
    width: 100%;
    box-sizing: border-box;
    margin: var(--space-4) 0 0;
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-subtle);
    font-size: 12px;
    line-height: 18px;
}

.dsr-cfg-notification-preview[b-gr9ta9dion] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    min-height: 268px;
    padding: var(--space-6);
    text-align: center;
}

.dsr-cfg-notification-preview__message[b-gr9ta9dion] { width: 100%; }
.dsr-cfg-notification-preview__message h2[b-gr9ta9dion] { font: 600 16px/24px var(--font-body); }
.dsr-cfg-notification-preview__message p[b-gr9ta9dion] { margin: var(--space-1) 0 0; color: var(--text-muted); font: 400 16px/24px var(--font-body); overflow-wrap: anywhere; }
.dsr-cfg-notification-preview[b-gr9ta9dion]  .ds-btn { min-width: 174px; }

.dsr-cfg-notification-preview__icon[b-gr9ta9dion] {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--success-soft);
    color: var(--success);
}

.dsr-cfg-notification-preview > p[b-gr9ta9dion] {
    max-width: 440px;
    margin: var(--space-3) 0 var(--space-5);
    color: var(--text-muted);
    font-size: 14px;
    line-height: 22px;
}

.dsr-cfg-notification-preview[b-gr9ta9dion]  .ds-alert {
    width: 100%;
    margin-bottom: var(--space-5);
    text-align: left;
}

.dsr-cfg-overview__aside[b-gr9ta9dion] {
    display: grid;
    gap: var(--space-4);
}

.dsr-cfg-info-list[b-gr9ta9dion] {
    margin: 0;
}

.dsr-cfg-info-list > div[b-gr9ta9dion] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    min-height: 56px;
    border-bottom: 1px solid var(--border-subtle);
}

.dsr-cfg-info-list dt[b-gr9ta9dion],
.dsr-cfg-info-list dd[b-gr9ta9dion] {
    box-sizing: border-box;
    margin: 0;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 20px;
}

.dsr-cfg-info-list dt[b-gr9ta9dion] {
    color: var(--text-muted);
    font-weight: 500;
}

.dsr-cfg-info-list dd[b-gr9ta9dion] {
    color: var(--text-strong);
    font-weight: 500;
}

.dsr-cfg-info-list__status dt[b-gr9ta9dion] {
    display: grid;
    gap: 2px;
}

.dsr-cfg-info-list__status dt small[b-gr9ta9dion] {
    color: var(--text-subtle);
    font-size: 11px;
    line-height: 16px;
}

.dsr-cfg-info-list__status dd[b-gr9ta9dion] {
    display: flex;
    justify-content: flex-end;
}

.dsr-cfg-info-panel__action[b-gr9ta9dion] {
    padding: 16px;
}

.dsr-cfg-version-card[b-gr9ta9dion] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-l1);
}

.dsr-cfg-version-card > div[b-gr9ta9dion] {
    display: grid;
    gap: 2px;
}

.dsr-cfg-version-card span[b-gr9ta9dion] {
    color: var(--text-muted);
    font-size: 12px;
}

.dsr-cfg-version-card strong[b-gr9ta9dion] {
    color: var(--text-strong);
    font-size: 16px;
}

.dsr-cfg-editor-form--hidden[b-gr9ta9dion] {
    display: none;
}

.dsr-cfg-editor-form[b-gr9ta9dion] {
    max-width: 1140px;
    margin-inline: auto;
}

.dsr-cfg-editor-form > .validation-summary-valid[b-gr9ta9dion] {
    display: none;
}

.dsr-cfg-editor-form .card[b-gr9ta9dion] {
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: none;
}

.dsr-cfg-editor-form .card-header[b-gr9ta9dion] {
    min-height: 56px;
    box-sizing: border-box;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-strong);
}

.dsr-cfg-editor-form .card-body[b-gr9ta9dion] {
    padding: 24px;
    background: var(--bg-surface);
}

.dsr-cfg-editor-form .form-label[b-gr9ta9dion] {
    color: var(--text-body);
    font-size: 13px;
    font-weight: 500;
}

.dsr-cfg-editor-form .form-control[b-gr9ta9dion],
.dsr-cfg-editor-form .form-select[b-gr9ta9dion] {
    min-height: 40px;
    border-color: var(--border-control);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-body);
}

.dsr-cfg-editor-form textarea.form-control[b-gr9ta9dion] {
    min-height: 96px;
}

.dsr-cfg-editor-form .form-control:focus[b-gr9ta9dion],
.dsr-cfg-editor-form .form-select:focus[b-gr9ta9dion] {
    border-color: var(--accent);
    box-shadow: var(--ring);
}

.dsr-cfg-editor-form .form-text[b-gr9ta9dion],
.dsr-cfg-editor-form small.text-muted[b-gr9ta9dion] {
    color: var(--text-muted) !important;
    font-size: 12px;
}

@media (max-width: 1099.98px) {
    .dsr-cfg-overview[b-gr9ta9dion] {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
    }

    .dsr-cfg-form-preview[b-gr9ta9dion] {
        padding-inline: 32px;
    }

}

@media (max-width: 899.98px) {
    .dsr-cfg-overview[b-gr9ta9dion] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .dsr-cfg-overview__aside[b-gr9ta9dion] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .dsr-cfg-pagehead[b-gr9ta9dion]  .ds-pagehead {
        align-items: stretch;
    }

    .dsr-cfg-pagehead[b-gr9ta9dion]  .ds-pagehead-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .dsr-cfg-pagehead[b-gr9ta9dion]  .ds-pagehead-actions .ds-btn {
        flex: 1 1 auto;
    }

    .dsr-cfg-pagehead[b-gr9ta9dion]  .ds-tab {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        text-align: center;
    }

    .dsr-cfg-preview-toolbar[b-gr9ta9dion] {
        flex-direction: column;
    }

    .dsr-cfg-preview-toolbar[b-gr9ta9dion]  .ds-segmented,
    .dsr-cfg-preview-language[b-gr9ta9dion] {
        width: 100%;
    }

    .dsr-cfg-form-preview[b-gr9ta9dion] {
        padding: 24px 20px 0;
    }



    .dsr-cfg-overview__aside[b-gr9ta9dion] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 479.98px) {
    .dsr-cfg-info-list > div[b-gr9ta9dion] {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    }

    .dsr-cfg-pagehead[b-gr9ta9dion]  .ds-pagehead-actions .ds-btn {
        flex-basis: calc(50% - var(--space-2));
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HIDDEN FIELD
   Replaces inline style="display:none;" on the legacy ProcessingTimeout block.
   Field is intentionally hidden but retained to keep the form binding intact
   so the persisted value is not lost on save. Apply on a wrapper div.
   ═══════════════════════════════════════════════════════════════════════════ */

.dsr-cfg-hidden[b-gr9ta9dion] {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY-STATE / DECORATIVE ICONS
   ═══════════════════════════════════════════════════════════════════════════ */

.dsr-cfg-empty-icon[b-gr9ta9dion] {
    font-size: 2rem;
    color: var(--dp-text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL OVERLAY + BODY SIZING
   Replaces inline style="" on the three Bootstrap modals (preview, translation,
   delete confirm). Uses the existing --pp-overlay-* CSS variables for the
   backdrop tint so dark/light mode handles itself.
   ═══════════════════════════════════════════════════════════════════════════ */

.dsr-cfg-modal-overlay[b-gr9ta9dion] {
    background-color: rgba(var(--pp-overlay-rgb, 0, 0, 0), var(--pp-overlay-opacity, 0.5));
}

.dsr-cfg-modal-body--preview[b-gr9ta9dion] {
    height: 75vh;
    padding: 0;
}

.dsr-cfg-modal-body--translation[b-gr9ta9dion] {
    max-height: 70vh;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREVIEW IFRAME
   Replaces inline style="width:100%; height:100%; border:0;" on <iframe>.
   ═══════════════════════════════════════════════════════════════════════════ */

.dsr-cfg-preview-iframe[b-gr9ta9dion] {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Phase 3 khuôn B additions (token-only) ─────────────────────────────── */
.dsr-cfg-badges[b-gr9ta9dion] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0 var(--space-4);
}

.dsr-modal-scroll[b-gr9ta9dion] {
    max-height: 60vh;
    overflow-y: auto;
}

.dsr-modal-actions[b-gr9ta9dion] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.dsr-confirm-message[b-gr9ta9dion] {
    margin: 0;
    color: var(--text-body);
}

.dsr-cfg-preview-loading[b-gr9ta9dion] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
}

.dsr-skeleton[b-gr9ta9dion] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dsr-skeleton-title[b-gr9ta9dion] { height: 28px; width: min(320px, 100%); }
.dsr-skeleton-row[b-gr9ta9dion] { height: 72px; width: 100%; }

/* Accordion sections replacing the former sub-tab nav (mockup DSR-config refresh). */
.dsr-cfg-accordion-toggle[b-gr9ta9dion] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.dsr-cfg-accordion-toggle__chevron[b-gr9ta9dion] {
    flex: 0 0 auto;
    width: 1em;
    color: var(--text-muted);
}

.dsr-cfg-accordion-toggle__title[b-gr9ta9dion] {
    flex: 0 0 auto;
}

.dsr-cfg-accordion-toggle__hint[b-gr9ta9dion] {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
}

.dsr-cfg-subsection-label[b-gr9ta9dion] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-top: var(--space-3);
    margin-bottom: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

.dsr-cfg-inner-heading[b-gr9ta9dion] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-body);
    margin-bottom: var(--space-3);
}

.dsr-cfg-badges[b-gr9ta9dion] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.dsr-cfg-badges__group[b-gr9ta9dion] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── 3 in-page tabs (FR-A1) ─────────────────────────────────────────────── */
.dsr-cfg-tabs[b-gr9ta9dion] {
    margin-bottom: var(--space-4);
}

/* Bọc tab 1-2 để vô hiệu hoá hàng loạt với vai trò chỉ-xem. <fieldset> mang sẵn border/padding/
   margin của UA và min-inline-size: min-content — cái cuối làm vỡ co giãn của .row/.card bên trong,
   nên phải reset đủ 4 thuộc tính thì layout mới giữ nguyên như khi chưa bọc. Thuần cấu trúc:
   không màu, không token mới. */
.dsr-cfg-fieldset[b-gr9ta9dion] {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
}

.dsr-cfg-badges__actions[b-gr9ta9dion] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Hướng dẫn "Lưu trước khi xem trước" khi config chưa từng Save (FR-B5/case #11). */
.dsr-cfg-badges__hint[b-gr9ta9dion] {
    margin: calc(-1 * var(--space-2)) 0 var(--space-3);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
}

/* ── Khối trạng thái biểu mẫu (FR-A9, component spec §1.2) ──────────────── */
.dsr-cfg-status[b-gr9ta9dion] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.dsr-cfg-status__icon[b-gr9ta9dion] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
}

.dsr-cfg-status__text[b-gr9ta9dion] {
    flex: 1;
    min-width: 180px;
}

.dsr-cfg-status__label[b-gr9ta9dion] {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.90625rem;
    color: var(--text-strong);
    cursor: pointer;
    margin-bottom: 0;
}

.dsr-cfg-status__hint[b-gr9ta9dion] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Live region chỉ dành cho screen reader (thông báo "thay đổi chưa lưu" khi gạt switch). */
.dsr-cfg-status__announce[b-gr9ta9dion] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Banner "chưa lưu" của modal Xem trước (FR-B4). */
.dsr-cfg-preview-banner[b-gr9ta9dion] {
    margin-bottom: var(--space-3);
}

.dsr-cfg-embed-code[b-gr9ta9dion] {
    font-family: var(--font-mono);
}

@media (max-width: 767.98px) {
    /* Spec §8.4: cả 3 tab hiển thị đồng thời, mỗi ô đúng 1/3 bề rộng, nhãn wrap 2-3 dòng, canh giữa
       — không cuộn ngang, không cắt nhãn. 3 ô phải BẰNG NHAU: ô rộng hẹp lệch nhau khiến người dùng
       tưởng tab ở giữa đang được chọn. min-height:44px cho WCAG SC 2.5.8 — .ds-tab mặc định chỉ
       ≈41px khi nhãn 1 dòng (padding 10px×2 + line-height ≈21px). overflow-wrap: ở 320px mỗi ô còn
       ≈73px cho chữ, ngắn hơn từ dài nhất của en ("information" ≈75px) và id ("pemrosesan" ≈70px).
       Phải là `anywhere`, KHÔNG phải `break-word`: theo CSS Text 3 §5.5 chỉ `anywhere` được tính
       vào min-content intrinsic size. Nhãn là anonymous flex item (min-width:auto = min-content =
       trọn từ) nên với `break-word` mỗi ô bị giữ ở ≈103px ⇒ 3×103 = 309px > ~288px khả dụng ⇒ hàng
       tab tràn ~21px, mà overflow-x:auto đã bỏ theo §8.4 nên không còn gì che. */
    .dsr-cfg-tabs[b-gr9ta9dion]  .ds-tab {
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px;
        justify-content: center;
        text-align: center;
        overflow-wrap: anywhere;
    }

    /* Touch target ≥44px và 2 nút chia đôi hàng dưới badge. */
    .dsr-cfg-badges__actions[b-gr9ta9dion] {
        width: 100%;
    }

    .dsr-cfg-badges__actions[b-gr9ta9dion]  .ds-btn {
        flex: 1 1 0;
        min-height: 44px;
    }

    .dsr-cfg-badges__hint[b-gr9ta9dion] {
        text-align: left;
    }

    /* Khối trạng thái xuống 2 hàng: hàng 1 icon + nhãn/hint, hàng 2 badge (trái) + switch (phải).
       Không sticky — cuộn theo trang như phần còn lại (component spec §4). */
    .dsr-cfg-status__text[b-gr9ta9dion] {
        /* Chiếm hết phần còn lại của hàng 1 (bên phải icon 34px) ⇒ badge + switch buộc xuống hàng 2. */
        flex: 1 1 calc(100% - 34px - var(--space-3));
        min-width: 0;
    }

    .dsr-cfg-status[b-gr9ta9dion]  .ds-switch {
        margin-left: auto;
        min-height: 44px;
        min-width: 44px;
    }
}

/* Visual form builder shown by the Figma edit state. */
.dsr-cfg-general-card[b-gr9ta9dion] {
    overflow: hidden;
    margin-bottom: var(--space-4);
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
}

.dsr-cfg-general-card > header[b-gr9ta9dion] {
    display: flex;
    align-items: center;
    min-height: 56px;
    box-sizing: border-box;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.dsr-cfg-general-card h2[b-gr9ta9dion] {
    margin: 0;
    color: var(--text-strong);
    font: 600 16px/24px var(--font-heading);
}

.dsr-cfg-general-card__body[b-gr9ta9dion] {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
}

.dsr-cfg-general-card__language-row[b-gr9ta9dion] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.dsr-cfg-general-card__body[b-gr9ta9dion] >  .ds-field:last-child {
    max-width: 540px;
}

.dsr-cfg-builder-toolbar[b-gr9ta9dion] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 38px;
    margin-bottom: var(--space-3);
}

.dsr-cfg-builder-toolbar[b-gr9ta9dion]  .ds-segmented {
    width: fit-content;
    border-bottom: 0;
}

.dsr-cfg-builder-toolbar[b-gr9ta9dion]  .ds-tab {
    min-height: 38px;
    padding-block: 7px;
}

.dsr-cfg-builder-toolbar__language[b-gr9ta9dion] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: 12px;
}

.dsr-cfg-builder-toolbar__language[b-gr9ta9dion]  .ds-field {
    width: 116px;
}


.dsr-cfg-rights-modal[b-gr9ta9dion] {
    max-height: min(594px, 68vh);
    overflow: auto;
}

.dsr-cfg-rights-modal__type[b-gr9ta9dion] {
    display: grid;
    gap: 2px;
}

.dsr-cfg-rights-modal__type strong[b-gr9ta9dion] {
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 600;
}

.dsr-cfg-rights-modal__type span[b-gr9ta9dion] {
    color: var(--text-muted);
    font-size: 11px;
}

.dsr-cfg-rights-modal[b-gr9ta9dion]  .ds-table-wrap {
    box-shadow: none;
}

.dsr-cfg-rights-modal[b-gr9ta9dion]  .ds-field {
    min-width: 88px;
}

.dsr-cfg-rights-modal[b-gr9ta9dion]  .ds-input-control {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Frame 470:48289 and the four 900px scroll frames use a 445 / 12 / 651
   editor split. The controls scroll in the left rail while the form preview
   remains sticky on the right until the containing editor card ends. */
.dsr-cfg-builder-panel[b-gr9ta9dion] {
    overflow: visible;
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
}

.dsr-cfg-builder-panel > header[b-gr9ta9dion] {
    display: flex;
    align-items: center;
    min-height: 56px;
    box-sizing: border-box;
    padding: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.dsr-cfg-builder-panel > header h2[b-gr9ta9dion] {
    margin: 0;
    color: var(--text-strong);
    font: 600 16px/24px var(--font-heading);
}

.dsr-cfg-builder-panel__body[b-gr9ta9dion] {
    padding: 16px;
}

.dsr-cfg-builder[b-gr9ta9dion] {
    display: grid;
    grid-template-columns: minmax(0, 445fr) minmax(0, 651fr);
    align-items: start;
    gap: 12px;
    margin: 0;
}

.dsr-cfg-builder__controls[b-gr9ta9dion] {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
}

.dsr-cfg-builder__control-card[b-gr9ta9dion] {
    position: relative;
    overflow: visible;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dsr-cfg-builder__control-card--active[b-gr9ta9dion] {
    border-color: var(--accent);
    box-shadow: none;
}

.dsr-cfg-builder__control-card--active[b-gr9ta9dion]::after {
    position: absolute;
    z-index: 2;
    top: 48px;
    right: -42px;
    width: 41px;
    border-top: 1px solid var(--accent);
    content: "";
    pointer-events: none;
}

.dsr-cfg-builder__control-card > header[b-gr9ta9dion] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 36px;
    box-sizing: border-box;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-subtle);
}

.dsr-cfg-builder__control-card > header h3[b-gr9ta9dion] {
    margin: 0;
    color: var(--text-strong);
    font: 600 13px/20px var(--font-heading);
}

.dsr-cfg-builder__control-card > header > span[b-gr9ta9dion] {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 16px;
}

.dsr-cfg-builder__control-card > header[b-gr9ta9dion]  .ds-switch-label {
    font-size: 11px;
}

.dsr-cfg-builder__control-body[b-gr9ta9dion] {
    display: grid;
    gap: 16px;
    padding: 12px;
}

.dsr-cfg-builder__control-actions[b-gr9ta9dion] {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px solid var(--border-subtle);
}

.dsr-cfg-builder__canvas[b-gr9ta9dion] {
    position: sticky;
    top: 16px;
    align-self: start;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 24px;
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
}

.dsr-cfg-builder-preview[b-gr9ta9dion],
.dsr-cfg-builder-notification[b-gr9ta9dion] {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.dsr-cfg-builder-preview[b-gr9ta9dion] {
    display: grid;
    gap: 16px;
}

.dsr-cfg-builder-preview__block[b-gr9ta9dion] {
    overflow: hidden;
    padding: 0;
    border: 1px dashed transparent;
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}

.dsr-cfg-builder-preview__block:hover[b-gr9ta9dion] {
    border-color: var(--border-subtle);
}

.dsr-cfg-builder-preview__block--active[b-gr9ta9dion] {
    border-color: var(--accent);
    background: var(--bg-surface);
    box-shadow: none;
}

.dsr-cfg-builder-preview__section-head[b-gr9ta9dion] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 36px;
    box-sizing: border-box;
    padding: 8px 9px;
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-size: 11px;
    line-height: 16px;
}

.dsr-cfg-builder-preview__section-head strong[b-gr9ta9dion] {
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 600;
}

.dsr-cfg-builder-preview__section-body[b-gr9ta9dion] {
    padding: 9px;
}

.dsr-cfg-builder-preview__intro[b-gr9ta9dion] {
    text-align: center;
}

.dsr-cfg-builder-preview__intro > span[b-gr9ta9dion] {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.dsr-cfg-builder-preview__intro h2[b-gr9ta9dion] { margin: 0; font: 400 24px/32px var(--font-heading); overflow-wrap: anywhere; }
.dsr-cfg-builder-preview__section-body > p[b-gr9ta9dion] { margin: 0; font: 400 12px/18px var(--font-body); }

.dsr-cfg-builder-preview__fields[b-gr9ta9dion] {
    display: grid;
    gap: 16px;
}

.dsr-cfg-builder-preview__footer[b-gr9ta9dion] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.dsr-cfg-builder-preview__footer > div[b-gr9ta9dion] {
    width: 100%;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-subtle);
    font-size: 12px;
}

.dsr-cfg-legacy-settings[b-gr9ta9dion] {
    display: none !important;
}

@media (max-width: 1099.98px) {
    .dsr-cfg-builder[b-gr9ta9dion] {
        grid-template-columns: minmax(0, 445fr) minmax(0, 651fr);
    }
}

@media (max-width: 899.98px) {
    .dsr-cfg-builder[b-gr9ta9dion] {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .dsr-cfg-builder__canvas[b-gr9ta9dion] {
        position: static;
    }

    .dsr-cfg-builder__control-card--active[b-gr9ta9dion]::after {
        display: none;
    }
}

@media (max-width: 639.98px) {
    .dsr-cfg-published-card > header[b-gr9ta9dion],
    .dsr-cfg-published-card__title[b-gr9ta9dion] {
        align-items: flex-start;
        flex-direction: column;
    }

    .dsr-cfg-published-card > header[b-gr9ta9dion]  .ds-btn {
        width: 100%;
    }

    .dsr-cfg-builder-panel__body[b-gr9ta9dion],
    .dsr-cfg-builder__canvas[b-gr9ta9dion] {
        padding: 12px;
    }
}

@media (max-width: 639.98px) {
    .dsr-cfg-general-card__language-row[b-gr9ta9dion] { grid-template-columns: minmax(0, 1fr); }
    .dsr-cfg-builder-toolbar[b-gr9ta9dion] { flex-wrap: wrap; }
    .dsr-cfg-builder-toolbar__language[b-gr9ta9dion] { margin-left: auto; }
    .dsr-cfg-form-preview[b-gr9ta9dion] { padding: var(--space-6) var(--space-4); }
    .dsr-cfg-preview-toolbar[b-gr9ta9dion]  .ds-segmented { display: flex; }
    .dsr-cfg-preview-toolbar[b-gr9ta9dion]  .ds-segmented-item { flex: 1; min-width: 0; white-space: normal; }
}

/* Respond to the actual work area in both full and collapsed-menu layouts. */
@container dsr-configuration (max-width: 850px) {
    .dsr-cfg-overview[b-gr9ta9dion],
    .dsr-cfg-builder[b-gr9ta9dion] { grid-template-columns: minmax(0, 1fr); }
    .dsr-cfg-builder__canvas[b-gr9ta9dion] { position: static; }
    .dsr-cfg-builder__control-card--active[b-gr9ta9dion]::after { display: none; }
}

@container dsr-configuration (max-width: 600px) {
    .dsr-cfg-general-card__language-row[b-gr9ta9dion] { grid-template-columns: minmax(0, 1fr); }
    .dsr-cfg-form-preview[b-gr9ta9dion] { padding: var(--space-6) var(--space-4); }
    .dsr-cfg-builder-toolbar[b-gr9ta9dion] { flex-wrap: wrap; }
}
/* _content/BlazorFrontend/Pages/Compliance/DataSubjectRight/DsrMailConfigurationPanel.razor.rz.scp.css */
.dsr-mail-fields[b-ho6y9ri9s3] { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-4); max-width: 42rem; min-width: 0; }
.dsr-mail-actions[b-ho6y9ri9s3] { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.dsr-mail-content[b-ho6y9ri9s3] {
    display: grid;
    min-width: 0;
    gap: var(--space-4);
}

.dsr-mail-content > p[b-ho6y9ri9s3] {
    margin: 0;
}
/* _content/BlazorFrontend/Pages/Compliance/DataSubjectRight/DsrMailQuarantinePanel.razor.rz.scp.css */
.dsr-quarantine[b-71cfj5wgzx] {
    display: grid;
    min-width: 0;
    gap: var(--space-4);
}

.dsr-quarantine__heading[b-71cfj5wgzx] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.dsr-quarantine__heading h2[b-71cfj5wgzx],
.dsr-quarantine__heading p[b-71cfj5wgzx] {
    margin: 0;
}

.dsr-quarantine__heading > div[b-71cfj5wgzx],
.dsr-quarantine__table[b-71cfj5wgzx] {
    min-width: 0;
}

.dsr-quarantine__heading h2[b-71cfj5wgzx] {
    font: 600 16px/24px var(--font-body);
}

.dsr-quarantine__heading p[b-71cfj5wgzx] {
    margin-top: var(--space-1);
    color: var(--text-muted);
}

.dsr-quarantine__table[b-71cfj5wgzx] {
    width: 100%;
}

/* A translated reason must stay readable inside the mobile card's value column. */
.dsr-quarantine__table[b-71cfj5wgzx]  .ds-chip {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* DATA UI table: the action-menu column keeps the same 120px as the `Quản lý yêu cầu` tab. The
   selector reaches the cell through ::deep because the <td> is DsDataTable's markup, not this file's. */
.dsr-quarantine__table[b-71cfj5wgzx]  .dsr-quarantine__col-actions {
    width: 120px;
}

.dsr-quarantine__row-actions[b-71cfj5wgzx] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Column-header filter trigger — same shape as DSRRequests.razor.css `.dsr-column-filter-*`. */
.dsr-quarantine__filter-trigger[b-71cfj5wgzx] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-primary, var(--text-body));
    font: 500 14px/20px var(--font-body);
}

.dsr-quarantine__filter-icon[b-71cfj5wgzx] {
    position: relative;
    display: inline-flex;
    color: var(--color-icon-primary, var(--text-body));
}

.dsr-quarantine__filter-dot[b-71cfj5wgzx] {
    position: absolute;
    top: -1px;
    right: -2px;
    width: 6px;
    height: 6px;
    border: 1px solid var(--color-bg-surface-base-tertiary, var(--bg-inset));
    border-radius: var(--radius-pill);
    background: var(--color-bg-brand-solid, var(--accent));
}

.dsr-quarantine__table[b-71cfj5wgzx]  .dsr-quarantine__column-filter .ds-dropmenu-panel {
    min-width: 280px;
}

.dsr-quarantine__sender[b-71cfj5wgzx],
.dsr-quarantine__preview span[b-71cfj5wgzx] {
    overflow-wrap: anywhere;
}

.dsr-quarantine__preview[b-71cfj5wgzx] {
    display: grid;
    gap: var(--space-1);
}

.dsr-quarantine__preview span[b-71cfj5wgzx] {
    color: var(--text-muted);
}

.dsr-quarantine__attachments[b-71cfj5wgzx] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.dsr-quarantine__evidence[b-71cfj5wgzx] {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0;
}

.dsr-quarantine__evidence div[b-71cfj5wgzx] {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) 2fr;
    gap: var(--space-3);
}

.dsr-quarantine__evidence dt[b-71cfj5wgzx] {
    color: var(--text-muted);
}

.dsr-quarantine__evidence dd[b-71cfj5wgzx] {
    margin: 0;
}

.dsr-quarantine__full-text[b-71cfj5wgzx] {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    color: var(--text-body);
    font: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.dsr-quarantine__modal-fields[b-71cfj5wgzx] {
    display: grid;
    gap: var(--space-4);
}

.dsr-quarantine__summary[b-71cfj5wgzx] {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
}

.dsr-quarantine__summary span[b-71cfj5wgzx] {
    color: var(--text-muted);
}

.dsr-quarantine__replied-to[b-71cfj5wgzx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

@media (max-width: 768px) {
    .dsr-quarantine__heading[b-71cfj5wgzx] {
        align-items: stretch;
        flex-direction: column;
    }

    .dsr-quarantine__evidence div[b-71cfj5wgzx] {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}
/* _content/BlazorFrontend/Pages/Compliance/DataSubjectRight/DSRRequestDetail.razor.rz.scp.css */
/* DSR-02 Request Detail — khuôn C (Phase 3 pilot). Token-only, layout-only. */

.dsr-detail-page[b-v9jnij2imu],
.dsr-detail-body[b-v9jnij2imu] {
    min-width: 0;
}

.dsr-detail-body[b-v9jnij2imu] {
    padding-top: var(--space-4);
}

/* SLA strip: status · code · received/due dates (mockup 10-detail). */
.dsr-sla-strip[b-v9jnij2imu] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-md);
}

.dsr-sla-code[b-v9jnij2imu] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.dsr-sla-dates[b-v9jnij2imu] {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.dsr-overdue[b-v9jnij2imu] {
    color: var(--danger);
    font-weight: 600;
}

.dsr-detail-stack[b-v9jnij2imu] {
    display: grid;
    min-width: 0;
    gap: var(--space-4);
}

.dsr-detail-stack > *[b-v9jnij2imu],
.dsr-detail-section[b-v9jnij2imu],
.dsr-info-grid[b-v9jnij2imu],
.dsr-info-grid__item[b-v9jnij2imu] {
    min-width: 0;
}

.dsr-detail-stack > .alert[b-v9jnij2imu] {
    margin-bottom: 0;
}

.dsr-detail-stack[b-v9jnij2imu]  .ds-panel {
    min-width: 0;
}

.dsr-detail-stack[b-v9jnij2imu]  .dsr-workflow-panel .ds-panel-body {
    padding: var(--space-4) var(--space-5) var(--space-5);
}

.dsr-info-grid[b-v9jnij2imu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--space-4);
}

.dsr-info-grid__item[b-v9jnij2imu]  .ds-panel {
    height: 100%;
}

.dsr-info-grid .table[b-v9jnij2imu] {
    width: 100%;
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .dsr-info-grid[b-v9jnij2imu] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Long modal bodies scroll inside the DsModal frame. */
.dsr-modal-scroll[b-v9jnij2imu] {
    max-height: 60vh;
    overflow-y: auto;
}

/* Loading skeleton (khuôn C). */
.dsr-skeleton[b-v9jnij2imu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dsr-skeleton-title[b-v9jnij2imu] {
    height: 28px;
    width: 320px;
}

.dsr-skeleton-row[b-v9jnij2imu] {
    height: 96px;
    width: 100%;
}

/* ── Legacy body bridge (badge pills only — card wrapper pass done 20/07) ──
   The card/card-header/card-body wrappers were converted to DsPagePanel in
   the Phase 3 close-out pass. The .dsr-badge pills and small helper classes
   below are pre-existing token-only styles (not raw Bootstrap) still used by
   inline status/tag markup inside those panels; left as-is — narrower,
   lower-risk residual debt tracked in the Phase 3 report, not part of this
   pass. */
.dsr-badge[b-v9jnij2imu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    font-size: 11.5px;
    font-weight: 600;
}

.dsr-badge--success[b-v9jnij2imu] { background: var(--success-soft, var(--bg-subtle)); color: var(--success); }
.dsr-badge--warning[b-v9jnij2imu] { background: var(--warning-soft, var(--bg-subtle)); color: var(--warning-strong, var(--warning)); }
.dsr-badge--danger[b-v9jnij2imu]  { background: var(--danger-soft, var(--bg-subtle)); color: var(--danger); }
.dsr-badge--info[b-v9jnij2imu]    { background: var(--info-soft, var(--bg-subtle)); color: var(--info, var(--accent)); }
.dsr-badge--primary[b-v9jnij2imu] { background: var(--accent-soft); color: var(--accent); }
.dsr-badge--neutral[b-v9jnij2imu] { background: var(--bg-inset, var(--bg-subtle)); color: var(--text-muted); }

.dsr-label-col[b-v9jnij2imu] { width: 40%; color: var(--text-muted); }

.dsr-usage-text--warning[b-v9jnij2imu] { color: var(--warning-strong, var(--warning)); }
.dsr-usage-text--danger[b-v9jnij2imu]  { color: var(--danger); }

.dsr-border--neutral[b-v9jnij2imu] { border-color: var(--border-subtle) !important; }

/* Vendor-suggestion dropdown (third-party modal) — above the modal stack. */
.dsr-vendor-suggestions[b-v9jnij2imu] {
    z-index: 1060;
    max-height: 220px;
    overflow-y: auto;
}
* ==========================================================================
   DSR Request Detail — scoped styles
   All colors reference --dp-* design tokens (variables.css).
   No hardcoded hex/rgb. The only inline style permitted in the .razor is the
   dynamic CSS custom property `--dsr-usage` consumed by .dsr-progress-bar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FIXED-WIDTH TABLE COLUMNS (replaces inline style="width:...")
   -------------------------------------------------------------------------- */
.dsr-label-col[b-v9jnij2imu] {
    width: 160px;
}

/* Các lớp .dsr-col-assignee/-status/-due/-files/-actions đã được bỏ: bảng công việc con
   giờ dùng thang cột dùng chung dp-col--* của lớp .dp-grid (variables.css →
   --dp-grid-col-*), nên không còn nơi tiêu thụ và giữ lại sẽ thành hai cơ chế bề rộng
   song song tranh nhau độ ưu tiên. */

/* ADR-046 W5 lô (f) — hai bảng của trang (công việc con, lịch sử gia hạn) nay là DsDataTable.
   Bậc bề rộng dp-col--* đã đổi sang DsColumn.Size (cùng con số qua alias ds-bridge.css); chỉ còn
   hai thứ DS không có bậc sẵn phải khai ở đây.
   Mọi rule dưới đây bắt buộc đi qua ::deep: <th>/<td> do DsDataTable render nên mang scope id CỦA
   DS — một `.dsr-subtasks-col-actions` trần trong file này sẽ biên dịch thành
   `.dsr-subtasks-col-actions[b-<DSRRequestDetail>]` và không khớp gì cả. Điểm neo là hai div
   `.dsr-subtasks-table` / `.dsr-ext-history-table` do CHÍNH TRANG viết (tiền lệ `.au-table-wrap`
   lô (b), `.tup-table-wrap` lô (e)).
   `.dsr-cell--wrap` thay `.dp-grid .dp-cell--overflow-visible`: rule cũ bị khoá trong `.dp-grid`
   nên không với tới `.ds-table`. Tiền tố `td.` là cố ý — nó nâng đặc hiệu lên (0,3,1) để thắng
   `.ds-table--fixed .ds-table-td` (0,3,0) bằng đặc hiệu chứ không bằng thứ tự bundle (tiền lệ
   `.dsr-requests-table ::deep td.dsr-cell--wrap` ở DataSubjectRights.razor.css W2). */
.dsr-subtasks-table[b-v9jnij2imu]  td.dsr-subtasks-col-actions,
.dsr-ext-history-table[b-v9jnij2imu]  td.dsr-cell--wrap {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}

/* Chế độ thẻ (≤767.98px): ô thao tác KHÔNG in nhãn cột, đúng như bảng viết tay trước đây.
   Bảng cũ cố tình bỏ `data-label` ở ô thao tác ("theo quy ước của DataGrid.razor: ô chọn và ô thao
   tác không có nhãn cột") và data-grid.css ẩn ::before cho những ô đó. DsDataTable thì LUÔN đổ
   data-label từ DsColumn.Title, và DS chỉ tự ẩn nhãn khi Title RỖNG — mà cột này phải giữ tiêu đề
   "Thao tác" ở desktop y như cũ. Nên trang tự ẩn lại nhãn ở chế độ thẻ.
   Đây là SỬA MỘT LỖI ĐO ĐƯỢC, không phải chỉnh thẩm mỹ: ở 375px ô thao tác rộng 243px, còn
   ::before "Thao tác" (48px) + gap 16px + cụm 5 nút `.dp-actions` (220px, flex-wrap:nowrap) = 284px
   ⇒ thẻ tràn ngang 48px và nút Xoá bị đẩy ra ngoài (số đo trong
   tools/scripts/testing/adr046-w5-lot-f/card-375.json). Bảng viết tay cũ không tràn vì không có
   nhãn. Ẩn nhãn trả lại đúng hành vi cũ, không thêm tính năng nào. */
@media (max-width: 767.98px) {
    .dsr-subtasks-table[b-v9jnij2imu]  td.dsr-subtasks-col-actions::before {
        display: none;
    }
}

/* A single menu replaces the icon strip. Bound the action column on desktop only;
   mobile rows remain flexible. */
@media (min-width: 768px) {
    .dsr-subtasks-table[b-v9jnij2imu]  .dsr-subtasks-col-actions {
        width: var(--ds-table-col-chip);
    }
}

/* --------------------------------------------------------------------------
   PROGRESS BAR (replaces inline height + dynamic width)
   Dynamic width is supplied via the --dsr-usage custom property only.
   -------------------------------------------------------------------------- */
.dsr-progress[b-v9jnij2imu] {
    height: 6px;
}

.dsr-progress-bar[b-v9jnij2imu] {
    width: var(--dsr-usage, 0%);
}

.dsr-progress-bar--success[b-v9jnij2imu] {
    background-color: var(--dp-status-success);
}

.dsr-progress-bar--warning[b-v9jnij2imu] {
    background-color: var(--dp-status-warning);
}

.dsr-progress-bar--danger[b-v9jnij2imu] {
    background-color: var(--dp-status-danger);
}

/* --------------------------------------------------------------------------
   REQUEST CONTENT — preserve formatting, prevent overflow (DET-10)
   -------------------------------------------------------------------------- */
.dsr-request-content[b-v9jnij2imu] {
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   IRREVERSIBLE-ACTION WARNING (RESP-01) — prominent in-modal banner
   -------------------------------------------------------------------------- */
.dsr-irreversible-warning[b-v9jnij2imu] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-radius: var(--radius-sm, 6px);
    padding: 10px 12px;
    margin-bottom: 1rem;
    background-color: var(--dp-status-warning-bg);
    color: var(--dp-status-warning-text);
    border: 1px solid var(--dp-status-warning-border);
}

/* CTA shown when Complete is blocked by pending sub-tasks (RESP-05) */
.dsr-cta-link[b-v9jnij2imu] {
    background: none;
    border: none;
    padding: 0;
    color: var(--dp-text-link);
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}

.dsr-cta-link:hover[b-v9jnij2imu] {
    color: var(--dp-text-link-hover);
}

/* Template skeleton placeholder while loading (RESP-04) */
.dsr-template-skeleton[b-v9jnij2imu] {
    height: 48px;
    border-radius: var(--radius-sm, 6px);
    background-color: var(--dp-skeleton-bg);
    margin-bottom: 1rem;
}

/* De-emphasize the form body when the action is currently not permitted. */
.dsr-form-disabled[b-v9jnij2imu] {
    opacity: 0.5;
    pointer-events: none;
}

/* DPO response-attachments panel — success accent border, same left-border
   convention as .dsr-sla-strip. Applied to a wrapping div (::deep) rather
   than passing class="" straight into DsPagePanel: that component splats
   AdditionalAttributes after its own hardcoded class="ds-panel", so a caller
   class would silently replace — not extend — it and strip all panel
   styling. ::deep sidesteps that entirely. */
.dsr-panel-accent-success[b-v9jnij2imu]  .ds-panel {
    border-left: 3px solid var(--success);
}

/* SLA strip border keyed by status tone (review fix F). */
.dsr-sla-strip--success[b-v9jnij2imu] { border-left-color: var(--success); }
.dsr-sla-strip--warning[b-v9jnij2imu] { border-left-color: var(--warning); }
.dsr-sla-strip--danger[b-v9jnij2imu]  { border-left-color: var(--danger); }
.dsr-sla-strip--info[b-v9jnij2imu]    { border-left-color: var(--info, var(--accent)); }
.dsr-sla-strip--neutral[b-v9jnij2imu] { border-left-color: var(--border-strong); }
.dsr-sla-strip--teal[b-v9jnij2imu]    { border-left-color: var(--teal); }

/* ── Chọn mẫu phản hồi + khối lý do khoá nút (FE-2 / FR-C7·C9·D3) ──────────
   Code mới trên trang này dùng token Datanomics.Ds (đồng nhất với các component Ds*
   ngay cạnh); không hardcode màu, không inline style. */
.dsr-template-picked[b-v9jnij2imu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.dsr-template-picked__name[b-v9jnij2imu] {
    font-weight: 600;
    color: var(--text-strong);
}

.dsr-template-picked__hint[b-v9jnij2imu] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Vì sao nút Hoàn tất/Từ chối đang bị khoá — live region, cập nhật khi DPO gõ. */
.dsr-submit-blocked[b-v9jnij2imu] {
    background: var(--warning-soft);
    border: 1px solid var(--warning-strong);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    color: var(--text-body);
}

.dsr-submit-blocked__title[b-v9jnij2imu] {
    font-weight: 600;
    color: var(--warning-strong);
    margin-bottom: var(--space-1);
}

.dsr-submit-blocked__list[b-v9jnij2imu] {
    margin: 0;
    padding-left: var(--space-5);
    font-size: 0.8125rem;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   KHỐI 9/10 — Trao đổi với chủ thể dữ liệu (REQ-UC-DSR-CONV-001 T11, ui-spec §5)

   Phạm vi của tệp này là LAYOUT/COMPOSITION: grid, gap, breakpoint, neo cuộn. Anatomy, state
   styling và mọi màu của bản ghi tin nhắn nằm trong DsConversationRecord.razor.css qua hợp đồng
   --ds-conversation-record-*; ở đây KHÔNG override selector nội bộ của component, không dùng
   alias tương thích (--dp-*, --accent, --danger, --warning) và không có màu cứng.
   Màu duy nhất được đọc ở đây là semantic role --color-*.

   Đặt ở CUỐI tệp: chú thích hỏng ở dòng ~156 (thiếu dấu "/" mở) nuốt selector của rule ngay sau
   nó, nên mọi rule mới phải nằm sau vùng đó và không được phụ thuộc vào rule nào trong đó.
   (Lỗi cú pháp ấy là khiếm khuyết có sẵn — F-7, đã báo @tech-lead, không sửa trong đợt này vì
   sửa sẽ đổi bề rộng cột đang hiển thị.)
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* Liên kết nhảy trong SLA strip (§3.1.1). Cụm ngày đã dùng margin-left:auto nên liên kết bám
   ngay sau nó ở cuối strip; strip tự xuống dòng khi chật (§7.2). */
.dsr-sla-strip[b-v9jnij2imu] {
    flex-wrap: wrap;
}

.dsr-sla-cv-link[b-v9jnij2imu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-brand);
    text-decoration: none;
}

.dsr-sla-cv-link:hover[b-v9jnij2imu],
.dsr-sla-cv-link:focus-visible[b-v9jnij2imu] {
    text-decoration: underline;
}

/* Khối 9 nhận focus từ liên kết nhảy nhưng không phải control: giữ vòng focus của hệ thiết kế,
   không tự vẽ và không bao giờ outline:none. */
.dsr-cv[b-v9jnij2imu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.dsr-cv__loading[b-v9jnij2imu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Nút "Tải thêm tin cũ hơn" ở ĐẦU danh sách; tin cũ được chèn phía dưới nút nên focus bàn phím
   không bị dời (§4.2.2). */
.dsr-cv__load-older[b-v9jnij2imu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.dsr-cv__load-older-hint[b-v9jnij2imu] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.dsr-cv__timeline[b-v9jnij2imu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Danh sách CÓ THỨ TỰ vì thứ tự là nội dung; bỏ marker thị giác nhưng giữ ngữ nghĩa <ol>. */
.dsr-cv__row[b-v9jnij2imu] {
    display: block;
}

.dsr-cv__day[b-v9jnij2imu] {
    align-self: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.dsr-cv__note[b-v9jnij2imu],
.dsr-cv__quoted-text[b-v9jnij2imu] {
    margin: 0 0 var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.dsr-cv__truncated[b-v9jnij2imu] {
    margin-top: var(--space-2);
}

/* Badge "Chưa đọc" mờ dần 1,2 s sau khi ghi nhận đã hiển thị — đủ để người dùng thấy mình vừa
   đọc cái gì. Với prefers-reduced-motion thì biến mất ngay, không hoạt hoạ. */
.dsr-cv__unread[b-v9jnij2imu] {
    display: inline-flex;
    transition: opacity 1.2s ease;
}

.dsr-cv__unread--fading[b-v9jnij2imu] {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dsr-cv__unread[b-v9jnij2imu] {
        transition: none;
    }
}

/* Hàng đính kèm (CV-05). */
.dsr-cv__files[b-v9jnij2imu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dsr-cv__file[b-v9jnij2imu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-solid);
}

.dsr-cv__file-name[b-v9jnij2imu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    font-size: 0.8125rem;
    /* Tên tệp bị chặn vẫn phải ĐỌC ĐƯỢC để đối chiếu — không dùng màu "disabled". */
    overflow-wrap: anywhere;
}

.dsr-cv__file-size[b-v9jnij2imu],
.dsr-cv__file-hint[b-v9jnij2imu] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.dsr-cv__record-action[b-v9jnij2imu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.dsr-cv__record-action-note[b-v9jnij2imu],
.dsr-cv__record-action-error[b-v9jnij2imu] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.dsr-cv__full-content-action[b-v9jnij2imu] {
    margin-top: var(--space-2);
}

.dsr-cv__sanitized-frame[b-v9jnij2imu] {
    width: 100%;
    min-height: 24rem;
    border: 1px solid var(--color-border-solid);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-base-primary);
}

.dsr-cv__full-plain[b-v9jnij2imu] {
    margin: 0;
    padding: var(--space-4);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    border: 1px solid var(--color-border-solid);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-base-secondary);
    color: var(--color-text-primary);
    font: inherit;
}

.dsr-cv__record-action-error[b-v9jnij2imu] {
    flex-basis: 100%;
    color: var(--color-text-danger);
}

/* Khối 10 — ô soạn tin. */
.dsr-cv-composer[b-v9jnij2imu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.dsr-cv-composer__fields[b-v9jnij2imu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* fieldset mang style mặc định của trình duyệt; ở đây nó chỉ là nhóm ngữ nghĩa + cơ chế
       disabled hàng loạt, không phải một khung có viền. */
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.dsr-cv-composer__row[b-v9jnij2imu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
}

.dsr-cv-composer__actions[b-v9jnij2imu] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* CV-08 — Người nhận là dữ kiện, không phải input disabled (P5). Câu giải thích LUÔN hiển thị,
   không phải tooltip: đó là thứ biến "không sửa được" từ lỗi thành thiết kế. */
.dsr-cv-recipient[b-v9jnij2imu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--color-border-solid);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-base-secondary);
}

.dsr-cv-recipient__label[b-v9jnij2imu] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.dsr-cv-recipient__value[b-v9jnij2imu] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.dsr-cv-recipient__hint[b-v9jnij2imu] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* Tablet: ngôn ngữ và mẫu tách thành hai hàng dưới 1024px — nhãn mẫu dài nhất còn cộng thêm hậu
   tố "— Thiếu bản dịch" (§7.2). */
@media (max-width: 1023px) {
    .dsr-cv-composer__row[b-v9jnij2imu] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    /* Liên kết nhảy chiếm hết chiều rộng strip và đạt vùng bấm 44px — ở mobile đây là lối đi tắt
       quan trọng nhất vì chồng dọc dài hơn nhiều lần (§7.3). */
    .dsr-sla-cv-link[b-v9jnij2imu] {
        width: 100%;
        min-height: 44px;
    }

    .dsr-cv__file[b-v9jnij2imu] {
        flex-direction: column;
        align-items: flex-start;
    }

    .dsr-cv-composer__actions[b-v9jnij2imu] {
        justify-content: stretch;
    }
}
.dsr-import-file-name[b-v9jnij2imu] { display: block; min-width: 0; overflow-wrap: anywhere; }
.dsr-import-file-row[b-v9jnij2imu] { gap: var(--space-2); }
.dsr-import-file-row > button[b-v9jnij2imu] { flex-shrink: 0; }
/* _content/BlazorFrontend/Pages/Compliance/DataSubjectRight/DSRRequests.razor.rz.scp.css */
/* DSR-01 Requests — khuôn B (Phase 3 pilot). Token-only; layout-only rules —
   every component visual comes from Datanomics.Ds. */

.dsr-registry-page[b-j8klms6srz],
.dsr-table-area[b-j8klms6srz],
.dsr-table[b-j8klms6srz] {
    width: 100%;
    min-width: 0;
}

.dsr-registry-body[b-j8klms6srz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: var(--space-4);
    padding-top: var(--space-4);
}

.dsr-registry-page[b-j8klms6srz]  .ds-tabs {
    margin-bottom: 0;
}

/* Node 397:83754 (`Search-button`): its action half is hidden and Search Input grows
   from 564px to the full 1140px content width. */
.dsr-table-area[b-j8klms6srz]  .dsr-table-toolbar > .ds-filterbar-search {
    flex: 1 1 100%;
    min-width: 0;
}

/* Ten columns need a bounded desktop track: keep requester identity readable instead
   of dividing the last 200px equally between requester and assignee. Narrow shells
   scroll inside the table surface; mobile keeps the shared card layout. */
@media (min-width: 768px) {
    .dsr-table[b-j8klms6srz]  .ds-table { min-width: 1120px; }
    .dsr-table[b-j8klms6srz]  .dsr-col--select { width: 40px; }
    .dsr-table[b-j8klms6srz]  .dsr-col--reference { width: 88px; }
    .dsr-table[b-j8klms6srz]  .dsr-col--type { width: 140px; }
    .dsr-table[b-j8klms6srz]  .dsr-col--status { width: 120px; }
    .dsr-table[b-j8klms6srz]  .dsr-col--conversation { width: 112px; }
    .dsr-table[b-j8klms6srz]  .dsr-col--submitted,
    .dsr-table[b-j8klms6srz]  .dsr-col--due { width: 100px; }
    .dsr-table[b-j8klms6srz]  .dsr-col--assignee { width: 120px; }
    .dsr-table[b-j8klms6srz]  .dsr-col--actions { width: 100px; }
}

.dsr-table[b-j8klms6srz]  .dsr-col--select {
    padding-inline: var(--space-3);
}

/* Figma table/yêu cầu uses the regular text-cell variant here (150px, Inter 14/20),
   not an outlined tag. Long localized rights stay readable without growing beyond two lines. */
.dsr-table[b-j8klms6srz]  td.dsr-col--type {
    padding-block: 8px;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
}

.dsr-request-type[b-j8klms6srz] {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    color: var(--color-text-primary, var(--text-body));
    font: 400 14px/20px var(--font-body);
    overflow-wrap: break-word;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Node 400:86022/86023: Loại yêu cầu and Trạng thái use the DATA UI table-header
   filter trigger. The menu retains the existing server-side filters at the location
   shown by the design instead of adding a second toolbar row. */
.dsr-column-filter-trigger[b-j8klms6srz] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-primary, var(--text-body));
    font: 500 14px/20px var(--font-body);
}

.dsr-column-filter-icon[b-j8klms6srz] {
    position: relative;
    display: inline-flex;
    color: var(--color-icon-primary, var(--text-body));
}

.dsr-column-filter-dot[b-j8klms6srz] {
    position: absolute;
    top: -1px;
    right: -2px;
    width: 6px;
    height: 6px;
    border: 1px solid var(--color-bg-surface-base-tertiary, var(--bg-inset));
    border-radius: var(--radius-pill);
    background: var(--color-bg-brand-solid, var(--accent));
}

.dsr-table[b-j8klms6srz]  .dsr-column-filter .ds-dropmenu-panel {
    min-width: 220px;
}

.dsr-row-select[b-j8klms6srz],
.dsr-row-actions[b-j8klms6srz] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dsr-table[b-j8klms6srz]  .dsr-row--selected {
    background: var(--color-bg-surface-brand-subtle, var(--bg-hover));
}

/* Reference id cell — monospace, subdued. */
.dsr-ref[b-j8klms6srz] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.dsr-requester[b-j8klms6srz] {
    display: block;
    min-width: 0;
}

/* Ô "Người yêu cầu" xếp 2 dòng (email + họ tên) nên phần cắt ellipsis của DsDataTable
   (`.ds-table--fixed .ds-table-td`) không với tới: `text-overflow` không phải thuộc tính kế thừa,
   và hai dòng bên trong là block riêng — chúng tràn khỏi <td> rồi bị cắt cụt không dấu "…".
   Khai báo trực tiếp trên từng dòng để giá trị dài (email, tên đầy đủ) cắt gọn trong cột;
   giá trị đầy đủ vẫn đọc được qua tooltip và trang chi tiết. */
.dsr-requester > strong[b-j8klms6srz],
.dsr-requester-name[b-j8klms6srz] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dsr-assignee[b-j8klms6srz],
.dsr-date[b-j8klms6srz] {
    display: block;
    overflow: hidden;
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 12px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dsr-requester-name[b-j8klms6srz] {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Overdue due-date — danger text per mockup 02-dsr-requests. */
.dsr-overdue[b-j8klms6srz] {
    color: var(--danger);
    font-weight: 600;
}

.dsr-unassigned[b-j8klms6srz] {
    color: var(--text-subtle);
    font-style: italic;
}

.dsr-conversation-none[b-j8klms6srz] {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.dsr-pagination-wrap[b-j8klms6srz] {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

/* Figma `body/tao-yeu-cau`: two form sections separated by 24px. Component visuals
   stay in Datanomics.Ds; these rules only compose the page-specific field layout. */
.dsr-create-form[b-j8klms6srz] {
    display: grid;
    gap: 24px;
}

.dsr-create-two-col[b-j8klms6srz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dsr-create-additional-fields[b-j8klms6srz] {
    display: grid;
    gap: 12px;
}

/* Long modal bodies scroll inside the DsModal frame. */
.dsr-modal-scroll[b-j8klms6srz] {
    max-height: 60vh;
    overflow-y: auto;
}

/* Action row for view-only modals (DsModal HideFooter). */
.dsr-modal-actions[b-j8klms6srz] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

/* Loading skeleton (khuôn B). */
.dsr-skeleton[b-j8klms6srz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dsr-skeleton-title[b-j8klms6srz] {
    height: 28px;
    width: 260px;
}

.dsr-skeleton-row[b-j8klms6srz] {
    height: 48px;
    width: 100%;
}

.dsr-detail-label-col[b-j8klms6srz] {
    width: 180px;
}

/* ADR-046 W5 lô (f) — bảng lịch sử gia hạn (modal) nay là DsDataTable. Thay
   `.dp-grid .dp-cell--overflow-visible` của bảng viết tay: rule đó bị khoá trong `.dp-grid` nên
   không với tới `.ds-table`. Ô Trạng thái phải được phép xuống dòng để dòng "Đã hoàn tác bởi …
   lúc …" dưới chip không bị cắt ngang trong 140px.
   `::deep` là bắt buộc: <td> do DsDataTable render nên mang scope id CỦA DS — `.dsr-cell--wrap`
   trần ở đây sẽ biên dịch thành `.dsr-cell--wrap[b-<DSRRequests>]` và không khớp gì. Điểm neo là
   div `.dsr-ext-history-table` do chính trang viết.
   Tiền tố `td.` là cố ý: nâng đặc hiệu lên (0,3,1) để thắng `.ds-table--fixed .ds-table-td`
   (0,3,0) bằng đặc hiệu chứ không bằng thứ tự bundle (tiền lệ DataSubjectRights.razor.css W2). */
.dsr-ext-history-table[b-j8klms6srz]  td.dsr-cell--wrap {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}

/* Bản in / PDF là bằng chứng tuân thủ: cắt ellipsis chỉ là tối ưu hiển thị trên màn hình, phải tắt
   khi in, nếu không email/tên người yêu cầu bị mất chữ. Cùng lý do với khối `@media print` trong
   DsDataTable.razor.css — khối đó chỉ hoàn tác rule của chính nó, không với tới rule của trang. */
@media print {
    .dsr-requester > strong[b-j8klms6srz],
    .dsr-requester-name[b-j8klms6srz] {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: break-word;
    }
}

@media (max-width: 767.98px) {
    .dsr-table-area[b-j8klms6srz]  .dsr-table-toolbar > .ds-filterbar-search {
        flex-basis: 100%;
    }

    .dsr-create-two-col[b-j8klms6srz] {
        grid-template-columns: 1fr;
    }
}
/* _content/BlazorFrontend/Pages/Compliance/DataSubjectRight/DSRResponseTemplatesTab.razor.rz.scp.css */
/*
 * DSRResponseTemplatesTab.razor.css — tab "Biểu mẫu phản hồi" của DSR Configuration.
 *
 * Hệ token: Datanomics.Ds (--space-*, --text-*, --border-*, --bg-*, --radius-*) — đồng nhất với
 * DSRConfiguration.razor.css liền kề và các component Ds*. Không hardcode màu, không inline style.
 */

.dsr-templates[b-m64nvs19cl] {
    display: grid;
    min-width: 0;
    gap: var(--space-4);
}

.dsr-templates[b-m64nvs19cl]  .ds-filterbar {
    margin-bottom: 0;
}

.dsr-tpl-notice[b-m64nvs19cl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: 0;
}

/* ── Bảng danh sách mẫu ─────────────────────────────────────────────────── */

.dsr-tpl-name[b-m64nvs19cl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

/* Icon do DsIcon (child component) render nên không mang scope attribute của trang này ⇒ cần ::deep. */
.dsr-tpl-name[b-m64nvs19cl]  .ds-icon {
    flex: 0 0 auto;
    color: var(--text-muted);
}

.dsr-tpl-name__text[b-m64nvs19cl] {
    min-width: 0;
}

/* <b> là block con của ô ⇒ ellipsis của .ds-table--fixed .ds-table-td không áp xuống nó, phải tự
   khai báo — cùng lý do như .dsr-tpl-name__subject bên dưới. */
.dsr-tpl-name__title[b-m64nvs19cl] {
    display: block;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dsr-tpl-name__subject[b-m64nvs19cl] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dsr-tpl-badges[b-m64nvs19cl],
.dsr-tpl-chips[b-m64nvs19cl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* Pill không tràn khỏi ô (bảng dùng table-layout:fixed). min-width:0 là BẮT BUỘC: pill là flex item
   của .dsr-tpl-badges/.dsr-tpl-chips nên min-width:auto (= min-content = trọn chuỗi vì nowrap) sẽ
   thắng max-width. .ds-badge/.ds-chip do DsBadge/DsChip render ⇒ KHÔNG mang scope attribute của tab
   này ⇒ phải dùng ::deep, và ::deep bắt buộc có tổ tiên là markup của tab (.dsr-tpl-badges/
   .dsr-tpl-chips) — vì vậy badge cột "Loại" cũng được bọc trong .dsr-tpl-badges. */
.dsr-tpl-badges[b-m64nvs19cl]  .ds-badge,
.dsr-tpl-chips[b-m64nvs19cl]  .ds-chip {
    min-width: 0;
    max-width: 100%;
}

/* "…" thật sự: text-overflow không áp cho inline-flex (.ds-badge/.ds-chip), nên nhãn nằm trong một
   span con. Span này viết trong .razor của tab ⇒ ĐÃ có scope attribute ⇒ KHÔNG dùng ::deep.
   white-space:nowrap thừa hưởng từ .ds-badge/.ds-chip. */
.dsr-tpl-pill-label[b-m64nvs19cl] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cột Thao tác "canh phải" (§1.4): text-align:right do Align="right" đặt trên ô không đẩy được flex
   item. .dp-actions là markup của tab ⇒ không cần ::deep. */
.dp-actions[b-m64nvs19cl] {
    justify-content: flex-end;
}

.dsr-tpl-muted[b-m64nvs19cl] {
    color: var(--text-muted);
    white-space: nowrap;
}

.dsr-tpl-state[b-m64nvs19cl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
}

.dsr-tpl-pagination[b-m64nvs19cl] {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.dsr-tpl-skeleton[b-m64nvs19cl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
}

.dsr-tpl-skeleton-row[b-m64nvs19cl] {
    height: 56px;
    width: 100%;
}

/* ── Modal soạn mẫu ─────────────────────────────────────────────────────── */

.dsr-tpl-modal-scroll[b-m64nvs19cl] {
    max-height: 60vh;
    overflow-y: auto;
}

.dsr-tpl-modal-actions[b-m64nvs19cl] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.dsr-tpl-field[b-m64nvs19cl] {
    margin-bottom: var(--space-3);
}

.dsr-tpl-required[b-m64nvs19cl] {
    color: var(--danger);
}

.dsr-tpl-error[b-m64nvs19cl] {
    color: var(--danger);
    font-size: 0.8125rem;
    margin-bottom: var(--space-3);
}

.dsr-tpl-textarea[b-m64nvs19cl] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-body);
    font-family: inherit;
    font-size: 0.875rem;
}

.dsr-tpl-textarea:focus-visible[b-m64nvs19cl] {
    outline: none;
    box-shadow: var(--ring);
}

/* Bộ đếm ký tự dưới ô Nội dung — thông tin phụ, không được cạnh tranh với nhãn trường. */
.dsr-tpl-char-counter[b-m64nvs19cl] {
    margin-top: var(--space-1);
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.dsr-tpl-placeholders[b-m64nvs19cl] {
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin-top: var(--space-3);
    color: var(--text-body);
}

.dsr-tpl-placeholder-list[b-m64nvs19cl] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-1) var(--space-3);
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dsr-tpl-placeholder-list code[b-m64nvs19cl] {
    font-family: var(--font-mono);
    margin-right: var(--space-1);
}

/* Cảnh báo 2 token không được thay tự động — cùng cấp chữ với danh sách token.
   Dùng --text-body + in đậm thay cho --warning-strong: trên nền --bg-subtle, --warning-strong chỉ
   đạt 4.40:1 (dưới ngưỡng AA 4.5:1). Ý nghĩa cảnh báo nằm ở chữ, không phụ thuộc màu (WCAG 1.4.1). */
.dsr-tpl-placeholder-warning[b-m64nvs19cl] {
    margin: var(--space-2) 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-body);
}

@media (max-width: 767.98px) {
    .dsr-tpl-placeholder-list[b-m64nvs19cl] {
        grid-template-columns: 1fr;
    }

    /* Touch target ≥44px cho nút hành động trong bảng ở màn hình hẹp. */
    [b-m64nvs19cl] .dp-action-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

.dsr-tpl-confirm[b-m64nvs19cl] {
    margin: 0;
    color: var(--text-body);
}
/* _content/BlazorFrontend/Pages/Compliance/DPODashboard.razor.rz.scp.css */
/*
 * DPODashboard.razor.css — Blazor scoped styles for the DPO command-centre page.
 *
 * Datanomics Design System migration (Phase 4, DPO-01): the page body was reskinned
 * from Apple* / BusinessPageTemplate onto Ds* components (DsPageHeader, DsPagePanel,
 * DsStatCard, DsMeter, DsChip, DsAlert, DsBadge, DsEmptyState, DsButton). The .pp-dashboard
 * wrapper and the shared, token-based .pp-* layout/score/risk classes from
 * compliance-dashboard-design-system.css are intentionally retained (strangler: they still
 * serve the not-yet-reskinned compliance dashboards).
 *
 * Color rule: ALL colors resolve to --dp-* / DS tokens. No hardcoded hex/rgb, no inline styles.
 */

/* ================================================================
   Loading skeleton (khuôn A — replaces BusinessPageTemplate LoadingLayout.Dashboard)
   ================================================================ */

.dpo-skeleton[b-gw2z50d6kt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.dpo-skeleton-title[b-gw2z50d6kt] {
    height: 2.25rem;
    width: 40%;
    max-width: 22rem;
}

.dpo-skeleton-kpis[b-gw2z50d6kt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.dpo-skeleton-kpi[b-gw2z50d6kt] {
    height: 118px;
}

.dpo-skeleton-block[b-gw2z50d6kt] {
    height: 220px;
}

/* ================================================================
   Panel subtitle (DsPagePanel has no subtitle slot — render in body)
   ================================================================ */

.dpo-panel-sub[b-gw2z50d6kt] {
    margin: 0 0 var(--space-3);
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* Flush-body panels (NoBodyPadding) need the subtitle inset to align with the table cells. */
.dpo-panel-sub--inset[b-gw2z50d6kt] {
    padding: var(--space-3) var(--space-4) 0;
}

/* Business definitions live behind an explicit, keyboard/touch-accessible tooltip instead of
   consuming a prose row in every panel body. AppleTooltip owns popup positioning in document.body;
   this page only styles its small inline trigger. */
.dpo-business-tip-icon[b-gw2z50d6kt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    color: var(--dp-text-tertiary);
    cursor: help;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.dpo-business-tip-icon:hover[b-gw2z50d6kt] {
    color: var(--dp-interactive-primary);
    background: var(--dp-surface-hover);
}

@media (prefers-reduced-motion: reduce) {
    .dpo-business-tip-icon[b-gw2z50d6kt] { transition: none; }
}

/* ================================================================
   Executive grid — stretch the attention panel to the hero's height
   ================================================================ */

.pp-attention-rail[b-gw2z50d6kt]  .ds-panel {
    height: 100%;
}

/* ================================================================
   Overall-compliance hero (rebuilt from AppleHeroSection)
   ================================================================ */

.dpo-hero[b-gw2z50d6kt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.dpo-hero-lead[b-gw2z50d6kt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dpo-hero-value[b-gw2z50d6kt] {
    color: var(--dp-text-primary);
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.dpo-hero-suffix[b-gw2z50d6kt] {
    margin-left: 2px;
    color: var(--dp-text-secondary);
    font-size: 1.25rem;
    font-weight: 700;
}

.dpo-hero-meta[b-gw2z50d6kt] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    font-size: 0.8125rem;
}

.dpo-hero-delta[b-gw2z50d6kt] {
    color: var(--dp-text-primary);
    font-weight: 600;
}

.dpo-hero-context[b-gw2z50d6kt] {
    color: var(--dp-text-secondary);
}

.dpo-hero-chips[b-gw2z50d6kt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.dpo-hero-chip[b-gw2z50d6kt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    background: var(--dp-surface-secondary);
    color: var(--dp-text-secondary);
    font-size: 0.75rem;
}

.dpo-hero-chip strong[b-gw2z50d6kt] {
    color: var(--dp-text-primary);
    font-variant-numeric: tabular-nums;
}

.dpo-hero-body[b-gw2z50d6kt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ================================================================
   Attention rail — DsAlert stack + inline action links
   ================================================================ */

.dpo-alert-stack[b-gw2z50d6kt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dpo-alert-link[b-gw2z50d6kt] {
    display: inline-block;
    margin-top: var(--space-2);
    color: var(--dp-interactive-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.dpo-alert-link:hover[b-gw2z50d6kt] {
    text-decoration: underline;
}

/* ================================================================
   KPI grid — DsStatCard, responsive 4→2→1 (auto-fit)
   ================================================================ */

.dpo-kpi-grid[b-gw2z50d6kt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

/* ================================================================
   Deadline item variant classes (tone tints)
   ================================================================ */

.pp-deadline-item--imminent[b-gw2z50d6kt] {
    border-left: 2px solid var(--dp-status-warning);
    padding-left: var(--space-2, 8px);
}

.pp-deadline-item--overdue[b-gw2z50d6kt] {
    border-left: 2px solid var(--dp-status-danger);
    padding-left: var(--space-2, 8px);
}

.pp-deadline-icon--upcoming[b-gw2z50d6kt] { color: var(--dp-text-tertiary); }
.pp-deadline-icon--imminent[b-gw2z50d6kt] { color: var(--dp-status-warning); }
.pp-deadline-icon--overdue[b-gw2z50d6kt] { color: var(--dp-status-danger); }

.pp-deadline-date--upcoming[b-gw2z50d6kt] { color: var(--dp-text-secondary); }

.pp-deadline-date--imminent[b-gw2z50d6kt] {
    color: var(--dp-status-warning);
    font-weight: 700;
}

.pp-deadline-date--overdue[b-gw2z50d6kt] {
    color: var(--dp-status-danger);
    font-weight: 700;
}

/* ================================================================
   Programme status table
   ================================================================ */

.dpo-programme-table-wrap[b-gw2z50d6kt] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dpo-programme-table[b-gw2z50d6kt] {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.dpo-programme-table th[b-gw2z50d6kt] {
    padding: var(--space-3) var(--space-4);
    color: var(--dp-text-secondary);
    background: var(--dp-surface-secondary);
    border-bottom: 1px solid var(--dp-border-subtle);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.dpo-programme-table td[b-gw2z50d6kt] {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--dp-border-subtle);
    color: var(--dp-text-primary);
    vertical-align: middle;
}

.dpo-programme-table tbody tr:last-child td[b-gw2z50d6kt] {
    border-bottom: 0;
}

.dpo-programme-table tbody tr:hover[b-gw2z50d6kt] {
    background: var(--dp-surface-hover);
}

.dpo-programme-table__link[b-gw2z50d6kt] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--dp-text-primary);
    font-weight: 700;
    text-decoration: none;
}

.dpo-programme-table__link:hover[b-gw2z50d6kt] {
    color: var(--dp-interactive-primary);
}

.dpo-programme-table__icon[b-gw2z50d6kt] {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--dp-surface-selected);
    color: var(--dp-interactive-primary);
}

.dpo-programme-table__icon--success[b-gw2z50d6kt] { background: var(--dp-status-success-bg); color: var(--dp-status-success); }
.dpo-programme-table__icon--warning[b-gw2z50d6kt] { background: var(--dp-status-warning-bg); color: var(--dp-status-warning); }
.dpo-programme-table__icon--danger[b-gw2z50d6kt] { background: var(--dp-status-danger-bg); color: var(--dp-status-danger); }
.dpo-programme-table__icon--info[b-gw2z50d6kt] { background: var(--dp-status-info-bg); color: var(--dp-status-info); }

.dpo-programme-table__owner[b-gw2z50d6kt] {
    color: var(--dp-text-secondary) !important;
}

.dpo-programme-table__metric[b-gw2z50d6kt] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dpo-programme-table__trend[b-gw2z50d6kt],
.dpo-programme-table__trend-heading[b-gw2z50d6kt] {
    width: 4rem;
    text-align: center !important;
}

.dpo-programme-table__trend--positive[b-gw2z50d6kt] { color: var(--dp-status-success); }
.dpo-programme-table__trend--negative[b-gw2z50d6kt] { color: var(--dp-status-danger); }
.dpo-programme-table__trend--flat[b-gw2z50d6kt] { color: var(--dp-text-tertiary); }

/* ================================================================
   Deadline cards
   ================================================================ */

.dpo-deadline-list[b-gw2z50d6kt] {
    display: grid;
    gap: var(--space-3);
}

.dpo-deadline-card[b-gw2z50d6kt] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--dp-surface-primary);
}

.dpo-deadline-card__icon[b-gw2z50d6kt] {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--dp-surface-secondary);
}

.dpo-deadline-card__content[b-gw2z50d6kt] {
    display: grid;
    min-width: 0;
}

.dpo-deadline-card__content strong[b-gw2z50d6kt] {
    overflow: hidden;
    color: var(--dp-text-primary);
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dpo-deadline-card__content span[b-gw2z50d6kt] {
    color: var(--dp-text-secondary);
    font-size: 0.75rem;
}

@media (max-width: 575.98px) {
    .dpo-deadline-card[b-gw2z50d6kt] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .dpo-deadline-card time[b-gw2z50d6kt] {
        grid-column: 2;
    }
}

/* ================================================================
   Health-score donut (mockup: dashboard-dpo "Health score" ring)
   ================================================================ */

[b-gw2z50d6kt] .dpo-health-visual {
    display: flex;
    align-items: center;
    gap: var(--space-4, 16px);
    flex-wrap: wrap;
    margin-bottom: var(--space-4, 16px);
}

[b-gw2z50d6kt] .dpo-health-donut {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 150px;
    height: 150px;
}

[b-gw2z50d6kt] .dpo-health-donut__chart {
    width: 150px;
    height: 150px;
}

[b-gw2z50d6kt] .dpo-health-donut__chart .dp-chart-md {
    width: 150px;
    height: 150px;
}

[b-gw2z50d6kt] .dpo-health-donut__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

[b-gw2z50d6kt] .dpo-health-donut__overlay strong {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--dp-text-primary);
    font-variant-numeric: tabular-nums;
}

[b-gw2z50d6kt] .dpo-health-donut__overlay strong span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
    margin-left: 1px;
}

[b-gw2z50d6kt] .dpo-health-legend {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

[b-gw2z50d6kt] .dpo-health-legend__item {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

[b-gw2z50d6kt] .dpo-health-legend__item::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

[b-gw2z50d6kt] .dpo-health-legend__item--poor::before { background: var(--dp-status-danger); }
[b-gw2z50d6kt] .dpo-health-legend__item--fair::before { background: var(--dp-status-warning); }
[b-gw2z50d6kt] .dpo-health-legend__item--good::before,
[b-gw2z50d6kt] .dpo-health-legend__item--excellent::before { background: var(--cyan-dark); }

/* ================================================================
   Score breakdown triggers — native <button> reset.
   .pp-score-band / .pp-subscore keep their visual rules from the shared
   compliance-dashboard-design-system.css; only UA button defaults reset here.
   ================================================================ */

button.pp-score-band[b-gw2z50d6kt] {
    appearance: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

button.pp-subscore[b-gw2z50d6kt] {
    appearance: none;
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

button.pp-subscore:hover[b-gw2z50d6kt] {
    border-color: var(--dp-interactive-primary);
    background: var(--dp-surface-hover);
}

/* ================================================================
   DPO 5-tab command centre (mockup DPO-01) — layout + tab panes
   ================================================================ */

.dpo-tabbar[b-gw2z50d6kt] {
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--dp-border-subtle);
}

/* Each tab pane stacks its KPI grid + panels with consistent spacing. */
.dpo-tabpane[b-gw2z50d6kt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Two-column panel row — collapses to one column below the tablet breakpoint. */
.dpo-two-col[b-gw2z50d6kt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: stretch;
}

@media (max-width: 991.98px) {
    .dpo-two-col[b-gw2z50d6kt] {
        grid-template-columns: 1fr;
    }
}

/* Uppercase eyebrow that labels the two sub-sections inside the Risk tab. */
.dpo-section-label[b-gw2z50d6kt] {
    margin: var(--space-2) 0 calc(-1 * var(--space-1, 4px));
    color: var(--dp-text-tertiary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Bottom action-button row on the module tabs. */
.dpo-tab-actions[b-gw2z50d6kt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.dpo-ctrend[b-gw2z50d6kt] {
    min-width: 0;
}

.dpo-ctrend__period-note[b-gw2z50d6kt] {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
    overflow-wrap: anywhere;
}

.dpo-category-required[b-gw2z50d6kt] {
    color: var(--success);
    font-size: inherit;
    font-weight: 600;
}

.dpo-category-cookie-count[b-gw2z50d6kt] {
    color: var(--ds-color-text-muted);
    font-weight: var(--ds-font-weight-regular);
}

.dpo-ctrend__disclosure[b-gw2z50d6kt] {
    display: flex;
}

.dpo-ctrend__tablewrap[b-gw2z50d6kt] {
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-md, 10px);
}

/* SC 2.1.1: the wrapper is keyboard-scrollable, so it must show where focus is. */
.dpo-ctrend__tablewrap:focus-visible[b-gw2z50d6kt] {
    outline: 2px solid var(--dp-border-focus);
    outline-offset: 2px;
}

.dpo-ctrend__table[b-gw2z50d6kt] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.dpo-ctrend__table th[b-gw2z50d6kt],
.dpo-ctrend__table td[b-gw2z50d6kt] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--dp-border-subtle);
    text-align: right;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.dpo-ctrend__table tbody th:hover[b-gw2z50d6kt],
.dpo-ctrend__table tbody td:hover[b-gw2z50d6kt],
.dpo-ctrend__table tbody th:focus-within[b-gw2z50d6kt],
.dpo-ctrend__table tbody td:focus-within[b-gw2z50d6kt] {
    position: relative;
    z-index: 1;
    background: var(--bg-hover);
    box-shadow: inset 0 0 0 1px var(--border-control);
}

.dpo-ctrend__table thead th[b-gw2z50d6kt] {
    position: sticky;
    top: 0;
    background: var(--dp-surface-secondary);
    color: var(--dp-text-secondary);
    font-weight: 700;
}

.dpo-ctrend__table tbody th[b-gw2z50d6kt] {
    color: var(--dp-text-secondary);
    font-weight: 600;
    text-align: left;
}

.dpo-ctrend__table td[b-gw2z50d6kt] {
    color: var(--dp-text-primary);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
    /* SC 2.5.8 target size on touch. ::deep is required: the <button> is emitted by DsButton and
       carries the design system's scope attribute, not this page's. */
    .dpo-ctrend__disclosure[b-gw2z50d6kt]  .ds-btn {
        min-height: 44px;
        min-width: 44px;
    }
}
.dpo-trend-legend[b-gw2z50d6kt] {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.dpo-trend-legend__item[b-gw2z50d6kt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dpo-trend-legend__item[b-gw2z50d6kt]::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--dp-interactive-primary);
}

/* ================================================================
   Donut panel (cookie accept/reject — real data via PieDonutChart)
   ================================================================ */

.dpo-donut-panel[b-gw2z50d6kt] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

[b-gw2z50d6kt] .dpo-donut {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 180px;
    height: 180px;
}

[b-gw2z50d6kt] .dpo-donut__chart,
[b-gw2z50d6kt] .dpo-donut__chart .dp-chart-md {
    width: 180px;
    height: 180px;
}

[b-gw2z50d6kt] .dpo-donut__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

[b-gw2z50d6kt] .dpo-donut__overlay strong {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dp-text-primary);
    font-variant-numeric: tabular-nums;
}

[b-gw2z50d6kt] .dpo-donut__overlay strong span {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
    margin-left: 1px;
}

.dpo-legend[b-gw2z50d6kt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0 0 0 var(--space-6);
    list-style: none;
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    flex: 1 1 220px;
    min-width: 220px;
    border-left: 1px solid var(--dp-border-subtle);
}

.dpo-legend__item[b-gw2z50d6kt] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.dpo-legend__label[b-gw2z50d6kt] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dpo-legend__item b[b-gw2z50d6kt] {
    flex: 0 0 auto;
    min-width: 4.5em;
    text-align: right;
    color: var(--dp-text-primary);
    font-variant-numeric: tabular-nums;
}

.dpo-legend__item[b-gw2z50d6kt]::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.dpo-legend__item--accept[b-gw2z50d6kt]::before { background: var(--dp-status-success); }
.dpo-legend__item--reject[b-gw2z50d6kt]::before { background: var(--dp-status-danger); }
.dpo-legend__item--chart-1[b-gw2z50d6kt]::before { background: var(--dp-chart-1); }
.dpo-legend__item--chart-2[b-gw2z50d6kt]::before { background: var(--dp-chart-2); }
.dpo-legend__item--chart-3[b-gw2z50d6kt]::before { background: var(--dp-chart-3); }
.dpo-legend__item--chart-4[b-gw2z50d6kt]::before { background: var(--dp-chart-4); }
.dpo-legend__item--chart-5[b-gw2z50d6kt]::before { background: var(--dp-chart-5); }

@media (max-width: 480px) {
    .dpo-donut-panel[b-gw2z50d6kt] {
        justify-content: center;
    }

    .dpo-legend[b-gw2z50d6kt] {
        border-left: none;
        padding-left: 0;
        min-width: 0;
        width: 100%;
    }
}

/* ================================================================
   Meter list (aggregate domain compliance) + DSR type breakdown bars
   ================================================================ */

.dpo-meter-list[b-gw2z50d6kt],
.dpo-bar-list[b-gw2z50d6kt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dpo-meter-row[b-gw2z50d6kt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dpo-meter-head[b-gw2z50d6kt] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--dp-text-primary);
}

.dpo-meter-val[b-gw2z50d6kt] {
    font-variant-numeric: tabular-nums;
    color: var(--dp-text-secondary);
}

.dpo-bar-row[b-gw2z50d6kt] {
    display: grid;
    grid-template-columns: 9.5rem 1fr 6rem;
    align-items: center;
    gap: var(--space-3);
}

.dpo-bar-label[b-gw2z50d6kt] {
    font-size: 0.8125rem;
    color: var(--dp-text-primary);
}

.dpo-bar-track[b-gw2z50d6kt] {
    min-width: 0;
}

/* Per-row palette for bar charts (DSR by type, UC by purpose) — mirrors the mockup's
   distinct-color-per-row bars. The custom property is set on the light-DOM wrapper (this
   component's own scope) and inherited into DsMeter's internally-scoped fill div via ::deep,
   since Blazor CSS isolation blocks direct selector matching into a child component's markup. */
.dpo-bar-track.dpo-chart-1[b-gw2z50d6kt] { --dpo-bar-fill: var(--dp-chart-1); }
.dpo-bar-track.dpo-chart-2[b-gw2z50d6kt] { --dpo-bar-fill: var(--dp-chart-2); }
.dpo-bar-track.dpo-chart-3[b-gw2z50d6kt] { --dpo-bar-fill: var(--dp-chart-3); }
.dpo-bar-track.dpo-chart-4[b-gw2z50d6kt] { --dpo-bar-fill: var(--dp-chart-4); }
.dpo-bar-track.dpo-chart-5[b-gw2z50d6kt] { --dpo-bar-fill: var(--dp-chart-5); }
.dpo-bar-track.dpo-chart-6[b-gw2z50d6kt] { --dpo-bar-fill: var(--dp-chart-6); }
.dpo-bar-track.dpo-chart-7[b-gw2z50d6kt] { --dpo-bar-fill: var(--dp-chart-7); }
.dpo-bar-track.dpo-chart-8[b-gw2z50d6kt] { --dpo-bar-fill: var(--dp-chart-8); }
.dpo-bar-track.dpo-chart-9[b-gw2z50d6kt] { --dpo-bar-fill: var(--dp-chart-9); }

/* .ds-meter-fill--brand (0,1,0) is equal-specificity and loads after this stylesheet in the
   bundle, so it would otherwise win the cascade — chain both classes to outrank it. */
.dpo-bar-track[b-gw2z50d6kt]  .ds-meter-fill.ds-meter-fill--brand {
    background: var(--dpo-bar-fill, var(--accent));
}

.dpo-bar-meta[b-gw2z50d6kt] {
    text-align: right;
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .dpo-bar-row[b-gw2z50d6kt] {
        grid-template-columns: 1fr auto;
    }

    .dpo-bar-row .dpo-bar-track[b-gw2z50d6kt] {
        grid-column: 1 / -1;
        order: 3;
    }
}

/* ================================================================
   Quick-action stack + generic data table (recent activity / DSR)
   ================================================================ */

.dpo-quickactions[b-gw2z50d6kt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dpo-table-wrap[b-gw2z50d6kt] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dpo-data-table[b-gw2z50d6kt] {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.dpo-data-table th[b-gw2z50d6kt] {
    padding: var(--space-3) var(--space-4);
    color: var(--dp-text-secondary);
    background: var(--dp-surface-secondary);
    border-bottom: 1px solid var(--dp-border-subtle);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.dpo-data-table td[b-gw2z50d6kt] {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--dp-border-subtle);
    color: var(--dp-text-primary);
    vertical-align: middle;
}

.dpo-data-table tbody tr:last-child td[b-gw2z50d6kt] {
    border-bottom: 0;
}

.dpo-data-table tbody tr:hover[b-gw2z50d6kt] {
    background: var(--dp-surface-hover);
}

.dpo-data-table__muted[b-gw2z50d6kt] { color: var(--dp-text-secondary); }
.dpo-data-table__num[b-gw2z50d6kt] { text-align: right; white-space: nowrap; }

.dpo-data-table__mono[b-gw2z50d6kt] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.dpo-table-foot[b-gw2z50d6kt] {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--dp-border-subtle);
}

.dpo-empty-inset[b-gw2z50d6kt] {
    padding: var(--space-5) var(--space-4);
}

/* ================================================================
   DPO-01 refresh (docs/design/PrivacyPlatform.dc.html) — hero panels,
   section dividers, mini stat panels, quick-action pills, cookie
   verification list. All colors via --dp-*/--space-* tokens.
   ================================================================ */

.dpo-hero-wrap[b-gw2z50d6kt] { margin-bottom: var(--space-4); }

.dpo-donut-panel--inline[b-gw2z50d6kt] {
    gap: var(--space-4);
}

.dpo-donut-panel--inline[b-gw2z50d6kt]  .dpo-donut {
    width: 120px;
    height: 120px;
}

.dpo-donut-panel--inline[b-gw2z50d6kt]  .dpo-donut__chart,
.dpo-donut-panel--inline[b-gw2z50d6kt]  .dpo-donut__chart .dp-chart-md {
    width: 120px;
    height: 120px;
}

.dpo-legend__dot[b-gw2z50d6kt] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    flex: 0 0 auto;
}

/* The base .dpo-legend__item::before already reserves a colored-dot box for the
   --chart-N/--accept/--reject modifiers; suppress it when an explicit
   .dpo-legend__dot span is used instead (semantic status colors that don't map
   to the fixed chart palette), so the row doesn't render two dots. */
.dpo-legend__item:has(.dpo-legend__dot)[b-gw2z50d6kt]::before {
    content: none;
}

/* Uppercase badge + horizontal rule divider between Overview sections (03/04). */
.dpo-section-divider[b-gw2z50d6kt] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0 var(--space-4);
}

.dpo-section-divider--tight[b-gw2z50d6kt] {
    margin: var(--space-3) 0 var(--space-2);
}

.dpo-section-badge[b-gw2z50d6kt] {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--dp-surface-secondary);
    color: var(--dp-interactive-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dpo-section-label--row[b-gw2z50d6kt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* Inline text/icon link used under hero panels and mini stat panels. */
.dpo-panel-link[b-gw2z50d6kt] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    margin-top: var(--space-2);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--dp-interactive-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}

.dpo-panel-link:hover[b-gw2z50d6kt] {
    text-decoration: underline;
}

/* Notices / Data Mapping / Assessment mini panels (Overview §04). */
.dpo-mini-grid[b-gw2z50d6kt] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

@media (max-width: 991.98px) {
    .dpo-mini-grid[b-gw2z50d6kt] {
        grid-template-columns: 1fr;
    }
}

.dpo-mini-panel[b-gw2z50d6kt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
}

.dpo-mini-panel__caption[b-gw2z50d6kt] {
    font-size: 0.8125rem;
    color: var(--dp-text-primary);
}

.dpo-mini-panel__flag[b-gw2z50d6kt] {
    font-size: 0.75rem;
    font-weight: 600;
}

.dpo-mini-panel__flag--danger[b-gw2z50d6kt] { color: var(--dp-status-danger); }
.dpo-mini-panel__flag--warning[b-gw2z50d6kt] { color: var(--dp-status-warning); }

/* Quick-action pill row (Overview tab footer). */
.dpo-qa-row[b-gw2z50d6kt] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--dp-surface-primary);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-md);
}

.dpo-qa-pill[b-gw2z50d6kt] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: 999px;
    border: 1px solid var(--dp-border-subtle);
    background: var(--dp-surface-secondary);
    color: var(--dp-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}

.dpo-qa-pill:hover[b-gw2z50d6kt] {
    background: var(--dp-surface-hover);
    color: var(--dp-text-primary);
}


/* Compact bar-list variant nested inside a DsHeroSection (Universal tab legal-basis breakdown). */
.dpo-bar-list--compact[b-gw2z50d6kt] {
    width: 100%;
    gap: var(--space-2);
}

.dpo-bar-list__title[b-gw2z50d6kt] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dp-text-tertiary);
}

/* ================================================================
   Single-scroll compliance overview (mockup: docs/design/DPO Dashboard Mockup)
   Gauge + breakdown rows, KPI trio stat, priority-risk accordion, document figures.
   ================================================================ */

.dpo-gauge-row[b-gw2z50d6kt] {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
    align-items: flex-start;
}

.dpo-gauge-stats[b-gw2z50d6kt] {
    flex: 1 1 220px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dpo-gauge-stats--stacked[b-gw2z50d6kt] {
    margin-top: var(--space-4);
}

.dpo-stat-row[b-gw2z50d6kt] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

.dpo-stat-row strong[b-gw2z50d6kt] {
    color: var(--dp-text-primary);
    font-variant-numeric: tabular-nums;
}

.dpo-stat-danger[b-gw2z50d6kt] {
    color: var(--dp-status-danger) !important;
}

.dpo-chip-row[b-gw2z50d6kt] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: 2px;
}

.dpo-panel-subhead[b-gw2z50d6kt] {
    margin: var(--space-4) 0 var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--dp-border-subtle);
    color: var(--dp-text-tertiary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dpo-meter-meta[b-gw2z50d6kt] {
    display: block;
    margin-top: 2px;
    color: var(--dp-text-tertiary);
    font-size: 0.75rem;
}

.dpo-panel-sub--spaced[b-gw2z50d6kt] {
    margin-top: var(--space-3);
}


/* FR-24 reference-frame caption ("as of now" / "in selected period"). Presentational only: no hover,
   no focus, no tooltip, no ARIA — it is read inline with the figure it describes. Deliberately NO
   ellipsis / text-overflow / fixed height: truncating a frame label would recreate exactly the
   ambiguity this caption exists to remove, so it wraps instead. */
.dpo-frame[b-gw2z50d6kt] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    line-height: 1.35;
    white-space: normal;
    color: var(--dp-text-muted);
}

/* ::deep is required: the <svg> comes from DsIcon, so it carries the design system's scope attribute,
   not this page's — the same pattern already used for .pp-attention-rail ::deep .ds-panel above. */
.dpo-frame[b-gw2z50d6kt]  svg {
    flex: 0 0 auto;
    margin-top: 1px;
}


/* Documents & assessments — big-number figure (Section 04). */
.dpo-doc-figure[b-gw2z50d6kt] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.dpo-doc-figure strong[b-gw2z50d6kt] {
    color: var(--dp-text-primary);
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.dpo-doc-figure span[b-gw2z50d6kt] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

/* ================================================================
   Date-range filter card (mockup: docs/design/DPO Dashboard Mockup)
   ================================================================ */

.dpo-filterbar-card[b-gw2z50d6kt] {
    background: var(--dp-surface-primary);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-l1, none);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.dpo-filterbar-row[b-gw2z50d6kt] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.dpo-filterbar-status[b-gw2z50d6kt] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--dp-border-subtle);
}

.dpo-filterbar-status__label[b-gw2z50d6kt] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dp-text-tertiary);
}

/* ================================================================
   Local Figma Tổng quan/full — section 406:102328, symbol 338:7867

   Desktop content geometry is 1140px: 267px summary rail + 24px gap + 849px
   detail stream. It degrades to a fluid rail before becoming a single column.
   ================================================================ */

.dpo-overview-heading[b-gw2z50d6kt] {
    width: min(100%, calc(var(--ds-shell-content-max-width, 1188px) - 48px));
    box-sizing: border-box;
    margin-bottom: 16px;
}

.dpo-overview-heading[b-gw2z50d6kt]  .ds-pagehead {
    min-height: 84px;
    align-items: center;
    margin-bottom: 0;
}

.dpo-overview-heading[b-gw2z50d6kt]  .ds-pagehead-title {
    font-size: 1.5rem;
    line-height: 2rem;
}

.dpo-overview-heading[b-gw2z50d6kt]  .ds-pagehead-subtitle {
    margin-top: 4px;
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.dpo-heading-controls[b-gw2z50d6kt] {
    width: max-content;
    max-width: 100%;
}

.dpo-overview-heading .dpo-filterbar-row[b-gw2z50d6kt] {
    display: grid;
    grid-template-columns: 101px 277px 89px max-content;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.dpo-filterbar-label[b-gw2z50d6kt] {
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    white-space: nowrap;
}

.dpo-filterbar-row[b-gw2z50d6kt]  .ds-date-range {
    width: 277px;
}

.dpo-filterbar-row[b-gw2z50d6kt]  .dpo-apply-filter-btn {
    justify-content: center;
    width: 89px;
    height: 40px;
    min-height: 40px;
    padding-inline: 12px;
    white-space: nowrap;
}

.dpo-filterbar-row[b-gw2z50d6kt]  .dpo-export-pdf-btn {
    width: auto;
    height: 40px;
    min-height: 40px;
    white-space: nowrap;
}

/* The applied range is already visible in the combined field and its calendar includes
   the Figma "Xóa" action. Keep this live region in the DOM for state announcements without
   introducing the extra visual row that is absent from Header 333:30302. */
.dpo-overview-heading .dpo-filterbar-status[b-gw2z50d6kt] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.dpo-overview-grid[b-gw2z50d6kt] {
    display: grid;
    width: min(100%, calc(var(--ds-shell-content-max-width, 1188px) - 48px));
    grid-template-columns:
        minmax(220px, 267px)
        minmax(0, calc(var(--ds-shell-content-max-width, 1188px) - 339px));
    align-items: start;
    gap: 24px;
}

.dpo-overview-grid .dpo-kpi-grid[b-gw2z50d6kt] {
    display: grid;
    position: sticky;
    z-index: 1;
    /* 12px internal breathing room preserves the cards' hover/focus shadows.
       On short screens the rail can scroll, so the last KPI remains reachable. */
    top: calc(var(--ds-pagehead-height, 84px) + 4px);
    max-height: calc(var(--ds-scrollport-height, 100dvh) - var(--ds-pagehead-height, 84px) - var(--ds-scrollport-end-inset, 0px) - 8px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 12px;
    margin: -12px;
    width: calc(100% + 24px);
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr);
    align-self: start;
    gap: 12px;
}

.dpo-overview-main[b-gw2z50d6kt] {
    display: flex;
    width: min(100%, calc(var(--ds-shell-content-max-width, 1188px) - 339px));
    min-width: 0;
    flex-direction: column;
    gap: 48px;
}

/* Figma Right-body 301:7605: sections form one vertical Auto Layout with a
   48px gap; each section frame uses a 12px gap between title and content. */
.dpo-overview-section[b-gw2z50d6kt] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
}

.dpo-overview-main .dpo-section-divider[b-gw2z50d6kt] {
    min-height: 32px;
    margin: 0;
}

.dpo-overview-main .dpo-section-badge[b-gw2z50d6kt] {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-strong);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 26px;
    text-transform: none;
}

.dpo-overview-main .dpo-section-divider[b-gw2z50d6kt]  .ds-dashboard-section-title {
    padding: 0;
    background: transparent;
    color: var(--text-strong);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 26px;
    text-transform: none;
}

/* Figma instances 301:7607 and 301:7648 are resized to their 26px heading
   line. Their action component property is false in markup; later sections
   retain the complete 32px Title-section component. */
.dpo-overview-main .dpo-section-divider--compact[b-gw2z50d6kt] {
    min-height: 26px;
}

.dpo-overview-main .dpo-section-divider[b-gw2z50d6kt]  .ds-dashboard-section-action {
    border-color: var(--cyan-dark);
    color: var(--cyan-dark);
}

.dpo-overview-main .dpo-two-col[b-gw2z50d6kt],
.dpo-consent-layout[b-gw2z50d6kt] {
    gap: 12px;
}

/* Figma 301:7606 — two chart cards on the first row, then the trend chart
   spanning the complete 849px content stream on its own row. */
.dpo-consent-layout[b-gw2z50d6kt] {
    display: grid;
    grid-template-columns: minmax(0, 364px) minmax(0, 1fr);
    grid-template-areas:
        "summary purposes"
        "trend trend";
    align-items: stretch;
}

.dpo-consent-layout[b-gw2z50d6kt]  .dpo-consent-summary { grid-area: summary; height: 381px; }
.dpo-consent-layout[b-gw2z50d6kt]  .dpo-consent-purposes { grid-area: purposes; height: 381px; }
.dpo-consent-layout[b-gw2z50d6kt]  .dpo-consent-trend-panel { grid-area: trend; height: auto; min-height: 381px; }

.dpo-consent-layout[b-gw2z50d6kt]  .dpo-consent-summary .dpo-gauge-row,
.dpo-cookie-layout[b-gw2z50d6kt]  .dpo-cookie-rate-panel .dpo-gauge-row {
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.dpo-consent-layout[b-gw2z50d6kt]  .dpo-consent-summary .dpo-gauge-stats,
.dpo-cookie-layout[b-gw2z50d6kt]  .dpo-cookie-rate-panel .dpo-gauge-stats {
    width: 100%;
    min-width: 0;
}

/* The trend primitive owns the exact Figma chart geometry and both display modes. */
.dpo-consent-layout[b-gw2z50d6kt]  .dpo-consent-trend-panel .dpo-ctrend {
    min-width: 0;
}

.dpo-consent-layout[b-gw2z50d6kt]  .dpo-consent-trend-panel .dpo-panel-subhead {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--dp-text-primary);
    font-size: 0.875rem;
    letter-spacing: 0;
    line-height: 1.5rem;
    text-transform: none;
    align-self: center;
}

/* The approved Figma card ends at the x-axis. The screen-reader summary remains
   present; the optional raw table stays in the DOM for tests/assistive fallback
   but has no visual trigger in this dashboard composition. */
.dpo-consent-layout[b-gw2z50d6kt]  .dpo-consent-trend-panel .dpo-ctrend__disclosure,
.dpo-consent-layout[b-gw2z50d6kt]  .dpo-consent-trend-panel .dpo-ctrend__tablewrap {
    display: none;
}

/* Figma 301:7647 — Cookie keeps the 364/473 chart ratio. */
.dpo-overview-main .dpo-cookie-layout[b-gw2z50d6kt] {
    grid-template-columns: minmax(0, 364px) minmax(0, 1fr);
}

/* 381px is the Figma minimum. Let the grid row grow when the warning copy and the
   column-meter labels need more room; a fixed height clipped the label row in both
   the live dashboard and its pixel-faithful PDF capture. */
.dpo-cookie-layout[b-gw2z50d6kt]  .ds-panel {
    min-height: 381px;
    height: auto;
}

.dpo-card-title-action[b-gw2z50d6kt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dp-text-secondary);
}

.dpo-donut-chart-wrap[b-gw2z50d6kt],
.dpo-cookie-rate-panel .dpo-gauge-row[b-gw2z50d6kt] {
    width: 100%;
}

.dpo-donut-legend-list[b-gw2z50d6kt] {
    width: 100%;
    min-width: 0;
    gap: 12px;
}

.dpo-stat-row[b-gw2z50d6kt] {
    position: relative;
    min-height: 20px;
    padding-left: 20px;
    line-height: 20px;
}

.dpo-stat-row[b-gw2z50d6kt]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-border-solid, var(--dp-text-tertiary));
    transform: translateY(-50%);
}

.dpo-stat-row--success[b-gw2z50d6kt]::before { background: var(--color-bg-fill-success-primary-active, var(--success-strong)); }
.dpo-stat-row--neutral[b-gw2z50d6kt]::before { background: var(--color-border-solid, var(--dp-text-tertiary)); }
.dpo-stat-row--warning[b-gw2z50d6kt]::before { background: var(--color-text-warning, var(--warning)); }

.dpo-stat-row--sr-only[b-gw2z50d6kt] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.dpo-consent-purposes .dpo-meter-list[b-gw2z50d6kt] {
    gap: 16px;
}

.dpo-purpose-row[b-gw2z50d6kt] {
    height: 49px;
    justify-content: space-between;
    gap: 3px;
}

.dpo-purpose-row .dpo-meter-head[b-gw2z50d6kt] {
    height: 20px;
    align-items: center;
    line-height: 20px;
}

.dpo-purpose-response[b-gw2z50d6kt] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    color: var(--dp-text-secondary);
    white-space: nowrap;
}

.dpo-purpose-response__divider[b-gw2z50d6kt] {
    width: 1px;
    height: 20px;
    background: var(--dp-border-subtle);
}

.dpo-purpose-row__meta[b-gw2z50d6kt] {
    display: flex;
    height: 19px;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    line-height: 15px;
}

/* Figma 301:7872 reverses the chart ratio: SLA/type distribution is the
   473px panel; the urgent queue is the 364px panel. */
.dpo-overview-main .dpo-dsr-layout[b-gw2z50d6kt] {
    grid-template-columns: minmax(0, 473fr) minmax(0, 364fr);
}


/* Figma 301:7906 — Privacy is an equal two-panel row. */
.dpo-overview-main .dpo-privacy-layout[b-gw2z50d6kt] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.dpo-privacy-layout[b-gw2z50d6kt]  .dpo-privacy-active-panel { min-height: 332px; }
.dpo-privacy-layout[b-gw2z50d6kt]  .dpo-privacy-review-panel { min-height: 336px; }

.dpo-privacy-summary[b-gw2z50d6kt] {
    display: grid;
    height: 118px;
    box-sizing: border-box;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: var(--color-bg-surface-base-secondary, var(--dp-surface-secondary));
}

.dpo-privacy-total[b-gw2z50d6kt] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.dpo-privacy-total > span[b-gw2z50d6kt] {
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
    line-height: 20px;
}

.dpo-privacy-total > strong[b-gw2z50d6kt] {
    color: var(--dp-text-primary);
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 600;
    line-height: 2.5rem;
    font-variant-numeric: tabular-nums;
}

.dpo-privacy-total > small[b-gw2z50d6kt] {
    color: var(--dp-text-tertiary);
    font-size: 0.75rem;
    line-height: 18px;
}

.dpo-privacy-summary[b-gw2z50d6kt]  .ds-radial-stack {
    justify-self: center;
}

.dpo-privacy-legend[b-gw2z50d6kt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dpo-privacy-legend-row[b-gw2z50d6kt] {
    position: relative;
    display: grid;
    height: 20px;
    grid-template-columns: minmax(0, 1fr) auto 1px 40px;
    align-items: center;
    column-gap: 10px;
    padding-left: 20px;
    color: var(--color-text-primary, var(--text-body));
    font-size: 0.875rem;
    line-height: 20px;
}

.dpo-privacy-legend-row[b-gw2z50d6kt]::before {
    content: "";
    position: absolute;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dpo-privacy-legend-row--published[b-gw2z50d6kt]::before { background: var(--color-text-brand-active, var(--accent-active)); }
.dpo-privacy-legend-row--draft[b-gw2z50d6kt]::before { background: var(--color-text-warning, var(--warning)); }
.dpo-privacy-legend-row--archived[b-gw2z50d6kt]::before { background: var(--color-text-secondary, var(--text-muted)); }

.dpo-privacy-legend-row strong[b-gw2z50d6kt] {
    min-width: 24px;
    color: var(--color-text-primary, var(--text-body));
    font-weight: 400;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dpo-privacy-legend-divider[b-gw2z50d6kt] {
    width: 1px;
    height: 20px;
    background: var(--color-bg-surface-base-tertiary, var(--bg-inset));
}

.dpo-privacy-legend-percent[b-gw2z50d6kt] {
    color: var(--color-text-primary, var(--text-body));
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dpo-privacy-status[b-gw2z50d6kt]  .ds-badge {
    width: 100%;
    min-height: 26px;
    justify-content: center;
}

/* Figma 301:7964 — Assessment is one full-width panel with a 178px total
   block, three horizontal status blocks, then the operational work set below. */
.dpo-assessment-layout[b-gw2z50d6kt] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.dpo-assessment-layout[b-gw2z50d6kt]  .dpo-assessment-panel {
    height: auto;
    min-height: 436px;
}

.dpo-assessment-work[b-gw2z50d6kt] {
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid var(--color-border-additional-2-solid);
    border-radius: 18px;
}

.dpo-assessment-work__title[b-gw2z50d6kt] {
    display: flex;
    min-height: 24px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.dpo-assessment-work__title h3[b-gw2z50d6kt] {
    margin: 0;
    color: var(--dp-text-secondary);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.dpo-assessment-work__content[b-gw2z50d6kt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dpo-assessment-alert[b-gw2z50d6kt] {
    height: 34px;
    margin: 0;
}

.dpo-assessment-work__content[b-gw2z50d6kt]  .dpo-assessment-alert {
    min-height: 34px;
    box-sizing: border-box;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
}

.dpo-assessment-work__content[b-gw2z50d6kt]  .dpo-assessment-alert .ds-alert-icon { margin: 0; }

.dpo-assessment-work__content[b-gw2z50d6kt]  .dpo-assessment-alert .ds-alert-title {
    font-size: 12px;
    line-height: 20px;
}

.dpo-assessment-details[b-gw2z50d6kt] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 12px;
    align-items: start;
}

.dpo-assessment-table[b-gw2z50d6kt] {
    min-height: 170px;
    overflow: hidden;
    border: 1px solid var(--dp-border-subtle);
    border-radius: 8px;
}

.dpo-assessment-table__header[b-gw2z50d6kt],
.dpo-assessment-table__row .dpo-meter-head[b-gw2z50d6kt] {
    display: grid;
    min-height: 56px;
    grid-template-columns: minmax(0, 393fr) minmax(0, 140fr) minmax(0, 140fr);
    align-items: center;
}

.dpo-assessment-table__header[b-gw2z50d6kt] {
    background: var(--dp-surface-secondary);
    color: var(--dp-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.dpo-assessment-table__header span[b-gw2z50d6kt],
.dpo-assessment-table__row .dpo-meter-head span[b-gw2z50d6kt] {
    min-width: 0;
    padding: 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dpo-assessment-table__row[b-gw2z50d6kt] {
    height: 56px;
    gap: 0;
    border-top: 1px solid var(--dp-border-subtle);
}

.dpo-assessment-empty[b-gw2z50d6kt] {
    height: 112px;
}

.dpo-assessment-empty[b-gw2z50d6kt]  .ds-empty {
    min-height: 112px;
    box-sizing: border-box;
    padding: 8px;
}

.dpo-overdue-assessments[b-gw2z50d6kt] {
    overflow: hidden;
    border: 1px solid var(--dp-border-subtle);
    border-radius: 8px;
    background: var(--dp-surface-primary);
}

.dpo-overdue-assessments__header[b-gw2z50d6kt] {
    display: flex;
    min-height: 56px;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    background: var(--dp-surface-secondary);
    color: var(--dp-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.dpo-overdue-assessments__header strong[b-gw2z50d6kt] {
    display: inline-flex;
    min-width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--color-bg-danger-subtle, var(--bg-danger-subtle));
    color: var(--color-text-danger, var(--danger));
    font-variant-numeric: tabular-nums;
}

.dpo-overdue-assessment[b-gw2z50d6kt] {
    display: grid;
    min-height: 56px;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid var(--dp-border-subtle);
    color: var(--dp-text-primary);
    text-decoration: none;
    transition: background-color 120ms ease;
}

.dpo-overdue-assessment:hover[b-gw2z50d6kt] {
    background: var(--dp-surface-secondary);
}

.dpo-overdue-assessment:focus-visible[b-gw2z50d6kt],
.dpo-overdue-assessments__more:focus-visible[b-gw2z50d6kt] {
    outline: none;
    box-shadow: inset var(--ring);
}

.dpo-overdue-assessment__identity[b-gw2z50d6kt],
.dpo-overdue-assessment__deadline[b-gw2z50d6kt] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.dpo-overdue-assessment__identity strong[b-gw2z50d6kt],
.dpo-overdue-assessment__identity small[b-gw2z50d6kt] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dpo-overdue-assessment__identity strong[b-gw2z50d6kt] {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.125rem;
}

.dpo-overdue-assessment__identity small[b-gw2z50d6kt],
.dpo-overdue-assessment__deadline small[b-gw2z50d6kt] {
    color: var(--dp-text-secondary);
    font-size: 0.6875rem;
    line-height: 1rem;
}

.dpo-overdue-assessment__deadline[b-gw2z50d6kt] {
    align-items: flex-end;
    text-align: right;
    white-space: nowrap;
}

.dpo-overdue-assessment__deadline strong[b-gw2z50d6kt] {
    color: var(--color-text-danger, var(--danger));
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
}

.dpo-overdue-assessment[b-gw2z50d6kt]  .ds-icon {
    color: var(--dp-text-secondary);
}

.dpo-overdue-assessments__more[b-gw2z50d6kt] {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--dp-border-subtle);
    color: var(--dp-interactive-primary);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.dpo-overdue-assessments__empty[b-gw2z50d6kt] {
    display: flex;
    min-height: 112px;
    align-items: center;
    justify-content: center;
    padding: 12px;
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
    text-align: center;
}

.dpo-overview-main[b-gw2z50d6kt]  .ds-panel {
    border: 0;
    border-radius: 18px;
    box-shadow: none;
}

.dpo-overview-main[b-gw2z50d6kt]  .ds-panel-head {
    min-height: 40px;
    box-sizing: border-box;
    padding: 16px 16px 0;
    border-bottom: 0;
}

.dpo-overview-main[b-gw2z50d6kt]  .ds-panel-body {
    --ds-panel-padding: 16px !important;
}

@media (max-width: 899.98px) {
    .dpo-overview-heading[b-gw2z50d6kt]  .ds-pagehead {
        align-items: flex-start;
    }

    .dpo-overview-heading[b-gw2z50d6kt]  .ds-pagehead-actions,
    .dpo-heading-controls[b-gw2z50d6kt] {
        width: 100%;
    }

    .dpo-overview-grid[b-gw2z50d6kt] {
        grid-template-columns: minmax(0, 1fr);
    }

    .dpo-overview-grid .dpo-kpi-grid[b-gw2z50d6kt] {
        position: static;
        max-height: none;
        overflow: visible;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media print {
    .dpo-overview-grid .dpo-kpi-grid[b-gw2z50d6kt] {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 767.98px) {
    .dpo-overview-heading .dpo-filterbar-row[b-gw2z50d6kt] {
        grid-template-columns: 101px minmax(0, 1fr) 89px max-content;
        width: 100%;
    }

    .dpo-filterbar-row[b-gw2z50d6kt]  .ds-date-range {
        width: 100%;
    }

    .dpo-overview-main .dpo-cookie-layout[b-gw2z50d6kt],
    .dpo-overview-main .dpo-dsr-layout[b-gw2z50d6kt],
    .dpo-overview-main .dpo-privacy-layout[b-gw2z50d6kt] {
        grid-template-columns: minmax(0, 1fr);
    }

    .dpo-consent-layout[b-gw2z50d6kt] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "summary"
            "purposes"
            "trend";
    }

    /* Fixed heights above reproduce the desktop Figma frames. Stacked cards
       must return to content sizing so translated copy remains readable. */
    .dpo-consent-layout[b-gw2z50d6kt]  .dpo-consent-summary,
    .dpo-consent-layout[b-gw2z50d6kt]  .dpo-consent-purposes,
    .dpo-consent-layout[b-gw2z50d6kt]  .dpo-consent-trend-panel,
    .dpo-cookie-layout[b-gw2z50d6kt]  .ds-panel,
    .dpo-dsr-layout[b-gw2z50d6kt]  .ds-panel,
    .dpo-privacy-layout[b-gw2z50d6kt]  .ds-panel,
    .dpo-assessment-layout[b-gw2z50d6kt]  .dpo-assessment-panel {
        height: auto;
        min-height: 0;
    }

    .dpo-assessment-work[b-gw2z50d6kt],
    .dpo-assessment-work__content[b-gw2z50d6kt] {
        height: auto;
    }

    .dpo-assessment-details[b-gw2z50d6kt] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .dpo-heading-controls[b-gw2z50d6kt] {
        width: 100%;
    }

    .dpo-overview-heading .dpo-filterbar-row[b-gw2z50d6kt] {
        grid-template-columns: minmax(0, 1fr) 89px max-content;
    }

    .dpo-filterbar-label[b-gw2z50d6kt] {
        grid-column: 1 / -1;
    }

    .dpo-overview-grid .dpo-kpi-grid[b-gw2z50d6kt],
    .dpo-overview-main .dpo-two-col[b-gw2z50d6kt],
    .dpo-consent-layout[b-gw2z50d6kt] {
        grid-template-columns: minmax(0, 1fr);
    }

    .dpo-assessment-table__header[b-gw2z50d6kt],
    .dpo-assessment-table__row .dpo-meter-head[b-gw2z50d6kt] {
        grid-template-columns: minmax(0, 1fr) 90px 64px;
    }
}

@media (max-width: 399.98px) {
    .dpo-overview-heading .dpo-filterbar-row[b-gw2z50d6kt] {
        grid-template-columns: minmax(0, 1fr);
    }

    .dpo-filterbar-row[b-gw2z50d6kt]  .ds-btn {
        width: 100%;
    }
}
/* _content/BlazorFrontend/Pages/Compliance/Overview.razor.rz.scp.css */
/*
 * Overview.razor.css
 * Scoped styles for /compliance Overview page.
 * Follows Apple design token system (--dp-* only, no hardcoded colors).
 * Companion sheet: compliance-dashboard-design-system.css (shared pp-* primitives).
 */

/* ─── Service Cards Grid ──────────────────────────────────────────────────── */

.ov-service-grid[b-qg3se9cmjo] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);          /* 20px */
}

@media (max-width: 1279px) {
    .ov-service-grid[b-qg3se9cmjo] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .ov-service-grid[b-qg3se9cmjo] {
        grid-template-columns: 1fr;
    }
}

/* ─── Individual Service Card ─────────────────────────────────────────────── */

.ov-service-card[b-qg3se9cmjo] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);           /* 12px vertical rhythm */
    padding: var(--space-5);       /* 20px */
    background-color: var(--dp-surface-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-l1);
    transition: box-shadow var(--transition-state) var(--ease-apple);
    min-width: 0;                  /* prevent text overflow in grid */
}

.ov-service-card:hover[b-qg3se9cmjo] {
    box-shadow: var(--shadow-l1-hover);
}

.ov-service-card:focus-within[b-qg3se9cmjo] {
    box-shadow: var(--shadow-l1-hover);
    outline: none;
}

/* Disabled state — subtle overlay, no hover lift */
.ov-service-card--disabled[b-qg3se9cmjo] {
    opacity: 0.65;
    cursor: not-allowed;
}

.ov-service-card--disabled:hover[b-qg3se9cmjo] {
    box-shadow: var(--shadow-l1);  /* no hover lift for disabled */
}

/* ─── Icon Circle ─────────────────────────────────────────────────────────── */

.ov-service-card__icon[b-qg3se9cmjo] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Cyan = Brand (Cookie Consent, consent-related) */
.ov-service-card__icon--cyan[b-qg3se9cmjo] {
    background-color: var(--dp-surface-brand-subtle);
    color: var(--dp-interactive-primary);
}

/* Success = green (Universal Consent — cross-platform agreement) */
.ov-service-card__icon--success[b-qg3se9cmjo] {
    background-color: var(--dp-status-success-bg);
    color: var(--dp-status-success);
}

/* Warning = amber (Privacy Notices — attention required for publication) */
.ov-service-card__icon--warning[b-qg3se9cmjo] {
    background-color: var(--dp-status-warning-bg);
    color: var(--dp-status-warning);
}

/* ─── Disabled Badge ─────────────────────────────────────────────────────── */

.ov-service-card__badge[b-qg3se9cmjo] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
}

/* ─── Card Content ────────────────────────────────────────────────────────── */

.ov-service-card__title[b-qg3se9cmjo] {
    font-size: var(--apple-font-h3-size);
    font-weight: var(--apple-font-h3-weight);
    letter-spacing: -0.01em;
    color: var(--dp-text-primary);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ov-service-card__desc[b-qg3se9cmjo] {
    font-size: var(--apple-font-caption-size);
    color: var(--dp-text-secondary);
    margin: 0;
    line-height: 1.5;
    /* Allow long text to wrap — Vietnamese / Indonesian can be ~30% longer */
    flex: 1;
}

/* ─── Metric Row ─────────────────────────────────────────────────────────── */

.ov-service-card__metric[b-qg3se9cmjo] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);           /* 8px */
}

.ov-service-card__metric-value[b-qg3se9cmjo] {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--dp-text-primary);
    line-height: 1;
}

.ov-service-card__metric-label[b-qg3se9cmjo] {
    font-size: var(--apple-font-label-size);
    color: var(--dp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ─── CTA Button ─────────────────────────────────────────────────────────── */

.ov-service-card__cta[b-qg3se9cmjo] {
    margin-top: auto;              /* push to bottom of flex column */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
}

.ov-service-card__cta:focus-visible[b-qg3se9cmjo] {
    box-shadow: var(--focus-ring);
    outline: none;
}
/* _content/BlazorFrontend/Pages/Compliance/PrivacyNotices/Acknowledgments.razor.rz.scp.css */
.pn-page[b-rqak1ao07q] { width: 100%; min-width: 0; }
.pn-page-body[b-rqak1ao07q] { padding-top: var(--space-4); }

/* Under-construction placeholder for /compliance/privacy-notices/{id}/acknowledgments.
   Token-only, layout-only rules — component visuals come from Datanomics.Ds. */

.ack-empty-wrap[b-rqak1ao07q] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    max-width: 640px;
    margin: 0 auto;
}
/* _content/BlazorFrontend/Pages/Compliance/PrivacyNotices/Activities/ActivitiesFilterBar.razor.rz.scp.css */
/* ====================================================
   ActivitiesFilterBar — date range + event type filter row
   Moved out of ActivitiesPanel.razor.css: Blazor CSS isolation only
   propagates the parent's scope attribute onto a child component's ROOT
   element, not onto elements nested inside the child's own template —
   these rules must live in the file whose component actually renders them.
   ==================================================== */

.activities-filter-bar[b-kkhfjkcofh] {
    background: var(--dp-surface-secondary);
    border: 1px solid var(--dp-border-subtle);
    border-radius: 6px;
    padding: 10px 12px;
}

.filter-row[b-kkhfjkcofh] {
    display: flex;
    /* flex-start (was flex-end): the helper/error block under the date pair is variable height —
       bottom alignment would push the event-type dropdown and Reset down as the error appears. */
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

/* Date pair + its shared helper/error slot. Kept as one flex item so the message can never be
   separated from the two inputs it describes when the row wraps. */
.filter-dates[b-kkhfjkcofh] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 330px;
}

.filter-dates__fields[b-kkhfjkcofh] {
    display: flex;
    gap: 10px;
}

.filter-dates__hint[b-kkhfjkcofh] {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--dp-text-secondary);
    max-width: 420px;
    margin-bottom: 0;
}

/* The max-range hint and the effective-range disclosure share this node. Blazor strips
   whitespace-only nodes between elements, so the sentence gap has to come from CSS.
   MaxRangeHint carries no terminal punctuation in any locale, so a plain margin read as one
   run-on sentence ("…365 ngày Ô ngày để trống…") — the separator restores the boundary
   (UX §9.1). The dot is the mechanism, not decoration, so it uses the hint's own
   --dp-text-secondary (5.20:1 light / 6.96:1 dark) rather than --dp-text-tertiary, which is
   declared DECORATIVE-only and measures 2.45:1 / 2.18:1 here — near-invisible for the
   low-vision readers this separator exists to serve. The 0.45em on both sides is kept as a
   second, independent boundary cue: when the hint wraps and the second span starts a new
   line the gap disappears, and when it wraps mid-sentence the dot is on the previous line. */
.filter-dates__hint span + span[b-kkhfjkcofh]::before {
    content: "·";
    margin-inline: 0.45em;
    color: var(--dp-text-secondary);
}

/* Body text uses --dp-text-primary, not --dp-status-danger-text: the latter measures 3.74:1 on
   the filter-bar surface in dark mode and fails AA. Danger is carried by the icon, the tint,
   the left border and the 2px input outline. */
.filter-dates__error[b-kkhfjkcofh] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    background: var(--dp-status-danger-bg);
    border-inline-start: 3px solid var(--dp-status-danger-border);
    border-radius: 4px;
    padding: 6px 10px;
    max-width: 420px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--dp-text-primary);
    margin-bottom: 0;
}

.filter-dates__error > i[b-kkhfjkcofh] {
    color: var(--dp-status-danger);
    margin-top: 2px;
}

.filter-date-input[aria-invalid="true"][b-kkhfjkcofh] {
    border-color: var(--dp-border-error);
    border-width: 2px;
}

.filter-group[b-kkhfjkcofh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.filter-group--event-type[b-kkhfjkcofh] {
    min-width: 180px;
}

.filter-label[b-kkhfjkcofh] {
    font-size: 11px;
    font-weight: 600;
    color: var(--dp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0;
}

.filter-date-input[b-kkhfjkcofh] {
    width: 100%;
    max-width: 160px;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--border-control);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-body);
    font: 400 var(--text-sm)/1.4 var(--font-body);
}

.filter-date-input:hover[b-kkhfjkcofh] {
    border-color: var(--border-strong);
}

.filter-date-input:focus-visible[b-kkhfjkcofh] {
    border-color: var(--border-focus);
    outline: 0;
    box-shadow: var(--ring);
}

.filter-dropdown-btn[b-kkhfjkcofh] {
    width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-event-type-menu[b-kkhfjkcofh] {
    width: 100%;
}

.filter-actions[b-kkhfjkcofh] {
    margin-left: auto;
    display: flex;
    align-items: flex-end;
    align-self: flex-start;
}

.filter-reset-btn[b-kkhfjkcofh] {
    font-size: 12px;
    color: var(--dp-text-secondary);
    padding: 4px 8px;
}

/* Responsive */
@media (max-width: 767px) {
    .filter-row[b-kkhfjkcofh] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group[b-kkhfjkcofh] {
        min-width: unset;
        width: 100%;
    }

    .filter-dates[b-kkhfjkcofh] {
        min-width: unset;
        width: 100%;
    }

    /* Stack the two date inputs; the error stays the last child of .filter-dates, below both,
       which is why both inputs point at it via aria-describedby instead of duplicating it. */
    .filter-dates__fields[b-kkhfjkcofh] {
        flex-direction: column;
        gap: 8px;
    }

    .filter-date-input[b-kkhfjkcofh] {
        max-width: none;
        min-height: 44px;
    }

    .filter-dates__hint[b-kkhfjkcofh],
    .filter-dates__error[b-kkhfjkcofh] {
        max-width: 100%;
    }

    .filter-actions[b-kkhfjkcofh] {
        margin-left: 0;
    }

    .filter-reset-btn[b-kkhfjkcofh] {
        min-height: 44px;
    }
}
/* _content/BlazorFrontend/Pages/Compliance/PrivacyNotices/Activities/ActivitiesPanel.razor.rz.scp.css */
/* ====================================================
   ActivitiesPanel — container for the audit log tab
   ==================================================== */

.activities-panel[b-snc7gz0b9v] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

/* Context actions — title is owned by the enclosing DsPagePanel. */
.activities-panel__toolbar[b-snc7gz0b9v] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.activities-panel__title[b-snc7gz0b9v] {
    font-size: 14px;
    font-weight: 700;
    color: var(--dp-text-primary);
}

/* Filter bar — styles moved to ActivitiesFilterBar.razor.css (that component renders
   these elements directly; CSS isolation doesn't propagate this scope onto them). */

/* ── Event row cells ──────────────────────────────────────────────────────
   Colour and typography only. Column widths, alignment and the ellipsis on
   overflowing values all come from DsDataTable's <td> under
   table-layout:fixed — that is what keeps every row on the same tracks. */

/* Severity icon */
.audit-severity-icon[b-snc7gz0b9v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    flex-shrink: 0;
}

.audit-severity-icon--info[b-snc7gz0b9v] {
    background: var(--dp-audit-severity-info-bg);
    color: var(--dp-audit-severity-info-fg);
    border: 1px solid var(--dp-audit-severity-info-border);
}

.audit-severity-icon--notice[b-snc7gz0b9v] {
    background: var(--dp-audit-severity-notice-bg);
    color: var(--dp-audit-severity-notice-fg);
    border: 1px solid var(--dp-audit-severity-notice-border);
}

.audit-severity-icon--warning[b-snc7gz0b9v] {
    background: var(--dp-status-warning-bg);
    color: var(--dp-status-warning);
    border: 1px solid var(--dp-status-warning-border);
}

.audit-severity-icon--danger[b-snc7gz0b9v] {
    background: var(--dp-status-danger-bg);
    color: var(--dp-status-danger);
    border: 1px solid var(--dp-status-danger-border);
}

/* Timestamp */
.audit-ts-absolute[b-snc7gz0b9v] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--dp-text-primary);
    white-space: nowrap;
}

.audit-ts-relative[b-snc7gz0b9v] {
    display: block;
    font-size: 11px;
    color: var(--dp-text-muted);
    white-space: nowrap;
}

/* Event type badge.
   max-width is 100% of the cell, not the old fixed 240px: the column now declares its own width
   (DsColumnSize.Chip), so the pill must bound itself to the cell it is in. Without a max-width an
   inline-block shrinks to fit its text, its own text-overflow never fires, and an over-long label
   ("Separation of Duties Violation Blocked") is hard-clipped by the <td> with no "…" at all. */
.audit-event-badge[b-snc7gz0b9v] {
    display: inline-block;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-event-badge--info[b-snc7gz0b9v] {
    background: var(--dp-audit-severity-info-bg);
    color: var(--dp-audit-severity-info-fg);
    border: 1px solid var(--dp-audit-severity-info-border);
}

.audit-event-badge--notice[b-snc7gz0b9v] {
    background: var(--dp-audit-severity-notice-bg);
    color: var(--dp-audit-severity-notice-fg);
    border: 1px solid var(--dp-audit-severity-notice-border);
}

.audit-event-badge--warning[b-snc7gz0b9v] {
    background: var(--dp-status-warning-bg);
    color: var(--dp-status-warning);
    border: 1px solid var(--dp-status-warning-border);
}

.audit-event-badge--danger[b-snc7gz0b9v] {
    background: var(--dp-status-danger-bg);
    color: var(--dp-status-danger);
    border: 1px solid var(--dp-status-danger-border);
}

/* Actor / Target text — no overflow rules here: exactly one truncation mechanism per field
   (BR-4), and it lives on the <td>. */
.audit-actor[b-snc7gz0b9v],
.audit-target[b-snc7gz0b9v] {
    font-size: 12px;
    color: var(--dp-text-secondary);
}

.activities-row-action[b-snc7gz0b9v] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Below 768px the Target column is dropped visually; the full target text stays in the row's
   accessible name, so nothing is lost (FR-7/FR-8).
   ::deep is mandatory: the <th>/<td> carrying this class are rendered by DsDataTable and
   therefore carry the DESIGN SYSTEM's scope id, not this component's — without ::deep the rule
   compiles to `.pn-act-col-target[b-<this component>]` and matches nothing, ever. ::deep moves
   the scope attribute onto `.activities-table`, which IS this component's own element.
   (Same technique as `.dsr-requests-table ::deep td.dsr-cell--wrap`.) */
@media (max-width: 767.98px) {
    .activities-table[b-snc7gz0b9v]  .pn-act-col-target {
        display: none;
    }
}

/* Skeleton bars — one shimmer, sized per cell so a loading row is exactly as tall as the row
   that replaces it. */
.act-skel[b-snc7gz0b9v] {
    display: block;
    width: 100%;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--dp-surface-secondary) 25%, var(--dp-surface-hover) 50%, var(--dp-surface-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-snc7gz0b9v 1.4s ease infinite;
}

.act-skel--icon[b-snc7gz0b9v]   { width: 24px; height: 24px; border-radius: 50%; }
.act-skel--ts-rel[b-snc7gz0b9v] { width: 70%; height: 11px; margin-top: 3px; }
.act-skel--badge[b-snc7gz0b9v]  { width: 80px; }
/* No margin-left:auto — the real button sits at the start of the `.dp-actions` flex row, so the
   placeholder must too, or the arrow jumps sideways at loading→loaded. */
.act-skel--btn[b-snc7gz0b9v]    { width: 32px; height: 32px; }

@keyframes skeleton-shimmer-b-snc7gz0b9v {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Failure states (validation / transient / rate-limited / forbidden).
   One shell, four configurations: deterministic and transient failures share the tint and are
   distinguished by icon and by which action is offered — never by colour alone. */
.activities-panel__state[b-snc7gz0b9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 24px 20px;
    border: 1px solid var(--dp-status-danger-border);
    border-radius: 6px;
    background: var(--dp-status-danger-bg);
}

.activities-panel__state-icon[b-snc7gz0b9v] {
    font-size: 28px;
    color: var(--dp-status-danger);
}

/* A permission boundary is a standing condition, not an error — the lock carries the meaning. */
.activities-panel__state--forbidden[b-snc7gz0b9v] {
    background: var(--dp-surface-secondary);
    border-color: var(--dp-border-default);
}

.activities-panel__state--forbidden .activities-panel__state-icon[b-snc7gz0b9v] {
    color: var(--dp-text-secondary);
}

.activities-panel__state-message[b-snc7gz0b9v] {
    font-size: 14px;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: 0;
}

.activities-panel__state-guidance[b-snc7gz0b9v] {
    font-size: 13px;
    color: var(--dp-text-secondary);
    margin-bottom: 0;
}

/* Empty state */
.activities-panel__empty[b-snc7gz0b9v] {
    text-align: center;
    padding: 40px 20px;
    color: var(--dp-text-secondary);
}

.activities-panel__empty-icon[b-snc7gz0b9v] {
    font-size: 40px;
    color: var(--dp-text-tertiary);
    display: block;
    margin-bottom: 12px;
}

.activities-panel__empty-title[b-snc7gz0b9v] {
    font-size: 15px;
    font-weight: 600;
    color: var(--dp-text-secondary);
    margin-bottom: 4px;
}

.activities-panel__empty-subtitle[b-snc7gz0b9v] {
    font-size: 13px;
}

/* Pagination */
.activities-pagination[b-snc7gz0b9v] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--dp-border-subtle);
}

.activities-pagination__info[b-snc7gz0b9v] {
    font-size: 12px;
}

.activities-pagination__controls[b-snc7gz0b9v] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Responsive */
@media (max-width: 1279px) {
    .activities-panel__state[b-snc7gz0b9v] {
        padding: 20px 16px;
    }
}

@media (max-width: 767.98px) {
    .activities-panel__state[b-snc7gz0b9v] {
        padding: 20px 14px;
    }

    .activities-panel__state-icon[b-snc7gz0b9v] {
        font-size: 24px;
    }

    .activities-panel__state .btn[b-snc7gz0b9v] {
        width: 100%;
        max-width: 280px;
    }
}
/* _content/BlazorFrontend/Pages/Compliance/PrivacyNotices/Activities/AuditEventDetailModal.razor.rz.scp.css */
/* ====================================================
   AuditEventDetailModal
   ==================================================== */

.audit-detail-body[b-skx72gtihm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.audit-modal-title-timestamp[b-skx72gtihm] {
    font-size: 13px;
    font-weight: 400;
}

.audit-modal-section-title[b-skx72gtihm] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dp-text-secondary);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--dp-border-subtle);
}

.audit-modal-section-title--mt[b-skx72gtihm] {
    margin-top: 20px;
}

/* Metadata 2-column grid */
.audit-metadata-grid[b-skx72gtihm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.audit-meta-item[b-skx72gtihm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.audit-meta-label[b-skx72gtihm] {
    font-size: 11px;
    font-weight: 600;
    /* NOT --dp-text-tertiary: variables.css annotates that token "DECORATIVE/PLACEHOLDER only —
       intentionally below AA contrast", and these are readable labels (2.56:1 light / 3.07:1 dark). */
    color: var(--dp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.audit-meta-value[b-skx72gtihm] {
    font-size: 13px;
    color: var(--dp-text-primary);
    word-break: break-word;
}

.audit-meta-value--mono[b-skx72gtihm] {
    font-family: var(--font-mono, 'Consolas', 'Courier New', monospace);
    font-size: 12px;
}

/* Payload viewer */
.audit-payload-wrapper[b-skx72gtihm] {
    position: relative;
    background: var(--dp-surface-secondary);
    border: 1px solid var(--dp-border-default);
    border-radius: 6px;
    overflow: hidden;
}

.audit-copy-btn[b-skx72gtihm] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
}

.audit-detail-actions[b-skx72gtihm] {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

.audit-payload-pre[b-skx72gtihm] {
    margin: 0;
    padding: 12px 12px 12px 12px;
    font-family: var(--font-mono, 'Consolas', 'Courier New', monospace);
    font-size: 12px;
    line-height: 1.5;
    color: var(--dp-text-primary);
    background: transparent;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.audit-payload-line[b-skx72gtihm] {
    display: block;
    min-height: 1.5em;
}

/* Git-style, word-level track changes. Only changed tokens receive semantic colour;
   unchanged context stays normal so a one-sentence edit does not paint the whole field. */
.audit-word-diff[b-skx72gtihm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.audit-word-diff__legend[b-skx72gtihm] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    font-size: 11px;
}

.audit-word-diff__legend-item[b-skx72gtihm] {
    font-weight: 600;
}

.audit-word-diff__legend-item--remove[b-skx72gtihm] {
    color: var(--dp-audit-diff-remove-fg);
}

.audit-word-diff__legend-item--add[b-skx72gtihm] {
    color: var(--dp-audit-diff-add-fg);
}

.audit-word-diff__field[b-skx72gtihm] {
    overflow: hidden;
    border: 1px solid var(--dp-border-default);
    border-radius: 6px;
    background: var(--dp-surface-secondary);
}

.audit-word-diff__path[b-skx72gtihm] {
    display: block;
    padding: 7px 10px;
    border-bottom: 1px solid var(--dp-border-subtle);
    color: var(--dp-text-secondary);
    background: var(--dp-surface-tertiary, var(--dp-surface-hover));
    font-size: 11px;
    font-weight: 600;
}

.audit-word-diff__content[b-skx72gtihm] {
    max-height: 260px;
    overflow: auto;
    padding: 10px;
    color: var(--dp-text-primary);
    font-family: var(--font-mono, 'Consolas', 'Courier New', monospace);
    font-size: 12px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.audit-word-diff__remove[b-skx72gtihm],
.audit-word-diff__add[b-skx72gtihm] {
    border-radius: 2px;
    padding: 1px 0;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: none;
}

.audit-word-diff__remove[b-skx72gtihm] {
    color: var(--dp-audit-diff-remove-fg);
    background: var(--dp-audit-diff-remove-bg);
    text-decoration-line: line-through;
}

.audit-word-diff__add[b-skx72gtihm] {
    color: var(--dp-audit-diff-add-fg);
    background: var(--dp-audit-diff-add-bg);
    text-decoration: none;
}

/* Skeleton loading */
.audit-modal-skeleton[b-skx72gtihm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.skeleton-row[b-skx72gtihm] {
    height: 16px;
    background: linear-gradient(90deg, var(--dp-surface-secondary) 25%, var(--dp-surface-hover) 50%, var(--dp-surface-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-skx72gtihm 1.4s ease infinite;
    border-radius: 4px;
}

.skeleton-row--short[b-skx72gtihm] {
    width: 60%;
}

@keyframes skeleton-shimmer-b-skx72gtihm {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Severity icon (re-declared for modal header context) */
.audit-severity-icon[b-skx72gtihm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    vertical-align: middle;
}

.audit-severity-icon--info[b-skx72gtihm] {
    background: var(--dp-audit-severity-info-bg);
    color: var(--dp-audit-severity-info-fg);
    border: 1px solid var(--dp-audit-severity-info-border);
}

.audit-severity-icon--notice[b-skx72gtihm] {
    background: var(--dp-audit-severity-notice-bg);
    color: var(--dp-audit-severity-notice-fg);
    border: 1px solid var(--dp-audit-severity-notice-border);
}

.audit-severity-icon--warning[b-skx72gtihm] {
    background: var(--dp-status-warning-bg);
    color: var(--dp-status-warning);
    border: 1px solid var(--dp-status-warning-border);
}

.audit-severity-icon--danger[b-skx72gtihm],
.audit-severity-icon--error[b-skx72gtihm] {
    background: var(--dp-status-danger-bg);
    color: var(--dp-status-danger);
    border: 1px solid var(--dp-status-danger-border);
}

/* Responsive: narrow modal on small screens */
@media (max-width: 767px) {
    .audit-metadata-grid[b-skx72gtihm] {
        grid-template-columns: 1fr;
    }
}
/* _content/BlazorFrontend/Pages/Compliance/PrivacyNotices/Create.razor.rz.scp.css */
.pn-page[b-tzs7k1dor1] { width: 100%; min-width: 0; }
.pn-page-body[b-tzs7k1dor1] { padding-top: var(--space-4); }

/*
 * Create.razor.css
 * Scoped styles for /compliance/privacy-notices/create
 *                  /compliance/privacy-notices/create-from-template/{TemplateId}
 *
 * Composition only; visual primitives are provided by Datanomics.Ds.
 */

/* ─── Skeleton (initial load) ────────────────────────────────────────────── */

.pn-skeleton[b-tzs7k1dor1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}


.pn-skeleton-row[b-tzs7k1dor1] {
    height: 96px;
    width: 100%;
}

/* ─── Preview modal footer ───────────────────────────────────────────────── */

.pn-modal-actions[b-tzs7k1dor1] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

/* ─── Stack layout ───────────────────────────────────────────────────────── */

.pn-create-stack[b-tzs7k1dor1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.pn-form-grid[b-tzs7k1dor1],
.pn-section-field-grid[b-tzs7k1dor1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.pn-form-grid--title[b-tzs7k1dor1] {
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
}

.pn-section-field-grid[b-tzs7k1dor1] {
    grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(190px, 1fr);
}

.pn-date-field[b-tzs7k1dor1],
.pn-editor-field[b-tzs7k1dor1],
.pn-color-field[b-tzs7k1dor1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.pn-editor-field > label[b-tzs7k1dor1],
.pn-color-field > label[b-tzs7k1dor1] {
    color: var(--text-strong);
    font-size: var(--text-sm);
    font-weight: 600;
}

.pn-field-error[b-tzs7k1dor1] {
    color: var(--danger);
    font-size: var(--text-xs);
}

/* ─── Required-asterisk marker ───────────────────────────────────────────── */

.pn-required[b-tzs7k1dor1] {
    color: var(--danger);
    margin-left: 2px;
}

/* ─── Section accordion: action row + soft delete ────────────────────────── */

.pn-section-actions[b-tzs7k1dor1] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

.pn-section-list[b-tzs7k1dor1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pn-section-switches[b-tzs7k1dor1] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-4);
    flex-wrap: wrap;
}

.pn-section-hidden[b-tzs7k1dor1] {
    display: none;
}

/* ─── Color picker group ─────────────────────────────────────────────────── */

.pn-color-control[b-tzs7k1dor1] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
}

.pn-color-picker[b-tzs7k1dor1] {
    width: 44px;
    height: 42px;
    padding: 3px;
    border: 1px solid var(--border-control);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}

/* ─── Action buttons row (final form action panel) ──────────────────────── */

.pn-actions-row[b-tzs7k1dor1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pn-actions-row__primary[b-tzs7k1dor1] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ─── Preview modal body ─────────────────────────────────────────────────── */

.pn-preview-body[b-tzs7k1dor1] {
    max-height: 70vh;
    overflow-y: auto;
}

/*
 * Per-section preview header color is per-instance dynamic. It is passed via
 * inline CSS variable --pn-section-color (allowed exception per CLAUDE.md
 * inline-style rule for dynamic CSS variables).
 */
.pn-preview-section__title[b-tzs7k1dor1] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--pn-section-color, var(--accent));
    font-weight: 600;
    margin: 0 0 var(--space-2) 0;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 999.98px) {
    .pn-section-field-grid[b-tzs7k1dor1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .pn-form-grid[b-tzs7k1dor1],
    .pn-form-grid--title[b-tzs7k1dor1],
    .pn-section-field-grid[b-tzs7k1dor1] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pn-actions-row[b-tzs7k1dor1] {
        flex-direction: column;
        align-items: stretch;
    }

    .pn-actions-row__primary[b-tzs7k1dor1] {
        flex-direction: column;
        align-items: stretch;
    }

}
/* _content/BlazorFrontend/Pages/Compliance/PrivacyNotices/CreateTemplate.razor.rz.scp.css */
.pn-page[b-ymtx1spqj0] { width: 100%; min-width: 0; }
.pn-page-body[b-ymtx1spqj0] { padding-top: var(--space-4); }

/* CK-style skeleton + preview-content scoping for /compliance/privacy-notices/templates/create.
   Token-only, layout-only rules — component visuals come from Datanomics.Ds. */

.pn-skeleton[b-ymtx1spqj0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}


.pn-skeleton-row[b-ymtx1spqj0] {
    height: 96px;
    width: 100%;
}

.pnt-preview-content[b-ymtx1spqj0] {
    max-height: 400px;
    overflow-y: auto;
}

.pnt-editor-grid[b-ymtx1spqj0] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; gap: var(--space-5); }
.pnt-editor-main[b-ymtx1spqj0] { min-width: 0; }
.pnt-editor-side[b-ymtx1spqj0] { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }

.pnt-form-grid[b-ymtx1spqj0],
.pnt-switch-grid[b-ymtx1spqj0] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.pnt-form-grid--title[b-ymtx1spqj0] { grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); }
.pnt-section-editor-field[b-ymtx1spqj0] { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.pnt-field-label[b-ymtx1spqj0] { color: var(--text-strong); font-size: var(--text-sm); font-weight: 600; }
.pnt-field-label span[b-ymtx1spqj0] { color: var(--danger); }

.pnt-meta-grid[b-ymtx1spqj0],
.pnt-meta-badges[b-ymtx1spqj0] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.pnt-meta-grid[b-ymtx1spqj0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--space-3);
}

.pnt-meta-item[b-ymtx1spqj0] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.pnt-meta-item small[b-ymtx1spqj0] {
    color: var(--text-muted);
}

.pnt-meta-badges[b-ymtx1spqj0] {
    margin-top: var(--space-3);
}

@media (max-width: 991.98px) { .pnt-editor-grid[b-ymtx1spqj0] { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) {
    .pnt-form-grid[b-ymtx1spqj0],
    .pnt-form-grid--title[b-ymtx1spqj0],
    .pnt-switch-grid[b-ymtx1spqj0],
    .pnt-meta-grid[b-ymtx1spqj0] { grid-template-columns: minmax(0, 1fr); }
}
/* _content/BlazorFrontend/Pages/Compliance/PrivacyNotices/Dashboard.razor.rz.scp.css */
/*
 * Dashboard.razor.css
 * Scoped styles for /compliance/privacy-notices Dashboard page.
 *
 * Composition only. Surfaces, typography and controls belong to Datanomics.Ds.
 */

.pn-registry-page[b-ezz3wbmdcs],
.pn-table-area[b-ezz3wbmdcs],
.pn-table[b-ezz3wbmdcs] {
    width: 100%;
    min-width: 0;
}

.pn-registry-body[b-ezz3wbmdcs] {
    padding-top: var(--space-4);
}

.pn-feedback[b-ezz3wbmdcs] {
    margin-bottom: var(--space-4);
}

.pn-header-actions[b-ezz3wbmdcs] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    min-width: 0;
    flex-wrap: wrap;
}

.pn-row-actions[b-ezz3wbmdcs] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.pn-notice-name-cell[b-ezz3wbmdcs] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.pn-notice-name-cell strong[b-ezz3wbmdcs] {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-primary, var(--text-body));
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-language-list[b-ezz3wbmdcs] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    overflow: hidden;
}

/* Review-due icon in notice name cell */
.pn-expiry-icon[b-ezz3wbmdcs] {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--warning-strong);
}

/* Date cells — muted secondary text */
.pn-date-cell[b-ezz3wbmdcs] {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* Review-due date — warning text */
.pn-date-expiring[b-ezz3wbmdcs] {
    color: var(--warning-strong);
    font-size: var(--text-sm);
    font-weight: 600;
}

.pn-pagination-wrap[b-ezz3wbmdcs] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

.pn-pagination-wrap[b-ezz3wbmdcs]  .ds-pagination {
    flex: 0 1 auto;
}

@media (max-width: 639.98px) {
    .pn-header-actions[b-ezz3wbmdcs] {
        justify-content: flex-start;
    }

    .pn-pagination-wrap[b-ezz3wbmdcs]  .ds-pagination {
        justify-content: flex-end;
    }
}
/* _content/BlazorFrontend/Pages/Compliance/PrivacyNotices/Edit.razor.rz.scp.css */
.pn-page[b-qmh5c7d6vq] { width: 100%; min-width: 0; }
.pn-page-body[b-qmh5c7d6vq] { padding-top: var(--space-4); }

/*
 * Edit.razor.css
 * Scoped styles for /compliance/privacy-notices/edit/{Id}
 *
 * Rules:
 *   - All colors use semantic design tokens.
 *   - No inline style="" attributes (exception: dynamic --pn-section-color CSS
 *     variable for per-section header color, allowed under CLAUDE.md inline-style
 *     rule for dynamic CSS variables).
 *   - WCAG 2.2 AA compliant via token system.
 */

/* ─── Skeleton (initial load) ────────────────────────────────────────────── */

.pn-skeleton[b-qmh5c7d6vq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}


.pn-skeleton-row[b-qmh5c7d6vq] {
    height: 96px;
    width: 100%;
}

/* ─── Modal footers ──────────────────────────────────────────────────────── */

.pn-modal-actions[b-qmh5c7d6vq] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.pn-char-count[b-qmh5c7d6vq] {
    margin-left: var(--space-2, 8px);
    color: var(--text-muted);
}

.pn-edit-header-actions[b-qmh5c7d6vq],
.pn-edit-section-switches[b-qmh5c7d6vq] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pn-edit-section-switches[b-qmh5c7d6vq] {
    gap: var(--space-6);
}

/* ─── Panel-based content sections ───────────────────────────────────────── */

.pn-edit-content-sections[b-qmh5c7d6vq],
.pn-section-list[b-qmh5c7d6vq],
.pn-editor-field[b-qmh5c7d6vq],
.pn-color-field[b-qmh5c7d6vq] {
    display: flex;
    flex-direction: column;
}

.pn-edit-content-sections[b-qmh5c7d6vq],
.pn-section-list[b-qmh5c7d6vq] {
    gap: var(--space-3);
}

.pn-edit-section-heading[b-qmh5c7d6vq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.pn-edit-field-label[b-qmh5c7d6vq],
.pn-editor-field > label[b-qmh5c7d6vq],
.pn-color-field > label[b-qmh5c7d6vq] {
    color: var(--text-strong);
    font-size: var(--text-sm);
    font-weight: 600;
}

.pn-required[b-qmh5c7d6vq] {
    color: var(--danger);
    margin-left: 2px;
}

.pn-section-field-grid[b-qmh5c7d6vq] {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(190px, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.pn-editor-field[b-qmh5c7d6vq],
.pn-color-field[b-qmh5c7d6vq] {
    gap: var(--space-2);
    min-width: 0;
}

.pn-section-hidden[b-qmh5c7d6vq] {
    display: none;
}

.pn-section-actions[b-qmh5c7d6vq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* ─── Stack layout ───────────────────────────────────────────────────────── */

.pn-edit-stack[b-qmh5c7d6vq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.pn-edit-form-grid[b-qmh5c7d6vq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.pn-edit-form-grid--title[b-qmh5c7d6vq] {
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
}

.pn-edit-review-heading[b-qmh5c7d6vq],
.pn-edit-review-actions[b-qmh5c7d6vq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.pn-edit-review-heading[b-qmh5c7d6vq] {
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.pn-edit-review-heading h4[b-qmh5c7d6vq] {
    margin: 0;
    color: var(--text-strong);
    font-size: var(--text-base);
    font-weight: 600;
}

.pn-edit-review-actions[b-qmh5c7d6vq] {
    justify-content: flex-end;
    margin-bottom: var(--space-4);
}

.pn-edit-date-field[b-qmh5c7d6vq] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-2);
}

.pn-edit-field-error[b-qmh5c7d6vq] {
    color: var(--danger);
    font-size: var(--text-xs);
}

/* ─── Color picker group ─────────────────────────────────────────────────── */

.pn-edit-color-group[b-qmh5c7d6vq] {
    flex-wrap: nowrap;
}

.pn-edit-color-input[b-qmh5c7d6vq] {
    max-width: 90px;
}

.pn-color-control[b-qmh5c7d6vq] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
}

.pn-color-picker[b-qmh5c7d6vq] {
    width: 44px;
    height: 42px;
    padding: 3px;
    border: 1px solid var(--border-control);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}

/* ─── Preview modal body ─────────────────────────────────────────────────── */

.pn-edit-preview-body[b-qmh5c7d6vq] {
    max-height: 70vh;
    overflow-y: auto;
}

.pn-edit-preview-title[b-qmh5c7d6vq] {
    margin: 0 0 var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-strong);
}

.pn-edit-preview-title--muted[b-qmh5c7d6vq],
.pn-edit-preview-muted[b-qmh5c7d6vq] {
    color: var(--text-muted);
}

.pn-edit-preview-muted[b-qmh5c7d6vq] {
    font-style: italic;
}

.pn-edit-preview-section[b-qmh5c7d6vq] {
    margin-bottom: var(--space-5);
}

.pn-edit-preview-meta[b-qmh5c7d6vq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.pn-edit-preview-meta ul[b-qmh5c7d6vq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

/*
 * Per-section preview header color is per-instance dynamic. It is passed via
 * inline CSS variable --pn-section-color (allowed exception per CLAUDE.md
 * inline-style rule for dynamic CSS variables).
 */
.pn-edit-preview-section__title[b-qmh5c7d6vq] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--pn-section-color, var(--accent));
    font-weight: 600;
    margin: 0 0 var(--space-2) 0;
}

/* ─── Review schedule locked state ──────────────────────────────────────────
 * Shown when notice.Status is Approved/Published/Rejected/Archived/Retired
 * (per stakeholder rule 2 — only Draft/UnderReview can mutate the schedule).
 * Uses semantic tokens only, no hardcoded colors. WCAG AA contrast verified
 * against both light and dark themes via the token bridge.
 */
.pn-edit-review-locked-badge[b-qmh5c7d6vq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    background: var(--bg-subtle);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

.pn-edit-review-locked-badge i[b-qmh5c7d6vq] {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.pn-edit-review-locked-hint[b-qmh5c7d6vq] {
    margin: 0 0 var(--space-3, 12px) 0;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-radius: 6px;
    background: var(--bg-subtle);
    color: var(--text-muted);
    border-left: 3px solid var(--border-subtle);
    font-size: 0.875rem;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .pn-edit-form-grid[b-qmh5c7d6vq],
    .pn-edit-form-grid--title[b-qmh5c7d6vq] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pn-edit-color-group[b-qmh5c7d6vq] {
        flex-wrap: wrap;
    }

    .pn-edit-section-heading[b-qmh5c7d6vq] {
        align-items: stretch;
        flex-direction: column;
    }

    .pn-section-field-grid[b-qmh5c7d6vq] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pn-edit-preview-meta[b-qmh5c7d6vq] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 999.98px) {
    .pn-section-field-grid[b-qmh5c7d6vq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* _content/BlazorFrontend/Pages/Compliance/PrivacyNotices/EditTemplate.razor.rz.scp.css */
.pn-page[b-h860tkhrt2] { width: 100%; min-width: 0; }
.pn-page-body[b-h860tkhrt2] { padding-top: var(--space-4); }

/* CK-style skeleton for /compliance/privacy-notices/templates/edit/{id}.
   Token-only, layout-only rules — component visuals come from Datanomics.Ds. */

.pn-skeleton[b-h860tkhrt2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}


.pn-skeleton-row[b-h860tkhrt2] {
    height: 96px;
    width: 100%;
}

.pnt-editor-grid[b-h860tkhrt2] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; gap: var(--space-5); }
.pnt-editor-main[b-h860tkhrt2] { min-width: 0; }
.pnt-editor-side[b-h860tkhrt2] { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }
.pnt-form-grid[b-h860tkhrt2] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.pnt-form-grid--title[b-h860tkhrt2] { grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); }
.pnt-section-editor-field[b-h860tkhrt2] { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0; }
.pnt-field-label[b-h860tkhrt2] { color: var(--text-strong); font-size: var(--text-sm); font-weight: 600; }
.pnt-field-label span[b-h860tkhrt2] { color: var(--danger); }

@media (max-width: 991.98px) { .pnt-editor-grid[b-h860tkhrt2] { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) {
    .pnt-form-grid[b-h860tkhrt2],
    .pnt-form-grid--title[b-h860tkhrt2] { grid-template-columns: minmax(0, 1fr); }
}
/* _content/BlazorFrontend/Pages/Compliance/PrivacyNotices/Publications.razor.rz.scp.css */
.pn-page[b-e3vaqilypv] { width: 100%; min-width: 0; }
.pn-page-body[b-e3vaqilypv] { padding-top: var(--space-4); }

.pn-skeleton[b-e3vaqilypv] { display: flex; flex-direction: column; gap: var(--space-3); }
.pn-skeleton-row[b-e3vaqilypv] { width: 100%; height: 96px; }

.pnp-notice-cell[b-e3vaqilypv],
.pnp-date-cell[b-e3vaqilypv],
.pnp-ack-cell[b-e3vaqilypv] { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.pnp-ack-cell[b-e3vaqilypv] { align-items: center; }
.pnp-notice-title[b-e3vaqilypv] { overflow: hidden; color: var(--text-strong); font-size: var(--text-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pnp-notice-lang[b-e3vaqilypv],
.pnp-published-by[b-e3vaqilypv],
.pnp-ack-label[b-e3vaqilypv] { color: var(--text-muted); font-size: var(--text-xs); }
.pnp-notice-lang[b-e3vaqilypv] { font-weight: 500; letter-spacing: .04em; }
.pnp-ack-count[b-e3vaqilypv] { color: var(--accent); font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.pnp-row-actions[b-e3vaqilypv] { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
/* _content/BlazorFrontend/Pages/Compliance/PrivacyNotices/Templates.razor.rz.scp.css */
.pn-page[b-qfff0yyupn] { width: 100%; min-width: 0; }
.pn-page-body[b-qfff0yyupn] { padding-top: var(--space-4); }

.pn-skeleton[b-qfff0yyupn] { display: flex; flex-direction: column; gap: var(--space-3); }
.pn-skeleton-row[b-qfff0yyupn] { width: 100%; height: 96px; }

.pnt-name-cell[b-qfff0yyupn] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

.pnt-name-primary[b-qfff0yyupn] { color: var(--text-strong); font-size: var(--text-sm); font-weight: 600; }
.pnt-name-desc[b-qfff0yyupn] {
    overflow: hidden;
    max-width: 100%;
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pnt-row-actions[b-qfff0yyupn] { display: flex; align-items: center; justify-content: center; min-width: 0; }

.pnt-summary-grid[b-qfff0yyupn] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.pnt-summary-list[b-qfff0yyupn] { display: flex; flex-direction: column; gap: var(--space-2); }
.pnt-summary-row[b-qfff0yyupn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
}
.pnt-summary-row:last-child[b-qfff0yyupn] { border-bottom: 0; }
.pnt-summary-label[b-qfff0yyupn] { overflow: hidden; color: var(--text-muted); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.pnt-summary-count[b-qfff0yyupn] { flex: 0 0 auto; color: var(--text-strong); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 899.98px) { .pnt-summary-grid[b-qfff0yyupn] { grid-template-columns: minmax(0, 1fr); } }
/* _content/BlazorFrontend/Pages/Compliance/PrivacyNotices/Translations.razor.rz.scp.css */
.pn-page[b-iua5l1k78x] { width: 100%; min-width: 0; }
.pn-page-body[b-iua5l1k78x] { padding-top: var(--space-4); }

/* CK-style scoping for /compliance/privacy-notices/{id}/translations.
   Token-only, layout-only rules — component visuals come from Datanomics.Ds.
   Per-section accent color is data-driven (section.HeaderColor), passed via the
   --pntr-section-color CSS variable — approved inline-style exception. */

.pn-skeleton[b-iua5l1k78x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}


.pn-skeleton-row[b-iua5l1k78x] {
    height: 96px;
    width: 100%;
}

.pntr-primary-head[b-iua5l1k78x],
.pntr-card-head[b-iua5l1k78x] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.pntr-title-block[b-iua5l1k78x],
.pntr-title[b-iua5l1k78x],
.pntr-badges[b-iua5l1k78x],
.pntr-card-actions[b-iua5l1k78x],
.pntr-progress-row[b-iua5l1k78x] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pntr-language-icon[b-iua5l1k78x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--text-on-dark);
}

.pntr-title[b-iua5l1k78x] { margin: 0; color: var(--text-strong); font-family: var(--font-heading); font-size: 16px; font-weight: 600; }
.pntr-language-code[b-iua5l1k78x],
.pntr-muted[b-iua5l1k78x] { color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }

.pntr-meta-grid[b-iua5l1k78x],
.pntr-translation-summary[b-iua5l1k78x] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.pntr-translation-summary[b-iua5l1k78x] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pntr-meta-item[b-iua5l1k78x] { display: flex; min-width: 0; flex-direction: column; gap: var(--space-1); color: var(--text-body); font-size: var(--text-sm); }
.pntr-meta-item--wide[b-iua5l1k78x] { grid-column: span 1; }
.pntr-translation-card[b-iua5l1k78x] { margin-top: var(--space-4); }
.pntr-progress-row[b-iua5l1k78x] { margin: var(--space-3) 0; flex-wrap: wrap; }

.pntr-content-scroll[b-iua5l1k78x] {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background: var(--bg-subtle);
    margin-top: var(--space-3);
}

.pntr-section[b-iua5l1k78x] {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-left: 4px solid var(--pntr-section-color, var(--accent));
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
}

.pntr-section:last-child[b-iua5l1k78x] {
    margin-bottom: 0;
}

.pntr-section__title[b-iua5l1k78x] {
    display: flex;
    align-items: center;
    color: var(--pntr-section-color, var(--accent));
    margin-bottom: var(--space-2);
}

.pntr-section__icon[b-iua5l1k78x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background-color: var(--pntr-section-color, var(--accent));
    color: var(--text-on-dark);
    font-size: 0.75rem;
    margin-right: var(--space-2);
}

.pntr-section__content[b-iua5l1k78x] {
    font-size: 0.875rem;
}

.pntr-modal-section[b-iua5l1k78x] {
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--pntr-section-color, var(--accent));
    border-radius: var(--radius-md);
}

.pntr-modal-section__head[b-iua5l1k78x] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.pntr-modal-field[b-iua5l1k78x],
.pntr-translation-column[b-iua5l1k78x] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-2);
}

.pntr-modal-field[b-iua5l1k78x] {
    margin-top: var(--space-4);
}

.pntr-field-meta[b-iua5l1k78x] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.pntr-field-meta--end[b-iua5l1k78x] {
    justify-content: flex-end;
}

.pntr-modal-divider[b-iua5l1k78x] {
    height: 1px;
    margin: var(--space-5) 0;
    background: var(--border-subtle);
}

.pntr-modal-heading[b-iua5l1k78x] {
    margin: 0 0 var(--space-3);
    color: var(--text-strong);
    font-size: var(--text-base);
    font-weight: 600;
}

.pntr-translation-editor-grid[b-iua5l1k78x] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.pntr-column-label[b-iua5l1k78x] {
    color: var(--text-strong);
    font-size: var(--text-sm);
    font-weight: 600;
}

.pntr-modal-original[b-iua5l1k78x] {
    max-height: 300px;
    overflow-y: auto;
    font-size: 0.85rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    background: var(--bg-subtle);
}

@media (max-width: 767.98px) {
    .pntr-meta-grid[b-iua5l1k78x],
    .pntr-translation-summary[b-iua5l1k78x],
    .pntr-translation-editor-grid[b-iua5l1k78x] { grid-template-columns: minmax(0, 1fr); }
}
/* _content/BlazorFrontend/Pages/Compliance/PrivacyNotices/Versions.razor.rz.scp.css */
.pn-page[b-xolp0oa2ws] { width: 100%; min-width: 0; }
.pn-page-body[b-xolp0oa2ws] { padding-top: var(--space-4); }

.pn-skeleton[b-xolp0oa2ws] { display: flex; flex-direction: column; gap: var(--space-3); }
.pn-skeleton-row[b-xolp0oa2ws] { width: 100%; height: 96px; }

.pnv-version-cell[b-xolp0oa2ws] { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pnv-version-badge[b-xolp0oa2ws] { color: var(--text-strong); font-weight: 700; font-variant-numeric: tabular-nums; }
.pnv-current-chip[b-xolp0oa2ws] { flex: 0 0 auto; }
.pnv-changelog[b-xolp0oa2ws] {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-muted);
    font-size: var(--text-sm);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.pnv-changelog--empty[b-xolp0oa2ws] { color: var(--text-subtle); font-style: italic; }
.pnv-row-actions[b-xolp0oa2ws] { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
/* _content/BlazorFrontend/Pages/Compliance/PrivacyNotices/View.razor.rz.scp.css */
.pnvw-page[b-fjsls8d00a] { width: 100%; min-width: 0; }
.pnvw-body[b-fjsls8d00a] { padding-top: var(--space-4); }

.pn-skeleton[b-fjsls8d00a] { display: flex; flex-direction: column; gap: var(--space-3); }
.pn-skeleton-row[b-fjsls8d00a] { width: 100%; height: 96px; }

.pnvw-header-meta[b-fjsls8d00a] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.pnvw-grid[b-fjsls8d00a] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: start;
    gap: var(--space-3);
}

.pnvw-col-main[b-fjsls8d00a],
.pnvw-col-side[b-fjsls8d00a] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-3);
}

.pnvw-content-stack[b-fjsls8d00a] { min-width: 0; }

.pnvw-activity-section[b-fjsls8d00a] {
    margin-top: var(--space-3);
}

.pnvw-row-actions[b-fjsls8d00a],
.pnvw-section-meta[b-fjsls8d00a] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    flex-wrap: wrap;
}

/* Page composition only: DsAccordion owns disclosure, focus and surface states. */
.pnvw-section-shell[b-fjsls8d00a] {
    min-width: 0;
}

.pnvw-section-heading[b-fjsls8d00a] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.pnvw-section-title[b-fjsls8d00a] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pnvw-section-meta[b-fjsls8d00a] {
    flex: 0 1 auto;
    max-width: 40%;
}

.pnvw-section-icon[b-fjsls8d00a] {
    display: inline-grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--pnvw-section-color, var(--accent)) 14%, transparent);
    color: var(--pnvw-section-color, var(--accent));
}

.pnvw-section-content[b-fjsls8d00a] {
    max-width: 640px;
    margin-inline: auto;
    color: var(--text-body);
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.pnvw-section-content[b-fjsls8d00a]  > :first-child {
    margin-top: 0;
}

.pnvw-section-content[b-fjsls8d00a]  > :last-child {
    margin-bottom: 0;
}

.pnvw-section-content[b-fjsls8d00a]  h1,
.pnvw-section-content[b-fjsls8d00a]  h2,
.pnvw-section-content[b-fjsls8d00a]  h3,
.pnvw-section-content[b-fjsls8d00a]  h4,
.pnvw-section-content[b-fjsls8d00a]  h5,
.pnvw-section-content[b-fjsls8d00a]  h6 {
    color: var(--text-strong);
    font-family: var(--font-heading);
    line-height: 1.35;
}

.pnvw-section-content[b-fjsls8d00a]  a {
    color: var(--accent);
}

.pnvw-section-content[b-fjsls8d00a]  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.pnvw-section-content[b-fjsls8d00a]  img,
.pnvw-section-content[b-fjsls8d00a]  video {
    max-width: 100%;
    height: auto;
}

.pnvw-section-content[b-fjsls8d00a]  pre {
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pnvw-info-row[b-fjsls8d00a] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    min-width: 0;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.pnvw-info-row--full[b-fjsls8d00a] { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }

.pnvw-info-row:first-child[b-fjsls8d00a] {
    padding-top: 0;
}

.pnvw-info-row:last-child[b-fjsls8d00a] {
    padding-bottom: 0;
    border-bottom: 0;
}

.pnvw-info-label[b-fjsls8d00a] {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 500;
}

.pnvw-info-value[b-fjsls8d00a] {
    min-width: 0;
    color: var(--text-strong);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.pnvw-version-cell[b-fjsls8d00a] { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pnvw-version-badge[b-fjsls8d00a] { color: var(--text-strong); font-weight: 700; font-variant-numeric: tabular-nums; }
.pnvw-versions-footer[b-fjsls8d00a] { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); color: var(--text-muted); font-size: var(--text-xs); }

.pnvw-info-list[b-fjsls8d00a],
.pnvw-action-stack[b-fjsls8d00a] { display: flex; flex-direction: column; }
.pnvw-action-stack[b-fjsls8d00a] { gap: var(--space-2); }
.pnvw-info-id[b-fjsls8d00a] { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; }
.pnvw-lang-list[b-fjsls8d00a] { display: flex; gap: var(--space-1); flex-wrap: wrap; }

.pn-modal-actions[b-fjsls8d00a] { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
.pnvw-embed-language[b-fjsls8d00a] { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.pnvw-embed-lang-row[b-fjsls8d00a] { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.pnvw-embed-content[b-fjsls8d00a] { display: flex; flex-direction: column; gap: var(--space-3); }
.pnvw-embed-description[b-fjsls8d00a] { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.pnvw-embed-row[b-fjsls8d00a] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.pnvw-embed-label[b-fjsls8d00a] { color: var(--text-strong); font-weight: 600; }
.pnvw-embed-pre[b-fjsls8d00a] { max-height: 200px; overflow: auto; margin: 0; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--text-body); font-family: var(--font-mono); font-size: var(--text-xs); }
.pnvw-embed-loading[b-fjsls8d00a] { display: flex; justify-content: center; padding: var(--space-6) 0; color: var(--text-muted); }

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

@media (max-width: 639.98px) {
    .pnvw-section-heading[b-fjsls8d00a] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--space-2);
    }

    .pnvw-section-meta[b-fjsls8d00a] {
        grid-column: 2;
        max-width: none;
        justify-content: flex-start;
    }
}
/* _content/BlazorFrontend/Pages/Compliance/PrivacyNotices/ViewTemplate.razor.rz.scp.css */
.pn-page[b-jereerqezn] { width: 100%; min-width: 0; }
.pn-page-body[b-jereerqezn] { padding-top: var(--space-4); }

/* Hiển thị section của Privacy Notice Template ở trang ViewTemplate.
 * Tránh inline style cố định: chỉ dynamic color được pass qua CSS variable --section-color.
 */

.pn-skeleton[b-jereerqezn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}


.pn-skeleton-row[b-jereerqezn] {
    height: 96px;
    width: 100%;
}

.pnv-content-fallback[b-jereerqezn] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background: var(--bg-subtle);
}

.template-section[b-jereerqezn] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: var(--bg-subtle);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--section-color, var(--accent));
}

.template-section__title[b-jereerqezn] {
    color: var(--section-color, var(--accent));
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.template-section__icon[b-jereerqezn] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: var(--section-color, var(--accent));
    color: var(--text-on-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
}

.pnt-view-grid[b-jereerqezn] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; gap: var(--space-5); }
.pnt-view-main[b-jereerqezn] { min-width: 0; }
.pnt-view-side[b-jereerqezn] { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }
.pnt-detail-list[b-jereerqezn] { display: flex; flex-direction: column; gap: var(--space-3); }
.pnt-detail-row[b-jereerqezn] { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr); align-items: start; gap: var(--space-3); color: var(--text-body); font-size: var(--text-sm); }
.pnt-detail-row strong[b-jereerqezn] { color: var(--text-muted); font-weight: 600; }
.pnt-content-title[b-jereerqezn] { margin: 0 0 var(--space-4); color: var(--text-strong); font-family: var(--font-heading); font-size: var(--text-h3); }

@media (max-width: 991.98px) { .pnt-view-grid[b-jereerqezn] { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) { .pnt-detail-row[b-jereerqezn] { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }
/* _content/BlazorFrontend/Pages/Compliance/PrivacyNotices/ViewVersion.razor.rz.scp.css */
.pn-page[b-pl1a5tf5by] { width: 100%; min-width: 0; }
.pn-page-body[b-pl1a5tf5by] { padding-top: var(--space-4); }

/* ADR-029 — structured section render for a historical privacy-notice version.
   All colors/spacing use semantic design tokens;
   parity with View.razor.css. The per-section accent is injected as --vv-section-accent
   (a section's stored HeaderColor) so we never hardcode a hex value here. */

.pn-skeleton[b-pl1a5tf5by] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}


.pn-skeleton-row[b-pl1a5tf5by] {
    height: 96px;
    width: 100%;
}

.vv-header[b-pl1a5tf5by] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.vv-grid[b-pl1a5tf5by] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; gap: var(--space-5); }
.vv-main[b-pl1a5tf5by] { min-width: 0; }
.vv-side[b-pl1a5tf5by] { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }
.vv-title[b-pl1a5tf5by] { margin: 0 0 var(--space-1); color: var(--text-strong); font-family: var(--font-heading); font-size: 26px; line-height: 1.25; }
.vv-muted[b-pl1a5tf5by] { color: var(--text-muted); font-size: var(--text-sm); }
.vv-badges[b-pl1a5tf5by] { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.vv-meta-grid[b-pl1a5tf5by] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); color: var(--text-muted); font-size: var(--text-sm); }
.vv-meta-item[b-pl1a5tf5by] { min-width: 0; overflow-wrap: anywhere; }
.vv-action-stack[b-pl1a5tf5by] { display: flex; flex-direction: column; gap: var(--space-2); }

.privacy-notice-sections[b-pl1a5tf5by] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.vv-section[b-pl1a5tf5by] {
    border-left: 4px solid var(--vv-section-accent, var(--accent));
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.vv-section__title[b-pl1a5tf5by] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    color: var(--text-strong);
}

.vv-section__icon[b-pl1a5tf5by] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background-color: var(--vv-section-accent, var(--accent));
    color: var(--text-on-dark);
    font-size: 0.875rem;
}

@media (max-width: 991.98px) { .vv-grid[b-pl1a5tf5by] { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) { .vv-meta-grid[b-pl1a5tf5by] { grid-template-columns: minmax(0, 1fr); } }
/* _content/BlazorFrontend/Pages/Compliance/UniversalConsent/Analytics.razor.rz.scp.css */
.uc-page[b-0gl869lm5v] { width: 100%; min-width: 0; }
.uc-page-body[b-0gl869lm5v] { min-width: 0; padding-top: var(--space-4); }
.uca-period-toolbar[b-0gl869lm5v] { display: flex; justify-content: flex-end; margin-bottom: var(--space-4); }

/*
 * Analytics.razor.css — Scoped styles for /privacy/universal-consent/analytics.
 *
 * Rules:
 *   - All colors via --dp-* tokens only (no hardcoded hex/rgb).
 *   - No inline style="" except data-driven meter widths inside AppleMeter.
 *   - Responsive: 1-col @ <=767px, 2-col @ 768-1279px, 4-col @ >=1280px.
 *   - WCAG 2.2 AA via token system.
 */

/* ─── Purpose distribution list (left panel of Section 2) ───────────────── */

.uca-purpose-list[b-0gl869lm5v] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.uca-purpose-row[b-0gl869lm5v] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.uca-purpose-row__head[b-0gl869lm5v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

.uca-purpose-name[b-0gl869lm5v] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.uca-purpose-percentage[b-0gl869lm5v] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    flex-shrink: 0;
}

.uca-purpose-meter[b-0gl869lm5v] {
    width: 100%;
}

.uca-purpose-meta[b-0gl869lm5v] {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Purpose-breakdown cell alignment used to live here as `.uca-text-center`; the table is now a
   DsDataTable and the three metric columns declare `Align="center"`, which emits the design
   system's own `.ds-table-cell--center` on both the header and the body cells (ADR-046 W2).
   The rule is removed rather than left behind — nothing references it any more. */

/* ─── Collection points performance grid (Section 3) ────────────────────── */

.uca-collection-grid[b-0gl869lm5v] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.uca-collection-card[b-0gl869lm5v] {
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: transform 150ms var(--ease-apple, ease),
                box-shadow 150ms var(--ease-apple, ease);
}

.uca-collection-card:hover[b-0gl869lm5v] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-l1);
}

.uca-collection-card__head[b-0gl869lm5v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}

.uca-collection-card__name[b-0gl869lm5v] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 65%;
}

.uca-collection-card__meter[b-0gl869lm5v] {
    width: 100%;
}

.uca-collection-card__stats[b-0gl869lm5v] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    font-size: 0.75rem;
}

.uca-stat[b-0gl869lm5v] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.uca-stat--ok[b-0gl869lm5v] {
    color: var(--success);
    font-weight: 600;
}

.uca-stat--bad[b-0gl869lm5v] {
    color: var(--danger);
    font-weight: 600;
}

.uca-stat--total[b-0gl869lm5v] {
    color: var(--text-muted);
    margin-left: auto;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1279px) {
    .uca-collection-grid[b-0gl869lm5v] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .uca-collection-grid[b-0gl869lm5v] {
        grid-template-columns: 1fr;
    }

    .uca-collection-card__stats[b-0gl869lm5v] {
        font-size: 0.7rem;
    }

    .uca-stat--total[b-0gl869lm5v] {
        margin-left: 0;
        flex-basis: 100%;
    }
}

/* The page stack owns section spacing; do not add the KPI grid margin again. */
.uc-page-body[b-0gl869lm5v]  .uc-statgrid { margin-bottom: 0; }

.uc-period-selector[b-0gl869lm5v] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* _content/BlazorFrontend/Pages/Compliance/UniversalConsent/ApiKeysOverview.razor.rz.scp.css */
.uc-page[b-6629ujlgto] { width: 100%; min-width: 0; }
.uc-page-body[b-6629ujlgto] { min-width: 0; padding-top: var(--space-4); }

/*
 * ApiKeysOverview.razor.css
 * Scoped styles for /compliance/universal-consent/api-keys
 *
 * Rules:
 *   - All colors via --dp-* tokens only (no hardcoded hex/rgb).
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA: text contrast ratios met via token system.
 */

/* The .ucak-skeleton block that stood here was deleted with the markup that used it (ADR-066 D6:
   a screen's own skeleton CSS goes in the same diff as the screen, so no orphan rules are left
   behind). The loading geometry now comes from the table itself — .ds-table-ph in
   DsDataTable.razor.css. */

/* Match the Purposes/CollectionPoints registry frame: title + subtitle only,
   followed by tabs and the same 16px content gap. DsPageHeader owns typography. */
.ucak-registry-page[b-6629ujlgto] { width: 100%; }

/* ─── Table cells ────────────────────────────────────────────────────────────── */

.ucak-name[b-6629ujlgto] {
    font-weight: 600;
    color: var(--text-strong);
}

.ucak-cp-name[b-6629ujlgto] {
    color: var(--text-muted);
}

.ucak-keyid[b-6629ujlgto] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: var(--text-sm);
    color: var(--text-strong);
}

.uc-row-actions[b-6629ujlgto] { display: flex; align-items: center; justify-content: center; }

/* REQ-1 (UX F-5): with the 4th hub tab the tab row scrolls within its own strip on narrow
   screens instead of wrapping (precedent: SystemList.razor.css .dm-hub-tabs). */
.ucak-header-tabs[b-6629ujlgto]  .ds-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
}

.ucak-header-tabs[b-6629ujlgto]  .ds-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}
/* _content/BlazorFrontend/Pages/Compliance/UniversalConsent/CcpaPortal.razor.rz.scp.css */
.uc-page[b-of363c1ugt] { width: 100%; min-width: 0; }
.uc-page-body[b-of363c1ugt] { min-width: 0; padding-top: var(--space-4); }

.uc-compliance-note[b-of363c1ugt] { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: var(--text-sm); }
/* _content/BlazorFrontend/Pages/Compliance/UniversalConsent/CollectionPoints.razor.rz.scp.css */
.uc-page[b-6vvaougtgz] { width: 100%; min-width: 0; }
.uc-page-body[b-6vvaougtgz] { min-width: 0; padding-top: var(--space-4); }

/* DATA UI frame 381:33049 — page composition only; controls live in Datanomics.Ds. */

.cp-registry-page[b-6vvaougtgz],
.cp-table-area[b-6vvaougtgz],
.cp-table[b-6vvaougtgz] {
    width: 100%;
}


.cp-table-toolbar-wrap[b-6vvaougtgz]  .ds-filterbar-search {
    flex: 0 1 calc(50% - 6px);
}

.cp-table-actions[b-6vvaougtgz] {
    display: flex;
    flex: 1 1 calc(50% - 6px);
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* Figma table/điểm thu thập: 1140px shell, 1138px row, 56px header/rows.
   Fixed columns total 870px; the remaining 268px belongs to the name column. */
.cp-table[b-6vvaougtgz]  .cp-col--select { width: 40px; }
.cp-table[b-6vvaougtgz]  .cp-col--type { width: 165px; }
.cp-table[b-6vvaougtgz]  .cp-col--purposes { width: 140px; }
.cp-table[b-6vvaougtgz]  .cp-col--api-keys { width: 110px; }
.cp-table[b-6vvaougtgz]  .cp-col--created { width: 140px; }
.cp-table[b-6vvaougtgz]  .cp-col--status { width: 140px; }
.cp-table[b-6vvaougtgz]  .cp-col--actions { width: 135px; }

.cp-table[b-6vvaougtgz]  .cp-col--select,
.cp-purpose-table[b-6vvaougtgz]  .cp-purpose-col--select {
    padding-inline: var(--space-3);
}

.cp-row-select[b-6vvaougtgz],
.cp-row-actions[b-6vvaougtgz] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-name-info[b-6vvaougtgz],
.cp-purpose-name-cell[b-6vvaougtgz] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.cp-name-primary[b-6vvaougtgz],
.cp-purpose-name-primary[b-6vvaougtgz] {
    overflow: hidden;
    color: var(--color-text-primary, var(--text-body));
    font: 500 14px/20px var(--font-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-url-link[b-6vvaougtgz],
.cp-purpose-name-sub[b-6vvaougtgz] {
    overflow: hidden;
    color: var(--color-text-secondary, var(--text-muted));
    font: 400 12px/18px var(--font-body);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-url-link:hover[b-6vvaougtgz] {
    color: var(--color-text-brand, var(--primary));
    text-decoration: underline;
}

.cp-url-link:focus-visible[b-6vvaougtgz] {
    border-radius: var(--radius-xs);
}

.cp-purposes-text[b-6vvaougtgz],
.cp-count-cell[b-6vvaougtgz],
.cp-empty-cell[b-6vvaougtgz],
.cp-created-cell[b-6vvaougtgz] {
    color: var(--color-text-secondary, var(--text-muted));
    font: 400 12px/18px var(--font-body);
    white-space: nowrap;
}

.cp-pagination-wrap[b-6vvaougtgz] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

/* Create side panel: Figma Custom frame 1140x724 with 24px horizontal padding and 16px rhythm. */
.cp-create-form[b-6vvaougtgz] {
    display: grid;
    gap: 16px;
}

.cp-create-fields-row[b-6vvaougtgz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cp-purpose-selection[b-6vvaougtgz] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.cp-purpose-selection-label[b-6vvaougtgz] {
    color: var(--color-text-primary, var(--text-strong));
    font: 500 16px/24px var(--font-body);
}

.cp-purpose-table[b-6vvaougtgz] {
    min-width: 0;
}

/* Figma embedded purpose table: 1092px shell / 1090px row. The bounded columns
   total 525px and leave exactly 565px for Purpose at the reference width. */
.cp-purpose-table[b-6vvaougtgz]  .cp-purpose-col--select { width: 40px; }
.cp-purpose-table[b-6vvaougtgz]  .cp-purpose-col--legal { width: 165px; }
.cp-purpose-table[b-6vvaougtgz]  .cp-purpose-col--retention { width: 160px; }
.cp-purpose-table[b-6vvaougtgz]  .cp-purpose-col--created { width: 160px; }

/* REQ-1 (UX spec §1.4/§2): the legal-basis cell stacks label + re-selection badge; badges in this
   column wrap, and a long custom name is clamped to 2 lines (full name in the cell's title). */
.cp-legal-cell[b-6vvaougtgz] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    min-width: 0;
}

.cp-legal-cell[b-6vvaougtgz]  .ds-badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: start;
}

.cp-legal-name[b-6vvaougtgz] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* The existing edit dialog still uses this compact picker. */
.cp-purpose-picker[b-6vvaougtgz] {
    max-height: 200px;
    overflow-y: auto;
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.cp-purpose-desc[b-6vvaougtgz] {
    display: block;
    color: var(--color-text-secondary, var(--text-muted));
    font: 400 12px/18px var(--font-body);
}

/* API-key secret modal, outside this Figma node but still part of the page's existing flow. */
.cp-apikey-fields[b-6vvaougtgz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.cp-apikey-field[b-6vvaougtgz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cp-apikey-label[b-6vvaougtgz] {
    color: var(--color-text-primary, var(--text-strong));
    font: 600 14px/20px var(--font-body);
}

.cp-apikey-value[b-6vvaougtgz],
.cp-apikey-hint[b-6vvaougtgz] {
    color: var(--color-text-secondary, var(--text-muted));
    font: 400 12px/18px var(--font-body);
}

.cp-apikey-copy-row[b-6vvaougtgz] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.cp-apikey-input[b-6vvaougtgz],
.cp-apikey-secret[b-6vvaougtgz] {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-inset);
    color: var(--color-text-primary, var(--text-body));
    font: 400 13px/20px var(--font-mono, monospace);
}

.cp-apikey-secret[b-6vvaougtgz] { resize: vertical; }

.cp-code-block[b-6vvaougtgz] {
    overflow-x: auto;
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-dark, #1e1e2e);
    color: var(--text-on-dark, #e2e8f0);
    font: 400 12px/1.6 var(--font-mono, monospace);
    white-space: pre;
}

.cp-modal-actions[b-6vvaougtgz] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

@media (max-width: 767.98px) {
    .cp-table-toolbar-wrap[b-6vvaougtgz]  .ds-filterbar-search,
    .cp-table-actions[b-6vvaougtgz] {
        flex-basis: 100%;
    }

    .cp-table-actions[b-6vvaougtgz] {
        justify-content: stretch;
    }

    .cp-table-actions[b-6vvaougtgz]  .ds-btn {
        flex: 1;
    }

    .cp-create-fields-row[b-6vvaougtgz] {
        grid-template-columns: 1fr;
    }

    .cp-url-link[b-6vvaougtgz],
    .cp-purpose-name-sub[b-6vvaougtgz] {
        white-space: normal;
    }

    .cp-apikey-copy-row[b-6vvaougtgz] {
        flex-direction: column;
    }
}

.cp-table-actions[b-6vvaougtgz] { flex-wrap: wrap; min-width: 0; }

/* REQ-1 (UX F-5): with the 4th hub tab the tab row scrolls within its own strip on narrow
   screens instead of wrapping (precedent: SystemList.razor.css .dm-hub-tabs). */
.cp-header-tabs[b-6vvaougtgz]  .ds-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
}

.cp-header-tabs[b-6vvaougtgz]  .ds-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}
/* _content/BlazorFrontend/Pages/Compliance/UniversalConsent/ConsentRecords.razor.rz.scp.css */
.uc-page[b-a2cjljmzy0] { width: 100%; min-width: 0; }
.uc-page-body[b-a2cjljmzy0] { min-width: 0; padding-top: var(--space-4); }

/*
 * ConsentRecords.razor.css
 * Scoped styles for /compliance/universal-consent/records
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

/* Actions column — two buttons, not the three --ds-table-col-actions is sized for.
   Width = N × 32px button + (N − 1) × 6px gap + 2 × 6px compact cell padding
         = 2 × 32 + 1 × 6 + 12 = 94px, the same value `.dp-grid-actions-2` bound before the
   migration (data-grid.css) and the same 94px measured on this screen at 1280px
   (adr046-w4-t13/before.json). Rebinding the token rather than writing 94px on the column keeps
   the button geometry in one place; the custom property inherits through the component boundary,
   the class does not — hence ::deep, since the <th>/<td> are rendered by DsDataTable and carry
   its scope id, not this page's. */
.cr-records-table[b-a2cjljmzy0] {
    --ds-table-col-actions: 135px;
}

/* Desktop/tablet only — the same media gate `.dp-grid .dp-col--actions` sits behind
   (data-grid.css). Column widths are a desktop concern: below 768px DsDataTable stacks each row
   into a card and releases the steps with `.ds-table .ds-table-td { width: auto }`. This rule is
   more specific than that reset AND lives in a bundle ordered after it, so without the gate it
   pins the actions card line at 94px and clips the two buttons — measured before the gate was
   added (after.json 375px: 94px wide and overflowing, vs 273.5px for every other line). */
@media (min-width: 768px) {
    .cr-records-table[b-a2cjljmzy0]  .cr-col--actions {
        width: var(--ds-table-col-actions);
    }
}

.cr-empty-cell[b-a2cjljmzy0] {
    color: var(--text-muted);
    font-style: italic;
    font-size: var(--text-sm);
}

.cr-ip-code[b-a2cjljmzy0] {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    color: var(--accent);
    background: var(--bg-subtle);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}
.cr-pagination-wrap[b-a2cjljmzy0] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

/* The page stack owns section spacing; do not add the KPI grid margin again. */
.uc-page-body[b-a2cjljmzy0]  .uc-statgrid { margin-bottom: 0; }

.uc-row-actions[b-a2cjljmzy0] { display: flex; align-items: center; justify-content: center; }
/* _content/BlazorFrontend/Pages/Compliance/UniversalConsent/GdprConsentManagement.razor.rz.scp.css */
.uc-page[b-vbr4ndgww0] { width: 100%; min-width: 0; }
.uc-page-body[b-vbr4ndgww0] { min-width: 0; padding-top: var(--space-4); }

/*
 * GdprConsentManagement.razor.css
 * Scoped styles for /privacy/gdpr-consent (Wave 4 Batch 4).
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

/* ─── Page wrapper ───────────────────────────────────────────────────────── */

.gcm-page[b-vbr4ndgww0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ─── Subject summary ────────────────────────────────────────────────────── */

.gcm-subject-grid[b-vbr4ndgww0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
}

.gcm-subject-info[b-vbr4ndgww0] {
    min-width: 0;
}

.gcm-subject-alert[b-vbr4ndgww0] {
    min-width: 0;
}

/* ─── Info / status lists ────────────────────────────────────────────────── */

.gcm-info-list[b-vbr4ndgww0] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gcm-info-row[b-vbr4ndgww0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.gcm-info-row:last-child[b-vbr4ndgww0] {
    border-bottom: none;
}

.gcm-info-label[b-vbr4ndgww0] {
    font-size: var(--text-base);
    color: var(--text-muted);
    font-weight: 500;
}

.gcm-info-value[b-vbr4ndgww0] {
    font-size: var(--text-base);
    color: var(--text-strong);
    font-weight: 600;
    text-align: right;
    word-break: break-all;
}

.gcm-empty-text[b-vbr4ndgww0] {
    margin: 0;
    color: var(--text-subtle);
    font-style: italic;
}

/* ─── Status grid (Status + Rights) ──────────────────────────────────────── */

.gcm-status-grid[b-vbr4ndgww0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
}

/* ─── Rights list ────────────────────────────────────────────────────────── */

.gcm-rights-list[b-vbr4ndgww0] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-base);
}

.gcm-rights-list li[b-vbr4ndgww0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-strong);
}

.gcm-rights-list i[b-vbr4ndgww0] {
    color: var(--success);
    font-size: 0.75rem;
}

/* ─── Purpose grid ───────────────────────────────────────────────────────── */

.gcm-purpose-grid[b-vbr4ndgww0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}

.gcm-purpose-card[b-vbr4ndgww0] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gcm-purpose-card--active[b-vbr4ndgww0] {
    border-color: var(--success);
    background: var(--success-soft, var(--bg-surface));
}

.gcm-purpose-switch[b-vbr4ndgww0] {
    margin: 0;
}

.gcm-purpose-label[b-vbr4ndgww0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-weight: 600;
    color: var(--text-strong);
}

.gcm-purpose-desc[b-vbr4ndgww0] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
}

.gcm-purpose-meta[b-vbr4ndgww0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: var(--text-sm);
}

.gcm-purpose-meta-label[b-vbr4ndgww0] {
    color: var(--text-subtle);
    font-weight: 500;
}

/* ─── Form actions ───────────────────────────────────────────────────────── */

.gcm-form-actions[b-vbr4ndgww0] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

/* ─── Withdraw block ─────────────────────────────────────────────────────── */

.gcm-withdraw-desc[b-vbr4ndgww0] {
    color: var(--text-muted);
    margin: 0 0 var(--space-3) 0;
    font-size: var(--text-base);
}

.gcm-withdraw-actions[b-vbr4ndgww0] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ─── Modal content ──────────────────────────────────────────────────────── */

.gcm-modal-field[b-vbr4ndgww0] {
    margin-bottom: var(--space-3);
}

.gcm-modal-actions[b-vbr4ndgww0] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

.gcm-required[b-vbr4ndgww0] {
    color: var(--danger);
    margin-left: 2px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .gcm-subject-grid[b-vbr4ndgww0],
    .gcm-status-grid[b-vbr4ndgww0] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .gcm-form-actions[b-vbr4ndgww0],
    .gcm-modal-actions[b-vbr4ndgww0] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
.gdpr-history-pagination[b-vbr4ndgww0] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}
/* _content/BlazorFrontend/Pages/Compliance/UniversalConsent/GdprOptInConfiguration.razor.rz.scp.css */
.uc-page[b-a31i67wh8n] { width: 100%; min-width: 0; }
.uc-page-body[b-a31i67wh8n] { min-width: 0; padding-top: var(--space-4); }
.goic-form[b-a31i67wh8n] { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/*
 * GdprOptInConfiguration.razor.css
 * Scoped styles for /privacy/gdpr-opt-in-config (Wave 4 Batch 4).
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

/* ─── Page wrapper ───────────────────────────────────────────────────────── */

.goic-page[b-a31i67wh8n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ─── Top grid (domain + status) ─────────────────────────────────────────── */

.goic-grid[b-a31i67wh8n] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
}

.goic-section[b-a31i67wh8n] {
    margin-top: 0;
}

.goic-field[b-a31i67wh8n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* ─── Status list ────────────────────────────────────────────────────────── */

.goic-status-list[b-a31i67wh8n] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.goic-status-row[b-a31i67wh8n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.goic-status-row:last-child[b-a31i67wh8n] {
    border-bottom: none;
}

.goic-status-label[b-a31i67wh8n] {
    font-size: var(--text-base);
    color: var(--text-muted);
    font-weight: 500;
}

.goic-status-value[b-a31i67wh8n] {
    font-size: var(--text-base);
    color: var(--text-strong);
    font-weight: 600;
}

.goic-status-empty[b-a31i67wh8n] {
    margin: 0;
    color: var(--text-subtle);
    font-size: var(--text-base);
    font-style: italic;
}

/* ─── Form sections ──────────────────────────────────────────────────────── */

.goic-form-grid[b-a31i67wh8n] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
}

.goic-form-col[b-a31i67wh8n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.goic-switch[b-a31i67wh8n] {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.goic-switch:last-child[b-a31i67wh8n] {
    border-bottom: none;
}

/* ─── Compliance preview ─────────────────────────────────────────────────── */

.goic-preview-grid[b-a31i67wh8n] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-4);
    align-items: start;
}

.goic-preview-subhead[b-a31i67wh8n] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-strong);
    margin: 0 0 var(--space-2) 0;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.goic-preview-subhead i[b-a31i67wh8n] {
    color: var(--accent);
}

.goic-preview-desc[b-a31i67wh8n] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: var(--space-2) 0 0 0;
}

.goic-score-row[b-a31i67wh8n] {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.goic-score-value[b-a31i67wh8n] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: -0.02em;
    line-height: 1;
}

.goic-chip-row[b-a31i67wh8n] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* ─── Action bar ─────────────────────────────────────────────────────────── */

.goic-actions[b-a31i67wh8n] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .goic-grid[b-a31i67wh8n],
    .goic-form-grid[b-a31i67wh8n],
    .goic-preview-grid[b-a31i67wh8n] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .goic-actions[b-a31i67wh8n] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/BlazorFrontend/Pages/Compliance/UniversalConsent/LegalBasisSettings.razor.rz.scp.css */
/*
 * LegalBasisSettings.razor.css — REQ-1 Applicable Law settings (UX spec v1.3 §1.1, §2).
 * Layout only: colours come from --dp-* tokens or the Ds components' own tones. No inline styles.
 */
.lb-page[b-sdwahj7k93] { width: 100%; min-width: 0; }

.lb-panels[b-sdwahj7k93] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.lb-panels[b-sdwahj7k93]  .lb-law-note { margin-top: var(--space-3); }

.lb-law-actions[b-sdwahj7k93] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.lb-panels[b-sdwahj7k93]  .lb-limit-alert { margin: var(--space-4); }

.lb-panels[b-sdwahj7k93]  .lb-toolbar { padding: var(--space-4); }
.lb-panels[b-sdwahj7k93]  .lb-toolbar .ds-filterbar-search { flex: 0 1 calc(50% - 6px); }

/* T15 (UX §1.1b): neutral minimum-length guidance under the search box, aligned with it.
   UX-R5: it sits --space-1 below the input; the filter bar gives up its own bottom spacing while the hint shows,
   and the hint carries that spacing instead, so the gap to the table is unchanged. */
.lb-panels[b-sdwahj7k93]  .lb-toolbar.lb-toolbar--hinted {
    padding-bottom: 0;
    margin-bottom: 0;
}

.lb-search-hint[b-sdwahj7k93] {
    margin: var(--space-1) 0 var(--space-4);
    padding: 0 var(--space-4) var(--space-4);
    color: var(--dp-text-muted);
    font-size: 12px; /* the Ds field-hint size (.ds-field-hint); --font-size-xs is re-scaled by the host */
}

/* UX-R4: the status element is always rendered; empty, it takes no space. */
.lb-search-hint:empty[b-sdwahj7k93] {
    margin: 0;
    padding: 0;
}

/* Catalog table: fixed widths as Purposes.razor.css; Name absorbs the rest. */
.lb-table[b-sdwahj7k93]  .lb-col--consent { width: 200px; }
.lb-table[b-sdwahj7k93]  .lb-col--status { width: 160px; }
.lb-table[b-sdwahj7k93]  .lb-col--actions { width: 135px; }

/* Page / filter change in flight: rows stay on screen, dimmed (r4). Not a colour, so no token. */
.lb-table--busy[b-sdwahj7k93]  tbody {
    opacity: 0.6;
    transition: opacity 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .lb-table--busy[b-sdwahj7k93]  tbody { transition: none; }
}

.lb-name[b-sdwahj7k93] {
    color: var(--dp-text-primary);
    overflow-wrap: anywhere;
}

.lb-consent-cell[b-sdwahj7k93] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.lb-consent-cell[b-sdwahj7k93]  .ds-icon { color: var(--dp-text-muted); }

.lb-row-actions[b-sdwahj7k93] { display: flex; align-items: center; justify-content: center; }

/* Keyset pager (BR-12, UX §1.1a): range text left; page size + Previous/Next right. */
.lb-pager[b-sdwahj7k93] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
}

.lb-pager-range[b-sdwahj7k93] { color: var(--dp-text-muted); }

.lb-pager-controls[b-sdwahj7k93] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* "Per page" sits inline beside its select. */
.lb-pager-controls[b-sdwahj7k93]  .ds-field {
    display: flex;
    flex-direction: row; /* UX-T19-2: Ds .ds-field is a column; "Per page" sits beside its select (§1.1a) */
    align-items: center;
    gap: var(--space-2);
}

.lb-pager-controls[b-sdwahj7k93]  .ds-field-label { margin: 0; }

.lb-pager-buttons[b-sdwahj7k93] {
    display: flex;
    gap: var(--space-2);
}

.lb-modal-fields[b-sdwahj7k93] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 767px) {
    /* Stacked: range text; page size; Previous and Next at equal width in one row (UX §4). */
    .lb-pager[b-sdwahj7k93],
    .lb-pager-controls[b-sdwahj7k93] {
        flex-direction: column;
        align-items: stretch;
    }

    .lb-pager-buttons[b-sdwahj7k93]  .ds-btn { flex: 1 1 0; }

    .lb-panels[b-sdwahj7k93]  .lb-toolbar .ds-filterbar-search { flex: 1 1 100%; }
    .lb-law-actions[b-sdwahj7k93]  .ds-btn { flex: 1 1 0; }

    /* UX-T19-1 (WCAG 1.4.10): the catalog panel head wraps; the title takes its own full-width line and the
       badges + Create wrap below it instead of squeezing the title and clipping Create. */
    .lb-panels[b-sdwahj7k93]  .ds-panel-head { flex-wrap: wrap; }
    .lb-panels[b-sdwahj7k93]  .ds-panel-heading { flex: 1 1 100%; }
    .lb-panels[b-sdwahj7k93]  .ds-panel-actions { flex-wrap: wrap; }
}
/* _content/BlazorFrontend/Pages/Compliance/UniversalConsent/LinkedDevices.razor.rz.scp.css */
.uc-page[b-3ksskgo98r] { width: 100%; min-width: 0; }
.uc-page-body[b-3ksskgo98r] { min-width: 0; padding-top: var(--space-4); }
.uc-modal-actions[b-3ksskgo98r] { display: flex; justify-content: flex-end; margin-top: var(--space-4); }

/*
 * LinkedDevices.razor.css
 * Scoped styles for /compliance/universal-consent/linked-devices
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

/* ─── Search Row ─────────────────────────────────────────────────────────────── */

.ld-search-row[b-3ksskgo98r] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ld-search-input-wrap[b-3ksskgo98r] {
    position: relative;
    display: flex;
    align-items: center;
}

.ld-search-icon[b-3ksskgo98r] {
    position: absolute;
    left: var(--space-3);
    color: var(--text-muted);
    pointer-events: none;
    font-size: 0.85rem;
}

.ld-search-input[b-3ksskgo98r] {
    padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 1.25rem);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-strong);
    font-size: var(--text-base);
    min-width: 220px;
    transition: border-color 150ms var(--ease-apple), background 150ms var(--ease-apple);
}

.ld-search-input:focus[b-3ksskgo98r] {
    outline: var(--focus-ring);
    border-color: var(--accent);
    background: var(--bg-surface);
}

.ld-search-clear[b-3ksskgo98r] {
    position: absolute;
    right: var(--space-2);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 150ms var(--ease-apple);
}

.ld-search-clear:hover[b-3ksskgo98r] {
    color: var(--text-strong);
}

.ld-search-clear:focus-visible[b-3ksskgo98r] {
    outline: var(--focus-ring);
}

/* ─── Table Cells ─────────────────────────────────────────────────────────────── */

.ld-user-cell[b-3ksskgo98r] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ld-user-id[b-3ksskgo98r] {
    font-weight: 600;
    color: var(--text-strong);
    font-size: var(--text-base);
}

.ld-device-name[b-3ksskgo98r] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.ld-device-cell[b-3ksskgo98r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ld-device-id[b-3ksskgo98r] {
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--bg-subtle);
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
    display: inline-block;
}

.ld-status-cell[b-3ksskgo98r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ld-datetime-cell[b-3ksskgo98r] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: var(--text-base);
    color: var(--text-strong);
}

.ld-time[b-3ksskgo98r] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.ld-empty-cell[b-3ksskgo98r] {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ─── Modal ──────────────────────────────────────────────────────────────────── */

/* ─── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .ld-search-input[b-3ksskgo98r] {
        min-width: 160px;
    }
}

/* The page stack owns section spacing; do not add the KPI grid margin again. */
.uc-page-body[b-3ksskgo98r]  .uc-statgrid { margin-bottom: 0; }

.uc-row-actions[b-3ksskgo98r] { display: flex; align-items: center; justify-content: center; }
/* _content/BlazorFrontend/Pages/Compliance/UniversalConsent/PurposeDetail.razor.rz.scp.css */
.uc-page[b-chgtu6fhcn] { width: 100%; min-width: 0; }
.uc-page-body[b-chgtu6fhcn] { min-width: 0; padding-top: var(--space-4); }

/* REQ-1 UX-5: the legal-basis chip and the re-selection badge share one baseline, spaced, wrapping when narrow. */
.pd-legal-basis[b-chgtu6fhcn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
/* _content/BlazorFrontend/Pages/Compliance/UniversalConsent/Purposes.razor.rz.scp.css */
.uc-page[b-swiskzbjs8] { width: 100%; min-width: 0; }
.uc-page-body[b-swiskzbjs8] { min-width: 0; padding-top: var(--space-4); }

/* DATA UI frame `Đồng ý chung/ Mục đích` (362:14629). Component visuals live in
   Datanomics.Ds; this file only owns the page composition and its content-specific columns. */

.pp-registry-page[b-swiskzbjs8] {
    width: 100%;
}


.pp-table-area[b-swiskzbjs8] {
    width: 100%;
}

.pp-table-toolbar[b-swiskzbjs8]  .ds-filterbar-search {
    flex: 0 1 calc(50% - 6px);
}

.pp-table-actions[b-swiskzbjs8] {
    display: flex;
    flex: 1 1 calc(50% - 6px);
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

.pp-table[b-swiskzbjs8] {
    width: 100%;
}

/* Figma `table/mucdich`: 1140px outer frame = 1138px inner row after its 1px border.
   At the reference width the bounded columns total 820px, leaving the Purpose column
   exactly 318px. It stays auto so a collapsed/responsive sidebar gives any released
   width to useful text instead of stretching checkbox/date/status/action columns. */
.pp-table[b-swiskzbjs8]  .pp-col--select { width: 40px; }
.pp-table[b-swiskzbjs8]  .pp-col--legal { width: 165px; }
.pp-table[b-swiskzbjs8]  .pp-col--retention { width: 160px; }
.pp-table[b-swiskzbjs8]  .pp-col--status { width: 160px; }
.pp-table[b-swiskzbjs8]  .pp-col--created { width: 160px; }
.pp-table[b-swiskzbjs8]  .pp-col--actions { width: 135px; }

/* REQ-1 (UX spec §1.4/§2): the legal-basis cell stacks label + re-selection badge; badges in this
   column wrap, and a long custom name is clamped to 2 lines (full name in the cell's title). */
.pp-legal-cell[b-swiskzbjs8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    min-width: 0;
}

.pp-legal-cell[b-swiskzbjs8]  .ds-badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: start;
}

.pp-legal-name[b-swiskzbjs8] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.pp-table[b-swiskzbjs8]  .pp-col--select {
    padding-inline: var(--space-3);
}

.pp-row-select[b-swiskzbjs8],
.pp-row-actions[b-swiskzbjs8] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.purposes-name-cell[b-swiskzbjs8] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.purposes-name-primary[b-swiskzbjs8] {
    overflow: hidden;
    color: var(--color-text-primary, var(--text-body));
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.purposes-name-sub[b-swiskzbjs8] {
    overflow: hidden;
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 12px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.purposes-empty-cell[b-swiskzbjs8],
.purposes-date[b-swiskzbjs8] {
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.pp-pagination-wrap[b-swiskzbjs8] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

@media (max-width: 767.98px) {
    .pp-table-toolbar[b-swiskzbjs8]  .ds-filterbar-search,
    .pp-table-actions[b-swiskzbjs8] {
        flex-basis: 100%;
    }

    .pp-table-actions[b-swiskzbjs8] {
        justify-content: stretch;
    }

    .pp-table-actions[b-swiskzbjs8]  .ds-btn {
        flex: 1;
    }

    .purposes-name-sub[b-swiskzbjs8] {
        white-space: normal;
    }
}

.pp-table-actions[b-swiskzbjs8] { flex-wrap: wrap; min-width: 0; }

/* REQ-1 (UX F-5): with the 4th hub tab the tab row scrolls within its own strip on narrow
   screens instead of wrapping (precedent: SystemList.razor.css .dm-hub-tabs). */
.pp-header-tabs[b-swiskzbjs8]  .ds-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
}

.pp-header-tabs[b-swiskzbjs8]  .ds-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}
/* _content/BlazorFrontend/Pages/Compliance/UniversalConsent/UserProfileDetail.razor.rz.scp.css */
.uc-page[b-8admtq3y83] { width: 100%; min-width: 0; }
.uc-page-body[b-8admtq3y83] { min-width: 0; padding-top: var(--space-4); }
.upd-tabs[b-8admtq3y83] { margin-bottom: var(--space-4); }

/*
 * UserProfileDetail.razor.css
 * Scoped styles for /compliance/universal-consent/profiles/{ProfileId}
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

/* The .upd-skeleton block that stood here was deleted with the markup that used it (ADR-066 D6:
   a screen's own skeleton CSS goes in the same diff as the screen, so no orphan rules are left
   behind). The whole-page wait is now the shared PageLoading component, and the history table's
   wait is .ds-table-ph inside the table itself (DsDataTable.razor.css). */

/* ─── Back-link (khuôn C header, mirrors DSR-02 .dsr-back-link) ───────────────── */

/* ─── Layout ─────────────────────────────────────────────────────────────────── */

.upd-basic-layout[b-8admtq3y83] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.upd-overview-grid[b-8admtq3y83] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.upd-overview-group[b-8admtq3y83] {
    min-width: 0;
}

.upd-overview-group + .upd-overview-group[b-8admtq3y83] {
    padding-left: var(--space-5);
    border-left: 1px solid var(--border-subtle);
}

.upd-overview-group__title[b-8admtq3y83] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    color: var(--text-strong);
    font-size: var(--text-base);
    font-weight: 600;
}

.upd-overview-group__title[b-8admtq3y83]  .ds-icon {
    color: var(--accent);
}

.upd-history-summary[b-8admtq3y83]  .ds-statgrid {
    margin-bottom: 0;
}

.upd-grid[b-8admtq3y83] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-4);
}

.upd-grid--even[b-8admtq3y83] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.upd-grid__col[b-8admtq3y83] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* ─── Info List (subject identity, profile metadata) ─────────────────────────── */

.upd-info-list[b-8admtq3y83] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
}

.upd-info-row[b-8admtq3y83] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-2);
    align-items: baseline;
}

.upd-info-row dt[b-8admtq3y83] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
}

.upd-info-row dd[b-8admtq3y83] {
    font-size: var(--text-base);
    color: var(--text-strong);
    margin: 0;
    word-break: break-word;
}

.upd-info-value--strong[b-8admtq3y83] {
    font-weight: 600;
}

.upd-info-code[b-8admtq3y83] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 2px var(--space-2);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    color: var(--accent);
}

.upd-empty-text[b-8admtq3y83] {
    color: var(--text-muted);
    margin: 0;
    font-size: var(--text-base);
}

.upd-consent-count[b-8admtq3y83] {
    padding: var(--space-3) var(--space-4) 0;
}

/* ─── Consent Preferences List ───────────────────────────────────────────────── */

.upd-consent-list[b-8admtq3y83] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.upd-consent-item[b-8admtq3y83] {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.upd-consent-item:last-child[b-8admtq3y83] {
    border-bottom: none;
}

.upd-consent-item__head[b-8admtq3y83] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
}

.upd-consent-item__title-block[b-8admtq3y83] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.upd-consent-item__title[b-8admtq3y83] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-strong);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.upd-consent-item__title .ds-icon[b-8admtq3y83] {
    color: var(--accent);
}

.upd-consent-item__sub[b-8admtq3y83] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.upd-consent-item__meta[b-8admtq3y83] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}

.upd-meta-cell[b-8admtq3y83] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.upd-meta-cell > .ds-icon[b-8admtq3y83] {
    color: var(--text-muted);
    flex-shrink: 0;
}

.upd-meta-cell__body[b-8admtq3y83] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.upd-meta-cell__label[b-8admtq3y83] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.upd-meta-cell__value[b-8admtq3y83] {
    font-size: var(--text-base);
    color: var(--text-strong);
    font-weight: 500;
}

.upd-meta-cell__value--truncate[b-8admtq3y83] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.upd-consent-item__foot[b-8admtq3y83] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
}

.upd-consent-item__foot-note[b-8admtq3y83] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
}

.upd-consent-item__foot-note--ok[b-8admtq3y83] {
    color: var(--accent);
}

.upd-consent-item__foot-note--danger[b-8admtq3y83] {
    color: var(--danger);
}

/* ─── Consent History (tab 3) ────────────────────────────────────────────────── */

/* .upd-history-loading is gone with the spinner it styled: the history tab now waits as placeholder
   rows inside its own table (ADR-066 D1), which is what stops the panel changing height when the
   records land. */

.upd-history-error[b-8admtq3y83] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
}

/* ADR-046 W5 lô (c): khung bảng viết tay `.upd-history-table` đã chuyển sang DsDataTable, nên các
   rule dựng lại một cái bảng từ đầu ở đây bị XOÁ thay vì để lại mồ côi —
     - `.upd-history-table` (khung, border-collapse, width)          → `.ds-table`;
     - `.upd-history-table th` (canh trái, padding 8/16, kiểu chữ tiêu đề, đường kẻ dưới)
                                                                    → `.ds-table-th`;
     - `.upd-history-table td` (padding 12/16, màu chữ, đường kẻ)    → `.ds-table-td`;
     - `.upd-history-table tbody tr:last-child td` (bỏ kẻ hàng cuối) → `.ds-table` tự lo.
   `.upd-history-table-wrap` KHÔNG còn là scroller: DsDataTable mang sẵn `.ds-table-wrap`
   (overflow-x:auto), lồng hai scroller là lỗi. Div được giữ lại thuần tuý làm nút cha thuộc trang
   để hai rule ::deep bên dưới bám vào.

   Mọi rule nhắm vào <th>/<td> giờ phải qua ::deep: những ô đó do DsDataTable vẽ nên mang scope id
   CỦA NÓ; một `.upd-history-time` trần trong file này sẽ biên dịch thành
   `.upd-history-time[b-<UserProfileDetail>]` và không khớp gì cả. Ngược lại `.upd-history-purpose`
   và `.upd-history-sub` nằm trên phần tử do CHÍNH TRANG vẽ bên trong ô, nên giữ selector thường. */

.upd-history-table-wrap[b-8admtq3y83]  .upd-history-time {
    white-space: nowrap;
    color: var(--text-muted);
}

.upd-history-purpose[b-8admtq3y83] {
    font-weight: 500;
}

.upd-history-sub[b-8admtq3y83] {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Ô Chi tiết là bề rộng DUY NHẤT bảng cũ khai, nên nó được giữ nguyên con số 260px thay vì quy về
   một bậc `--ds-table-col-*` (không bậc nào bằng 260px, và đổi số là đổi trình bày). CssClass rơi
   xuống cả <th>: tiêu đề "Chi tiết"/"Details"/"Detail" đều ngắn hơn 260px ở cả ba ngôn ngữ nên
   không tiêu đề nào bị cắt.
   Chỉ MỨC TRẦN bị chặn ở ≥768px, theo tiền lệ lô (b): dưới ngưỡng đó DsDataTable xếp mỗi hàng
   thành thẻ và trả bề rộng ô về auto, nên một mức trần 260px còn sót lại sẽ bó dòng giá trị trong
   thẻ ~340px — bề rộng cột là chuyện của desktop. `word-break` thì KHÔNG chặn: nó chống tràn cho
   lý do rút lại dài, và điều đó đúng ở mọi bề ngang, đúng như bảng cũ. */
.upd-history-table-wrap[b-8admtq3y83]  .upd-history-details {
    word-break: break-word;
}

@media (min-width: 768px) {
    .upd-history-table-wrap[b-8admtq3y83]  .upd-history-details {
        max-width: 260px;
    }
}

.upd-history-pagination[b-8admtq3y83] {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

/* ─── Profile not found ──────────────────────────────────────────────────────── */

.upd-not-found-actions[b-8admtq3y83] {
    display: flex;
    justify-content: center;
    margin-top: var(--space-3);
}

/* ─── Withdraw modal field ────────────────────────────────────────────────────── */

.upd-modal-field[b-8admtq3y83] {
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.upd-modal-label[b-8admtq3y83] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-strong);
    font-size: var(--text-base);
    font-weight: 600;
}

.upd-modal-textarea[b-8admtq3y83] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-strong);
    font-family: inherit;
    font-size: var(--text-base);
    resize: vertical;
}

/* FE-BUG-1: --focus-ring is a box-shadow value, so `outline: var(--focus-ring)` was an invalid
   declaration the browser dropped — this textarea had no visible focus indicator at all. Replaced with
   a solid outline that also clears SC 1.4.11 (the DS ring alpha resolves to ~1.6:1). */
.upd-modal-textarea:focus[b-8admtq3y83] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--accent);
}

.upd-required[b-8admtq3y83] {
    color: var(--danger);
}

.upd-field-error[b-8admtq3y83] {
    color: var(--danger);
    font-size: var(--text-sm);
    margin-top: var(--space-1);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

/* ─── Linked-DSR column in the history table (FR-12) ──────────────────────────── */

/* Rendered by DsDataTable, so the cell carries ITS scope id — reached through ::deep, same as the
   other history-cell rules above. 8 hex characters never need to wrap. */
.upd-history-table-wrap[b-8admtq3y83]  .upd-history-dsr-cell {
    white-space: nowrap;
}

.upd-history-dsr[b-8admtq3y83] {
    color: var(--text-link);
    font-family: var(--font-mono, monospace);
    text-decoration: none;
}

.upd-history-dsr:hover[b-8admtq3y83],
.upd-history-dsr:focus-visible[b-8admtq3y83] {
    text-decoration: underline;
}

.upd-history-dsr:focus-visible[b-8admtq3y83] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .upd-grid[b-8admtq3y83] {
        grid-template-columns: minmax(0, 1fr);
    }

    .upd-overview-grid[b-8admtq3y83] {
        grid-template-columns: minmax(0, 1fr);
    }

    .upd-overview-group + .upd-overview-group[b-8admtq3y83] {
        padding-top: var(--space-4);
        padding-left: 0;
        border-top: 1px solid var(--border-subtle);
        border-left: 0;
    }
}

@media (max-width: 767px) {
    .upd-consent-item__meta[b-8admtq3y83] {
        grid-template-columns: minmax(0, 1fr);
    }

    .upd-consent-item__foot[b-8admtq3y83] {
        flex-direction: column;
        align-items: flex-start;
    }

    .upd-info-row[b-8admtq3y83] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}
/* _content/BlazorFrontend/Pages/Compliance/UniversalConsent/UserProfiles.razor.rz.scp.css */
/* DATA UI frame `Đồng ý chung/ Hồ sơ chủ thể` (310:22309). Shared component
   presentation belongs to Datanomics.Ds; only page composition and content widths live here. */

.up-registry-page[b-0cg5j1rbpr] {
    width: 100%;
}

.up-registry-body[b-0cg5j1rbpr] {
    padding-top: var(--space-4);
}

.up-profile-quota[b-0cg5j1rbpr] {
    box-sizing: border-box;
    width: 208px;
    min-height: 40px;
    padding: 6px 10px;
    border: 1px solid var(--color-border-base-subtle, var(--border-subtle));
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-surface-primary, var(--surface));
}

.up-profile-quota__head[b-0cg5j1rbpr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: 5px;
}

.up-profile-quota__label[b-0cg5j1rbpr] {
    overflow: hidden;
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 11px;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.up-profile-quota__value[b-0cg5j1rbpr] {
    color: var(--color-text-primary, var(--text-strong));
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 15px;
    white-space: nowrap;
}

.up-profile-quota__empty-meter[b-0cg5j1rbpr] {
    height: 4px;
    border-radius: 999px;
    background: var(--color-bg-fill-neutral-secondary, var(--bg-inset));
}

.up-profile-quota--loading .up-profile-quota__value[b-0cg5j1rbpr] {
    color: var(--color-text-tertiary, var(--text-subtle));
}

.up-table[b-0cg5j1rbpr] {
    width: 100%;
}

/* Figma table widths at 1138px. Subject is intentionally auto: in menu-short mode
   it receives the released sidebar width while bounded data columns stay readable. */
.up-table[b-0cg5j1rbpr]  .up-col--summary { width: 200px; }
.up-table[b-0cg5j1rbpr]  .up-col--activity { width: 175px; }
.up-table[b-0cg5j1rbpr]  .up-col--created { width: 160px; }
.up-table[b-0cg5j1rbpr]  .up-col--actions { width: 152px; }

.up-row-action[b-0cg5j1rbpr] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.up-row-action[b-0cg5j1rbpr]  .ds-btn {
    width: 128px;
    justify-content: center;
}

.up-subject-id[b-0cg5j1rbpr] {
    display: block;
    overflow: hidden;
    color: var(--color-text-primary, var(--text-body));
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.up-subject-id--mono[b-0cg5j1rbpr],
.up-uid-mono[b-0cg5j1rbpr] {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    font-weight: 400;
}

.up-subject-id--empty[b-0cg5j1rbpr],
.up-uid-empty[b-0cg5j1rbpr] {
    color: var(--color-text-tertiary, var(--text-subtle));
    font-style: italic;
    font-weight: 400;
}

.up-date[b-0cg5j1rbpr] {
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 12px;
    line-height: 18px;
}

.up-consent-summary[b-0cg5j1rbpr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    width: 100%;
    min-width: 0;
    font-size: 14px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

/* Figma 487:29583: the two decisions occupy two equal data areas inside the 200px table cell.
   Keeping the divider on the second area pins it to the column boundary instead of letting it
   follow the width of `01`, `228` or `9.898`. */
.up-consent-value[b-0cg5j1rbpr] {
    box-sizing: border-box;
    display: flex;
    min-width: 0;
    height: 20px;
    align-items: center;
    justify-content: center;
    font: 400 14px/20px var(--font-body);
    white-space: nowrap;
}

.up-consent-value--granted[b-0cg5j1rbpr] {
    color: var(--color-text-success-active, var(--success-strong, var(--success)));
}

.up-consent-value--withdrawn[b-0cg5j1rbpr] {
    border-left: 1px solid var(--color-border-base-subtle, var(--border-subtle));
    color: var(--color-text-danger, var(--danger));
}

/* app.css sets typography directly on every span. Re-assert inheritance for the
   unclassed legend text spans so their 10/15 component typography is not reset to 16/24. */
.up-consent-legend-item > span:last-child[b-0cg5j1rbpr] {
    color: inherit;
    font: inherit;
}

/* Figma header-cell `Description=on` (485:29572): title 14/20 followed by a
   10/15 two-status legend, with 2px vertical and 12px inter-item spacing. */
.up-consent-header[b-0cg5j1rbpr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.up-consent-header-title[b-0cg5j1rbpr] {
    color: var(--color-text-primary, var(--text-body));
    font: 500 14px/20px var(--font-body);
}

.up-consent-legend[b-0cg5j1rbpr] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text-primary, var(--text-body));
    font: 400 10px/15px var(--font-body);
    white-space: nowrap;
}

.up-consent-legend-item[b-0cg5j1rbpr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    font: inherit;
}

.up-consent-legend-dot[b-0cg5j1rbpr] {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
}

.up-consent-legend-dot--granted[b-0cg5j1rbpr] {
    background: var(--color-bg-fill-success-primary, var(--success));
}

.up-consent-legend-dot--withdrawn[b-0cg5j1rbpr] {
    background: var(--color-bg-fill-danger-primary, var(--danger));
}

.up-date[b-0cg5j1rbpr] {
    white-space: nowrap;
}

.up-pagination-wrap[b-0cg5j1rbpr] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

/* Figma 356:23740: one right-aligned 32px row. Width stays content-driven because this tenant has
   two pages; the library example reaches 523px only when its 1–5 … 20 window is fully populated. */
.up-pagination-wrap[b-0cg5j1rbpr]  .ds-pagination {
    flex: 0 1 auto;
}

@media (max-width: 767.98px) {
    .up-pagination-wrap[b-0cg5j1rbpr]  .ds-pagination {
        justify-content: flex-end;
    }
}

@media print {
    .up-subject-id[b-0cg5j1rbpr] {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }
}
/* _content/BlazorFrontend/Pages/Compliance/UniversalConsent/WebhookConfiguration.razor.rz.scp.css */
.uc-page[b-600fwgujyw] { width: 100%; min-width: 0; }
.uc-page-body[b-600fwgujyw] { min-width: 0; padding-top: var(--space-4); }

/*
 * WebhookConfiguration.razor.css
 * Scoped styles for /universal-consent/webhooks
 *
 * Rules:
 *   - All colors via design-system tokens.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

/* Statistics use DsStatGrid/DsStatCard; the page does not own their visuals. */

/* ─── Table cells ────────────────────────────────────────────────────────────── */

/* Removed with the ADR-046 W2 table migration — the page no longer owns a <table> element to
   hang them on, and the design system supersedes each one:
     `.wc-table   { width: 100% }`                      → `.ds-table` already declares it.
     `.wc-table__actions-col { width:1%; nowrap }`      → `DsColumn Size="DsColumnSize.Lg"`.
     `.wc-cell-truncate { max-width; nowrap; ellipsis }` → `.ds-table--fixed .ds-table-td`. */

.wc-cell-stacked[b-600fwgujyw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wc-cell-stacked__title[b-600fwgujyw] {
    color: var(--text-strong);
    font-weight: 600;
    font-size: var(--text-base);
}

.wc-cell-stacked__sub[b-600fwgujyw] {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ─── URL cell ───────────────────────────────────────────────────────────────── */

.wc-url-cell[b-600fwgujyw] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
    min-width: 0;
}

.wc-url-cell__code[b-600fwgujyw] {
    display: inline-block;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 2px var(--space-2);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    color: var(--accent);
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Inline chips ───────────────────────────────────────────────────────────── */

.wc-chip-row[b-600fwgujyw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}

.wc-muted[b-600fwgujyw] {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */


@media (max-width: 575px) {
    .wc-url-cell__code[b-600fwgujyw] {
        max-width: 160px;
    }
}

/* The page stack owns section spacing; do not add the KPI grid margin again. */
.uc-page-body[b-600fwgujyw]  .uc-statgrid { margin-bottom: 0; }

.uc-row-actions[b-600fwgujyw] { display: flex; align-items: center; justify-content: center; }
/* _content/BlazorFrontend/Pages/Compliance/UniversalConsent/WebhookEdit.razor.rz.scp.css */
.uc-page[b-4v62zbt7fd] { width: 100%; min-width: 0; }
.uc-page-body[b-4v62zbt7fd] { min-width: 0; padding-top: var(--space-4); }

/*
 * WebhookEdit.razor.css
 * Scoped styles for /universal-consent/webhooks/create
 *                  /universal-consent/webhooks/{id}/edit
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

/* ─── Layout ─────────────────────────────────────────────────────────────────── */

.we-grid[b-4v62zbt7fd] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-4);
}

.we-grid__col[b-4v62zbt7fd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* ─── Form ───────────────────────────────────────────────────────────────────── */

.we-required[b-4v62zbt7fd] {
    color: var(--danger);
    margin-left: 2px;
}

.we-section[b-4v62zbt7fd] {
    margin-top: var(--space-4);
}

.we-switch[b-4v62zbt7fd] {
    margin-top: var(--space-2);
}

.we-subhead[b-4v62zbt7fd] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-strong);
    margin: 0 0 var(--space-2) 0;
}

.we-subhead-row[b-4v62zbt7fd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

/* ─── Purpose Mappings ───────────────────────────────────────────────────────── */

.we-mappings[b-4v62zbt7fd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.we-mapping-row[b-4v62zbt7fd] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto;
    gap: var(--space-2);
    align-items: end;
}

.we-mapping-row__field[b-4v62zbt7fd] {
    min-width: 0;
}

.we-mapping-row__remove[b-4v62zbt7fd] {
    padding-bottom: 1px; /* visual baseline alignment */
}

/* ─── Form actions ───────────────────────────────────────────────────────────── */

.we-actions[b-4v62zbt7fd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

/* ─── Side preview ───────────────────────────────────────────────────────────── */

.we-preview-block[b-4v62zbt7fd] {
    margin-bottom: var(--space-3);
}

.we-preview-block:last-child[b-4v62zbt7fd] {
    margin-bottom: 0;
}

.we-preview-title[b-4v62zbt7fd] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-strong);
    margin: 0 0 var(--space-1) 0;
}

.we-preview-desc[b-4v62zbt7fd] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
}

.we-preview-mappings[b-4v62zbt7fd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.we-preview-mappings__row[b-4v62zbt7fd] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    flex-wrap: wrap;
}

.we-preview-mappings__field[b-4v62zbt7fd] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 1px var(--space-1);
    font-family: var(--font-mono, monospace);
    color: var(--accent);
}

.we-preview-mappings__sep[b-4v62zbt7fd] {
    color: var(--text-subtle);
}

.we-preview-mappings__purpose[b-4v62zbt7fd] {
    color: var(--text-muted);
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .we-grid[b-4v62zbt7fd] {
        grid-template-columns: minmax(0, 1fr);
    }

    .we-mapping-row[b-4v62zbt7fd] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .we-actions[b-4v62zbt7fd] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/BlazorFrontend/Pages/Compliance/UniversalConsent/WebhookIntegration.razor.rz.scp.css */
.uc-page[b-g7pj0gujve] { width: 100%; min-width: 0; }
.uc-page-body[b-g7pj0gujve] { min-width: 0; padding-top: var(--space-4); }

/*
 * WebhookIntegration.razor.css
 * Scoped styles for /universal-consent/webhooks/{id}/embed
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

/* ─── Header card ────────────────────────────────────────────────────────────── */

.wi-header[b-g7pj0gujve] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
}

.wi-header__text[b-g7pj0gujve] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wi-header__title[b-g7pj0gujve] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-strong);
}

.wi-header__sub[b-g7pj0gujve] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.wi-header__url label[b-g7pj0gujve] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

/* ─── Tabs ───────────────────────────────────────────────────────────────────── */

.wi-tabs[b-g7pj0gujve] {
    border-bottom: 1px solid var(--border-subtle);
}

.wi-tabs .nav-link[b-g7pj0gujve] {
    color: var(--text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: var(--space-2) var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: 500;
}

.wi-tabs .nav-link:hover[b-g7pj0gujve] {
    color: var(--accent);
}

.wi-tabs .nav-link.active[b-g7pj0gujve] {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: transparent;
}

.wi-tab-content[b-g7pj0gujve] {
    margin-top: var(--space-3);
}

.wi-tab-head[b-g7pj0gujve] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.wi-tab-title[b-g7pj0gujve] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-strong);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.wi-icon--html[b-g7pj0gujve] {
    color: var(--danger);
}

.wi-icon--js[b-g7pj0gujve] {
    color: var(--accent);
}

.wi-icon--curl[b-g7pj0gujve] {
    color: var(--text-muted);
}

/* ─── Code area ──────────────────────────────────────────────────────────────── */

.wi-code-area[b-g7pj0gujve] {
    background: var(--bg-dark, #1e1e1e);
    color: var(--text-on-dark, #e6e6e6);
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
    line-height: 1.45;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.wi-code-area:focus[b-g7pj0gujve] {
    background: var(--bg-dark, #1e1e1e);
    color: var(--text-on-dark, #e6e6e6);
}

.wi-code-area--lg[b-g7pj0gujve] {
    height: 400px;
}

.wi-code-area--sm[b-g7pj0gujve] {
    height: 200px;
}

.wi-howto[b-g7pj0gujve] {
    margin-top: var(--space-3);
}

.wi-bullet-list[b-g7pj0gujve] {
    margin: var(--space-2) 0 0 0;
    padding-left: var(--space-5);
    color: var(--text-muted);
    font-size: var(--apple-font-caption-size, 0.875rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* ─── Bottom grid (security + mappings) ──────────────────────────────────────── */

.wi-bottom-grid[b-g7pj0gujve] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
}

/* ─── Security info ──────────────────────────────────────────────────────────── */

.wi-security-list[b-g7pj0gujve] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: var(--space-3) 0 0 0;
}

.wi-security-row[b-g7pj0gujve] {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-2);
    align-items: baseline;
}

.wi-security-row dt[b-g7pj0gujve] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
}

.wi-security-row dd[b-g7pj0gujve] {
    margin: 0;
    color: var(--text-strong);
    font-size: var(--text-base);
    word-break: break-word;
}

.wi-subhead[b-g7pj0gujve] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-strong);
    margin: var(--space-3) 0 var(--space-2) 0;
}

.wi-rate-list[b-g7pj0gujve] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--text-muted);
    font-size: var(--apple-font-caption-size, 0.875rem);
}

.wi-rate-list__icon[b-g7pj0gujve] {
    color: var(--accent);
    margin-right: var(--space-1);
}

/* Was `.wi-mappings-table code`. The mappings table is a DsDataTable now, so the page no longer
   owns the <table> element to hang a class on — the <code> carries the class directly instead
   (ADR-046 W2). Same declarations, same rendering. */
.wi-mapping-field[b-g7pj0gujve] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 1px var(--space-1);
    font-family: var(--font-mono, monospace);
    color: var(--accent);
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .wi-header[b-g7pj0gujve] {
        grid-template-columns: minmax(0, 1fr);
    }

    .wi-bottom-grid[b-g7pj0gujve] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .wi-tab-head[b-g7pj0gujve] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
}
/* _content/BlazorFrontend/Pages/DataDiscovery/Connectors.razor.rz.scp.css */
.connectors-page[b-fymg26hspt],
.connectors-page-body[b-fymg26hspt],
.connectors-live[b-fymg26hspt] {
    min-width: 0;
}

.connectors-page-body[b-fymg26hspt],
.connectors-tab-body[b-fymg26hspt] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.connectors-page-body[b-fymg26hspt] {
    padding-top: var(--space-4);
}

.connectors-page[b-fymg26hspt]  .ds-tabs {
    margin-bottom: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.connectors-page[b-fymg26hspt]  .ds-tab {
    flex: 0 0 auto;
}

.connectors-catalog-grid[b-fymg26hspt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--space-4);
}

.connectors-metadata[b-fymg26hspt] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.connectors-chips[b-fymg26hspt],
.connectors-card-actions[b-fymg26hspt],
.connectors-pagination[b-fymg26hspt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.connectors-card-actions[b-fymg26hspt],
.connectors-pagination[b-fymg26hspt] {
    justify-content: flex-end;
}

.connectors-cluster-controls[b-fymg26hspt] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
}

.connectors-cluster-controls[b-fymg26hspt]  .ds-field {
    width: min(100%, 352px);
    min-width: 0;
}

.connectors-cell-copy[b-fymg26hspt],
.connectors-hints[b-fymg26hspt] {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.connectors-cell-copy small[b-fymg26hspt],
.connectors-hint[b-fymg26hspt],
.connectors-correlation[b-fymg26hspt] {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.connectors-hint[b-fymg26hspt],
.connectors-dialog-subject[b-fymg26hspt] {
    margin: 0;
}

.connectors-correlation[b-fymg26hspt] {
    display: block;
}

.connectors-dialog-subject[b-fymg26hspt] {
    font-weight: 600;
}

.connectors-page code[b-fymg26hspt],
.connectors-correlation[b-fymg26hspt],
.connectors-dialog-subject[b-fymg26hspt],
.connectors-metadata > *[b-fymg26hspt],
.connectors-page[b-fymg26hspt]  .ds-panel-title,
.connectors-page[b-fymg26hspt]  td.connectors-col-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

.connectors-page code[b-fymg26hspt] { color: inherit; }
/* _content/BlazorFrontend/Pages/DataDiscovery/DeploymentForm.razor.rz.scp.css */
/* Deployment create/edit — a page, not a modal (the field set is too dense for a dialog).
   Tokens only; no inline styles, no hardcoded colours, no new token. */

.dp-correlation[b-9dhmdfsu8g] {
    display: block;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}
/* _content/BlazorFrontend/Pages/DataDiscovery/DiscoveryPageLayout.razor.rz.scp.css */
.discovery-page[b-amh3cuz8gh] { min-width: 0; }
.discovery-page-body[b-amh3cuz8gh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}
.discovery-page[b-amh3cuz8gh]  .discovery-stack,
.discovery-page[b-amh3cuz8gh]  .discovery-fieldset {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}
.discovery-page[b-amh3cuz8gh]  .discovery-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
.discovery-page[b-amh3cuz8gh]  .discovery-form-fields,
.discovery-page[b-amh3cuz8gh]  .discovery-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    min-width: 0;
}
.discovery-page[b-amh3cuz8gh]  .discovery-form-full { grid-column: 1 / -1; }
.discovery-page[b-amh3cuz8gh]  .discovery-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}
.discovery-page[b-amh3cuz8gh]  .discovery-toolbar,
.discovery-page[b-amh3cuz8gh]  .discovery-actions,
.discovery-page[b-amh3cuz8gh]  .discovery-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
.discovery-page[b-amh3cuz8gh]  .discovery-toolbar { justify-content: space-between; }
.discovery-page[b-amh3cuz8gh]  .discovery-actions { justify-content: flex-end; }
.discovery-page[b-amh3cuz8gh]  .discovery-metadata {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-3) var(--space-4);
    margin: 0;
}
.discovery-page[b-amh3cuz8gh]  .discovery-metadata dt,
.discovery-page[b-amh3cuz8gh]  .discovery-metadata dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.discovery-page[b-amh3cuz8gh]  .discovery-metadata dt { color: var(--text-muted); font-weight: 500; }
.discovery-page[b-amh3cuz8gh]  .discovery-copy { margin: 0; }
.discovery-page[b-amh3cuz8gh]  .discovery-muted { color: var(--text-muted); }
.discovery-page[b-amh3cuz8gh]  .discovery-code { color: var(--text-body); overflow-wrap: anywhere; white-space: normal; user-select: all; }
.discovery-page[b-amh3cuz8gh]  .discovery-cell-copy { display: grid; gap: var(--space-1); overflow-wrap: anywhere; }
.discovery-page[b-amh3cuz8gh]  .discovery-cell-text { white-space: normal; overflow-wrap: anywhere; }
.discovery-page[b-amh3cuz8gh]  .discovery-search { flex: 1 1 240px; min-width: 0; }
@media (max-width: 991.98px) {
    .discovery-page[b-amh3cuz8gh]  .discovery-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .discovery-page[b-amh3cuz8gh]  .discovery-form-fields,
    .discovery-page[b-amh3cuz8gh]  .discovery-columns { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .discovery-page[b-amh3cuz8gh]  .discovery-metadata { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
    .discovery-page[b-amh3cuz8gh]  .discovery-metadata dd { margin-bottom: var(--space-3); }
}
/* _content/BlazorFrontend/Pages/DataDiscovery/DiscoveryPager.razor.rz.scp.css */
.discovery-pager[b-qykg53lxrf] {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    max-width: 100%;
}
/* _content/BlazorFrontend/Pages/DataDiscovery/Sources.razor.rz.scp.css */
.sources-page[b-wr3x34uy1t],
.sources-page-body[b-wr3x34uy1t] {
    min-width: 0;
}

.sources-page-body[b-wr3x34uy1t] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

.sources-pagination[b-wr3x34uy1t] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* Source names remain readable in the table and its mobile card layout. */
.sources-page[b-wr3x34uy1t]  td.sources-name {
    white-space: normal;
    overflow-wrap: anywhere;
}

.sources-page[b-wr3x34uy1t]  td.sources-name .ds-link {
    max-width: 100%;
}
/* _content/BlazorFrontend/Pages/DataMapping/DataFlowDetail.razor.rz.scp.css */
.dm-page[b-1q93rrkpxw],
.dm-page-body[b-1q93rrkpxw] {
    min-width: 0;
}

.dm-page-body[b-1q93rrkpxw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The page stack owns spacing between top-level surfaces, filters and KPIs. */
.dm-page-body[b-1q93rrkpxw]  > .ds-filterbar,
.dm-page-body[b-1q93rrkpxw]  > .ds-statgrid,
.dm-page-body[b-1q93rrkpxw]  > .ds-tabs {
    margin-bottom: 0;
}

/*
 * DataFlowDetail.razor.css
 * Scoped styles for /data-mapping/data-flows/{Id} (khuôn C: back-link → PageHeader → flow diagram → 2-col grid)
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */


.dfd-back-actions[b-1q93rrkpxw] {
    margin-top: var(--space-3);
}

/* ─── Single-flow diagram (source → arrow → destination) ────────────────────── */

.dfd-simpleflow[b-1q93rrkpxw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-4) 0;
}

.dfd-flow-node[b-1q93rrkpxw] {
    flex: 1;
    min-width: 180px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
    padding: var(--space-4);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--dp-surface-secondary);
}

.dfd-flow-node h6[b-1q93rrkpxw] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.dfd-flow-node__icon[b-1q93rrkpxw] {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dp-surface-brand-subtle);
    color: var(--dp-interactive-accent);
}

.dfd-flow-node__meta[b-1q93rrkpxw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.dfd-flow-arrow[b-1q93rrkpxw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: var(--dp-interactive-accent);
}

/* ─── Multi-step branching tree ──────────────────────────────────────────────── */

.dfd-htree-wrapper[b-1q93rrkpxw] {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: auto;
    padding: var(--space-4) 0;
}

.dfd-htree-count[b-1q93rrkpxw] {
    text-align: center;
    margin-top: var(--space-3);
}

.dfd-htree-node[b-1q93rrkpxw] {
    display: flex;
    align-items: center;
}

.dfd-htree-card[b-1q93rrkpxw] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 150px;
    max-width: 220px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--dp-surface-primary);
    border: 1px solid var(--dp-border-subtle);
    box-shadow: 0 1px 2px rgba(7, 20, 42, 0.06);
}

.dfd-htree-card h6[b-1q93rrkpxw] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.dfd-htree-card__icon[b-1q93rrkpxw] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dp-surface-brand-subtle);
    color: var(--dp-interactive-accent);
}

.dfd-htree-card--leaf .dfd-htree-card__icon[b-1q93rrkpxw] {
    background: var(--dp-status-success-bg);
    color: var(--dp-status-success);
}

.dfd-htree-connector[b-1q93rrkpxw] {
    width: 28px;
    height: 2px;
    background: var(--dp-interactive-accent);
    flex-shrink: 0;
}

.dfd-htree-branches[b-1q93rrkpxw] {
    display: flex;
    flex-direction: column;
    position: relative;
}

.dfd-htree-branch[b-1q93rrkpxw] {
    display: flex;
    align-items: center;
    position: relative;
    padding: var(--space-2) 0 var(--space-2) 22px;
}

.dfd-htree-branch[b-1q93rrkpxw]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 2px;
    background: var(--dp-interactive-accent);
}

.dfd-htree-branch[b-1q93rrkpxw]::after {
    content: "";
    position: absolute;
    left: 0;
    width: 2px;
    background: var(--dp-interactive-accent);
}

.dfd-htree-branch:first-child[b-1q93rrkpxw]::after {
    top: 50%;
    bottom: 0;
}

.dfd-htree-branch:not(:first-child):not(:last-child)[b-1q93rrkpxw]::after {
    top: 0;
    bottom: 0;
}

.dfd-htree-branch:last-child[b-1q93rrkpxw]::after {
    top: 0;
    height: 50%;
}

.dfd-htree-branch:only-child[b-1q93rrkpxw]::after,
.dfd-htree-branch:only-child[b-1q93rrkpxw]::before {
    display: none;
}

.dfd-htree-branch:only-child[b-1q93rrkpxw] {
    padding-left: 0;
}

.dfd-htree-label[b-1q93rrkpxw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: var(--space-2);
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dp-interactive-accent);
    white-space: nowrap;
}

/* ─── 2-column grid (khuôn C) ────────────────────────────────────────────────── */

.dfd-grid[b-1q93rrkpxw] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    margin-top: var(--space-4);
}

.dfd-grid__col[b-1q93rrkpxw] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

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

/* ─── Definition lists ───────────────────────────────────────────────────────── */

.dfd-dl[b-1q93rrkpxw] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
}

.dfd-dl__full[b-1q93rrkpxw] {
    grid-column: 1 / -1;
}

.dfd-dl dt[b-1q93rrkpxw] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    margin-bottom: 4px;
}

.dfd-dl dd[b-1q93rrkpxw] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .dfd-dl[b-1q93rrkpxw] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dfd-block-text[b-1q93rrkpxw] {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--dp-text-primary);
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}

/* ─── Data types (grouped chips) ─────────────────────────────────────────────── */

.dfd-datatypes[b-1q93rrkpxw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dfd-datatypes__group[b-1q93rrkpxw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dfd-datatypes__label[b-1q93rrkpxw] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dp-text-secondary);
}

.dfd-datatypes__unmatched[b-1q93rrkpxw] {
    margin-top: var(--space-1);
}

.dfd-chips[b-1q93rrkpxw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ─── Risk assessment ────────────────────────────────────────────────────────── */

.dfd-risk-row[b-1q93rrkpxw] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.dfd-risk-bar[b-1q93rrkpxw] {
    flex: 1;
    height: 8px;
    border-radius: 99px;
    background: var(--dp-surface-secondary);
    overflow: hidden;
}

.dfd-risk-bar__fill[b-1q93rrkpxw] {
    height: 100%;
    border-radius: 99px;
}

.dfd-risk-bar__fill--low[b-1q93rrkpxw] {
    width: 25%;
    background: var(--dp-status-success);
}

.dfd-risk-bar__fill--medium[b-1q93rrkpxw] {
    width: 55%;
    background: var(--dp-status-warning);
}

.dfd-risk-bar__fill--high[b-1q93rrkpxw] {
    width: 80%;
    background: var(--dp-status-danger);
}

.dfd-risk-bar__fill--critical[b-1q93rrkpxw] {
    width: 100%;
    background: var(--dp-status-danger);
}

/* ─── Metadata / timeline rows ───────────────────────────────────────────────── */

.dfd-meta[b-1q93rrkpxw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 0.8125rem;
}

.dfd-meta__row[b-1q93rrkpxw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dfd-meta__row > span:first-child[b-1q93rrkpxw] {
    color: var(--dp-text-secondary);
}

.dfd-meta__row > span:last-child[b-1q93rrkpxw] {
    color: var(--dp-text-primary);
}

.dfd-meta__danger[b-1q93rrkpxw] {
    color: var(--dp-status-danger) !important;
}

.dfd-empty-italic[b-1q93rrkpxw] {
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    font-style: italic;
}

/* ADR-061 — participating org units: one unit per line so long names wrap instead of overflowing the
   sidebar panel at 320px. */
.dfd-org-list[b-1q93rrkpxw] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
/* _content/BlazorFrontend/Pages/DataMapping/DataFlowForm.razor.rz.scp.css */
.dm-page[b-pep7vxghzg],
.dm-page-body[b-pep7vxghzg] {
    min-width: 0;
}

.dm-page-body[b-pep7vxghzg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The page stack owns spacing between top-level surfaces, filters and KPIs. */
.dm-page-body[b-pep7vxghzg]  > .ds-filterbar,
.dm-page-body[b-pep7vxghzg]  > .ds-statgrid,
.dm-page-body[b-pep7vxghzg]  > .ds-tabs {
    margin-bottom: 0;
}

.dm-page-body[b-pep7vxghzg]  .dm-editor-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    min-width: 0;
}

/*
 * DataFlowForm.razor.css
 * Scoped styles for /data-mapping/data-flows/new, /create, /{Id}/edit
 * (khuôn C: back-link → PageHeader → 2-col form grid + multi-step flow builder)
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */


/* ─── Flow mode selector ─────────────────────────────────────────────────────── */

.dff-mode-row[b-pep7vxghzg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.dff-mode-title[b-pep7vxghzg] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-1);
    font-size: 1rem;
    font-weight: 700;
    color: var(--dp-text-primary);
}

.dff-mode-desc[b-pep7vxghzg] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

/* ─── 2-column grid (khuôn C) ────────────────────────────────────────────────── */

.dff-grid[b-pep7vxghzg] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.dff-grid__col[b-pep7vxghzg] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

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

.dff-panel-actions[b-pep7vxghzg] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-3);
}

/* ─── Form fields ────────────────────────────────────────────────────────────── */

.dff-field[b-pep7vxghzg] {
    margin-top: var(--space-3);
}

.dff-field:first-child[b-pep7vxghzg] {
    margin-top: 0;
}

.dff-label[b-pep7vxghzg] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.dff-required[b-pep7vxghzg] {
    color: var(--dp-status-danger);
}

.dff-hint[b-pep7vxghzg] {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.dff-validation[b-pep7vxghzg] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-status-danger);
}

.dff-empty-italic[b-pep7vxghzg] {
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    font-style: italic;
}

.dff-row2[b-pep7vxghzg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.dff-row2:first-child[b-pep7vxghzg] {
    margin-top: 0;
}

@media (max-width: 767px) {
    .dff-row2[b-pep7vxghzg] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ─── Source/Destination sub-panels ──────────────────────────────────────────── */

.dff-subpanel[b-pep7vxghzg] {
    padding: var(--space-4);
    background: var(--dp-surface-secondary);
    border-radius: var(--radius-lg);
}

.dff-subpanel__title[b-pep7vxghzg] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--dp-interactive-accent);
}

/* ─── Checkbox rows (data-type checklist, plain toggles) ─────────────────────── */

.dff-checklist[b-pep7vxghzg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
}

.dff-checklist--error[b-pep7vxghzg] {
    border-color: var(--dp-status-danger);
}

.dff-checklist__group[b-pep7vxghzg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dff-checklist__label[b-pep7vxghzg] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dp-text-secondary);
}

/* ─── Multi-step flow builder ────────────────────────────────────────────────── */

.dff-empty[b-pep7vxghzg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) 0;
    color: var(--dp-text-secondary);
    text-align: center;
}

.dff-steps[b-pep7vxghzg] {
    display: flex;
    flex-direction: column;
}

.dff-step[b-pep7vxghzg] {
    padding: var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.dff-step--active[b-pep7vxghzg] {
    border-color: var(--dp-interactive-primary);
    background: var(--dp-surface-brand-subtle);
}

.dff-step__head[b-pep7vxghzg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.dff-step__head > div:first-child[b-pep7vxghzg] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--dp-text-primary);
}

.dff-step__actions[b-pep7vxghzg] {
    display: flex;
    gap: var(--space-1);
}

.dff-step__form[b-pep7vxghzg] {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--dp-border-subtle);
}

/* ADR-061 BR-09a — read-only echo of the flow's owning unit inside a step. Not a field: it wraps to its
   own line on narrow viewports instead of squeezing the unit name. */
.dff-step-owner[b-pep7vxghzg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.dff-step-owner .dff-label[b-pep7vxghzg] {
    margin-bottom: 0;
}

.dff-step__summary[b-pep7vxghzg] {
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

.dff-step__summary strong[b-pep7vxghzg] {
    color: var(--dp-text-primary);
    font-weight: 600;
}

.dff-subhead[b-pep7vxghzg] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--dp-interactive-accent);
}

.dff-inherited[b-pep7vxghzg] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-secondary);
    font-size: 0.8125rem;
}

.dff-inherited small[b-pep7vxghzg] {
    display: block;
    color: var(--dp-text-secondary);
}

.dff-step__connector[b-pep7vxghzg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: var(--space-2) 0;
    text-align: center;
}

.dff-step__connector--chained[b-pep7vxghzg] {
    color: var(--dp-interactive-accent);
}

.dff-step__connector--branch[b-pep7vxghzg] {
    color: var(--dp-status-warning);
}

.dff-step__connector small[b-pep7vxghzg] {
    color: var(--dp-text-secondary);
    font-size: 0.75rem;
}

/* ─── Tips card ──────────────────────────────────────────────────────────────── */

.dff-tips[b-pep7vxghzg] {
    background: var(--dp-surface-brand-subtle);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.dff-tips__head[b-pep7vxghzg] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--dp-interactive-accent);
    margin-bottom: var(--space-3);
}

.dff-tips__list[b-pep7vxghzg] {
    margin: 0;
    padding-left: 18px;
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    line-height: 1.7;
}

/* ─── Live preview embed ─────────────────────────────────────────────────────── */

.dff-preview[b-pep7vxghzg] {
    margin-top: var(--space-4);
}

.dff-data-option[b-pep7vxghzg] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
/* _content/BlazorFrontend/Pages/DataMapping/DataFlowList.razor.rz.scp.css */
.dm-page[b-xmbwtgcghg],
.dm-page-body[b-xmbwtgcghg] {
    min-width: 0;
}

.dm-page-body[b-xmbwtgcghg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The page stack owns spacing between top-level surfaces, filters and KPIs. */
.dm-page-body[b-xmbwtgcghg]  > .ds-filterbar,
.dm-page-body[b-xmbwtgcghg]  > .ds-statgrid,
.dm-page-body[b-xmbwtgcghg]  > .ds-tabs {
    margin-bottom: 0;
}

/*
 * DataFlowList.razor.css
 * Scoped styles for /data-mapping/data-flows (khuôn B: PageHeader → KPI row → FilterBar → DataTable)
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

.dfl-row-actions[b-xmbwtgcghg] {
    display: flex;
    justify-content: center;
}

.dfl-name[b-xmbwtgcghg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Flow names and both endpoints share the remaining width and can wrap. */
.dm-page[b-xmbwtgcghg]  td.dm-col-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

.dfl-crossborder[b-xmbwtgcghg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--dp-interactive-accent);
}

.dfl-muted[b-xmbwtgcghg] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

.dfl-pagination-wrap[b-xmbwtgcghg] {
    display: flex;
    justify-content: flex-end;
}
/* _content/BlazorFrontend/Pages/DataMapping/DataFlowVisualizer.razor.rz.scp.css */
.dm-page[b-9s0m2aa8x7],
.dm-page-body[b-9s0m2aa8x7] {
    min-width: 0;
}

.dm-page-body[b-9s0m2aa8x7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The page stack owns spacing between top-level surfaces, filters and KPIs. */
.dm-page-body[b-9s0m2aa8x7]  > .ds-filterbar,
.dm-page-body[b-9s0m2aa8x7]  > .ds-statgrid,
.dm-page-body[b-9s0m2aa8x7]  > .ds-tabs {
    margin-bottom: 0;
}

/*
 * DataFlowVisualizer.razor.css
 * Scoped styles for /data-mapping/data-flows/visualizer
 * (PageHeader → toolbar → diagram/matrix/list → KPI row)
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

/* ─── Toolbar ─────────────────────────────────────────────────────────────────── */

.dfv-toolbar[b-9s0m2aa8x7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: var(--space-4);
    align-items: end;
}

@media (max-width: 1023px) {
    .dfv-toolbar[b-9s0m2aa8x7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dfv-field[b-9s0m2aa8x7] {
    display: flex;
    flex-direction: column;
}

.dfv-field--grow[b-9s0m2aa8x7] {
    min-width: 0;
}

.dfv-label[b-9s0m2aa8x7] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.dfv-toolbar-action[b-9s0m2aa8x7],
.dfv-row-actions[b-9s0m2aa8x7] {
    display: flex;
    justify-content: center;
}

/* ─── Diagram (vis-network graph) ─────────────────────────────────────────────── */

.dfv-graph[b-9s0m2aa8x7] {
    height: 600px;
    width: 100%;
    background: var(--dp-surface-secondary);
}

.dfv-legend[b-9s0m2aa8x7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--dp-border-subtle);
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

.dfv-legend-item[b-9s0m2aa8x7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dfv-legend-indicator[b-9s0m2aa8x7] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.dfv-legend-system[b-9s0m2aa8x7] {
    background: var(--dp-status-info-bg);
    border: 2px solid var(--dp-status-info);
}

.dfv-legend-thirdparty[b-9s0m2aa8x7] {
    background: var(--dp-status-success-bg);
    border: 2px solid var(--dp-status-success);
}

.dfv-legend-manual[b-9s0m2aa8x7] {
    background: var(--dp-status-warning-bg);
    border: 2px solid var(--dp-status-warning);
}

.dfv-legend-highrisk[b-9s0m2aa8x7] {
    background: var(--dp-status-danger-bg);
    border: 2px solid var(--dp-status-danger);
}

/* ─── Matrix view ─────────────────────────────────────────────────────────────── */

.dfv-table-wrap[b-9s0m2aa8x7] {
    overflow-x: auto;
}

.dfv-matrix[b-9s0m2aa8x7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.dfv-matrix th[b-9s0m2aa8x7],
.dfv-matrix td[b-9s0m2aa8x7] {
    border: 1px solid var(--dp-border-subtle);
    padding: var(--space-2);
    text-align: center;
    white-space: nowrap;
}

.dfv-matrix thead th[b-9s0m2aa8x7] {
    background: var(--dp-surface-secondary);
    color: var(--dp-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dfv-matrix__corner[b-9s0m2aa8x7] {
    background: var(--dp-surface-tertiary, var(--dp-surface-secondary));
}

.dfv-matrix__rowhead[b-9s0m2aa8x7] {
    text-align: left;
    background: var(--dp-surface-secondary);
    color: var(--dp-text-primary);
    font-weight: 600;
}

.dfv-matrix__dash[b-9s0m2aa8x7],
.dfv-matrix__dot[b-9s0m2aa8x7] {
    color: var(--dp-text-tertiary, var(--dp-text-secondary));
}

/* ─── List view ───────────────────────────────────────────────────────────────── */

.dfv-flowname[b-9s0m2aa8x7] {
    color: var(--dp-interactive-accent);
    text-decoration: none;
    font-weight: 600;
}

.dfv-flowname:hover[b-9s0m2aa8x7] {
    text-decoration: underline;
}

.dfv-endpoint[b-9s0m2aa8x7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--dp-text-primary);
}

.dfv-muted[b-9s0m2aa8x7] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

/* ─── KPI row ─────────────────────────────────────────────────────────────────── */

.dfv-stats[b-9s0m2aa8x7] {
    margin: var(--space-4) 0;
}
/* _content/BlazorFrontend/Pages/DataMapping/GeneratedDataflow.razor.rz.scp.css */
/*
 * GeneratedDataflow.razor.css - /data-mapping/data-flows/generated
 * Layout only: every surface, control and state is a Datanomics.Ds component. Tokens only, no inline style.
 */
.gdf-page[b-x7q7d6fjkc],
.dm-page-body[b-x7q7d6fjkc] {
    min-width: 0;
}

.dm-page-body[b-x7q7d6fjkc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

.gdf-version-row[b-x7q7d6fjkc] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3) var(--space-4);
}

.gdf-group-field[b-x7q7d6fjkc] {
    flex: 1 1 18rem;
    min-width: 14rem;
    max-width: 28rem;
}

.gdf-version-meta[b-x7q7d6fjkc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.gdf-view-toggle[b-x7q7d6fjkc] {
    margin-inline-start: auto;
}

/* The version bar is a programmatic focus target after "created"; it needs no ring of its own. */
.gdf-version-bar:focus[b-x7q7d6fjkc] {
    outline: none;
}

.gdf-hash[b-x7q7d6fjkc] {
    margin-inline: var(--space-2);
    white-space: nowrap;
}

.gdf-muted[b-x7q7d6fjkc] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.gdf-data-legend[b-x7q7d6fjkc] {
    display: grid;
    gap: var(--space-2) var(--space-6);
    margin: 0;
    padding-inline-start: var(--space-6);
    grid-template-columns: minmax(0, 1fr);
}

.gdf-data-legend li[b-x7q7d6fjkc] {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    overflow-wrap: anywhere;
}

.gdf-legend-name[b-x7q7d6fjkc] {
    color: var(--text-strong);
}

@media (min-width: 992px) {
    .gdf-data-legend[b-x7q7d6fjkc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.gdf-summary[b-x7q7d6fjkc] {
    display: grid;
    gap: var(--space-1);
    margin: 0;
}

.gdf-summary dt[b-x7q7d6fjkc] {
    margin-top: var(--space-3);
    color: var(--text-strong);
    font-weight: 600;
}

.gdf-summary dd[b-x7q7d6fjkc] {
    margin: 0;
    color: var(--text-body);
}

.gdf-hash-full[b-x7q7d6fjkc] {
    overflow-wrap: anywhere;
    user-select: all;
}

.gdf-by[b-x7q7d6fjkc] {
    overflow-wrap: anywhere;
}

.gdf-history-pager[b-x7q7d6fjkc] {
    padding-top: var(--space-4);
}

/* The version being viewed is tinted in the history list; its row label also says "currently viewing". */
.gdf-history[b-x7q7d6fjkc]  .gdf-history-current {
    background: var(--accent-soft);
}

@media print {
    .gdf-version-bar[b-x7q7d6fjkc] {
        display: none;
    }
}
/* _content/BlazorFrontend/Pages/DataMapping/ProcessingActivityDetail.razor.rz.scp.css */
.dm-page[b-ioymho0s0e],
.dm-page-body[b-ioymho0s0e] {
    min-width: 0;
}

.dm-page-body[b-ioymho0s0e] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The page stack owns spacing between top-level surfaces, filters and KPIs. */
.dm-page-body[b-ioymho0s0e]  > .ds-filterbar,
.dm-page-body[b-ioymho0s0e]  > .ds-statgrid,
.dm-page-body[b-ioymho0s0e]  > .ds-tabs {
    margin-bottom: 0;
}

/*
 * ProcessingActivityDetail.razor.css
 * Scoped styles for /data-mapping/processing-activities/{Id} (khuôn C: back-link → PageHeader → 2-col grid)
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */


/* ─── Back link ──────────────────────────────────────────────────────────────── */

.pad-back-actions[b-ioymho0s0e] {
    margin-top: var(--space-3);
}

/* ─── Material-change banner ─────────────────────────────────────────────────── */

.pad-change-desc[b-ioymho0s0e] {
    margin: 0 0 var(--space-2);
}

.pad-change-diff[b-ioymho0s0e] {
    margin: 0 0 var(--space-2);
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

.pad-change-actions[b-ioymho0s0e] {
    margin-top: var(--space-2);
}

/* ─── 2-column grid (khuôn C) ────────────────────────────────────────────────── */

.pad-grid[b-ioymho0s0e] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    margin-top: var(--space-4);
}

.pad-grid__col[b-ioymho0s0e] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

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

/* ─── Description ────────────────────────────────────────────────────────────── */

.pad-desc[b-ioymho0s0e] {
    margin: 0 0 var(--space-4);
    font-size: 0.875rem;
    color: var(--dp-text-secondary);
    line-height: 1.6;
}

/* ─── Definition lists ───────────────────────────────────────────────────────── */

.pad-dl[b-ioymho0s0e] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
}

.pad-dl--1col[b-ioymho0s0e] {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
}

.pad-dl__full[b-ioymho0s0e] {
    grid-column: 1 / -1;
}

.pad-dl dt[b-ioymho0s0e] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    margin-bottom: 4px;
}

.pad-dl dd[b-ioymho0s0e] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .pad-dl[b-ioymho0s0e] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pad-owner-email[b-ioymho0s0e] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--dp-text-secondary);
}

.pad-empty[b-ioymho0s0e] {
    color: var(--dp-text-secondary);
    font-style: italic;
    font-size: 0.8125rem;
}

/* ADR-061 — participating org units: a plain list inside the <dd>, one unit per line so long unit
   names wrap instead of pushing the value column out of the panel at 320px. */
.pad-org-list[b-ioymho0s0e] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-weight: 400;
}

/* ─── Security-measures table ────────────────────────────────────────────────── */

/* ADR-046 W5 lot (d): bảng này nay là DsDataTable, nên `.pad-table` (khung, đường kẻ, mật độ ô) đã
   xoá — `.ds-table` vẽ tất cả. Chỉ còn lại bề rộng cột hệ thống, thứ duy nhất DS không diễn đạt
   được: bậc DsColumnSize là px, còn bảng cũ khai 35% (`.pad-table__col-system`).
   ::deep là bắt buộc chứ không phải trang trí: <th>/<td> do DsDataTable render nên mang scope id
   CỦA NÓ; không có ::deep, rule này biên dịch thành `.pad-col--system[b-<trang này>]` và không bao
   giờ khớp phần tử nào (đúng cơ chế đã ghi trong DsDataTable.razor.css cho lưới chip).
   Đo trước migrate ở 1280px (before-padetail-1280-vi.json): 194px / 360px = 35% / 65%. */
.pad-security-table[b-ioymho0s0e]  .pad-col--system {
    width: 35%;
}

/* ─── DPIA status card ───────────────────────────────────────────────────────── */

.pad-dpia[b-ioymho0s0e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
}

.pad-dpia--ok[b-ioymho0s0e] {
    color: var(--dp-status-success);
}

.pad-dpia--warn[b-ioymho0s0e] {
    color: var(--dp-status-warning);
}

.pad-dpia p[b-ioymho0s0e] {
    margin: 0;
    color: var(--dp-text-primary);
    font-size: 0.875rem;
}

/* ─── Related entities ───────────────────────────────────────────────────────── */

.pad-related[b-ioymho0s0e] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pad-related__row[b-ioymho0s0e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--dp-text-primary);
}

/* ─── Metadata rows ──────────────────────────────────────────────────────────── */

.pad-meta[b-ioymho0s0e] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 0.8125rem;
}

.pad-meta__row[b-ioymho0s0e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pad-meta__row > span:first-child[b-ioymho0s0e] {
    color: var(--dp-text-secondary);
    font-size: 0.75rem;
}

.pad-meta__row > span:last-child[b-ioymho0s0e] {
    color: var(--dp-text-primary);
}
/* _content/BlazorFrontend/Pages/DataMapping/ProcessingActivityForm.razor.rz.scp.css */
.dm-page[b-z1g59g0ygw],
.dm-page-body[b-z1g59g0ygw] {
    min-width: 0;
}

.dm-page-body[b-z1g59g0ygw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The page stack owns spacing between top-level surfaces, filters and KPIs. */
.dm-page-body[b-z1g59g0ygw]  > .ds-filterbar,
.dm-page-body[b-z1g59g0ygw]  > .ds-statgrid,
.dm-page-body[b-z1g59g0ygw]  > .ds-tabs {
    margin-bottom: 0;
}

.dm-page-body[b-z1g59g0ygw]  .dm-editor-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    min-width: 0;
}

/*
 * ProcessingActivityForm.razor.css
 * Scoped styles for /data-mapping/processing-activities/create and /{Id}/edit
 * (khuôn C: back-link → PageHeader → 2-col form grid)
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */


.paf-grid[b-z1g59g0ygw] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.paf-grid__col[b-z1g59g0ygw] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

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

/* ─── Form fields ────────────────────────────────────────────────────────────── */

.paf-field[b-z1g59g0ygw] {
    margin-top: var(--space-3);
}

.paf-field:first-child[b-z1g59g0ygw] {
    margin-top: 0;
}

.paf-field--top[b-z1g59g0ygw] {
    margin-top: var(--space-4);
}

.paf-label[b-z1g59g0ygw] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.paf-label__note[b-z1g59g0ygw] {
    font-weight: 400;
    color: var(--dp-text-secondary);
}

.paf-required[b-z1g59g0ygw] {
    color: var(--dp-status-danger);
}

.paf-hint[b-z1g59g0ygw] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.paf-validation[b-z1g59g0ygw] {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-status-danger);
}

.paf-empty[b-z1g59g0ygw] {
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    font-style: italic;
}

.paf-row2[b-z1g59g0ygw],
.paf-row3[b-z1g59g0ygw] {
    display: grid;
    gap: var(--space-4);
}

.paf-row2[b-z1g59g0ygw] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.paf-row3[b-z1g59g0ygw] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.paf-row2--top[b-z1g59g0ygw],
.paf-row3--top[b-z1g59g0ygw] {
    margin-top: var(--space-3);
}

@media (max-width: 767px) {
    .paf-row2[b-z1g59g0ygw],
    .paf-row3[b-z1g59g0ygw] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ─── Checklists (systems / third parties / sensitive categories) ───────────── */

.paf-checklist[b-z1g59g0ygw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
}

.paf-checklist__hint[b-z1g59g0ygw] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.paf-checklist__owner[b-z1g59g0ygw] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

/* ─── Security-measures table ────────────────────────────────────────────────── */

/* ADR-046 W5 lot (d): `.paf-table` đã xoá cùng lúc bảng chuyển sang DsDataTable; chỉ giữ lại bề
   rộng 35% của cột hệ thống, thứ bậc DsColumnSize (đơn vị px) không diễn đạt được. ::deep là bắt
   buộc — <th>/<td> mang scope id của DsDataTable, không phải của trang này. Xem ghi chú dài hơn ở
   ProcessingActivityDetail.razor.css. */
.paf-security-table[b-z1g59g0ygw]  .paf-col--system {
    width: 35%;
}

/* ─── Linkage summary ────────────────────────────────────────────────────────── */

.paf-linkage__row[b-z1g59g0ygw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--dp-text-primary);
    margin-top: var(--space-2);
}

.paf-linkage__row:first-child[b-z1g59g0ygw] {
    margin-top: 0;
}
/* _content/BlazorFrontend/Pages/DataMapping/RetentionPolicyDetail.razor.rz.scp.css */
.dm-page[b-fm69yonjqi],
.dm-page-body[b-fm69yonjqi] {
    min-width: 0;
}

.dm-page-body[b-fm69yonjqi] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The page stack owns spacing between top-level surfaces, filters and KPIs. */
.dm-page-body[b-fm69yonjqi]  > .ds-filterbar,
.dm-page-body[b-fm69yonjqi]  > .ds-statgrid,
.dm-page-body[b-fm69yonjqi]  > .ds-tabs {
    margin-bottom: 0;
}

/*
 * RetentionPolicyDetail.razor.css
 * Scoped styles for /data-mapping/retention-policies/{Id} (khuôn C: back-link → PageHeader → 2-col grid)
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */


/* ─── Back link ──────────────────────────────────────────────────────────────── */

.rpd-back-actions[b-fm69yonjqi] {
    margin-top: var(--space-3);
}

/* ─── 2-column grid (khuôn C) ────────────────────────────────────────────────── */

.rpd-grid[b-fm69yonjqi] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.rpd-grid__col[b-fm69yonjqi] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

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

/* ─── Description ────────────────────────────────────────────────────────────── */

.rpd-desc[b-fm69yonjqi] {
    margin: 0 0 var(--space-4);
    font-size: 0.875rem;
    color: var(--dp-text-secondary);
    line-height: 1.6;
}

/* ─── Definition lists ───────────────────────────────────────────────────────── */

.rpd-dl[b-fm69yonjqi] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
}

.rpd-dl__full[b-fm69yonjqi] {
    grid-column: 1 / -1;
}

.rpd-dl dt[b-fm69yonjqi] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    margin-bottom: 4px;
}

.rpd-dl dd[b-fm69yonjqi] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .rpd-dl[b-fm69yonjqi] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rpd-link[b-fm69yonjqi] {
    color: var(--dp-interactive-accent);
    text-decoration: none;
}

.rpd-link:hover[b-fm69yonjqi] {
    text-decoration: underline;
}

/* ─── Justification text block ───────────────────────────────────────────────── */

.rpd-block-label[b-fm69yonjqi] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dp-text-secondary);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

.rpd-block-text[b-fm69yonjqi] {
    font-size: 0.875rem;
    color: var(--dp-text-primary);
    line-height: 1.6;
    margin: 0 0 var(--space-4);
    white-space: pre-wrap;
}

.rpd-block-text--last[b-fm69yonjqi] {
    margin-bottom: 0;
}

/* ─── Status ─────────────────────────────────────────────────────────────────── */

.rpd-status-row[b-fm69yonjqi] {
    display: flex;
    align-items: center;
}

/* ─── Metadata rows ──────────────────────────────────────────────────────────── */

.rpd-meta[b-fm69yonjqi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 0.8125rem;
}

.rpd-meta__row[b-fm69yonjqi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rpd-meta__row > span:first-child[b-fm69yonjqi] {
    color: var(--dp-text-secondary);
}

.rpd-meta__row > span:last-child[b-fm69yonjqi] {
    color: var(--dp-text-primary);
}
/* _content/BlazorFrontend/Pages/DataMapping/RetentionPolicyForm.razor.rz.scp.css */
.dm-page[b-rzhp5qcns0],
.dm-page-body[b-rzhp5qcns0] {
    min-width: 0;
}

.dm-page-body[b-rzhp5qcns0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The page stack owns spacing between top-level surfaces, filters and KPIs. */
.dm-page-body[b-rzhp5qcns0]  > .ds-filterbar,
.dm-page-body[b-rzhp5qcns0]  > .ds-statgrid,
.dm-page-body[b-rzhp5qcns0]  > .ds-tabs {
    margin-bottom: 0;
}

/*
 * RetentionPolicyForm.razor.css
 * Scoped styles for /data-mapping/retention-policies/create and /edit
 * (khuôn C: back-link → PageHeader → 2-col form grid)
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */


.rpf-grid[b-rzhp5qcns0] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.rpf-grid__col[b-rzhp5qcns0] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

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

/* ─── Form fields ────────────────────────────────────────────────────────────── */

.rpf-field[b-rzhp5qcns0] {
    margin-top: var(--space-3);
}

.rpf-field:first-child[b-rzhp5qcns0] {
    margin-top: 0;
}

.rpf-field--top[b-rzhp5qcns0] {
    margin-top: var(--space-4);
}

.rpf-row2[b-rzhp5qcns0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.rpf-row2:first-child[b-rzhp5qcns0] {
    margin-top: 0;
}

@media (max-width: 767px) {
    .rpf-row2[b-rzhp5qcns0] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ─── Quick retention-period picks ───────────────────────────────────────────── */

.rpf-quick-list[b-rzhp5qcns0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rpf-tips__text[b-rzhp5qcns0] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--space-3);
}

.rpf-tips__subhead[b-rzhp5qcns0] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.rpf-tips__list[b-rzhp5qcns0] {
    margin: 0;
    padding-left: 18px;
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    line-height: 1.7;
}
/* _content/BlazorFrontend/Pages/DataMapping/RopaReport.razor.rz.scp.css */
.dm-page[b-7arwr8k9xd],
.dm-page-body[b-7arwr8k9xd] {
    min-width: 0;
}

.dm-page-body[b-7arwr8k9xd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The page stack owns spacing between top-level surfaces, filters and KPIs. */
.dm-page-body[b-7arwr8k9xd]  > .ds-filterbar,
.dm-page-body[b-7arwr8k9xd]  > .ds-statgrid,
.dm-page-body[b-7arwr8k9xd]  > .ds-tabs {
    margin-bottom: 0;
}

/*
 * RopaReport.razor.css
 * Scoped styles for /data-mapping/ropa (khuôn A-like: PageHeader → config → summary → KPI → table/card list)
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

/* ─── Report configuration ───────────────────────────────────────────────────── */

.ropa-config-row[b-7arwr8k9xd] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 1023px) {
    .ropa-config-row[b-7arwr8k9xd] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ─── Report summary block ───────────────────────────────────────────────────── */

.ropa-summary[b-7arwr8k9xd] {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--dp-border-subtle);
    background: var(--dp-surface-primary);
}

.ropa-summary__head[b-7arwr8k9xd] {
    padding: var(--space-3) var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    border-bottom: 1px solid var(--dp-border-subtle);
    background: var(--dp-surface-secondary);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--dp-text-primary);
}

.ropa-summary__head > div:first-child[b-7arwr8k9xd] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ropa-summary__head span[b-7arwr8k9xd] {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--dp-text-secondary);
}

.ropa-summary__body[b-7arwr8k9xd] {
    padding: var(--space-4);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-6);
    font-size: 0.8125rem;
    color: var(--dp-text-primary);
}

.ropa-summary__body strong[b-7arwr8k9xd] {
    color: var(--dp-text-secondary);
    font-weight: 600;
}

.ropa-summary__right[b-7arwr8k9xd] {
    text-align: right;
}

/* D7 — standing caption under the register header: unit names are the ones recorded when the link was
   made. Spans both columns so it never competes with a value for width. */
.ropa-orgname-note[b-7arwr8k9xd] {
    grid-column: 1 / -1;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-text-muted);
}

@media (max-width: 767px) {
    .ropa-summary__body[b-7arwr8k9xd] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ropa-summary__right[b-7arwr8k9xd] {
        text-align: left;
    }
}

/* ─── KPI row ─────────────────────────────────────────────────────────────────── */

.ropa-stats[b-7arwr8k9xd] {
    margin: var(--space-4) 0;
}

/* ─── View toggle ─────────────────────────────────────────────────────────────── */

.ropa-viewtoggle[b-7arwr8k9xd] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--dp-border-subtle);
}

/* ─── Table ───────────────────────────────────────────────────────────────────── */

/* ADR-046 W5 lot (d): `.ropa-table-wrap` + `.ropa-table` (th/td/last-child) đã xoá — hai bảng của
   trang này nay là DsDataTable, khung/scroller/đường kẻ do `.ds-table-wrap`/`.ds-table` vẽ. Chỉ giữ
   những lớp vẫn được ô bảng dùng: `.ropa-link` và các nhấn mạnh inline bên dưới. */

.ropa-link[b-7arwr8k9xd] {
    color: var(--dp-interactive-accent);
    text-decoration: none;
    font-weight: 600;
}

.ropa-link:hover[b-7arwr8k9xd] {
    text-decoration: underline;
}

/* ─── Card view ───────────────────────────────────────────────────────────────── */

.ropa-cards[b-7arwr8k9xd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
}

.ropa-card[b-7arwr8k9xd] {
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ropa-card__head[b-7arwr8k9xd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--dp-surface-secondary);
}

.ropa-card__head h6[b-7arwr8k9xd] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.ropa-card__body[b-7arwr8k9xd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-6);
    padding: var(--space-4);
}

.ropa-card__body > div[b-7arwr8k9xd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.8125rem;
    color: var(--dp-text-primary);
}

.ropa-card__body > div > span:first-child[b-7arwr8k9xd] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.ropa-card__full[b-7arwr8k9xd] {
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    .ropa-card__body[b-7arwr8k9xd] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ─── Inline accents ──────────────────────────────────────────────────────────── */

.ropa-accent[b-7arwr8k9xd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--dp-interactive-accent);
}

.ropa-warn[b-7arwr8k9xd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--dp-status-warning);
}

.ropa-muted[b-7arwr8k9xd] {
    color: var(--dp-text-secondary);
    display: block;
    font-size: 0.75rem;
}
/* _content/BlazorFrontend/Pages/DataMapping/SystemDetail.razor.rz.scp.css */
.dm-page[b-mjhukmdz72],
.dm-page-body[b-mjhukmdz72] {
    min-width: 0;
}

.dm-page-body[b-mjhukmdz72] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The page stack owns spacing between top-level surfaces, filters and KPIs. */
.dm-page-body[b-mjhukmdz72]  > .ds-filterbar,
.dm-page-body[b-mjhukmdz72]  > .ds-statgrid,
.dm-page-body[b-mjhukmdz72]  > .ds-tabs {
    margin-bottom: 0;
}

/*
 * SystemDetail.razor.css
 * Scoped styles for /data-mapping/systems/{Id} (khuôn C: back-link → PageHeader → 2-col grid)
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */


/* ─── Back link ──────────────────────────────────────────────────────────────── */

.dmd-back-actions[b-mjhukmdz72] {
    margin-top: var(--space-3);
}

/* ─── 2-column grid (khuôn C) ────────────────────────────────────────────────── */

.dmd-grid[b-mjhukmdz72] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.dmd-grid__col[b-mjhukmdz72] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

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

/* ─── Definition lists ───────────────────────────────────────────────────────── */

.dmd-dl[b-mjhukmdz72] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
}

.dmd-dl__full[b-mjhukmdz72] {
    grid-column: 1 / -1;
}

.dmd-dl dt[b-mjhukmdz72] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    margin-bottom: 4px;
}

.dmd-dl dd[b-mjhukmdz72] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.dmd-country[b-mjhukmdz72] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .dmd-dl[b-mjhukmdz72] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ─── Security / access-control text blocks ──────────────────────────────────── */

.dmd-block-label[b-mjhukmdz72] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dp-text-secondary);
    margin-bottom: var(--space-2);
}

.dmd-block-text[b-mjhukmdz72] {
    font-size: 0.875rem;
    color: var(--dp-text-primary);
    line-height: 1.6;
    margin: 0 0 var(--space-4);
    white-space: pre-wrap;
}

.dmd-block-text--last[b-mjhukmdz72] {
    margin-bottom: 0;
}

/* ─── Related-data stat grid ─────────────────────────────────────────────────── */

.dmd-stat-grid[b-mjhukmdz72] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.dmd-stat[b-mjhukmdz72] {
    text-align: center;
    padding: var(--space-4);
    background: var(--dp-surface-secondary);
    border-radius: var(--radius-md);
}

.dmd-stat__value[b-mjhukmdz72] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--dp-interactive-accent);
}

.dmd-stat__label[b-mjhukmdz72] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    margin-top: 2px;
}

/* ─── Risk assessment ────────────────────────────────────────────────────────── */

.dmd-risk-row[b-mjhukmdz72] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.dmd-risk-bar[b-mjhukmdz72] {
    flex: 1;
}

/* ─── Contacts ───────────────────────────────────────────────────────────────── */

.dmd-contacts[b-mjhukmdz72] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dmd-contact[b-mjhukmdz72] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--dp-interactive-accent);
}

.dmd-contact__value[b-mjhukmdz72] {
    font-weight: 600;
    color: var(--dp-text-primary);
    font-size: 0.875rem;
}

.dmd-contact__value--link[b-mjhukmdz72] {
    color: var(--dp-interactive-accent);
    text-decoration: none;
}

.dmd-contact__value--link:hover[b-mjhukmdz72] {
    text-decoration: underline;
}

.dmd-contact__label[b-mjhukmdz72] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.dmd-declared-other[b-mjhukmdz72] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    max-width: 100%;
}

.dmd-declared-other__label[b-mjhukmdz72] {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 500;
}

.dmd-empty-text[b-mjhukmdz72] {
    color: var(--dp-text-secondary);
    font-style: italic;
    font-size: 0.875rem;
    margin: 0;
}

/* ─── Metadata rows ──────────────────────────────────────────────────────────── */

.dmd-meta[b-mjhukmdz72] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 0.8125rem;
}

.dmd-meta__row[b-mjhukmdz72] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dmd-meta__row > span:first-child[b-mjhukmdz72] {
    color: var(--dp-text-secondary);
}

.dmd-meta__row > span:last-child[b-mjhukmdz72] {
    color: var(--dp-text-primary);
}
/* _content/BlazorFrontend/Pages/DataMapping/SystemForm.razor.rz.scp.css */
.dm-page[b-fr5e4vd7c0],
.dm-page-body[b-fr5e4vd7c0] {
    min-width: 0;
}

.dm-page-body[b-fr5e4vd7c0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The page stack owns spacing between top-level surfaces, filters and KPIs. */
.dm-page-body[b-fr5e4vd7c0]  > .ds-filterbar,
.dm-page-body[b-fr5e4vd7c0]  > .ds-statgrid,
.dm-page-body[b-fr5e4vd7c0]  > .ds-tabs {
    margin-bottom: 0;
}

/*
 * SystemForm.razor.css
 * Scoped styles for /data-mapping/systems/create and /edit (khuôn C: back-link → PageHeader → 2-col form grid)
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */


.dmd-grid[b-fr5e4vd7c0] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.dmd-grid__col[b-fr5e4vd7c0] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

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

/* ─── Form fields ────────────────────────────────────────────────────────────── */

.dmf-field[b-fr5e4vd7c0] {
    margin-top: var(--space-3);
}

.dmf-field:first-child[b-fr5e4vd7c0] {
    margin-top: 0;
}

.dmf-field--top[b-fr5e4vd7c0] {
    margin-top: var(--space-4);
}

.dmf-row2[b-fr5e4vd7c0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.dmf-row2:first-child[b-fr5e4vd7c0] {
    margin-top: 0;
}

@media (max-width: 767px) {
    .dmf-row2[b-fr5e4vd7c0] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dmf-stack[b-fr5e4vd7c0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dmf-stack--top[b-fr5e4vd7c0] {
    margin-top: var(--space-4);
}

/* ─── Compliance score row ───────────────────────────────────────────────────── */

.dmf-compliance-row[b-fr5e4vd7c0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--dp-surface-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-3);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.dmf-tips__list[b-fr5e4vd7c0] {
    margin: 0;
    padding-left: 18px;
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    line-height: 1.7;
}
/* _content/BlazorFrontend/Pages/DataMapping/SystemList.razor.rz.scp.css */
.dm-page[b-ui6z8hrkrb],
.dm-page-body[b-ui6z8hrkrb] {
    min-width: 0;
}

.dm-page-body[b-ui6z8hrkrb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The page stack owns spacing between top-level surfaces, filters and KPIs. */
.dm-page-body[b-ui6z8hrkrb]  > .ds-filterbar,
.dm-page-body[b-ui6z8hrkrb]  > .ds-statgrid,
.dm-page-body[b-ui6z8hrkrb]  > .ds-tabs {
    margin-bottom: 0;
}

/*
 * SystemList.razor.css
 * Scoped styles for /data-mapping/systems (DM-01 hub — Systems tab)
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

.dm-hub-tabs[b-ui6z8hrkrb] {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.dm-hub-tabs[b-ui6z8hrkrb]  .ds-tabs,
.dm-inventory-tabs[b-ui6z8hrkrb]  .ds-tabs,
.dm-inventory-tabs[b-ui6z8hrkrb] {
    margin-bottom: 0;
}

/* The five-tab hub scrolls within its own strip when the shell is narrow. */
.dm-hub-tabs[b-ui6z8hrkrb]  .ds-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
}

.dm-hub-tabs[b-ui6z8hrkrb]  .ds-tab {
    flex: 0 0 auto;
}

.dm-row-actions[b-ui6z8hrkrb] {
    display: flex;
    justify-content: center;
}

/* ─── Subject cell (name + vendor, stacked) ──────────────────────────────────── */

.dm-subject-cell[b-ui6z8hrkrb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dm-subject-name[b-ui6z8hrkrb] {
    font-weight: 600;
    color: var(--dp-text-primary);
}

/* Leave primary text columns flexible; names/descriptions must remain readable. */
.dm-page[b-ui6z8hrkrb]  td.dm-col-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

.dm-subject-sub[b-ui6z8hrkrb] {
    font-size: var(--apple-font-caption-size, 0.75rem);
    color: var(--dp-text-secondary);
}

/* ─── Generic muted / count cells ────────────────────────────────────────────── */

.dm-muted[b-ui6z8hrkrb] {
    color: var(--dp-text-secondary);
    font-size: var(--apple-font-caption-size, 0.8125rem);
}

.dm-count[b-ui6z8hrkrb] {
    font-weight: 600;
    color: var(--dp-text-primary);
}

/* ─── Pagination ─────────────────────────────────────────────────────────────── */

.dm-pagination-wrap[b-ui6z8hrkrb] {
    display: flex;
    justify-content: flex-end;
}

.dm-chip-row[b-ui6z8hrkrb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.dmf-row2[b-ui6z8hrkrb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}

@media (max-width: 767px) {
    .dmf-row2[b-ui6z8hrkrb] {
        grid-template-columns: minmax(0, 1fr);
    }
}
.dm-system-identity[b-ui6z8hrkrb] { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
/* _content/BlazorFrontend/Pages/DataMapping/ThirdPartyDetail.razor.rz.scp.css */
.dm-page[b-51q30ql6ww],
.dm-page-body[b-51q30ql6ww] {
    min-width: 0;
}

.dm-page-body[b-51q30ql6ww] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The page stack owns spacing between top-level surfaces, filters and KPIs. */
.dm-page-body[b-51q30ql6ww]  > .ds-filterbar,
.dm-page-body[b-51q30ql6ww]  > .ds-statgrid,
.dm-page-body[b-51q30ql6ww]  > .ds-tabs {
    margin-bottom: 0;
}

/*
 * ThirdPartyDetail.razor.css
 * Scoped styles for /data-mapping/third-parties/{Id} (khuôn C: back-link → PageHeader → 2-col grid)
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */


/* ─── Back link ──────────────────────────────────────────────────────────────── */

.tpd-back-actions[b-51q30ql6ww] {
    margin-top: var(--space-3);
}

/* ─── 2-column grid (khuôn C) ────────────────────────────────────────────────── */

.tpd-grid[b-51q30ql6ww] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.tpd-grid__col[b-51q30ql6ww] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 991px) {
    .tpd-grid[b-51q30ql6ww] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ─── Definition lists ───────────────────────────────────────────────────────── */

.tpd-dl[b-51q30ql6ww] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
}

.tpd-dl__full[b-51q30ql6ww] {
    grid-column: 1 / -1;
}

.tpd-dl dt[b-51q30ql6ww] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    margin-bottom: 4px;
}

.tpd-dl dd[b-51q30ql6ww] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .tpd-dl[b-51q30ql6ww] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.tpd-link[b-51q30ql6ww] {
    color: var(--dp-interactive-accent);
    text-decoration: none;
}

.tpd-link:hover[b-51q30ql6ww] {
    text-decoration: underline;
}

/* ─── Labeled text blocks ─────────────────────────────────────────────────────── */

.tpd-block-label[b-51q30ql6ww] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dp-text-secondary);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

.tpd-block-label:first-child[b-51q30ql6ww] {
    margin-top: 0;
}

.tpd-block-text[b-51q30ql6ww] {
    font-size: 0.875rem;
    color: var(--dp-text-primary);
    line-height: 1.6;
    margin: 0 0 var(--space-2);
    white-space: pre-wrap;
}

.tpd-block-text--code[b-51q30ql6ww] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.8125rem;
    background: var(--dp-surface-secondary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
}

.tpd-empty-italic[b-51q30ql6ww] {
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    font-style: italic;
}

/* ─── Chips row ──────────────────────────────────────────────────────────────── */

.tpd-chips[b-51q30ql6ww] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ─── Status row (DPA badge) ─────────────────────────────────────────────────── */

.tpd-status-row[b-51q30ql6ww] {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-3);
}

/* ─── Risk assessment ────────────────────────────────────────────────────────── */

.tpd-risk-row[b-51q30ql6ww] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.tpd-risk-bar[b-51q30ql6ww] {
    flex: 1;
    height: 8px;
    border-radius: 99px;
    background: var(--dp-surface-secondary);
    overflow: hidden;
}

.tpd-risk-bar__fill[b-51q30ql6ww] {
    height: 100%;
    border-radius: 99px;
}

.tpd-risk-bar__fill--low[b-51q30ql6ww] {
    width: 25%;
    background: var(--dp-status-success);
}

.tpd-risk-bar__fill--medium[b-51q30ql6ww] {
    width: 55%;
    background: var(--dp-status-warning);
}

.tpd-risk-bar__fill--high[b-51q30ql6ww] {
    width: 80%;
    background: var(--dp-status-danger);
}

.tpd-risk-bar__fill--critical[b-51q30ql6ww] {
    width: 100%;
    background: var(--dp-status-danger);
}

/* ─── Related-data stat ──────────────────────────────────────────────────────── */

.tpd-stat[b-51q30ql6ww] {
    text-align: center;
    padding: var(--space-4);
    background: var(--dp-surface-secondary);
    border-radius: var(--radius-md);
}

.tpd-stat__value[b-51q30ql6ww] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--dp-interactive-accent);
}

.tpd-stat__label[b-51q30ql6ww] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    margin-top: 2px;
}

/* ─── Metadata rows ──────────────────────────────────────────────────────────── */

.tpd-meta[b-51q30ql6ww] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 0.8125rem;
}

.tpd-meta__row[b-51q30ql6ww] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tpd-meta__row > span:first-child[b-51q30ql6ww] {
    color: var(--dp-text-secondary);
}

.tpd-meta__row > span:last-child[b-51q30ql6ww] {
    color: var(--dp-text-primary);
}
/* _content/BlazorFrontend/Pages/DataMapping/ThirdPartyForm.razor.rz.scp.css */
.dm-page[b-bniekrimsj],
.dm-page-body[b-bniekrimsj] {
    min-width: 0;
}

.dm-page-body[b-bniekrimsj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
}

/* The page stack owns spacing between top-level surfaces, filters and KPIs. */
.dm-page-body[b-bniekrimsj]  > .ds-filterbar,
.dm-page-body[b-bniekrimsj]  > .ds-statgrid,
.dm-page-body[b-bniekrimsj]  > .ds-tabs {
    margin-bottom: 0;
}

/*
 * ThirdPartyForm.razor.css
 * Scoped styles for /data-mapping/third-parties/new and /{Id}/edit
 * (khuôn C: back-link → PageHeader → 2-col form grid)
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */


.tpf-grid[b-bniekrimsj] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.tpf-grid__col[b-bniekrimsj] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

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

/* ─── Form fields ────────────────────────────────────────────────────────────── */

.tpf-field[b-bniekrimsj] {
    margin-top: var(--space-3);
}

.tpf-field:first-child[b-bniekrimsj] {
    margin-top: 0;
}

.tpf-field--top[b-bniekrimsj] {
    margin-top: var(--space-4);
}

.tpf-label[b-bniekrimsj] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.tpf-hint[b-bniekrimsj] {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.tpf-validation[b-bniekrimsj] {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-status-danger);
}

.tpf-row2[b-bniekrimsj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.tpf-row2:first-child[b-bniekrimsj] {
    margin-top: 0;
}

@media (max-width: 767px) {
    .tpf-row2[b-bniekrimsj] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ─── DPA file upload row ────────────────────────────────────────────────────── */

.tpf-dpa-file[b-bniekrimsj] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

[b-bniekrimsj] .tpf-file-input {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

.tpf-dpa-file[b-bniekrimsj]  .ds-tag { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

.tpf-tips__list[b-bniekrimsj] {
    margin: 0;
    padding-left: 18px;
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    line-height: 1.7;
}
/* _content/BlazorFrontend/Pages/EmailServices/BackgroundMonitoring.razor.rz.scp.css */
.bm-page[b-vdvkkxbq01] {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
}

.bm-page > *[b-vdvkkxbq01] {
    min-width: 0;
}

.bm-service-grid[b-vdvkkxbq01],
.bm-action-grid[b-vdvkkxbq01] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.bm-service-head[b-vdvkkxbq01],
.bm-action-heading[b-vdvkkxbq01],
.bm-button-row[b-vdvkkxbq01] {
    display: flex;
    align-items: center;
}

.bm-service-head[b-vdvkkxbq01] {
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.bm-service-icon[b-vdvkkxbq01] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-brand-secondary, var(--accent-soft));
    color: var(--color-text-brand, var(--accent));
}

.bm-service-icon--warning[b-vdvkkxbq01] {
    background: var(--color-bg-surface-warning-secondary, var(--warning-soft));
    color: var(--color-text-warning, var(--warning));
}

.bm-facts[b-vdvkkxbq01] {
    display: grid;
    margin: 0;
}

.bm-facts > div[b-vdvkkxbq01] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

.bm-facts dt[b-vdvkkxbq01],
.bm-facts dd[b-vdvkkxbq01] {
    min-width: 0;
    margin: 0;
}

.bm-facts dt[b-vdvkkxbq01] {
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.8125rem;
}

.bm-facts dd[b-vdvkkxbq01] {
    overflow-wrap: anywhere;
    color: var(--color-text-primary, var(--text-strong));
    font-size: 0.875rem;
    font-weight: 600;
    text-align: right;
}

.bm-action-group[b-vdvkkxbq01] {
    min-width: 0;
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface-secondary, var(--surface-muted));
}

.bm-action-heading[b-vdvkkxbq01] {
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.bm-action-heading h4[b-vdvkkxbq01] {
    margin: 0;
    color: var(--color-text-primary, var(--text-strong));
    font-size: 0.9375rem;
}

.bm-button-row[b-vdvkkxbq01] {
    flex-wrap: wrap;
    gap: var(--space-2);
}

@media (max-width: 767.98px) {
    .bm-service-grid[b-vdvkkxbq01],
    .bm-action-grid[b-vdvkkxbq01] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/BlazorFrontend/Pages/EmailServices/DeadLetterQueueManagement.razor.rz.scp.css */
.dlq-page[b-7e7zmy35uw] {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
    padding-bottom: 84px;
}

.dlq-page > *[b-7e7zmy35uw] {
    min-width: 0;
}

.dlq-breakdown[b-7e7zmy35uw] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
}

.dlq-breakdown-item[b-7e7zmy35uw] {
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-secondary, var(--surface-muted));
}

.dlq-breakdown-item > span:last-child[b-7e7zmy35uw] {
    width: 100%;
    overflow: hidden;
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.75rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlq-table[b-7e7zmy35uw] {
    min-width: 0;
}

.dlq-primary[b-7e7zmy35uw],
.dlq-muted[b-7e7zmy35uw] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlq-primary[b-7e7zmy35uw] {
    color: var(--color-text-primary, var(--text-strong));
    font-weight: 600;
}

.dlq-muted[b-7e7zmy35uw] {
    margin-top: 2px;
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.75rem;
}

.dlq-mono[b-7e7zmy35uw],
.dlq-detail-list code[b-7e7zmy35uw] {
    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.dlq-actions[b-7e7zmy35uw],
.dlq-bulkbar[b-7e7zmy35uw],
.dlq-bulk-actions[b-7e7zmy35uw],
.dlq-modal-actions[b-7e7zmy35uw] {
    display: flex;
    align-items: center;
}

.dlq-actions[b-7e7zmy35uw] {
    justify-content: flex-end;
    gap: var(--space-1);
}

.dlq-bulkbar[b-7e7zmy35uw] {
    position: fixed;
    z-index: 30;
    right: var(--space-5);
    bottom: var(--space-5);
    left: max(var(--space-5), var(--sidebar-width, 0px));
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-brand, var(--accent));
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface-primary, var(--surface));
    box-shadow: var(--shadow-lg);
}

.dlq-bulkbar strong[b-7e7zmy35uw] {
    color: var(--color-text-primary, var(--text-strong));
}

.dlq-bulk-actions[b-7e7zmy35uw],
.dlq-modal-actions[b-7e7zmy35uw] {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.dlq-detail-grid[b-7e7zmy35uw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.dlq-detail-list[b-7e7zmy35uw] {
    display: grid;
    min-width: 0;
    margin: 0;
}

.dlq-detail-list > div[b-7e7zmy35uw] {
    display: grid;
    grid-template-columns: minmax(110px, 0.7fr) minmax(0, 1.3fr);
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.dlq-detail-list dt[b-7e7zmy35uw],
.dlq-detail-list dd[b-7e7zmy35uw] {
    min-width: 0;
    margin: 0;
}

.dlq-detail-list dt[b-7e7zmy35uw] {
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.8125rem;
}

.dlq-detail-list dd[b-7e7zmy35uw] {
    overflow-wrap: anywhere;
    color: var(--color-text-primary, var(--text-body));
    font-size: 0.875rem;
}

.dlq-detail-list dd small[b-7e7zmy35uw] {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-secondary, var(--text-muted));
}

.dlq-tags[b-7e7zmy35uw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.dlq-modal-actions[b-7e7zmy35uw] {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

@media (min-width: 768px) {
    .dlq-table[b-7e7zmy35uw]  .dlq-col--select { width: 5%; }
    .dlq-table[b-7e7zmy35uw]  .dlq-col--subject { width: 20%; }
    .dlq-table[b-7e7zmy35uw]  .dlq-col--recipients { width: 22%; }
    .dlq-table[b-7e7zmy35uw]  .dlq-col--failure { width: 15%; }
    .dlq-table[b-7e7zmy35uw]  .dlq-col--retry { width: 9%; }
    .dlq-table[b-7e7zmy35uw]  .dlq-col--attempt { width: 16%; }
    .dlq-table[b-7e7zmy35uw]  .dlq-col--actions { width: 13%; }
}

@media (max-width: 899.98px) {
    .dlq-breakdown[b-7e7zmy35uw] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 699.98px) {
    .dlq-detail-grid[b-7e7zmy35uw] {
        grid-template-columns: minmax(0, 1fr);
    }

    .dlq-bulkbar[b-7e7zmy35uw] {
        right: var(--space-3);
        bottom: var(--space-3);
        left: var(--space-3);
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 479.98px) {
    .dlq-breakdown[b-7e7zmy35uw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* _content/BlazorFrontend/Pages/Help/Tutorials.razor.rz.scp.css */
/* ==========================================================================
   Help / Tutorials — scoped styles. Colours via --dp-* tokens only.
   ========================================================================== */

/* Video tutorial grid inside the Getting Started panel */
.htut-video-grid[b-2m25v1ejj9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.25rem;
}

/* Two-column layout: Quick Start (wide) + Shortcuts (narrow) */
.htut-two-col[b-2m25v1ejj9] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
    margin-top: 1.25rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .htut-two-col[b-2m25v1ejj9] {
        grid-template-columns: 1fr;
    }
}

/* Quick start steps */
.htut-steps[b-2m25v1ejj9] {
    display: flex;
    flex-direction: column;
}

.htut-step[b-2m25v1ejj9] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--dp-border-default);
}

    .htut-step:last-child[b-2m25v1ejj9] {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .htut-step:first-child[b-2m25v1ejj9] {
        padding-top: 0;
    }

.htut-step-num[b-2m25v1ejj9] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
}

.htut-step-body[b-2m25v1ejj9] {
    flex: 1 1 auto;
    min-width: 0;
}

.htut-step-title[b-2m25v1ejj9] {
    margin: 0 0 0.15rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.htut-step-desc[b-2m25v1ejj9] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
    line-height: 1.45;
}

.htut-step-link[b-2m25v1ejj9] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md, 8px);
    color: var(--dp-interactive-primary);
    background-color: var(--dp-surface-brand-subtle);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

    .htut-step-link:hover[b-2m25v1ejj9] {
        background-color: var(--dp-interactive-primary);
        color: var(--dp-text-on-primary);
    }

    .htut-step-link:focus-visible[b-2m25v1ejj9] {
        outline: 2px solid var(--dp-border-focus);
        outline-offset: 2px;
    }

/* Keyboard shortcuts */
.htut-shortcuts[b-2m25v1ejj9] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.htut-shortcut[b-2m25v1ejj9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.htut-shortcut-desc[b-2m25v1ejj9] {
    font-size: 0.875rem;
    color: var(--dp-text-secondary);
}

.htut-kbd[b-2m25v1ejj9] {
    flex: 0 0 auto;
    font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
    font-size: 0.75rem;
    color: var(--dp-text-primary);
    background-color: var(--dp-surface-secondary);
    border: 1px solid var(--dp-border-default);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}

/* FAQ accordion */
.htut-faq[b-2m25v1ejj9] {
    display: flex;
    flex-direction: column;
}

.htut-faq-item[b-2m25v1ejj9] {
    border-bottom: 1px solid var(--dp-border-default);
}

    .htut-faq-item:last-child[b-2m25v1ejj9] {
        border-bottom: 0;
    }

.htut-faq-q[b-2m25v1ejj9] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: transparent;
    border: 0;
    padding: 1rem 0;
    text-align: left;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

    .htut-faq-q:hover[b-2m25v1ejj9] {
        color: var(--dp-interactive-primary);
    }

    .htut-faq-q:focus-visible[b-2m25v1ejj9] {
        outline: 2px solid var(--dp-border-focus);
        outline-offset: 2px;
        border-radius: 4px;
    }

.htut-faq-chevron[b-2m25v1ejj9] {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--dp-text-tertiary);
    transition: transform 0.2s ease;
}

.htut-faq-item.is-open .htut-faq-chevron[b-2m25v1ejj9] {
    transform: rotate(180deg);
    color: var(--dp-interactive-primary);
}

.htut-faq-a[b-2m25v1ejj9] {
    padding: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--dp-text-secondary);
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    .htut-faq-chevron[b-2m25v1ejj9],
    .htut-step-link[b-2m25v1ejj9] {
        transition: none;
    }
}
/* _content/BlazorFrontend/Pages/Infrastructure/Clusters.razor.rz.scp.css */
.cluster-layout[b-snlxuj1ro8] { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(22rem, 2fr); gap: 1rem; }
.cluster-card[b-snlxuj1ro8] { padding: 1.25rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-body-bg); }
.cluster-card h2[b-snlxuj1ro8] { font-size: 1.2rem; margin-bottom: 1rem; }
.cluster-card h2 small[b-snlxuj1ro8] { font-size: .8rem; font-weight: 400; }
.cluster-card h3[b-snlxuj1ro8] { font-size: 1rem; }
.cluster-site[b-snlxuj1ro8] { padding: 1rem 0; border-bottom: 1px solid var(--bs-border-color); }
.cluster-site small[b-snlxuj1ro8] { display: block; margin: .4rem 0; }
.cluster-form[b-snlxuj1ro8] { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.cluster-inline[b-snlxuj1ro8], .cluster-picker[b-snlxuj1ro8] { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin: 1rem 0; }
.cluster-operation[b-snlxuj1ro8] { padding: .8rem 0; border-bottom: 1px solid var(--bs-border-color); }
.cluster-operation summary[b-snlxuj1ro8] { cursor: pointer; font-weight: 600; }
.cluster-operation button[b-snlxuj1ro8] { margin-right: .5rem; }
.cluster-journal-title[b-snlxuj1ro8] { font-size: .95rem; margin: 1rem 0 .4rem; }
.cluster-card code[b-snlxuj1ro8] { overflow-wrap: anywhere; }
@media (max-width: 800px) { .cluster-layout[b-snlxuj1ro8], .cluster-form[b-snlxuj1ro8] { grid-template-columns: minmax(0, 1fr); } }
.cluster-agent-line[b-snlxuj1ro8] { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
/* First-paint cap (ui-spec-clusters-list-cap-2026-09-28 §5/§7) — existing tokens only. */
.cluster-search[b-snlxuj1ro8] { margin: 1rem 0 .5rem; }
.cluster-count[b-snlxuj1ro8] { color: var(--dp-text-muted); margin-bottom: .5rem; overflow-wrap: anywhere; }
.cluster-site:focus-visible[b-snlxuj1ro8] { outline: 2px solid var(--dp-interactive-primary); outline-offset: 2px; }
.cluster-more[b-snlxuj1ro8] { margin-top: .75rem; }
.cluster-disclosure[b-snlxuj1ro8] { margin-bottom: 1rem; }
@media (max-width: 767px) {
    .cluster-more[b-snlxuj1ro8], .cluster-disclosure[b-snlxuj1ro8] { width: 100%; min-height: 44px; }
    .cluster-search[b-snlxuj1ro8]  .ds-input-shell { min-height: 44px; }
    .cluster-clear[b-snlxuj1ro8] { min-height: 44px; }
}
/* _content/BlazorFrontend/Pages/Onboarding/Components/Step2DomainSetup.razor.rz.scp.css */
/*
 * Step2DomainSetup.razor.css — bảng tóm tắt domain của wizard onboarding.
 * Datanomics.Ds design system — chỉ dùng token --dp-*, không inline style.
 *
 * ADR-046 W5: bảng tóm tắt đã chuyển sang DsDataTable, khung/đường kẻ/scroller do
 * `.ds-table-wrap`/`.ds-table` vẽ. File này tồn tại đúng vì MỘT lý do: `<tr>` do DsDataTable
 * render nên mang scope id của DS, một selector trần `.dom-row--invalid td` sẽ biên dịch thành
 * `.dom-row--invalid td[b-<Step2DomainSetup>]` và không khớp gì cả — nên rule phải đi qua `::deep`
 * neo ở một phần tử do CHÍNH trang viết (`.dom-table-wrap`). Tiền lệ: `.au-table-wrap` lô (b),
 * `.tup-table-wrap` lô (e).
 */
.dom-table-wrap[b-25od8bqm1e] {
    width: 100%;
}

/* Hàng domain thiếu Name/Url — thay `table-warning` của Bootstrap (không còn hiệu lực vì `.ds-table`
   không mang class `.table`). Dùng token cảnh báo có sẵn của nền tảng, cùng token với
   `.hb-row--suspect` ở Licensing/HeartbeatStatus; không thêm token mới. */
.dom-table-wrap[b-25od8bqm1e]  .dom-row--invalid td {
    background: var(--dp-status-warning-bg);
}
/* _content/BlazorFrontend/Pages/Onboarding/Components/Step6PrivacyNotice.razor.rz.scp.css */
/* =========================================================
   Step6PrivacyNotice — scoped styles
   Migrated from inline style="" + legacy --pp-* vars to
   semantic --dp-* tokens (variables.css single source of truth).
   ========================================================= */

/* --- Preview card header --- */
.step6-card-header[b-0caudc56lt] {
    background-color: var(--dp-surface-secondary);
    border-bottom: 2px solid var(--dp-border-default);
}

.step6-card-title[b-0caudc56lt] {
    color: var(--dp-text-primary);
}

/* --- Draft badge --- */
.step6-draft-badge[b-0caudc56lt] {
    background-color: var(--dp-status-warning-bg);
    color: var(--dp-status-warning-text);
    border: 1px solid var(--dp-status-warning-border);
}

/* --- Content preview box --- */
.step6-content-box[b-0caudc56lt] {
    background-color: var(--dp-surface-secondary);
    border: 1px solid var(--dp-border-default);
    min-height: 100px;
}

.step6-content-text[b-0caudc56lt] {
    color: var(--dp-text-secondary);
    line-height: 1.75;
    font-size: 0.95rem;
}

/* --- Metadata chips --- */
.step6-meta-success[b-0caudc56lt] {
    background: var(--dp-status-success-bg);
}

.step6-meta-warning[b-0caudc56lt] {
    background: var(--dp-status-warning-bg);
}
/* _content/BlazorFrontend/Pages/Onboarding/WelcomeScreen.razor.rz.scp.css */
/* ==========================================================================
   WelcomeScreen — Scoped styles
   ========================================================================== */

/* Root full-screen background */
.welcome-screen-root[b-yxsekwc3ft] {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, var(--dp-surface-brand-subtle) 0%, var(--dp-surface-brand-subtle) 50%, var(--dp-surface-page) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow-y: auto;
    padding: 24px 16px;
}

/* Language switcher */
.welcome-lang-switcher[b-yxsekwc3ft] {
    position: fixed;
    top: 20px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
}

.lang-btn[b-yxsekwc3ft] {
    background: none;
    border: none;
    padding: 4px 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--dp-text-secondary);
    cursor: pointer;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.lang-btn:hover[b-yxsekwc3ft] {
    color: var(--dp-interactive-primary-hover);
    background-color: var(--dp-surface-brand-subtle);
}

.lang-btn--active[b-yxsekwc3ft] {
    color: var(--dp-interactive-primary);
    font-weight: 700;
}

.lang-btn:focus-visible[b-yxsekwc3ft] {
    outline: 2px solid var(--dp-interactive-primary);
    outline-offset: 2px;
}

.lang-separator[b-yxsekwc3ft] {
    color: var(--dp-text-tertiary); /* was --dp-border-strong → rgba(0,0,0,0.14) invisible in refined-teal */
    font-size: 0.75rem;
    user-select: none;
}

/* Card wrapper */
.welcome-card-wrapper[b-yxsekwc3ft] {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Main card */
.welcome-card[b-yxsekwc3ft] {
    background: var(--dp-surface-primary);
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(1, 205, 211, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--dp-interactive-primary);
    padding: 40px 48px;
    max-width: 560px;
    width: 100%;
    text-align: center;
    animation: welcomeSlideUp-b-yxsekwc3ft 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes welcomeSlideUp-b-yxsekwc3ft {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Logo */
.welcome-logo[b-yxsekwc3ft] {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

.welcome-logo-fallback[b-yxsekwc3ft] {
    align-items: center;
    justify-content: center;
}

.welcome-logo-text[b-yxsekwc3ft] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dp-interactive-primary);
    letter-spacing: -0.5px;
}

/* Shield */
.welcome-shield[b-yxsekwc3ft] {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

/* Greeting */
.welcome-greeting[b-yxsekwc3ft] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dp-text-primary);
    margin-bottom: 12px;
    line-height: 1.3;
}

/* Meta row: role badge + org */
.welcome-meta[b-yxsekwc3ft] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.welcome-role-badge[b-yxsekwc3ft] {
    display: inline-flex;
    align-items: center;
    background-color: var(--dp-surface-brand-subtle);
    color: var(--dp-interactive-primary);
    border: 1px solid var(--dp-interactive-primary);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.welcome-org[b-yxsekwc3ft] {
    display: inline-flex;
    align-items: center;
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
}

/* Description banner */
.welcome-description-banner[b-yxsekwc3ft] {
    background: var(--dp-surface-brand-subtle);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 28px;
}

.welcome-platform-title[b-yxsekwc3ft] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: 4px;
}

.welcome-compliance-tags[b-yxsekwc3ft] {
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
    margin-bottom: 0;
}

/* Action buttons */
.welcome-actions[b-yxsekwc3ft] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.welcome-btn-primary[b-yxsekwc3ft] {
    background-color: var(--dp-interactive-primary);
    border-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 28px;
    border-radius: 10px;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(1, 205, 211, 0.3);
}

.welcome-btn-primary:hover:not(:disabled)[b-yxsekwc3ft] {
    background-color: var(--dp-interactive-primary-hover);
    border-color: var(--dp-interactive-primary-hover);
    color: var(--dp-text-on-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(1, 205, 211, 0.4);
}

.welcome-btn-primary:active:not(:disabled)[b-yxsekwc3ft] {
    background-color: var(--dp-interactive-primary-active);
    border-color: var(--dp-interactive-primary-active);
    color: var(--dp-text-on-primary);
    transform: translateY(0);
}

.welcome-btn-primary:focus-visible[b-yxsekwc3ft] {
    outline: 3px solid var(--dp-interactive-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(1, 205, 211, 0.25);
}

.welcome-btn-primary:disabled[b-yxsekwc3ft] {
    opacity: 0.7;
    cursor: not-allowed;
}

.welcome-btn-outline[b-yxsekwc3ft] {
    background-color: transparent;
    border: 2px solid var(--dp-interactive-primary);
    color: var(--dp-interactive-primary);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 10px 28px;
    border-radius: 10px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.welcome-btn-outline:hover:not(:disabled)[b-yxsekwc3ft] {
    background-color: var(--dp-surface-brand-subtle);
    color: var(--dp-interactive-primary-hover);
    transform: translateY(-1px);
}

.welcome-btn-outline:active:not(:disabled)[b-yxsekwc3ft] {
    background-color: var(--dp-surface-active);
    transform: translateY(0);
}

.welcome-btn-outline:focus-visible[b-yxsekwc3ft] {
    outline: 3px solid var(--dp-interactive-primary);
    outline-offset: 3px;
}

.welcome-btn-outline:disabled[b-yxsekwc3ft] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Hint */
.welcome-hint[b-yxsekwc3ft] {
    font-size: 0.82rem;
    color: var(--dp-text-tertiary);
    margin-bottom: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .welcome-card[b-yxsekwc3ft] {
        padding: 32px 24px;
        border-radius: 16px;
    }

    .welcome-greeting[b-yxsekwc3ft] {
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
    .welcome-screen-root[b-yxsekwc3ft] {
        align-items: flex-start;
        padding-top: 64px;
    }

    .welcome-card[b-yxsekwc3ft] {
        padding: 28px 20px;
        border-radius: 12px;
        max-width: 100%;
    }

    .welcome-greeting[b-yxsekwc3ft] {
        font-size: 1.25rem;
    }

    .welcome-actions[b-yxsekwc3ft] {
        gap: 10px;
    }

    .welcome-btn-primary[b-yxsekwc3ft],
    .welcome-btn-outline[b-yxsekwc3ft] {
        width: 100%;
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .welcome-card[b-yxsekwc3ft] {
        animation: none;
    }

    .welcome-btn-primary[b-yxsekwc3ft],
    .welcome-btn-outline[b-yxsekwc3ft] {
        transition: none;
    }
}
/* _content/BlazorFrontend/Pages/Profile/Security.razor.rz.scp.css */
/*
 * Security.razor.css — scoped styles for /profile/security, /account/security (MFA)
 * All colors via --dp-* tokens only. WCAG 2.2 AA.
 */

.dm-skeleton[b-bxm3d9hokt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-bxm3d9hokt] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-bxm3d9hokt] {
    height: 56px;
    width: 100%;
}

.sm-grid[b-bxm3d9hokt] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-4);
    align-items: start;
    margin-top: var(--space-4);
}

@media (max-width: 1023px) {
    .sm-grid[b-bxm3d9hokt] {
        grid-template-columns: 1fr;
    }
}

.sm-status-row[b-bxm3d9hokt] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.sm-status-meta[b-bxm3d9hokt] {
    font-size: 0.8125rem;
    color: var(--dp-text-tertiary);
}

.sm-actions[b-bxm3d9hokt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* ─── Tips ─────────────────────────────────────────────────────────────────── */

.sm-tips[b-bxm3d9hokt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sm-tip[b-bxm3d9hokt] {
    display: flex;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--dp-border-subtle);
}

.sm-tip:last-child[b-bxm3d9hokt] {
    border-bottom: none;
    padding-bottom: 0;
}

.sm-tip-icon[b-bxm3d9hokt] {
    flex-shrink: 0;
    color: var(--dp-interactive-primary);
    margin-top: 2px;
}

.sm-tip-title[b-bxm3d9hokt] {
    margin: 0 0 2px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.sm-tip-desc[b-bxm3d9hokt] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--dp-text-secondary);
}

/* ─── Modal form fields ────────────────────────────────────────────────────── */

.sm-field[b-bxm3d9hokt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-3);
}

.sm-label[b-bxm3d9hokt] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
}

.sm-input[b-bxm3d9hokt] {
    padding: 8px 12px;
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md);
    background-color: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-size: 0.875rem;
    width: 100%;
}

.sm-input:focus[b-bxm3d9hokt] {
    outline: none;
    border-color: var(--dp-border-focus);
    box-shadow: 0 0 0 3px var(--dp-border-focus);
}

.sm-hint[b-bxm3d9hokt] {
    font-size: 0.8125rem;
    color: var(--dp-text-tertiary);
}
/* _content/BlazorFrontend/Pages/Settings/EmailConfig.razor.rz.scp.css */
/* Tenant email configuration (T9).
   Every colour here is a --dp-* token: the screen proposes no new token, because the five
   certification states map onto the existing --dp-status-* set and the two neutral states are
   deliberately told apart by icon and wording rather than by a colour of their own. */

.tec-loading[b-1ajhhrtd1d] {
    padding: 24px 0;
}

.tec-conflict[b-1ajhhrtd1d] {
    margin-bottom: 16px;
}

.tec-conflict:focus-visible[b-1ajhhrtd1d] {
    outline: 2px solid var(--dp-border-focus);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- layout */

.tec-layout[b-1ajhhrtd1d] {
    display: grid;
    /* minmax(0, …) rather than a 720px floor: at a 1280px viewport the app sidebar leaves less than
       720 + 340 + gap, and a hard floor would overflow the page horizontally instead of shrinking. */
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
    margin-top: 16px;
}

.tec-main[b-1ajhhrtd1d],
.tec-side[b-1ajhhrtd1d] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* The column itself stays in normal flow: a sticky column has no overflow handling, so once its
   content is taller than the sticky window its bottom is unreachable at every scroll position. The
   sticky window here is the height of the scrolling content column (.ds-shell-content,
   MainLayout.razor.css:184) — the window itself never scrolls (MainLayout.razor:216). Only the
   activation panel sticks, which is height-invariant — longer copy above it just makes the page
   taller. align-self is required because .tec-layout sets align-items: start, which would size this
   box to its content and leave the sticky child no distance to travel. */
.tec-side[b-1ajhhrtd1d] {
    align-self: stretch;
}

/* Scoped-id note: Class lands on DsPagePanel's own <section>, which does not carry this file's
   scope attribute — hence ::deep, as with .tec-main ::deep .ds-accordion-trigger above. */
.tec-side[b-1ajhhrtd1d]  .tec-activate {
    position: sticky;
    /* Breathing room measured from the top edge of the content column — NOT header clearance. The
       scrollport is .ds-shell-content, and DsTopNav is an in-flow sibling above it (height 40px,
       margin-top 12px, flex: none, position: relative — DsTopNav.razor.css:2-15), so it occupies
       layout space instead of overlapping; a pinned child of the scrollport can never end up
       underneath it. Same offset as every other sticky side panel in this shell (Assessment/
       Fill.razor.css:76, DSRConfiguration.razor.css:1091, CookieBlockingManagement.razor.css:34). */
    top: var(--space-4);
}

.tec-add-row[b-1ajhhrtd1d] {
    display: flex;
}

/* ---------------------------------------------------------------- slot header */

.tec-slot-title[b-1ajhhrtd1d] {
    font-weight: 600;
    color: var(--dp-text-primary);
}

.tec-chips[b-1ajhhrtd1d] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
}

/* Touch target, and room for a two-line label when the Vietnamese or Indonesian string wraps. */
.tec-main[b-1ajhhrtd1d]  .ds-accordion-trigger {
    min-height: 48px;
}

.tec-main[b-1ajhhrtd1d]  .ds-accordion-trigger:focus-visible {
    outline: 2px solid var(--dp-border-focus);
    outline-offset: 2px;
}

.tec-main[b-1ajhhrtd1d]  .ds-accordion-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* No nowrap and no ellipsis anywhere on this screen: truncating a status is deleting it. */
    white-space: normal;
}

/* ---------------------------------------------------------------- slot form */

.tec-form[b-1ajhhrtd1d] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tec-row[b-1ajhhrtd1d] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.tec-row--host[b-1ajhhrtd1d] {
    grid-template-columns: 2fr 1fr;
}

.tec-outcome-body[b-1ajhhrtd1d] {
    margin: 0;
}

.tec-hint[b-1ajhhrtd1d],
.tec-reason[b-1ajhhrtd1d],
.tec-attempt[b-1ajhhrtd1d] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    /* The reason a button is closed is body copy, never --dp-text-tertiary/-disabled: those are
       intentionally below AA and an unreadable explanation is no explanation. */
    color: var(--dp-text-muted);
}

.tec-reason[b-1ajhhrtd1d] {
    padding-left: 2px;
}

/* ---------------------------------------------------------------- secret */

.tec-secret-stored[b-1ajhhrtd1d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--dp-border-default);
    border-radius: 8px;
    background: var(--dp-surface-secondary);
}

.tec-secret-label[b-1ajhhrtd1d] {
    font-size: 13px;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.tec-secret-mask[b-1ajhhrtd1d] {
    letter-spacing: 2px;
    color: var(--dp-text-secondary);
}

.tec-secret-edit[b-1ajhhrtd1d] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* ---------------------------------------------------------------- test result */

.tec-test-result[b-1ajhhrtd1d] {
    scroll-margin-top: 96px;
}

.tec-test-result:focus-visible[b-1ajhhrtd1d] {
    outline: 2px solid var(--dp-border-focus);
    outline-offset: 2px;
}

.tec-running[b-1ajhhrtd1d] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tec-attempt[b-1ajhhrtd1d] {
    margin-top: 6px;
}

/* ---------------------------------------------------------------- actions */

.tec-actions[b-1ajhhrtd1d] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* ---------------------------------------------------------------- sender identity */

.tec-readonly[b-1ajhhrtd1d] {
    margin: 0 0 12px;
    display: grid;
    gap: 4px;
}

.tec-readonly dt[b-1ajhhrtd1d] {
    font-size: 13px;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.tec-readonly dd[b-1ajhhrtd1d] {
    margin: 0 0 8px;
    color: var(--dp-text-secondary);
    overflow-wrap: anywhere;
}

/* BR-S1-23 — the "we cannot name the sender" state. Italic + muted so it does not read as a value
   sitting in a value slot; the distinction is made here, never by pushing markup through a
   localization string. --dp-text-muted, not -tertiary/-disabled: this still has to be legible. */
.tec-readonly dd.tec-unknown[b-1ajhhrtd1d] {
    color: var(--dp-text-muted);
    font-style: italic;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1279px) {
    .tec-layout[b-1ajhhrtd1d] {
        grid-template-columns: 1fr;
    }

    /* Status and the activation gate are what a user looks for first on a narrow screen. */
    .tec-side[b-1ajhhrtd1d] {
        order: -1;
    }

    .tec-side[b-1ajhhrtd1d]  .tec-activate {
        position: static;
    }

    /* Host + port stay paired; every other pair breaks, because the Vietnamese and Indonesian
       labels start wrapping badly below roughly 360px of column. */
    .tec-row[b-1ajhhrtd1d] {
        grid-template-columns: 1fr;
    }

    .tec-row--host[b-1ajhhrtd1d] {
        grid-template-columns: 2fr 1fr;
    }
}

@media (max-width: 767px) {
    .tec-row--host[b-1ajhhrtd1d] {
        grid-template-columns: 1fr;
    }

    .tec-chips[b-1ajhhrtd1d] {
        display: flex;
        width: 100%;
        margin-left: 0;
        margin-top: 4px;
    }

    .tec-actions[b-1ajhhrtd1d] {
        flex-direction: column;
        align-items: stretch;
    }

    .tec-actions[b-1ajhhrtd1d]  .ds-btn {
        width: 100%;
    }

    /* Md rather than Sm below 768px so the Change-secret control keeps a 44px touch target. */
    .tec-secret-stored[b-1ajhhrtd1d] {
        padding: 12px;
    }
}
/* _content/BlazorFrontend/Pages/Settings/NotificationSettings.razor.rz.scp.css */
/*
 * NotificationSettings.razor.css — scoped styles for /settings/notifications, /account/notification-settings
 * All colors via --dp-* tokens only. WCAG 2.2 AA.
 */

.dm-skeleton[b-ne9kgd0mt1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-ne9kgd0mt1] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-ne9kgd0mt1] {
    height: 56px;
    width: 100%;
}

.ns-grid[b-ne9kgd0mt1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 1023px) {
    .ns-grid[b-ne9kgd0mt1] {
        grid-template-columns: 1fr;
    }
}

.ns-switch-row[b-ne9kgd0mt1] {
    margin-bottom: var(--space-3);
}

.ns-field[b-ne9kgd0mt1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-3);
}

.ns-label[b-ne9kgd0mt1] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
}

.ns-input[b-ne9kgd0mt1] {
    padding: 8px 12px;
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md);
    background-color: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-size: 0.875rem;
    width: 100%;
}

.ns-input:focus[b-ne9kgd0mt1] {
    outline: none;
    border-color: var(--dp-border-focus);
    box-shadow: 0 0 0 3px var(--dp-border-focus);
}

.ns-hint[b-ne9kgd0mt1] {
    color: var(--dp-text-tertiary);
    font-size: 0.8125rem;
}

.ns-muted[b-ne9kgd0mt1] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

.ns-subtitle[b-ne9kgd0mt1] {
    margin: var(--space-2) 0 var(--space-2);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
}

.ns-check-list[b-ne9kgd0mt1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.ns-threshold-grid[b-ne9kgd0mt1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3) var(--space-4);
}

@media (max-width: 1023px) {
    .ns-threshold-grid[b-ne9kgd0mt1] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .ns-threshold-grid[b-ne9kgd0mt1] {
        grid-template-columns: 1fr;
    }
}

.ns-cell-icon[b-ne9kgd0mt1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dp-text-primary);
}

.ns-modal-text[b-ne9kgd0mt1] {
    margin: 0 0 var(--space-2);
    font-size: 0.875rem;
    color: var(--dp-text-primary);
}
/* _content/BlazorFrontend/Pages/Settings/Overview.razor.rz.scp.css */
/*
 * Overview.razor.css — scoped styles for /settings (settings hub)
 * All colors via --dp-* tokens only. WCAG 2.2 AA.
 */

.dm-skeleton[b-jhwxtmlzgt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-jhwxtmlzgt] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-jhwxtmlzgt] {
    height: 56px;
    width: 100%;
}

.so-actions[b-jhwxtmlzgt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.so-muted[b-jhwxtmlzgt] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}
/* _content/BlazorFrontend/Pages/Settings/SecuritySettings.razor.rz.scp.css */
/*
 * SecuritySettings.razor.css — scoped styles for /settings/security, /account/security-settings
 * All colors via --dp-* tokens only. WCAG 2.2 AA.
 */

.dm-skeleton[b-mvnwagviq0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.dm-skeleton-panel[b-mvnwagviq0] {
    height: 260px;
    width: 100%;
}

.sec-page[b-mvnwagviq0] {
    min-width: 0;
}

.security-settings-anchor[b-mvnwagviq0] {
    scroll-margin-top: calc(var(--space-6) + 64px);
}

.sec-grid[b-mvnwagviq0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.sec-span-2[b-mvnwagviq0] {
    grid-column: 1 / -1;
}

@media (max-width: 1023px) {
    .sec-grid[b-mvnwagviq0] {
        grid-template-columns: 1fr;
    }

    .sec-span-2[b-mvnwagviq0] {
        grid-column: auto;
    }
}

/* ─── Fields ───────────────────────────────────────────────────────────────── */

.sec-form-stack[b-mvnwagviq0],
.sec-modal-stack[b-mvnwagviq0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.sec-label[b-mvnwagviq0] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
}

.sec-input[b-mvnwagviq0] {
    padding: 8px 12px;
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md);
    background-color: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-size: 0.875rem;
    width: 100%;
}

.sec-input:focus[b-mvnwagviq0] {
    outline: none;
    border-color: var(--dp-border-focus);
    box-shadow: 0 0 0 3px var(--dp-border-focus);
}

.sec-input:read-only[b-mvnwagviq0] {
    background-color: var(--dp-surface-secondary);
    color: var(--dp-text-secondary);
}

.sec-hint[b-mvnwagviq0] {
    color: var(--dp-text-tertiary);
    font-size: 0.8125rem;
}

.sec-muted[b-mvnwagviq0] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

.sec-inline-row[b-mvnwagviq0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sec-inline-row .sec-input[b-mvnwagviq0] {
    flex: 1;
}

/* ─── Password strength ────────────────────────────────────────────────────── */

.sec-strength[b-mvnwagviq0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.sec-strength-track[b-mvnwagviq0] {
    height: 8px;
    border-radius: 9999px;
    background: var(--dp-surface-secondary);
    overflow: hidden;
}

.sec-strength-bar[b-mvnwagviq0] {
    height: 100%;
    border-radius: 9999px;
    transition: width 200ms ease;
}

.sec-strength-bar--ok[b-mvnwagviq0] {
    background: var(--dp-interactive-primary);
}

.sec-strength-bar--weak[b-mvnwagviq0] {
    background: var(--dp-status-danger);
}

.sec-strength-text[b-mvnwagviq0] {
    font-size: 0.75rem;
    color: var(--dp-text-tertiary);
}

/* ─── Requirements list ────────────────────────────────────────────────────── */

.sec-requirements[b-mvnwagviq0] {
    margin-top: var(--space-3);
    font-size: 0.8125rem;
    color: var(--dp-text-tertiary);
}

.sec-requirements ul[b-mvnwagviq0] {
    margin: 4px 0 0;
    padding-left: 1.1rem;
}

.sec-requirements li[b-mvnwagviq0] {
    margin-bottom: 2px;
}

/* ─── Status row / switches ────────────────────────────────────────────────── */

.sec-status-row[b-mvnwagviq0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: 0.9375rem;
    color: var(--dp-text-primary);
}

.sec-copy[b-mvnwagviq0] {
    margin: 0 0 var(--space-4);
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
}

.sec-mfa-meta[b-mvnwagviq0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: 12px 14px;
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-md);
    background: var(--dp-surface-secondary);
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
}

.sec-mfa-meta strong[b-mvnwagviq0] {
    color: var(--dp-text-primary);
}

.sec-session-action[b-mvnwagviq0] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.sec-session-icon[b-mvnwagviq0],
.sec-device-icon[b-mvnwagviq0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    color: var(--dp-interactive-primary);
    background: var(--dp-interactive-primary-subtle);
}

.sec-session-copy[b-mvnwagviq0] {
    min-width: 0;
}

.sec-session-copy strong[b-mvnwagviq0] {
    color: var(--dp-text-primary);
    font-size: 0.9375rem;
}

.sec-session-copy p[b-mvnwagviq0] {
    margin: 4px 0 0;
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* ─── Device list ──────────────────────────────────────────────────────────── */

.sec-device-list[b-mvnwagviq0] {
    display: flex;
    flex-direction: column;
}

.sec-device-row[b-mvnwagviq0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--dp-border-subtle);
}

.sec-device-info[b-mvnwagviq0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.875rem;
    color: var(--dp-text-primary);
    flex: 1;
    min-width: 0;
}

.sec-device-icon[b-mvnwagviq0] {
    width: 36px;
    height: 36px;
}

.sec-device-meta[b-mvnwagviq0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--dp-text-tertiary);
}

.sec-panel-action[b-mvnwagviq0] {
    margin-top: var(--space-3);
}

.sec-trusted-footer[b-mvnwagviq0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.sec-trusted-pagination[b-mvnwagviq0] {
    display: flex;
    width: 100%;
    max-width: 100%;
    justify-content: flex-end;
    padding: 3px;
}

/* ─── Table cells ──────────────────────────────────────────────────────────── */

.sec-cell-icon[b-mvnwagviq0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dp-text-primary);
}

.sec-perm-list[b-mvnwagviq0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.sec-modal-text[b-mvnwagviq0] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--dp-text-primary);
}
/* _content/BlazorFrontend/Pages/Settings/TenantSettings.razor.rz.scp.css */
/*
 * TenantSettings.razor.css
 * Scoped styles for /workspace/tenant-settings
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes (color-preview gradient is data-driven, unavoidable).
 *   - WCAG 2.2 AA compliant via token system.
 */

.dm-skeleton[b-yeh8bndbca] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-yeh8bndbca] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-yeh8bndbca] {
    height: 56px;
    width: 100%;
}

/* ─── Layout ───────────────────────────────────────────────────────────────── */

.ts-grid[b-yeh8bndbca] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-4);
    align-items: start;
    margin-top: var(--space-4);
}

@media (max-width: 1023px) {
    .ts-grid[b-yeh8bndbca] {
        grid-template-columns: 1fr;
    }
}

.ts-main[b-yeh8bndbca] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ts-sidebar[b-yeh8bndbca] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ─── Fields ───────────────────────────────────────────────────────────────── */

.ts-row-2[b-yeh8bndbca] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.ts-row-3[b-yeh8bndbca] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 767px) {
    .ts-row-2[b-yeh8bndbca], .ts-row-3[b-yeh8bndbca] {
        grid-template-columns: 1fr;
    }
}

.ts-field[b-yeh8bndbca] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ts-field--full[b-yeh8bndbca] {
    margin-bottom: var(--space-4);
}

.ts-label[b-yeh8bndbca] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
}

.ts-required[b-yeh8bndbca] {
    color: var(--dp-status-danger);
}

/* ::deep required on .ts-input/.ts-input--number: most usages are on InputText/
   InputTextArea/InputNumber/InputSelect/InputFile (Microsoft built-ins), which
   render their own element internally — Blazor CSS isolation never propagates
   the scope attribute into child components, so a plain selector would never
   match those. (.ts-input--sm and .ts-input--color are only ever paired with a
   plain native <input>/<select> in this file, so they don't need ::deep — but
   ::deep on the shared .ts-input base still covers them safely either way.) */
[b-yeh8bndbca] .ts-input {
    padding: 8px 12px;
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md);
    background-color: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-size: 0.875rem;
    width: 100%;
}

[b-yeh8bndbca] .ts-input:focus {
    outline: none;
    border-color: var(--dp-border-focus);
    box-shadow: 0 0 0 3px var(--dp-border-focus);
}

[b-yeh8bndbca] .ts-input:read-only {
    background-color: var(--dp-surface-secondary);
    color: var(--dp-text-secondary);
}

.ts-input--sm[b-yeh8bndbca] {
    width: auto;
    padding: 6px 10px;
    font-size: 0.8125rem;
}

[b-yeh8bndbca] .ts-input--number {
    max-width: 140px;
}

.ts-input--color[b-yeh8bndbca] {
    max-width: 120px;
}

.ts-validation[b-yeh8bndbca] {
    color: var(--dp-status-danger);
    font-size: 0.8125rem;
}

/* F-4 — --dp-text-tertiary is documented in variables.css as DECORATIVE/PLACEHOLDER only and is
   intentionally below AA (~2.56:1). .ts-hint carries the consequence text of settings controls, so
   it needs a token meant to be read: --dp-text-muted (4.86:1). This lifts every .ts-hint in this
   scoped stylesheet, which is deliberate. */
.ts-hint[b-yeh8bndbca] {
    color: var(--dp-text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.ts-hint--block[b-yeh8bndbca] {
    display: block;
}

.ts-plaintext[b-yeh8bndbca] {
    color: var(--dp-text-primary);
    font-size: 0.875rem;
}

.ts-section-title[b-yeh8bndbca] {
    margin: var(--space-4) 0 var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--dp-border-subtle);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dp-text-secondary);
}

/* ─── Switches ─────────────────────────────────────────────────────────────── */

.ts-switch-row[b-yeh8bndbca] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--space-4);
}

/* ─── Branding ─────────────────────────────────────────────────────────────── */

.ts-palette-section[b-yeh8bndbca] {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--dp-border-subtle);
}

.ts-color-row[b-yeh8bndbca] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ts-color-swatch[b-yeh8bndbca] {
    width: 40px;
    height: 40px;
    padding: 2px;
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md);
    background: none;
    cursor: pointer;
}

.ts-brand-preview[b-yeh8bndbca] {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--dp-border-subtle);
}

.ts-brand-preview span[b-yeh8bndbca] {
    color: #FFFFFF;
    font-weight: 700;
}

.ts-upload-row[b-yeh8bndbca] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ts-upload-row[b-yeh8bndbca]  input[type="file"] {
    flex: 1 1 0%;
    min-width: 0;
    max-width: 100%;
}

.ts-error-text[b-yeh8bndbca] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--dp-status-danger);
    font-size: 0.8125rem;
    margin-top: 4px;
}

.ts-image-preview[b-yeh8bndbca] {
    margin-top: var(--space-2);
    padding: var(--space-2);
    display: inline-block;
    border-radius: var(--radius-md);
    background-color: var(--dp-surface-secondary);
}

.ts-image-preview img[b-yeh8bndbca] {
    max-height: 80px;
    display: block;
}

.ts-image-preview--sm img[b-yeh8bndbca] {
    max-height: 32px;
}

/* ─── Number input with unit ──────────────────────────────────────────────── */

.ts-number-row[b-yeh8bndbca] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ts-unit[b-yeh8bndbca] {
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
}

/* ─── Portal tab (FR-44) — layout only, no colour: inputs/buttons keep their own tokens ── */

.ts-copy-row[b-yeh8bndbca] {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
}

.ts-copy-row > .ts-input[b-yeh8bndbca] {
    flex: 1 1 auto;
    min-width: 0;
}

/* The Copy button keeps its intrinsic width and never wraps its label (UI/UX post-QA I-1):
   without this the flex row shrank the DsButton and "Sao chép" broke onto two lines at ≥768 px. */
.ts-copy-row[b-yeh8bndbca]  .ds-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .ts-copy-row[b-yeh8bndbca] {
        flex-wrap: wrap;
    }

    .ts-copy-row > .ts-input[b-yeh8bndbca],
    .ts-copy-row[b-yeh8bndbca]  .ds-btn {
        flex: 1 1 100%;
    }
}

.ts-portal-snippet[b-yeh8bndbca] {
    font-family: var(--dp-font-mono, monospace);
    overflow-wrap: anywhere;
    resize: vertical;
}

/* ─── Activity tab ────────────────────────────────────────────────────────── */

.ts-loading-wrap[b-yeh8bndbca] {
    padding: var(--space-4);
}

.ts-code[b-yeh8bndbca] {
    font-size: 0.8125rem;
    font-family: var(--dp-font-mono, monospace);
    color: var(--dp-text-primary);
}

.ts-muted[b-yeh8bndbca] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

.ts-pagination[b-yeh8bndbca] {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--dp-border-subtle);
    background: var(--dp-surface-subtle);
}

/* ─── Sidebar panels ──────────────────────────────────────────────────────── */

.ts-service-list[b-yeh8bndbca] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ts-service-row[b-yeh8bndbca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--dp-text-primary);
}

.ts-service-meta[b-yeh8bndbca] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ts-sidebar-action[b-yeh8bndbca] {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--dp-border-subtle);
}

.ts-sidebar-action .ds-btn[b-yeh8bndbca] {
    width: 100%;
    justify-content: center;
}

.ts-stat-block[b-yeh8bndbca] {
    margin-bottom: var(--space-3);
}

.ts-stat-label[b-yeh8bndbca] {
    display: block;
    color: var(--dp-text-secondary);
    font-size: 0.75rem;
}

.ts-stat-value[b-yeh8bndbca] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--dp-text-primary);
}

.ts-stat-trend[b-yeh8bndbca] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--dp-interactive-primary);
    font-size: 0.75rem;
}

.ts-compliance-row[b-yeh8bndbca] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ts-info-row[b-yeh8bndbca] {
    margin-bottom: var(--space-2);
    font-size: 0.875rem;
    color: var(--dp-text-primary);
}

.ts-info-mono[b-yeh8bndbca] {
    font-family: var(--dp-font-mono, monospace);
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    word-break: break-all;
}
/* _content/BlazorFrontend/Pages/Settings/UserPreferences.razor.rz.scp.css */
/*
 * UserPreferences.razor.css — scoped styles for /settings/user, /account/preferences
 * All colors via --dp-* tokens only. WCAG 2.2 AA.
 */

.dm-skeleton[b-qmy2726tg5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.dm-skeleton-row[b-qmy2726tg5] {
    height: 240px;
    width: 100%;
}

.up-page[b-qmy2726tg5] {
    min-width: 0;
}

.up-grid[b-qmy2726tg5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.up-span-2[b-qmy2726tg5] {
    grid-column: 1 / -1;
}

@media (max-width: 1023px) {
    .up-grid[b-qmy2726tg5] {
        grid-template-columns: 1fr;
    }

    .up-span-2[b-qmy2726tg5] {
        grid-column: auto;
    }
}

.up-row-2[b-qmy2726tg5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

@media (max-width: 767px) {
    .up-row-2[b-qmy2726tg5] {
        grid-template-columns: 1fr;
    }
}

.up-form-stack[b-qmy2726tg5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.up-palette[b-qmy2726tg5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-md);
    background: var(--dp-surface-secondary);
    color: var(--dp-text-primary);
}

.up-palette-icon[b-qmy2726tg5],
.up-empty-icon[b-qmy2726tg5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    color: var(--dp-interactive-primary);
    background: var(--dp-interactive-primary-subtle);
}

.up-palette span:last-child[b-qmy2726tg5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.875rem;
}

.up-palette small[b-qmy2726tg5] {
    margin-top: 2px;
    color: var(--dp-text-tertiary);
    font-size: 0.75rem;
}

.up-time-preview[b-qmy2726tg5] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: calc(var(--space-2) * -1);
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

.up-time-preview strong[b-qmy2726tg5] {
    color: var(--dp-text-primary);
    font-weight: 600;
}

.up-action-list[b-qmy2726tg5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (max-width: 767px) {
    .up-action-list[b-qmy2726tg5] {
        grid-template-columns: 1fr;
    }
}

/* ─── Recent-changes timeline ──────────────────────────────────────────────── */

.up-timeline[b-qmy2726tg5] {
    position: relative;
    padding-left: 30px;
}

.up-timeline[b-qmy2726tg5]::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--dp-border-default);
}

.up-timeline-item[b-qmy2726tg5] {
    position: relative;
    margin-bottom: var(--space-4);
}

.up-timeline-item:last-child[b-qmy2726tg5] {
    margin-bottom: 0;
}

.up-timeline-marker[b-qmy2726tg5] {
    position: absolute;
    left: -18px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--dp-interactive-primary);
    border: 2px solid var(--dp-surface-primary);
    box-shadow: 0 0 0 2px var(--dp-border-default);
}

.up-timeline-content[b-qmy2726tg5] {
    background: var(--dp-surface-secondary);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--dp-border-subtle);
}

.up-timeline-title[b-qmy2726tg5] {
    margin: 0 0 4px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.up-timeline-text[b-qmy2726tg5] {
    margin: 0 0 4px;
    font-size: 0.8125rem;
    color: var(--dp-text-secondary);
}

.up-timeline-time[b-qmy2726tg5] {
    color: var(--dp-text-tertiary);
    font-size: 0.75rem;
}

.up-empty[b-qmy2726tg5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 132px;
    color: var(--dp-text-secondary);
    text-align: center;
}

.up-empty p[b-qmy2726tg5] {
    margin: 0;
    font-size: 0.875rem;
}
/* _content/BlazorFrontend/Pages/Support.razor.rz.scp.css */
.support-page[b-24snc90pzo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 1.5rem);
}
/* _content/BlazorFrontend/Pages/Tenant/Permissions/PermissionAudit.razor.rz.scp.css */
/*
 * PermissionAudit.razor.css (tenant scope)
 * Scoped styles for /tenant/permissions/audit (tenant permission audit log).
 * Datanomics.Ds design system — --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

/* ── Loading skeleton ──────────────────────────────────────────────── */
.dm-skeleton[b-9r658fc8t0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-9r658fc8t0] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-9r658fc8t0] {
    height: 56px;
    width: 100%;
}

/* ── KPI strip ─────────────────────────────────────────────────────── */
.pa-kpi-strip[b-9r658fc8t0] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 991px) {
    .pa-kpi-strip[b-9r658fc8t0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .pa-kpi-strip[b-9r658fc8t0] {
        grid-template-columns: 1fr;
    }
}

/* ── Filters ───────────────────────────────────────────────────────── */
.pa-filters[b-9r658fc8t0] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
    align-items: end;
}

@media (max-width: 991px) {
    .pa-filters[b-9r658fc8t0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .pa-filters[b-9r658fc8t0] {
        grid-template-columns: 1fr;
    }
}

.pa-field[b-9r658fc8t0] {
    display: flex;
    flex-direction: column;
}

.pa-field--action[b-9r658fc8t0] {
    justify-content: flex-end;
}

.pa-label[b-9r658fc8t0] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.pa-input[b-9r658fc8t0] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

.pa-input:focus[b-9r658fc8t0] {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}

/* ── Table ─────────────────────────────────────────────────────────── */
/* ADR-046 W5 lô (e): `.pa-table-wrap` + `.pa-table` (khung, min-width, thead th, tbody td, hover)
   đã xoá — bảng nhật ký nay là DsDataTable, khung/scroller/đường kẻ/hover do
   `.ds-table-wrap`/`.ds-table` vẽ. Trang không giữ điểm neo ::deep nào vì không còn rule nào nhắm
   vào <th>/<td>: các lớp `.pa-*` bên dưới đều nằm trên phần tử do chính trang viết trong template
   ô, nên vẫn mang scope id của trang và giữ selector trần. */
.pa-muted[b-9r658fc8t0] {
    color: var(--dp-text-secondary);
}

.pa-nowrap[b-9r658fc8t0] {
    white-space: nowrap;
}

.pa-targets[b-9r658fc8t0] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.pa-table-foot[b-9r658fc8t0] {
    padding: var(--space-3) var(--space-4);
    text-align: center;
    font-size: 0.75rem;
    color: var(--dp-text-tertiary);
    border-top: 1px solid var(--dp-border-subtle);
}

/* ── Performer cell ────────────────────────────────────────────────── */
.pa-user[b-9r658fc8t0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.pa-avatar[b-9r658fc8t0] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
}

.pa-user-text[b-9r658fc8t0] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pa-user-name[b-9r658fc8t0] {
    font-weight: 600;
    color: var(--dp-text-primary);
}

.pa-user-email[b-9r658fc8t0] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}
/* _content/BlazorFrontend/Pages/Tenant/Permissions/TenantRoles.razor.rz.scp.css */
/*
 * TenantRoles.razor.css
 * Scoped styles for /tenant/permissions/roles (tenant-scoped role management).
 * Datanomics.Ds design system — --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

/* ── Loading skeleton ──────────────────────────────────────────────── */
.dm-skeleton[b-kbvouc9v96] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-kbvouc9v96] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-kbvouc9v96] {
    height: 56px;
    width: 100%;
}

/* ── Table cells ───────────────────────────────────────────────────── */
.tr-role-cell[b-kbvouc9v96] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.tr-role-icon[b-kbvouc9v96] {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--dp-text-secondary);
}

.tr-role-text[b-kbvouc9v96] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tr-role-name[b-kbvouc9v96] {
    font-weight: 600;
    color: var(--dp-text-primary);
}

.tr-role-desc[b-kbvouc9v96] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tr-status[b-kbvouc9v96] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── Modal form ────────────────────────────────────────────────────── */
.tr-form-grid2[b-kbvouc9v96] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 575px) {
    .tr-form-grid2[b-kbvouc9v96] {
        grid-template-columns: 1fr;
    }
}

.tr-field[b-kbvouc9v96] {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-4);
}

.tr-label[b-kbvouc9v96] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.tr-textarea[b-kbvouc9v96] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    resize: vertical;
}

.tr-textarea:focus[b-kbvouc9v96] {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}

.tr-switch-field[b-kbvouc9v96] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
/* _content/BlazorFrontend/Pages/Tenant/Permissions/UserPermissions.razor.rz.scp.css */
/*
 * UserPermissions.razor.css (tenant scope)
 * Scoped styles for /tenant/permissions/users (tenant user permission list).
 * Datanomics.Ds design system — --dp-* tokens only, no inline styles, WCAG 2.2 AA.
 */

/* ── Loading skeleton ──────────────────────────────────────────────── */
.dm-skeleton[b-dtql7ljsjm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-dtql7ljsjm] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-dtql7ljsjm] {
    height: 56px;
    width: 100%;
}

/* ── Table ─────────────────────────────────────────────────────────── */
/* ADR-046 W5 lô (e): `.tup-table` (khung, min-width, thead th, tbody td, hover) đã xoá — bảng
   người dùng nay là DsDataTable, khung/scroller/đường kẻ/hover do `.ds-table-wrap`/`.ds-table` vẽ.
   `.tup-table-wrap` không còn là scroller nhưng được giữ làm điểm neo do TRANG sở hữu cho rule
   ::deep bên dưới: <th>/<td> do DsDataTable render nên mang scope id của DS, một selector trần
   `.tup-col-actions` từ file này sẽ biên dịch thành `.tup-col-actions[b-<UserPermissions>]` và
   không khớp gì cả. Các lớp còn lại (`.tup-user`, `.tup-avatar`, `.tup-roles`, `.tup-muted`…) nằm
   trên phần tử do chính trang viết trong template ô nên vẫn là selector trần. */
.tup-table-wrap[b-dtql7ljsjm] {
    width: 100%;
}

/* Chỉ từ 768px trở lên: bề rộng cột là chuyện của desktop — dưới ngưỡng đó DsDataTable xếp mỗi
   hàng thành card và nhả bậc bề rộng bằng `.ds-table .ds-table-td { width: auto }`; không gate thì
   rule này (nằm ở bundle sau, đặc hiệu hơn) sẽ ghim dòng card ở 140px và cắt nội dung. */
@media (min-width: 768px) {
    /* Cột hành động — DsColumnSize không có bậc cho actions nên bề rộng khai ở đây và tới cột qua
       DsColumn.CssClass (tiền lệ ConsentRecords W4 / Audit lô (b)). 140px giữ nguyên con số
       `.tup-col-actions` vốn có, không tính lại. Chỉ bề rộng: căn phải nay do
       DsColumn Align="right" (`.ds-table-cell--end`) lo, không khai lại lần hai. */
    .tup-table-wrap[b-dtql7ljsjm]  .tup-col-actions {
        width: 140px;
    }
}

/* ── User cell ─────────────────────────────────────────────────────── */
.tup-user[b-dtql7ljsjm] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.tup-avatar[b-dtql7ljsjm] {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.tup-user-text[b-dtql7ljsjm] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tup-user-name[b-dtql7ljsjm] {
    font-weight: 600;
    color: var(--dp-text-primary);
}

.tup-user-email[b-dtql7ljsjm] {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.tup-roles[b-dtql7ljsjm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.tup-muted[b-dtql7ljsjm] {
    color: var(--dp-text-secondary);
}

/* ── Assign modal form ─────────────────────────────────────────────── */
.tup-field[b-dtql7ljsjm] {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-4);
}

.tup-label[b-dtql7ljsjm] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-2);
}

.tup-required[b-dtql7ljsjm] {
    color: var(--dp-status-danger);
}

.tup-select[b-dtql7ljsjm] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

.tup-select:focus[b-dtql7ljsjm] {
    outline: var(--focus-ring);
    border-color: var(--dp-interactive-primary);
}

.tup-select--error[b-dtql7ljsjm] {
    border-color: var(--dp-border-error);
}

.tup-error[b-dtql7ljsjm] {
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--dp-status-danger);
}

.tup-role-checks[b-dtql7ljsjm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 320px;
    overflow-y: auto;
}
/* _content/BlazorFrontend/Pages/UserGuide.razor.rz.scp.css */
/* ============================================================
   UserGuide.razor — page shell scoped styles.
   All colours via --dp-* tokens (CLAUDE.md design-token rule).
   Layout: 3-col desktop / 2-col tablet / 1-col mobile.

   Do NOT wrap these selectors in ::deep. Every element below is part of THIS
   component's markup, so Blazor stamps the scope attribute onto the element
   itself (.ug-grid[b-xxx]). ::deep compiles to a descendant selector
   ([b-xxx] .ug-grid), which needs a scoped ANCESTOR — there is none above a
   top-level element, so the whole page shell silently lost its layout: the grid
   fell back to display:block and the TOC stacked above the article instead of
   sitting beside it. ::deep belongs only on classes rendered by child
   components (e.g. .ug-toc__*, .ug-prose), and this file styles none of those.
   ============================================================ */

.ug-skip-link[b-es2u77v7zg] {
    position: absolute;
    top: -40px;
    left: 0.75rem;
    background-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-md, 8px);
    z-index: 1100;
    text-decoration: none;
    font-weight: 600;
    transition: top 0.15s ease;
}

    .ug-skip-link:focus[b-es2u77v7zg] {
        top: 0.5rem;
        outline: 2px solid var(--dp-text-on-primary);
        outline-offset: 2px;
    }

.ug-page-header[b-es2u77v7zg] {
    position: sticky;
    top: 0;
    /* Must stay BELOW Bootstrap's dropdown layer (1000). This header only needs to
       cover the article as it scrolls; at 1020 it also covered the navbar's language
       dropdown, so "Tiếng Việt" — the item that happens to overlap the guide search
       box — could not be clicked from this page at all. */
    z-index: 5;
    background-color: var(--dp-surface-primary);
    border-bottom: 1px solid var(--dp-border-default);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    transition: box-shadow 0.2s ease;
}

    .ug-page-header.is-scrolled[b-es2u77v7zg] {
        box-shadow: var(--shadow-l1, 0 1px 4px rgba(0, 0, 0, 0.04));
    }

.ug-page-header__title[b-es2u77v7zg] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    margin: 0;
    flex: 0 0 auto;
}

.ug-page-header__controls[b-es2u77v7zg] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ug-hamburger[b-es2u77v7zg] {
    background: transparent;
    border: 0;
    color: var(--dp-text-primary);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md, 8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    cursor: pointer;
}

    .ug-hamburger:hover[b-es2u77v7zg] {
        background-color: var(--dp-surface-hover);
    }

    .ug-hamburger:focus-visible[b-es2u77v7zg] {
        outline: 2px solid var(--dp-border-focus);
        outline-offset: 2px;
    }

/* Layout grid — TOC column + article, collapsing to one column on mobile.
   There is no third "on this page" column: the active article's headings render as
   sub-items inside the TOC (UserGuideToc -> UserGuideOnThisPage). */
.ug-grid[b-es2u77v7zg] {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1rem;
    align-items: start;
    background-color: var(--dp-surface-page);
    min-height: calc(100vh - 60px);
}

/* The TOC now carries the article outline too, so it scrolls independently of the
   article instead of running past the bottom of a long page. */
.ug-col-toc[b-es2u77v7zg] {
    position: sticky;
    top: 4.25rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}

@media (max-width: 1279.98px) {
    .ug-grid[b-es2u77v7zg] {
        grid-template-columns: 240px minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .ug-grid[b-es2u77v7zg] {
        grid-template-columns: 1fr;
        padding: 0.5rem;
    }

    .ug-col-toc[b-es2u77v7zg] {
        display: none;
    }

    .ug-page-header[b-es2u77v7zg] {
        flex-wrap: wrap;
    }

    .ug-page-header__controls[b-es2u77v7zg] {
        margin-left: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
}

/* Skeletons (replaces inline styles, uses --dp-* tokens) */
.ug-skeleton[b-es2u77v7zg] {
    background-color: var(--dp-surface-secondary);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    position: relative;
}

    .ug-skeleton[b-es2u77v7zg]::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(90deg, transparent, var(--dp-surface-hover), transparent);
        animation: ug-skeleton-shimmer-b-es2u77v7zg 1.4s linear infinite;
    }

    .ug-skeleton--toc[b-es2u77v7zg] {
        height: 22rem;
    }

    .ug-skeleton--article[b-es2u77v7zg] {
        padding: 1rem;
        background-color: transparent;
    }

        .ug-skeleton--article[b-es2u77v7zg]::after {
            display: none;
        }

.ug-skeleton__bar[b-es2u77v7zg] {
    height: 0.875rem;
    background-color: var(--dp-surface-secondary);
    border-radius: 4px;
    margin: 0.625rem 0;
    overflow: hidden;
    position: relative;
}

    .ug-skeleton__bar--title[b-es2u77v7zg] {
        height: 1.75rem;
        width: 70%;
        margin-bottom: 1rem;
    }

    .ug-skeleton__bar--short[b-es2u77v7zg] {
        width: 40%;
    }

    .ug-skeleton__bar[b-es2u77v7zg]::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(90deg, transparent, var(--dp-surface-hover), transparent);
        animation: ug-skeleton-shimmer-b-es2u77v7zg 1.4s linear infinite;
    }

@keyframes ug-skeleton-shimmer-b-es2u77v7zg {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Smooth scroll for anchor jumps + offset for sticky header */
:global(html)[b-es2u77v7zg] {
    scroll-behavior: smooth;
}
/* _content/BlazorFrontend/Pages/Workspace/Billing.razor.rz.scp.css */
/*
 * Billing.razor.css
 * Scoped styles for /workspace/billing
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

.dm-skeleton[b-kbf7qjspzl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-kbf7qjspzl] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-kbf7qjspzl] {
    height: 56px;
    width: 100%;
}

.wsb-subscription[b-kbf7qjspzl] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-6);
}

@media (max-width: 1023px) {
    .wsb-subscription[b-kbf7qjspzl] {
        grid-template-columns: 1fr;
    }
}

.wsb-plan-name[b-kbf7qjspzl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--dp-text-primary);
}

.wsb-muted[b-kbf7qjspzl] {
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
}

.wsb-detail-grid[b-kbf7qjspzl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-6);
    margin-top: var(--space-4);
}

@media (max-width: 767px) {
    .wsb-detail-grid[b-kbf7qjspzl] {
        grid-template-columns: 1fr;
    }
}

.wsb-detail[b-kbf7qjspzl] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--dp-text-primary);
}

.wsb-detail strong[b-kbf7qjspzl] {
    color: var(--dp-text-secondary);
    font-weight: 600;
}

.wsb-price[b-kbf7qjspzl] {
    color: var(--dp-interactive-primary);
    font-weight: 700;
}

.wsb-quick-actions[b-kbf7qjspzl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--dp-surface-secondary);
    align-self: flex-start;
}

.wsb-quick-actions h6[b-kbf7qjspzl] {
    margin: 0 0 var(--space-2);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
    text-align: center;
}

.wsb-features-grid[b-kbf7qjspzl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

@media (max-width: 767px) {
    .wsb-features-grid[b-kbf7qjspzl] {
        grid-template-columns: 1fr;
    }
}

.wsb-section-title[b-kbf7qjspzl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.wsb-list[b-kbf7qjspzl] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.wsb-list li[b-kbf7qjspzl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--dp-text-primary);
}

.wsb-history-action[b-kbf7qjspzl] {
    margin-top: var(--space-3);
    text-align: center;
}
/* _content/BlazorFrontend/Pages/Workspace/OrganizationAdminDashboard.razor.rz.scp.css */
/*
 * OrganizationAdminDashboard.razor.css
 * Scoped styles for /workspace/organization-admin-dashboard
 *
 * Rules:
 *   - All colors via --dp-* tokens only (no hardcoded hex/rgb).
 *   - No inline style="" in markup.
 *   - Responsive: 1-column ≤767px, 2-column 768-1279px, full ≥1280px.
 *   - WCAG 2.2 AA: all text pairs meet 4.5:1 minimum contrast via token system.
 */

.dm-skeleton[b-8j104lplcj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-8j104lplcj] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-8j104lplcj] {
    height: 56px;
    width: 100%;
}

/* ─── KPI row ─────────────────────────────────────────────────────────────── */

.oad-kpi-row[b-8j104lplcj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

@media (max-width: 1023px) {
    .oad-kpi-row[b-8j104lplcj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.oad-alert-desc[b-8j104lplcj] {
    margin: var(--space-2) 0 var(--space-3);
}

/* ─── Two-column layout: Members + Departments ───────────────────────────── */

.oad-two-col-grid[b-8j104lplcj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);   /* 24px */
    align-items: start;
}

@media (max-width: 1023px) {
    .oad-two-col-grid[b-8j104lplcj] {
        grid-template-columns: 1fr;
    }
}

/* ─── Member table cell ─────────────────────────────────────────────────── */

.oad-member-cell[b-8j104lplcj] {
    display: flex;
    align-items: center;
    gap: var(--space-3);   /* 12px */
}

.oad-member-avatar[b-8j104lplcj] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background-color: var(--dp-surface-brand-subtle);
    color: var(--dp-interactive-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.oad-member-info[b-8j104lplcj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.oad-member-name[b-8j104lplcj] {
    font-weight: 500;
    color: var(--dp-text-primary);
    font-size: var(--apple-font-body-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oad-member-email[b-8j104lplcj] {
    font-size: var(--apple-font-caption-size);
    color: var(--dp-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── View-all footer row inside a Flush panel ───────────────────────────── */

.oad-view-all-row[b-8j104lplcj] {
    display: flex;
    justify-content: center;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--dp-border-separator);
}

/* ─── Department list ────────────────────────────────────────────────────── */

.oad-dept-list[b-8j104lplcj] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.oad-dept-row[b-8j104lplcj] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);   /* 12px */
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--dp-border-separator);
}

.oad-dept-row:last-child[b-8j104lplcj] {
    border-bottom: none;
}

.oad-dept-icon[b-8j104lplcj] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background-color: var(--dp-surface-secondary);
    color: var(--dp-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.oad-dept-body[b-8j104lplcj] {
    flex: 1;
    min-width: 0;
}

.oad-dept-name[b-8j104lplcj] {
    font-size: var(--apple-font-body-size);
    font-weight: 500;
    color: var(--dp-text-primary);
}

.oad-dept-desc[b-8j104lplcj] {
    font-size: var(--apple-font-caption-size);
    color: var(--dp-text-secondary);
    margin-top: var(--space-1);
}

.oad-dept-count[b-8j104lplcj] {
    font-size: var(--apple-font-caption-size);
    color: var(--dp-text-tertiary);
    margin-top: var(--space-1);
}

/* ─── Data processing activity table ─────────────────────────────────────── */

.oad-activity-name[b-8j104lplcj] {
    font-weight: 500;
    color: var(--dp-text-primary);
}

.oad-activity-purpose[b-8j104lplcj] {
    font-size: var(--apple-font-caption-size);
    color: var(--dp-text-secondary);
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oad-activity-date[b-8j104lplcj] {
    font-size: var(--apple-font-caption-size);
    color: var(--dp-text-tertiary);
    white-space: nowrap;
}

/* ─── Quick actions list ─────────────────────────────────────────────────── */

.oad-quick-actions[b-8j104lplcj] {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* _content/BlazorFrontend/Pages/Workspace/Organizations.razor.rz.scp.css */
/*
 * Organizations.razor.css
 * Scoped styles for /workspace/organizations
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes at all (the tree's indentation now comes from nested
 *     <ul role="group"> padding inside OrgChartTree, not a computed padding-left).
 *   - WCAG 2.2 AA compliant via token system.
 */

.dm-skeleton[b-qqg4x5fmbm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-qqg4x5fmbm] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-qqg4x5fmbm] {
    height: 56px;
    width: 100%;
}

/* ─── Form view ───────────────────────────────────────────────────────────── */

.wog-row-2[b-qqg4x5fmbm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.wog-status-switch[b-qqg4x5fmbm] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    min-height: 72px;
}

.wog-status-label[b-qqg4x5fmbm] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

@media (max-width: 767px) {
    .wog-row-2[b-qqg4x5fmbm] {
        grid-template-columns: 1fr;
    }
}

.wog-field[b-qqg4x5fmbm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wog-field--full[b-qqg4x5fmbm] {
    margin-bottom: var(--space-4);
}

.wog-label[b-qqg4x5fmbm] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
}

.wog-required[b-qqg4x5fmbm] {
    color: var(--dp-status-danger);
}

/* ::deep required: applied to InputText/InputSelect/InputTextArea (Microsoft
   built-ins), which render their own element internally — Blazor CSS isolation
   never propagates the scope attribute into child components, so a plain
   selector would never match. */
[b-qqg4x5fmbm] .wog-input {
    padding: 8px 12px;
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md);
    background-color: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-size: 0.875rem;
    width: 100%;
}

[b-qqg4x5fmbm] .wog-input:focus {
    outline: none;
    border-color: var(--dp-border-focus);
    box-shadow: 0 0 0 3px var(--dp-border-focus);
}

.wog-form-actions[b-qqg4x5fmbm] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* ─── Chart toolbar (search + expand/collapse + selection-driven CRUD) ────── */

.wog-toolbar[b-qqg4x5fmbm] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.wog-toolbar-search[b-qqg4x5fmbm] {
    flex: 1 1 240px;
    max-width: 360px;
}

.wog-toolbar-actions[b-qqg4x5fmbm],
.wog-crud[b-qqg4x5fmbm] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

@media (max-width: 1279.98px) {
    /* The action row drops below the search field instead of squeezing the labels. */
    .wog-toolbar[b-qqg4x5fmbm] {
        flex-direction: column;
        align-items: stretch;
    }

    /* `flex: 1 1 240px` above sizes the field along the ROW axis. Once the toolbar becomes a
       column, flex-basis is read on the VERTICAL axis, so the field claims a 240px-tall track and
       opens a white band above the action row (at 375px it pushes the tree off screen entirely).
       In a column the field must size to its own content. */
    .wog-toolbar-search[b-qqg4x5fmbm] {
        flex: 0 0 auto;
        max-width: none;
    }
}
/* _content/BlazorFrontend/Pages/Workspace/Overview.razor.rz.scp.css */
/*
 * Overview.razor.css
 * Scoped styles for /workspace (Workspace overview)
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

.dm-skeleton[b-enmvcehdyz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-enmvcehdyz] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-enmvcehdyz] {
    height: 56px;
    width: 100%;
}

/* ─── Current context ─────────────────────────────────────────────────────── */

.wso-context-grid[b-enmvcehdyz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

@media (max-width: 767px) {
    .wso-context-grid[b-enmvcehdyz] {
        grid-template-columns: 1fr;
    }
}

.wso-context-title[b-enmvcehdyz] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dp-interactive-primary);
}

.wso-line[b-enmvcehdyz] {
    margin: 0 0 var(--space-2);
    font-size: 0.875rem;
    color: var(--dp-text-primary);
}

.wso-line strong[b-enmvcehdyz] {
    color: var(--dp-text-secondary);
    font-weight: 600;
    margin-right: 6px;
}

.wso-muted[b-enmvcehdyz] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

/* ─── Subscription plan ───────────────────────────────────────────────────── */

.wso-plan-head[b-enmvcehdyz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--dp-border-subtle);
}

.wso-plan-name[b-enmvcehdyz] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--dp-text-primary);
}

.wso-plan-price[b-enmvcehdyz] {
    text-align: right;
}

.wso-price-value[b-enmvcehdyz] {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--dp-interactive-primary);
}

.wso-section-title[b-enmvcehdyz] {
    margin: var(--space-4) 0 var(--space-3);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dp-text-secondary);
}

.wso-limits-grid[b-enmvcehdyz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

@media (max-width: 767px) {
    .wso-limits-grid[b-enmvcehdyz] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wso-limit[b-enmvcehdyz] {
    text-align: center;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--dp-surface-secondary);
}

.wso-limit-value[b-enmvcehdyz] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--dp-text-primary);
    margin-bottom: 2px;
}

.wso-features-grid[b-enmvcehdyz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    font-size: 0.875rem;
    color: var(--dp-text-primary);
}

@media (max-width: 767px) {
    .wso-features-grid[b-enmvcehdyz] {
        grid-template-columns: 1fr 1fr;
    }
}

.wso-features-grid > div[b-enmvcehdyz] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ─── Workspace stats ─────────────────────────────────────────────────────── */

.wso-stats-grid[b-enmvcehdyz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 1023px) {
    .wso-stats-grid[b-enmvcehdyz] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wso-service-list[b-enmvcehdyz] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wso-service-row[b-enmvcehdyz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--dp-border-separator);
    font-size: 0.875rem;
    color: var(--dp-text-primary);
}

.wso-service-row:last-child[b-enmvcehdyz] {
    border-bottom: none;
}

/* ─── Management link lists ───────────────────────────────────────────────── */

.wso-two-col-grid[b-enmvcehdyz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
}

@media (max-width: 1023px) {
    .wso-two-col-grid[b-enmvcehdyz] {
        grid-template-columns: 1fr;
    }
}

.wso-link-list[b-enmvcehdyz] {
    display: flex;
    flex-direction: column;
}

.wso-link-row[b-enmvcehdyz] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--dp-border-separator);
    text-decoration: none;
    color: inherit;
    transition: background-color 150ms ease;
}

.wso-link-row:last-child[b-enmvcehdyz] {
    border-bottom: none;
}

.wso-link-row:hover[b-enmvcehdyz] {
    background-color: var(--dp-surface-hover);
}

.wso-link-icon[b-enmvcehdyz] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background-color: var(--dp-surface-brand-subtle);
    color: var(--dp-interactive-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wso-link-body[b-enmvcehdyz] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wso-link-body strong[b-enmvcehdyz] {
    color: var(--dp-text-primary);
    font-size: 0.875rem;
}

.wso-link-body span[b-enmvcehdyz] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}
/* _content/BlazorFrontend/Pages/Workspace/ServiceConfiguration.razor.rz.scp.css */
/*
 * ServiceConfiguration.razor.css
 * Scoped styles for /workspace/service-configuration
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

.wsc-grid[b-62t463gruy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-4);
}

@media (max-width: 1023px) {
    .wsc-grid[b-62t463gruy] {
        grid-template-columns: 1fr;
    }
}

.wsc-head[b-62t463gruy] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.wsc-icon[b-62t463gruy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    color: var(--dp-interactive-primary);
    background: var(--dp-interactive-primary-subtle);
}

.wsc-title-block[b-62t463gruy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.wsc-name[b-62t463gruy] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--dp-text-primary);
}

.wsc-desc[b-62t463gruy] {
    margin: var(--space-2) 0 var(--space-4);
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
}

.wsc-footer[b-62t463gruy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.wsc-skeleton[b-62t463gruy] {
    min-height: 210px;
}

.wsc-alert-copy[b-62t463gruy] {
    margin: 0 0 var(--space-3);
}

.wsc-actions[b-62t463gruy] {
    display: flex;
    gap: var(--space-2);
}
/* _content/BlazorFrontend/Pages/Workspace/Settings.razor.rz.scp.css */
/*
 * Settings.razor.css
 * Scoped styles for /workspace/settings (SSO providers list)
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" attributes.
 *   - WCAG 2.2 AA compliant via token system.
 */

.wss-loading[b-uio4qdpmf5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
}

.wss-error-wrap[b-uio4qdpmf5] {
    padding: var(--space-4);
}

.wss-name[b-uio4qdpmf5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wss-muted[b-uio4qdpmf5] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

.wss-pagination[b-uio4qdpmf5] {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--dp-border-subtle);
    background: var(--dp-surface-secondary);
}
/* _content/BlazorFrontend/Pages/Workspace/SupportAccessSettings.razor.rz.scp.css */
/*
 * SupportAccessSettings.razor.css
 * Scoped styles for /workspace/support-access-settings
 *
 * Rules:
 *   - All colors via --dp-* tokens only.
 *   - No inline style="" in markup.
 *   - 2-column ≥1024px, 1-column below.
 *   - WCAG 2.2 AA compliant.
 */

.dm-skeleton[b-cpvymcyzo3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-cpvymcyzo3] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-cpvymcyzo3] {
    height: 56px;
    width: 100%;
}

.sas-alert-desc[b-cpvymcyzo3] {
    margin: var(--space-2) 0 var(--space-3);
}

/* ─── Two-column responsive grid ──────────────────────────────────────────── */

.sas-grid[b-cpvymcyzo3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
}

@media (max-width: 1023px) {
    .sas-grid[b-cpvymcyzo3] {
        grid-template-columns: 1fr;
    }
}

.sas-col[b-cpvymcyzo3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ─── Configuration panel ─────────────────────────────────────────────────── */

.sas-toggle-row[b-cpvymcyzo3] {
    margin-bottom: var(--space-3);
}

.sas-hint[b-cpvymcyzo3] {
    margin: var(--space-1) 0 0 calc(2.5rem);
    color: var(--dp-text-tertiary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.sas-limited-toggle[b-cpvymcyzo3] {
    margin-bottom: var(--space-3);
}

.sas-date-grid[b-cpvymcyzo3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

@media (max-width: 599px) {
    .sas-date-grid[b-cpvymcyzo3] {
        grid-template-columns: 1fr;
    }
}

.sas-field[b-cpvymcyzo3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sas-label[b-cpvymcyzo3] {
    color: var(--dp-text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
}

.sas-date-input[b-cpvymcyzo3] {
    padding: 8px 12px;
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-md);
    background-color: var(--dp-surface-input);
    color: var(--dp-text-primary);
    font-size: 0.875rem;
}

.sas-date-input:focus[b-cpvymcyzo3] {
    outline: none;
    border-color: var(--dp-border-focus);
    box-shadow: 0 0 0 3px var(--dp-border-focus);
}

.sas-save-row[b-cpvymcyzo3] {
    display: flex;
}

/* ─── Notes list ──────────────────────────────────────────────────────────── */

.sas-notes-list[b-cpvymcyzo3] {
    margin: 0;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
    color: var(--dp-text-secondary);
    font-size: 0.875rem;
    background-color: var(--dp-status-info-bg);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--dp-status-info);
    list-style: disc;
}

.sas-notes-list li[b-cpvymcyzo3] {
    margin-bottom: var(--space-1);
    line-height: 1.5;
}

.sas-notes-list li:last-child[b-cpvymcyzo3] {
    margin-bottom: 0;
}

/* ─── Accounts panel ──────────────────────────────────────────────────────── */

.sas-filter-bar[b-cpvymcyzo3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--dp-border-separator);
    background-color: var(--dp-surface-secondary);
}

.sas-username[b-cpvymcyzo3] {
    font-size: 0.8125rem;
    font-family: var(--dp-font-mono, monospace);
    color: var(--dp-text-primary);
    background-color: var(--dp-surface-secondary);
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
}

.sas-muted[b-cpvymcyzo3] {
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

.sas-pagination[b-cpvymcyzo3] {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--dp-border-subtle);
    background: var(--dp-surface-secondary);
}
/* _content/BlazorFrontend/Pages/Workspace/TenantAdminDashboard.razor.rz.scp.css */
/*
 * TenantAdminDashboard.razor.css
 * Scoped styles for /workspace/tenant-admin-dashboard
 *
 * Rules:
 *   - All colors via --dp-* tokens only (no hardcoded hex/rgb).
 *   - No inline style="" in markup.
 *   - Responsive: 1-column ≤767px, 2-column 768-1279px, full ≥1280px.
 *   - WCAG 2.2 AA: all text pairs meet 4.5:1 minimum contrast via token system.
 */

.dm-skeleton[b-u2807zl4iu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-u2807zl4iu] {
    height: 28px;
    width: 320px;
}

.dm-skeleton-row[b-u2807zl4iu] {
    height: 56px;
    width: 100%;
}

.tad-kpi-row[b-u2807zl4iu] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

@media (max-width: 1023px) {
    .tad-kpi-row[b-u2807zl4iu] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tad-panel-sub[b-u2807zl4iu] {
    margin: 0 0 var(--space-4);
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
}

/* ─── Service card (custom, replaces AppleServiceCard) ───────────────────── */

.tad-service-card[b-u2807zl4iu] {
    background-color: var(--dp-surface-primary);
    border: 1px solid var(--dp-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-height: 140px;
}

.tad-service-icon[b-u2807zl4iu] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
    flex-shrink: 0;
}

.tad-service-icon--brand[b-u2807zl4iu] { background-color: var(--dp-surface-brand-subtle); color: var(--dp-interactive-primary); }
.tad-service-icon--cyan[b-u2807zl4iu] { background-color: var(--dp-status-info-bg); color: var(--dp-status-info); }
.tad-service-icon--success[b-u2807zl4iu] { background-color: var(--dp-status-success-bg); color: var(--dp-status-success); }
.tad-service-icon--warning[b-u2807zl4iu] { background-color: var(--dp-status-warning-bg); color: var(--dp-status-warning); }
.tad-service-icon--danger[b-u2807zl4iu] { background-color: var(--dp-status-danger-bg); color: var(--dp-status-danger); }
.tad-service-icon--neutral[b-u2807zl4iu] { background-color: var(--dp-surface-secondary); color: var(--dp-text-secondary); }
.tad-service-icon--disabled[b-u2807zl4iu] { background-color: var(--dp-status-danger-bg); color: var(--dp-status-danger); }

.tad-service-name[b-u2807zl4iu] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--dp-text-primary);
    margin-bottom: var(--space-1);
}

.tad-service-score[b-u2807zl4iu] {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: var(--space-1);
    font-variant-numeric: tabular-nums;
}

.tad-service-score--good[b-u2807zl4iu] { color: var(--dp-interactive-primary); }
.tad-service-score--warn[b-u2807zl4iu] { color: var(--dp-status-warning); }
.tad-service-score--danger[b-u2807zl4iu] { color: var(--dp-status-danger); }
.tad-service-score--disabled[b-u2807zl4iu] { color: var(--dp-text-secondary); font-size: 0.8125rem; font-weight: 500; }

.tad-service-note[b-u2807zl4iu] {
    font-size: 0.6875rem;
    color: var(--dp-text-secondary);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: 4px;
}

.tad-service-note--warn[b-u2807zl4iu] { color: var(--dp-status-warning); }

.tad-service-card :deep(.ds-meter)[b-u2807zl4iu] {
    margin-top: auto;
}

/* ─── Service card grid (3-up, wraps at tablet) ────────────────────────────── */

.tad-service-grid[b-u2807zl4iu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);   /* 16px */
}

@media (max-width: 1023px) {
    .tad-service-grid[b-u2807zl4iu] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599px) {
    .tad-service-grid[b-u2807zl4iu] {
        grid-template-columns: 1fr;
    }
}

/* ─── Two-column layout: Organizations + Recent Activity ─────────────────── */

.tad-two-col-grid[b-u2807zl4iu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);   /* 24px */
    align-items: start;
}

@media (max-width: 1023px) {
    .tad-two-col-grid[b-u2807zl4iu] {
        grid-template-columns: 1fr;
    }
}

/* ─── Organization table cells ───────────────────────────────────────────── */

.tad-org-name[b-u2807zl4iu] {
    font-weight: 500;
    color: var(--dp-text-primary);
}

.tad-org-code[b-u2807zl4iu] {
    font-size: var(--apple-font-caption-size);
    font-family: var(--dp-font-mono, monospace);
    color: var(--dp-text-secondary);
    background-color: var(--dp-surface-secondary);
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
}

/* ─── View-all footer row inside a Flush panel ───────────────────────────── */

.tad-view-all-row[b-u2807zl4iu] {
    display: flex;
    justify-content: center;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--dp-border-separator);
}

/* ─── Activity list ──────────────────────────────────────────────────────── */

.tad-activity-list[b-u2807zl4iu] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tad-activity-row[b-u2807zl4iu] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);   /* 12px */
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--dp-border-separator);
}

.tad-activity-row:last-child[b-u2807zl4iu] {
    border-bottom: none;
}

.tad-activity-icon[b-u2807zl4iu] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background-color: var(--dp-surface-brand-subtle);
    color: var(--dp-interactive-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.tad-activity-body[b-u2807zl4iu] {
    flex: 1;
    min-width: 0;
}

.tad-activity-user[b-u2807zl4iu] {
    font-size: var(--apple-font-body-size);
    font-weight: 500;
    color: var(--dp-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tad-activity-action[b-u2807zl4iu] {
    font-size: var(--apple-font-caption-size);
    color: var(--dp-text-secondary);
    margin-top: var(--space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tad-activity-time[b-u2807zl4iu] {
    flex-shrink: 0;
    font-size: var(--apple-font-caption-size);
    color: var(--dp-text-tertiary);
    white-space: nowrap;
}

/* ─── Quick actions list ─────────────────────────────────────────────────── */

.tad-quick-actions[b-u2807zl4iu] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .tad-org-code[b-u2807zl4iu] {
    background-color: var(--dp-surface-secondary);
    color: var(--dp-text-secondary);
}
/* _content/BlazorFrontend/Pages/Workspace/UserDetail.razor.rz.scp.css */
/* Workspace user detail — DS v2 detail archetype.
   Header owns identity/status/actions; content uses an 8/4 main/rail composition. */

.dm-skeleton[b-5e3cwjhbfu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dm-skeleton-title[b-5e3cwjhbfu] {
    width: min(320px, 80%);
    height: 28px;
}

.dm-skeleton-row[b-5e3cwjhbfu] {
    width: 100%;
    height: 56px;
}

.wud-header-meta-item[b-5e3cwjhbfu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.wud-detail-layout[b-5e3cwjhbfu] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: start;
    gap: var(--space-4);
}

.wud-main-column[b-5e3cwjhbfu],
.wud-context-rail[b-5e3cwjhbfu],
.wud-history-stack[b-5e3cwjhbfu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.wud-context-rail[b-5e3cwjhbfu] {
    position: sticky;
    top: var(--space-4);
}

.wud-history-stack[b-5e3cwjhbfu] {
    margin-top: var(--space-4);
}

.wud-detail-list[b-5e3cwjhbfu],
.wud-access-list[b-5e3cwjhbfu],
.wud-rail-list[b-5e3cwjhbfu] {
    margin: 0;
}

.wud-detail-list[b-5e3cwjhbfu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
}

.wud-detail-item[b-5e3cwjhbfu] {
    min-width: 0;
    padding-bottom: var(--space-3);
    border-bottom: var(--border-separator);
}

.wud-detail-item dt[b-5e3cwjhbfu],
.wud-access-row dt[b-5e3cwjhbfu],
.wud-rail-row dt[b-5e3cwjhbfu] {
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
}

.wud-detail-item dd[b-5e3cwjhbfu],
.wud-access-row dd[b-5e3cwjhbfu],
.wud-rail-row dd[b-5e3cwjhbfu] {
    min-width: 0;
    margin: 4px 0 0;
    color: var(--text-strong);
    font-size: var(--text-sm);
    font-weight: 500;
}

.wud-detail-item dd[b-5e3cwjhbfu],
.wud-access-row dd[b-5e3cwjhbfu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.wud-break-word[b-5e3cwjhbfu] {
    overflow-wrap: anywhere;
}

.wud-access-list[b-5e3cwjhbfu],
.wud-rail-list[b-5e3cwjhbfu] {
    display: flex;
    flex-direction: column;
}

.wud-access-row[b-5e3cwjhbfu] {
    display: grid;
    grid-template-columns: minmax(132px, .42fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: var(--border-separator);
}

.wud-access-row:first-child[b-5e3cwjhbfu] {
    padding-top: 0;
}

.wud-access-row dd[b-5e3cwjhbfu] {
    margin-top: 0;
}

.wud-permission-section[b-5e3cwjhbfu] {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-separator);
}

.wud-section-title[b-5e3cwjhbfu] {
    margin: 0;
    color: var(--text-strong);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 650;
}

.wud-section-heading[b-5e3cwjhbfu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.wud-section-heading p[b-5e3cwjhbfu] {
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.wud-chip-row[b-5e3cwjhbfu] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.wud-chip-row--start[b-5e3cwjhbfu] {
    justify-content: flex-start;
}

.wud-service-grid[b-5e3cwjhbfu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.wud-service-card[b-5e3cwjhbfu] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.wud-service-icon[b-5e3cwjhbfu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--radius-sm);
    color: var(--accent);
    background: var(--accent-soft);
}

.wud-service-copy[b-5e3cwjhbfu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wud-service-copy strong[b-5e3cwjhbfu] {
    color: var(--text-strong);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.35;
}

.wud-service-copy span[b-5e3cwjhbfu] {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.wud-access-empty[b-5e3cwjhbfu] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    background: var(--bg-subtle);
    font-size: var(--text-sm);
}

.wud-permission-groups[b-5e3cwjhbfu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: min(420px, 50vh);
    padding-top: var(--space-2);
    overflow-y: auto;
}

.wud-permission-group[b-5e3cwjhbfu] {
    min-width: 0;
}

.wud-permission-group-head[b-5e3cwjhbfu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.wud-permission-group-head strong[b-5e3cwjhbfu] {
    color: var(--text-strong);
    font-size: var(--text-sm);
    font-weight: 600;
}

.wud-permission-group-head span[b-5e3cwjhbfu] {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.wud-permissions-box[b-5e3cwjhbfu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
}

.wud-permissions-box code[b-5e3cwjhbfu] {
    max-width: 100%;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-body);
    background: var(--bg-surface);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
}

.wud-rail-row[b-5e3cwjhbfu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: var(--border-separator);
}

.wud-rail-row:first-child[b-5e3cwjhbfu] {
    padding-top: 0;
}

.wud-rail-row:last-child[b-5e3cwjhbfu] {
    padding-bottom: 0;
    border-bottom: 0;
}

.wud-rail-row dt[b-5e3cwjhbfu] {
    flex: 0 1 auto;
}

.wud-rail-row dd[b-5e3cwjhbfu] {
    margin-top: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.wud-session-source-hint[b-5e3cwjhbfu] {
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: var(--border-separator);
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.wud-security-actions[b-5e3cwjhbfu] {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: var(--border-separator);
}

.wud-muted[b-5e3cwjhbfu] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 400;
}

.wud-hint[b-5e3cwjhbfu] {
    display: block;
    margin-top: 4px;
    color: var(--text-subtle);
    font-size: var(--text-xs);
    font-weight: 400;
}

.wud-code[b-5e3cwjhbfu] {
    color: var(--text-strong);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
}

.wud-session-timeline[b-5e3cwjhbfu],
.wud-session-state[b-5e3cwjhbfu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.wud-session-timeline span[b-5e3cwjhbfu] {
    color: var(--text-strong);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.wud-session-timeline small[b-5e3cwjhbfu],
.wud-session-state small[b-5e3cwjhbfu] {
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.35;
    white-space: nowrap;
}

.wud-pagination[b-5e3cwjhbfu] {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-3) var(--space-4);
    border-top: var(--border-separator);
    background: var(--bg-subtle);
}

.wud-pagination--plain[b-5e3cwjhbfu] {
    margin: var(--space-3) calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
}

.wud-modal-text[b-5e3cwjhbfu] {
    margin: var(--space-3) 0;
}

.wud-modal-list[b-5e3cwjhbfu] {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-5);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

@media (max-width: 1023px) {
    .wud-detail-layout[b-5e3cwjhbfu] {
        grid-template-columns: 1fr;
    }

    .wud-context-rail[b-5e3cwjhbfu] {
        position: static;
    }
}

@media (max-width: 767px) {
    .wud-detail-list[b-5e3cwjhbfu] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .wud-service-grid[b-5e3cwjhbfu] {
        grid-template-columns: 1fr;
    }

    .wud-service-card[b-5e3cwjhbfu] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .wud-service-card :deep(.ds-badge)[b-5e3cwjhbfu] {
        grid-column: 2;
        justify-self: start;
    }

    .wud-access-row[b-5e3cwjhbfu] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .wud-rail-row[b-5e3cwjhbfu] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .wud-rail-row dd[b-5e3cwjhbfu],
    .wud-rail-row .wud-chip-row[b-5e3cwjhbfu] {
        justify-content: flex-start;
        text-align: left;
    }
}
/* _content/BlazorFrontend/Pages/Workspace/UserManagement.razor.rz.scp.css */
/*
 * UserManagement.razor.css
 * Scoped styles for /workspace/user-management
 *
 * Registry/list composition from Datanomics Design System v2.
 * Shared components own their control geometry; this file only composes the page surface.
 */

.wum-page[b-6bdb2wpoir] {
    width: 100%;
    min-width: 0;
}

.wum-registry-body[b-6bdb2wpoir] {
    padding-top: var(--space-4);
}

.wum-registry-panel[b-6bdb2wpoir] {
    min-width: 0;
}

.wum-registry-toolbar[b-6bdb2wpoir] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--color-bg-surface-base-primary, var(--bg-surface));
}

.wum-registry-heading[b-6bdb2wpoir] {
    min-width: 0;
}

.wum-registry-heading h2[b-6bdb2wpoir] {
    margin: 0;
    color: var(--color-text-primary, var(--text-body));
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.wum-registry-heading p[b-6bdb2wpoir] {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.75rem;
    line-height: 1.5;
}

.wum-registry-utilities[b-6bdb2wpoir] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.wum-tabs-wrap[b-6bdb2wpoir] {
    padding: 0 var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--color-bg-surface-base-primary, var(--bg-surface));
}

.wum-tabs[b-6bdb2wpoir] {
    margin: 0;
}

.wum-tabs-wrap[b-6bdb2wpoir]  .ds-tabs {
    border-bottom: 0;
}

.wum-filter-wrap[b-6bdb2wpoir] {
    padding: var(--space-4) var(--space-6) 0;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--color-bg-surface-base-secondary, var(--bg-subtle));
}

.wum-filter-wrap[b-6bdb2wpoir]  .ds-filterbar {
    margin-bottom: var(--space-4);
}

.wum-table[b-6bdb2wpoir] {
    min-width: 0;
}

.wum-select-cell[b-6bdb2wpoir],
.wum-status-cell[b-6bdb2wpoir],
.wum-role-list[b-6bdb2wpoir] {
    display: flex;
    align-items: center;
}

.wum-select-cell[b-6bdb2wpoir] {
    justify-content: center;
}

.wum-role-list[b-6bdb2wpoir] {
    min-width: 0;
    gap: var(--space-1);
}

.wum-role-list[b-6bdb2wpoir]  .ds-badge,
.wum-status-cell[b-6bdb2wpoir]  .ds-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wum-organization[b-6bdb2wpoir] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The panel owns the registry radius; the table owns only the row separators. */
.wum-table[b-6bdb2wpoir]  .ds-table-wrap {
    border-width: 0 0 1px;
    border-radius: 0;
}

/* The row itself is the click target (DsDataTable.OnRowClick), so the cell only lays out. */
.wum-user-cell[b-6bdb2wpoir] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.wum-user-info[b-6bdb2wpoir] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Name and email both truncate: this is the one Auto-width column, so its content must never be
   what widens the table past the viewport. */
.wum-user-info strong[b-6bdb2wpoir],
.wum-user-info .wum-muted[b-6bdb2wpoir] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wum-user-info strong[b-6bdb2wpoir] {
    color: var(--color-text-primary, var(--text-body));
}

.wum-muted[b-6bdb2wpoir] {
    color: var(--color-text-secondary, var(--text-muted));
    font-size: 0.8125rem;
}

.wum-row-action[b-6bdb2wpoir] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wum-table[b-6bdb2wpoir]  .wum-row--selected {
    background: var(--color-bg-surface-brand-subtle, var(--accent-soft));
}

.wum-pagination[b-6bdb2wpoir] {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-4) var(--space-6);
    background: var(--color-bg-surface-base-primary, var(--bg-surface));
}

@media (max-width: 767.98px) {
    .wum-registry-toolbar[b-6bdb2wpoir] {
        align-items: flex-start;
        flex-direction: column;
        padding: var(--space-4);
    }

    .wum-registry-utilities[b-6bdb2wpoir] {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .wum-tabs-wrap[b-6bdb2wpoir],
    .wum-filter-wrap[b-6bdb2wpoir] {
        padding-inline: var(--space-4);
    }

    .wum-pagination[b-6bdb2wpoir] {
        padding-inline: var(--space-4);
    }

    .wum-pagination[b-6bdb2wpoir]  .ds-pagination {
        justify-content: flex-end;
    }
}