/* ============================================================================
   ADMIN DIALOG CHROME  (prefix .admdlg-)  —  shared by every admin dialog
   The court-of-record dialog: stripe, eyebrow, kicker, rule, consequence
   callout, textarea/input wraps, rule rows. Linked at AdminLayout area scope
   (every admin route can open one) and self-linked by the dialogs that render
   outside the admin area (Shared/InlineStepUpDialog, the Admin/ProAudit
   dialogs, the Users dialogs).

   WHY THIS FILE KEEPS THE NAME admin-users.css: the Users power-tool and
   Access Control Center rules that used to live here (au-, acc-, arp-, rtd-,
   200 KB) moved to admin-users-desk.css on 2026-09-01 (B-M24). Those consumers
   are route-scoped: AdminLayout and ProAuditLayout emit admin-users-desk.css
   only on the routes that draw it, and Roles/Users pages link it themselves.
   Thirty components still carry a literal link to THIS path — most of them for
   the au-/acc- rules that are no longer here, a few (InlineStepUpDialog and
   friends) for the admdlg- rules that are. Keeping the name keeps every one of
   them working. Once those self-links are repointed, rename this file to
   admin-dialog.css (its name before it was folded in, commit 458a501e8).
   Tokens only: no raw colour, no font declarations (ProAuditThemeContractTests).
   ========================================================================= */

.admdlg-host.mud-dialog,
.admdlg-host .mud-paper {
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
}

.admdlg-host .mud-dialog-content {
    padding: 0 !important;
}

.admdlg {
    position: relative;
    background: var(--pa-card);
    color: var(--pa-ink);
border: 1px solid var(--pa-row-border);
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--pa-shadow-ink) 4%, transparent),
        0 24px 48px -16px color-mix(in srgb, var(--pa-shadow-ink) 18%, transparent),
        0 8px 24px -8px color-mix(in srgb, var(--pa-shadow-ink) 8%, transparent);
    animation: admdlg-rise 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes admdlg-rise {
    from { opacity: 0; transform: translateY(12px) scale(0.995); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.admdlg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(color-mix(in srgb, var(--pa-ink) 2.5%, transparent) 1px, transparent 1px);
    background-size: 3px 3px;
    background-position: 0 0;
    opacity: 0.6;
    z-index: 0;
}

.admdlg > * { position: relative; z-index: 1; }

.admdlg-stripe {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--pa-hair-strong);
    transform-origin: top center;
    animation: admdlg-stripe 480ms cubic-bezier(0.16, 1, 0.3, 1) 120ms backwards;
    z-index: 2;
}

@keyframes admdlg-stripe {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

.admdlg-head {
    padding: 1.875rem 2rem 0 2.25rem;
}

.admdlg-eyebrow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.625rem;
    min-height: 1.25rem;
}

.admdlg-kicker {
font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pa-muted);
    font-weight: 500;
    line-height: 1;
}

.admdlg-status-badge {
font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.25rem 0.5rem 0.1875rem;
    border: 1px solid var(--pa-muted);
    border-radius: 1px;
    color: var(--pa-muted);
    line-height: 1;
    flex-shrink: 0;
}

.admdlg-title {
font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--pa-ink);
    margin: 0 0 0.5rem 0;
    
    transform: translateY(-1px);
}

.admdlg-subject {
font-size: 0.8125rem;
    color: var(--pa-muted);
    margin: 0;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.admdlg-rule {
    height: 1px;
    background: linear-gradient(
        to right,
        var(--pa-hair) 0%,
        var(--pa-hair) 60%,
        var(--pa-row-border) 100%);
    margin: 1.25rem 0 0;
    transform-origin: left center;
    animation: admdlg-rule 600ms cubic-bezier(0.16, 1, 0.3, 1) 240ms backwards;
}

@keyframes admdlg-rule {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.admdlg-body {
    padding: 1.5rem 2rem 1.5rem 2.25rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--pa-ink);
    animation: admdlg-fade 480ms cubic-bezier(0.16, 1, 0.3, 1) 200ms backwards;
}

@keyframes admdlg-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.admdlg-body p {
    margin: 0 0 0.75rem;
}

.admdlg-body p:last-child {
    margin-bottom: 0;
}

.admdlg-consequence {
    position: relative;
    padding: 0.875rem 1.125rem 0.875rem 1.125rem;
    background: color-mix(in srgb, var(--pa-orange-deep) 6%, transparent);
    border-left: 2px solid var(--pa-orange);
    color: var(--pa-ink);
    font-size: 0.875rem;
    line-height: 1.55;
    margin-bottom: 1.5rem;
    border-radius: 0 2px 2px 0;
}

.admdlg-consequence-danger {
    background: color-mix(in srgb, var(--pa-bad-fg) 5%, transparent);
    border-left-color: var(--pa-bad-border);
}

.admdlg-consequence strong {
    font-weight: 600;
    color: var(--pa-ink);
}

.admdlg-section-label {
font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pa-muted);
    font-weight: 500;
    margin: 0 0 0.5rem;
    line-height: 1;
}

