/* ========================================================
   CMDB Identity Server — DS Supplement Stylesheet
   All values reference --ds-* custom properties.
   No hardcoded colours, sizes, or fonts.
   ======================================================== */

/* --------------------------------------------------------
   1. Admin layout
   -------------------------------------------------------- */

.id-admin-wrapper {
    max-width: 1200px;
    margin-inline: auto;
    padding: var(--ds-space-6, 1.5rem);
}

.id-admin-card {
    padding: var(--ds-space-6, 1.5rem);
}

/* --------------------------------------------------------
   2. Status badges
   -------------------------------------------------------- */

.id-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--ds-font-size-xs, 0.875rem);
    font-weight: var(--ds-font-weight-medium, 500);
    padding-block: 0.125rem;
    padding-inline: 0.5rem;
    border-radius: var(--ds-radius-full, 9999px);
}

.id-status-active {
    color: hsl(var(--ds-color-success, 141 76% 36%));
    background-color: hsl(var(--ds-color-success, 141 76% 36%) / 0.1);
}

.id-status-locked {
    color: hsl(var(--ds-color-warning, 40 100% 50%));
    background-color: hsl(var(--ds-color-warning, 40 100% 50%) / 0.1);
}

.id-status-disabled {
    color: hsl(var(--ds-grey-600, 0 0% 71%));
    background-color: hsl(var(--ds-grey-100, 0 0% 91%));
}

/* --------------------------------------------------------
   3. Metric cards (tenant dashboard)
   -------------------------------------------------------- */

.id-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--ds-space-4, 1rem);
    margin-block: var(--ds-space-4, 1rem);
}

.id-metric-card {
    background-color: hsl(var(--ds-bg-paper, 0 0% 100%));
    border: 1px solid hsl(var(--ds-grey-100, 0 0% 91%));
    border-radius: var(--ds-radius-md, 1rem);
    box-shadow: var(--ds-shadow-sm);
    padding: var(--ds-space-4, 1rem);
    text-align: center;
}

.id-metric-value {
    font-size: var(--ds-font-size-2xl, 2rem);
    font-weight: var(--ds-font-weight-bold, 700);
    color: hsl(var(--ds-ds-primary, 200 100% 25%));
    line-height: var(--ds-line-height-tight, 1.2);
}

.id-metric-label {
    font-size: var(--ds-font-size-xs, 0.875rem);
    color: hsl(var(--ds-text-secondary, var(--ds-grey-600, 0 0% 71%)));
    margin-block-start: var(--ds-space-1, 0.25rem);
}

/* --------------------------------------------------------
   4. Danger zones
   -------------------------------------------------------- */

.id-danger-zone {
    border: 1px solid hsl(var(--ds-color-error, 0 84% 60%) / 0.3);
    border-radius: var(--ds-radius-md, 1rem);
    background-color: hsl(var(--ds-color-error, 0 84% 60%) / 0.04);
    padding: var(--ds-space-4, 1rem);
    margin-block-start: var(--ds-space-6, 1.5rem);
}

.id-danger-zone-title {
    font-size: var(--ds-font-size-sm, 1rem);
    font-weight: var(--ds-font-weight-semibold, 600);
    color: hsl(var(--ds-color-error, 0 84% 60%));
    margin-block-end: var(--ds-space-2, 0.5rem);
}

/* --------------------------------------------------------
   5. Form links row (below auth forms)
   -------------------------------------------------------- */

.id-form-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2, 0.5rem);
    justify-content: center;
    margin-block-start: var(--ds-space-4, 1rem);
    font-size: var(--ds-font-size-xs, 0.875rem);
}

/* --------------------------------------------------------
   6. SSO separator ("or" between local and SSO login)
   -------------------------------------------------------- */

.id-sso-separator {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2, 0.5rem);
    margin-block: var(--ds-space-4, 1rem);
    font-size: var(--ds-font-size-xs, 0.875rem);
    color: hsl(var(--ds-text-secondary, var(--ds-grey-600, 0 0% 71%)));
}

.id-sso-separator::before,
.id-sso-separator::after {
    content: "";
    flex: 1;
    border-block-end: 1px solid hsl(var(--ds-grey-200, 0 0% 87%));
}

/* --------------------------------------------------------
   7. Filter form row layout (admin list pages)
   -------------------------------------------------------- */

.id-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2, 0.5rem);
    align-items: flex-end;
    margin-block-end: var(--ds-space-4, 1rem);
}

.id-filter-field {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1, 0.25rem);
    min-width: 180px;
}

/* --------------------------------------------------------
   8. Pagination
   -------------------------------------------------------- */

.id-pagination {
    display: flex;
    gap: var(--ds-space-1, 0.25rem);
    align-items: center;
    justify-content: center;
    margin-block-start: var(--ds-space-4, 1rem);
    flex-wrap: wrap;
}

/* --------------------------------------------------------
   9. Role / claim tags
   -------------------------------------------------------- */

.id-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--ds-font-size-2xs, 0.75rem);
    font-weight: var(--ds-font-weight-medium, 500);
    padding-block: 0.125rem;
    padding-inline: 0.5rem;
    border-radius: var(--ds-radius-full, 9999px);
}

.id-tag--role {
    background-color: hsl(var(--ds-color-info, 207 89% 34%) / 0.1);
    color: hsl(var(--ds-color-info, 207 89% 34%));
}

.id-tag--claim {
    background-color: hsl(var(--ds-color-secondary, 264 100% 60%) / 0.1);
    color: hsl(var(--ds-color-secondary, 264 100% 60%));
}

.id-tag--protected {
    background-color: hsl(var(--ds-color-warning, 40 100% 50%) / 0.1);
    color: hsl(var(--ds-color-warning, 40 100% 50%));
}

.id-tag--direct {
    background-color: hsl(var(--ds-ds-primary, 200 100% 25%) / 0.1);
    color: hsl(var(--ds-ds-primary, 200 100% 25%));
}

/* --------------------------------------------------------
   10. Audit-specific styles
   -------------------------------------------------------- */

.id-audit-date-group {
    background-color: hsl(var(--ds-grey-50, 0 0% 95%));
    font-weight: var(--ds-font-weight-semibold, 600);
    font-size: var(--ds-font-size-xs, 0.875rem);
    color: hsl(var(--ds-text-secondary, var(--ds-grey-700, 0 0% 67%)));
}

.id-audit-detail-row td {
    background-color: hsl(var(--ds-grey-25, 0 0% 97%));
    padding-block: var(--ds-space-2, 0.5rem);
    padding-inline: var(--ds-space-4, 1rem);
    font-size: var(--ds-font-size-xs, 0.875rem);
}

.id-audit-action-tag {
    display: inline-block;
    font-size: var(--ds-font-size-2xs, 0.75rem);
    padding-block: 0.125rem;
    padding-inline: 0.375rem;
    border-radius: var(--ds-radius-xs, 0.75rem);
    font-weight: var(--ds-font-weight-medium, 500);
    background-color: hsl(var(--ds-grey-100, 0 0% 91%));
}

.id-audit-outcome-success {
    color: hsl(var(--ds-color-success, 141 76% 36%));
}

.id-audit-outcome-failure {
    color: hsl(var(--ds-color-error, 0 84% 60%));
}

/* --------------------------------------------------------
   11. Page header (heading + tenant subtitle group)
   -------------------------------------------------------- */

.id-page-header {
    margin-block-end: var(--ds-space-4, 1rem);
    text-align: center;
}

.id-page-header .ds-heading {
    margin-block-end: var(--ds-space-1, 0.25rem);
}

/* --------------------------------------------------------
   12. Admin page actions row
   -------------------------------------------------------- */

.id-actions-row {
    display: flex;
    gap: var(--ds-space-2, 0.5rem);
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--ds-space-4, 1rem);
}

/* --------------------------------------------------------
   13. Source badge (Direct / Role)
   -------------------------------------------------------- */

.id-source-badge {
    font-size: var(--ds-font-size-2xs, 0.75rem);
    padding-block: 0.125rem;
    padding-inline: 0.375rem;
    border-radius: var(--ds-radius-xs, 0.75rem);
    background-color: hsl(var(--ds-grey-100, 0 0% 91%));
    font-weight: var(--ds-font-weight-medium, 500);
}

.id-source-badge--direct {
    background-color: hsl(var(--ds-ds-primary, 200 100% 25%) / 0.1);
    color: hsl(var(--ds-ds-primary, 200 100% 25%));
}

.id-source-badge--role {
    background-color: hsl(var(--ds-color-secondary, 264 100% 60%) / 0.1);
    color: hsl(var(--ds-color-secondary, 264 100% 60%));
}

/* --------------------------------------------------------
   14. Admin section layout
   -------------------------------------------------------- */

.id-section {
    margin-block-end: var(--ds-space-6, 1.5rem);
    padding-block-end: var(--ds-space-4, 1rem);
    border-block-end: 1px solid hsl(var(--ds-grey-100, 0 0% 91%));
}

.id-section-title {
    font-size: var(--ds-font-size-lg, 1.125rem);
    font-weight: var(--ds-font-weight-semibold, 600);
    color: hsl(var(--ds-text-primary, 0 0% 13%));
    margin-block-end: var(--ds-space-3, 0.75rem);
    padding-block-end: var(--ds-space-1, 0.25rem);
    border-block-end: 2px solid hsl(var(--ds-grey-100, 0 0% 91%));
}

/* Detail grid for dl/dt/dd pairs */
.id-detail-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--ds-space-1, 0.25rem) var(--ds-space-4, 1rem);
    margin-block-end: var(--ds-space-4, 1rem);
}