.admdlg-section + .admdlg-section {
    margin-top: 1.25rem;
}

.admdlg-hint {
font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pa-faint);
    margin: 0.5rem 0 0;
    line-height: 1.4;
}

.admdlg-hint-warning { color: var(--pa-orange-text); }
.admdlg-hint-danger  { color: var(--pa-bad-border); }

.admdlg-textarea {
    width: 100%;
    background: color-mix(in srgb, var(--pa-card) 50%, transparent);
    border: 1px solid var(--pa-hair);
    border-radius: 2px;
    padding: 0.625rem 0.75rem;
font-size: 0.9375rem;
    color: var(--pa-ink);
    line-height: 1.4;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
    box-sizing: border-box;
}

.admdlg-textarea {
    resize: vertical;
    min-height: 5.5rem;
line-height: 1.5;
}

.admdlg-textarea:focus {
    outline: none;
    background: color-mix(in srgb, var(--pa-card) 85%, transparent);
    border-color: var(--pa-muted);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-ink) 6%, transparent);
}

.admdlg-textarea::placeholder {
    color: var(--pa-faint-decor);
}

.admdlg-input-wrap {
    display: flex;
    align-items: stretch;
    background: color-mix(in srgb, var(--pa-card) 50%, transparent);
    border: 1px solid var(--pa-hair);
    border-radius: 2px;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.admdlg-input-wrap:focus-within {
    background: color-mix(in srgb, var(--pa-card) 85%, transparent);
    border-color: var(--pa-muted);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-ink) 6%, transparent);
}

.admdlg-input-wrap .admdlg-input-bare {
    flex: 1;
    /* Without min-width:0 a flex item won't shrink below its content's
       intrinsic width, so a long email would force the wrap to overflow.
       With flex:1 + min-width:0 the bare input fills the dialog width and
       the value is fully visible. */
    min-width: 0;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0.625rem 0.75rem;
font-size: 0.9375rem;
    color: var(--pa-ink);
    line-height: 1.4;
    box-shadow: none !important;
    outline: none !important;
}

.admdlg-input-wrap .admdlg-input-suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 0.75rem;
    border-left: 1px solid var(--pa-row-border);
    background: transparent;
    border-top: 0; border-right: 0; border-bottom: 0;
font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pa-muted);
    cursor: pointer;
    transition: color 120ms ease;
}

.admdlg-input-wrap .admdlg-input-suffix:hover {
    color: var(--pa-ink);
}

.admdlg-check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--pa-ink);
}

.admdlg-check input[type="checkbox"] {
    margin: 0.1875rem 0 0;
    accent-color: var(--pa-orange);
    cursor: pointer;
    width: 0.875rem;
    height: 0.875rem;
}

.admdlg-check + .admdlg-check {
    border-top: 1px solid var(--pa-row-border);
}

.admdlg-rules-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--pa-row-border);
}

.admdlg-rule-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--pa-muted);
    border-bottom: 1px solid var(--pa-row-border);
    transition: color 160ms ease;
}

.admdlg-rule-row.is-pass {
    color: var(--pa-ink);
}

.admdlg-rule-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
font-size: 0.875rem;
    font-weight: 600;
    color: var(--pa-faint);
    border: 1px solid var(--pa-hair);
    border-radius: 50%;
    line-height: 1;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.admdlg-rule-row.is-pass .admdlg-rule-mark {
    color: var(--pa-card);
    background: var(--pa-ok-fg);
    border-color: var(--pa-ok-fg);
}