.id-detail-grid dt {
    font-weight: var(--ds-font-weight-semibold, 600);
    color: hsl(var(--ds-text-secondary, 0 0% 42%));
    font-size: var(--ds-font-size-sm, 0.875rem);
    padding-block: var(--ds-space-1, 0.25rem);
}

.id-detail-grid dd {
    margin: 0;
    color: hsl(var(--ds-text-primary, 0 0% 13%));
    font-size: var(--ds-font-size-sm, 0.875rem);
    padding-block: var(--ds-space-1, 0.25rem);
}

/* Results header (heading + export controls) */
.id-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ds-space-2, 0.5rem);
    margin-block-end: var(--ds-space-3, 0.75rem);
}

/* SSO mode badge variants */
.id-sso-mode {
    font-size: var(--ds-font-size-2xs, 0.75rem);
    font-weight: var(--ds-font-weight-medium, 500);
    padding-block: 0.125rem;
    padding-inline: 0.5rem;
    border-radius: var(--ds-radius-full, 9999px);
    display: inline-block;
}

.id-sso-mode--required {
    background-color: hsl(var(--ds-color-error, 0 84% 60%) / 0.1);
    color: hsl(var(--ds-color-error, 0 84% 60%));
}

.id-sso-mode--optional {
    background-color: hsl(var(--ds-color-info, 207 89% 34%) / 0.1);
    color: hsl(var(--ds-color-info, 207 89% 34%));
}

.id-sso-mode--disabled {
    background-color: hsl(var(--ds-grey-100, 0 0% 91%));
    color: hsl(var(--ds-grey-600, 0 0% 71%));
}

/* Elevated permission row */
.id-elevated-row {
    background-color: hsl(var(--ds-color-warning, 40 100% 50%) / 0.05);
}

/* Audit changes JSON block */
.id-audit-changes-json {
    background: hsl(212 30% 18%);
    color: hsl(207 82% 87%);
    padding: var(--ds-space-3, 0.75rem);
    border-radius: var(--ds-radius-sm, 0.5rem);
    font-size: var(--ds-font-size-xs, 0.875rem);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin-block-start: var(--ds-space-1, 0.25rem);
    font-family: monospace;
}

/* Admin page title (left-aligned for admin pages, unlike centered auth pages) */
.id-admin-page-header {
    margin-block-end: var(--ds-space-4, 1rem);
}

.id-admin-page-header .ds-heading {
    margin-block-end: var(--ds-space-1, 0.25rem);
}

/* Readonly badge (Tenant Key etc.) */
.id-readonly-badge {
    font-size: var(--ds-font-size-2xs, 0.75rem);
    color: hsl(var(--ds-text-secondary, 0 0% 42%));
    background-color: hsl(var(--ds-grey-100, 0 0% 91%));
    padding-block: 0.125rem;
    padding-inline: 0.375rem;
    border-radius: var(--ds-radius-xs, 0.75rem);
    margin-inline-start: var(--ds-space-1, 0.25rem);
}

/* Page size selector */
.id-page-size-selector {
    display: flex;
    align-items: center;
    gap: var(--ds-space-1, 0.25rem);
    font-size: var(--ds-font-size-xs, 0.875rem);
    color: hsl(var(--ds-text-secondary, 0 0% 42%));
}

.id-page-size-current {
    font-weight: var(--ds-font-weight-semibold, 600);
    color: hsl(var(--ds-text-primary, 0 0% 13%));
    padding-block: 0.125rem;
    padding-inline: 0.375rem;
    background-color: hsl(var(--ds-color-info, 207 89% 34%) / 0.1);
    border-radius: var(--ds-radius-xs, 0.75rem);
}

/* Claim checkbox row */
.id-claim-row {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-3, 0.75rem);
    padding: var(--ds-space-3, 0.75rem);
    border: 1px solid hsl(var(--ds-grey-100, 0 0% 91%));
    border-radius: var(--ds-radius-sm, 0.5rem);
    margin-block-end: var(--ds-space-2, 0.5rem);
}

/* Admin role summary card */
.id-role-summary-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-3, 0.75rem);
    margin-block-end: var(--ds-space-4, 1rem);
}

.id-role-summary-card {
    background-color: hsl(var(--ds-bg-paper, 0 0% 100%));
    border: 1px solid hsl(var(--ds-grey-100, 0 0% 91%));
    border-radius: var(--ds-radius-sm, 0.5rem);
    padding: var(--ds-space-3, 0.75rem) var(--ds-space-4, 1rem);
    display: flex;
    flex-direction: column;
    min-width: 140px;
}

.id-role-summary-name {
    font-weight: var(--ds-font-weight-semibold, 600);
    color: hsl(var(--ds-text-primary, 0 0% 13%));
    font-size: var(--ds-font-size-sm, 0.875rem);
}

.id-role-summary-count {
    color: hsl(var(--ds-text-secondary, 0 0% 42%));
    font-size: var(--ds-font-size-2xs, 0.75rem);
    margin-block-start: var(--ds-space-1, 0.25rem);
}