.admdlg-rule-text {
}

.admdlg-banner {
    margin-top: 1rem;
    padding: 0.625rem 0.875rem;
    border-left: 2px solid var(--pa-bad-border);
    background: color-mix(in srgb, var(--pa-bad-fg) 5%, transparent);
    color: var(--pa-ink);
    font-size: 0.8125rem;
    line-height: 1.45;
    border-radius: 0 2px 2px 0;
}

.admdlg-foot {
    padding: 0 2rem 1.5rem 2.25rem;
}

.admdlg-foot .admdlg-rule {
    margin: 0 0 1.125rem;
}

.admdlg-foot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    min-height: 2.25rem;
}

.admdlg-foot-note {
font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pa-faint);
    font-weight: 500;
    line-height: 1.2;
    flex: 1 1 auto;
}

.admdlg-foot-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-left: auto;
    flex-shrink: 0;
}

.admdlg-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--pa-hair);
    color: var(--pa-ink);
font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.625rem 0.875rem;
    border-radius: 2px;
    cursor: pointer;
    line-height: 1;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease, transform 120ms ease;
}

.admdlg-btn:hover:not(:disabled) {
    border-color: var(--pa-muted);
    background: color-mix(in srgb, var(--pa-ink) 4%, transparent);
}

.admdlg-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.admdlg-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.admdlg-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-ink) 15%, transparent);
}

.admdlg-btn-primary {
    background: var(--pa-orange);
    border-color: var(--pa-orange-fg);
    color: var(--pa-orange-fg);
}

.admdlg-btn-primary:hover:not(:disabled) {
    background: var(--pa-orange-deep);
    border-color: var(--pa-orange-deep);
    color: var(--pa-orange-fg);
}

.admdlg-btn-primary:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-orange-deep) 25%, transparent);
}

/* R2-38, owner option (b), approved 2026-09-22: the destructive confirm rests
   on --pa-bad-fg, as its hover already did, with a --pa-card label. Fill and
   label flip together, so the pair clears AA in both palettes (6.72 light,
   6.01 dark). The old invariant --pa-bad-border fill failed AA in light
   (4.27) and fell further in dark. */
.admdlg-btn-danger {
    background: var(--pa-bad-fg);
    border-color: var(--pa-bad-fg);
    color: var(--pa-card);
}

.admdlg-btn-danger:hover:not(:disabled) {
    background: var(--pa-bad-fg);
    border-color: var(--pa-bad-fg);
    color: var(--pa-card);
}

.admdlg-neutral .admdlg-stripe { background: var(--pa-ink); }
.admdlg-info .admdlg-stripe { background: var(--pa-info-border); }
.admdlg-warning .admdlg-stripe { background: var(--pa-warn-border); }
.admdlg-danger .admdlg-stripe { background: var(--pa-bad-border); }
.admdlg-neutral .admdlg-status-badge { color: var(--pa-ink); border-color: var(--pa-ink); }
.admdlg-info .admdlg-status-badge { color: var(--pa-info-fg); border-color: var(--pa-info-border); }
.admdlg-warning .admdlg-status-badge { color: var(--pa-warn-fg); border-color: var(--pa-warn-border); }
.admdlg-danger .admdlg-status-badge { color: var(--pa-bad-fg); border-color: var(--pa-bad-border); }

.admdlg-host {
    --admdlg-paper-raised: var(--pa-card);
    --admdlg-ink: var(--pa-ink);
    --admdlg-ink-muted: var(--pa-muted);
    --admdlg-rule: var(--pa-hair);
    --admdlg-accent: var(--pa-orange-deep);
    --admdlg-font-body: inherit;
    --admdlg-font-mono: inherit;
}

.admdlg-link {
    color: var(--pa-orange-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.admdlg-rules {
    margin-top: 1rem;
}


@media (prefers-reduced-motion: reduce) {
    .admdlg,
    .admdlg-stripe,
    .admdlg-rule,
    .admdlg-body {
        animation: none !important;
    }
}