/* ══════════════════════════════════════════════════════════════
   AmlShield — Stitch "Sovereign" theme primitives.
   Scoped to `.mud-container` container. Light by default; dark
   activates when an ancestor carries `.mud-theme-dark`
   (MudThemeProvider class).

   Dark palette sourced from the stitch mockup.
   Light palette derived to keep the same hue families with
   enough contrast for text on white.
   ══════════════════════════════════════════════════════════════ */

/* Align surrounding Mud layout with stitch surface colours in both themes
   (removes the mismatched seam between stitch card and its wrapping MudContainer)
   Also aligns body text color so every page—stitch or not—follows the theme. */

/* Light mode — body/main-content = soft gray so stitch cards (white) stand out.
   Note: do NOT force a bg on .mud-container here; it sets its own theme-aware bg. */
html body:not(.mud-theme-dark),
html body:not(.mud-theme-dark) .mud-layout,
html body:not(.mud-theme-dark) .mud-main-content {
    background: #EEF0F5;
    color: #131318;
}

/* Dark mode — body/main-content = deep black to match stitch canvas */
html body.mud-theme-dark,
html body.mud-theme-dark .mud-layout,
html body.mud-theme-dark .mud-main-content,
html body.mud-theme-dark .mud-drawer-content {
    background: #0A0A0F !important;
    color: #FFFFFF;
}

/* Fallback: if MudBlazor's body class isn't applied, detect dark via page wrapper */
html body:has(.mud-container [data-theme="dark"]),
html body:has(.mud-container [data-theme="dark"]) .mud-layout,
html body:has(.mud-container [data-theme="dark"]) .mud-main-content {
    background: #0A0A0F !important;
    color: #FFFFFF;
}

/* Ensure common text elements inherit / become light in dark mode.
   Keep chips, badges, buttons with their own theming. */
body.mud-theme-dark,
body.mud-theme-dark h1,
body.mud-theme-dark h2,
body.mud-theme-dark h3,
body.mud-theme-dark h4,
body.mud-theme-dark h5,
body.mud-theme-dark h6,
body.mud-theme-dark p,
body.mud-theme-dark label,
body.mud-theme-dark div,
body.mud-theme-dark span:not([class*="mud-chip"]):not([class*="mud-badge"]):not([class*="mud-button"]):not([class*="stitch-chip"]):not([class*="mud-avatar"]),
body.mud-theme-dark td,
body.mud-theme-dark th,
body.mud-theme-dark li,
body.mud-theme-dark .mud-typography,
body.mud-theme-dark .mud-typography-body1,
body.mud-theme-dark .mud-typography-body2,
body.mud-theme-dark .mud-typography-subtitle1,
body.mud-theme-dark .mud-typography-subtitle2,
body.mud-theme-dark .mud-typography-caption,
body.mud-theme-dark .mud-typography-h1,
body.mud-theme-dark .mud-typography-h2,
body.mud-theme-dark .mud-typography-h3,
body.mud-theme-dark .mud-typography-h4,
body.mud-theme-dark .mud-typography-h5,
body.mud-theme-dark .mud-typography-h6,
body.mud-theme-dark .mud-card,
body.mud-theme-dark .mud-card-content,
body.mud-theme-dark .mud-card-header,
body.mud-theme-dark .mud-paper,
body.mud-theme-dark .mud-list-item,
body.mud-theme-dark .mud-list-item-text,
body.mud-theme-dark .mud-expansion-panel,
body.mud-theme-dark .mud-tabs {
    color: #E4E1E9 !important;
}

/* Muted/secondary text variants in dark mode */
body.mud-theme-dark .mud-typography-caption,
body.mud-theme-dark .text-muted,
body.mud-theme-dark small {
    color: #C2C6D6 !important;
}

/* Light mode body/text baseline */
body:not(.mud-theme-dark) {
    color: #131318;
}

/* Inside .mud-container, force every descendant text to flow from stitch tokens,
   except opinionated children that set their own color */
.mud-container,
.mud-container h1, .mud-container h2, .mud-container h3, .mud-container h4,
.mud-container p, .mud-container label, .mud-container span:not([class*="stitch-chip"]):not([class*="stitch-severity-icon"]):not([class*="stitch-bento-value"]):not([class*="stitch-bento-icon"]):not([class*="stitch-entity-avatar"]):not([class*="mono"]),
.mud-container td:not(.mono):not(.muted):not(.date),
.mud-container th {
    color: var(--stitch-on-surface);
}

.mud-container .stitch-breadcrumb,
.mud-container .stitch-breadcrumb a,
.mud-container .stitch-bento-label,
.mud-container .stitch-label,
.mud-container .stitch-owner-meta,
.mud-container .stitch-meta-label,
.mud-container .stitch-meta-session,
.mud-container .stitch-empty,
.mud-container .stitch-pagination-info,
.mud-container .stitch-summary-label,
.mud-container .stitch-progress-note {
    color: var(--stitch-on-surface-variant);
}

.mud-container {
    /* ── Light tokens (default) ──
       Proper tonal steps so nested controls remain visible on white cards.
       Body = #EEF0F5 → cards = white → nested filter bars/toggles step down a notch. */
    --stitch-canvas:                    #FFFFFF;   /* outer container / page card bg */
    --stitch-surface:                   #FFFFFF;
    --stitch-surface-container-lowest:  #FFFFFF;
    --stitch-surface-container-low:     #FFFFFF;   /* top-level cards, bento, buttons */
    --stitch-surface-container:         #F4F5F9;   /* filter bar, table wrap */
    --stitch-surface-container-high:    #EAECF2;   /* table header row, hover row, severity-hud inner cards */
    --stitch-surface-container-highest: #DDE0E8;   /* deepest recession */

    --stitch-on-surface:                #131318;
    --stitch-on-surface-variant:        #4A4F5B;
    --stitch-on-surface-variant-soft:   rgba(74, 79, 91, 0.6);
    --stitch-on-surface-variant-faint:  rgba(74, 79, 91, 0.35);

    --stitch-outline:                   #74777F;
    --stitch-outline-variant:           #C3C6D0;
    --stitch-outline-faint:             rgba(60, 65, 80, 0.12);

    --stitch-primary:                   #0052CC;
    --stitch-primary-container:         #4D8EFF;
    --stitch-on-primary-container:      #FFFFFF;
    --stitch-primary-soft:              rgba(77, 142, 255, 0.18);

    --stitch-secondary:                 #0097B2;
    --stitch-secondary-container:       #B2EBF2;
    --stitch-secondary-soft:            rgba(0, 151, 178, 0.15);

    --stitch-error:                     #BA1A1A;
    --stitch-error-container:           #FFDAD6;
    --stitch-on-error-container:        #410002;
    --stitch-error-soft:                rgba(186, 26, 26, 0.12);

    --stitch-warning:                   #B4620A;
    --stitch-warning-soft:              rgba(180, 98, 10, 0.14);

    --stitch-glow:                      0 0 15px rgba(77, 142, 255, 0.25);
    --stitch-shadow-card:               0 1px 3px rgba(19, 19, 24, 0.04), 0 8px 24px rgba(19, 19, 24, 0.05);

    color: var(--stitch-on-surface);
    background: var(--stitch-canvas);
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--stitch-outline-faint);
}

/* ── Dark tokens (literal stitch palette) ──
   Multiple selectors for robust activation:
   - .mud-theme-dark .mud-container        → MudBlazor adds this class to <body> when IsDarkMode
   - body.mud-theme-dark .mud-container    → explicit body qualifier
   - .mud-container[data-theme="dark"]     → manual/attribute-driven fallback
   - .mud-container.dark                   → class-based fallback
*/
.mud-theme-dark .mud-container,
body.mud-theme-dark .mud-container,
html.mud-theme-dark .mud-container,
[class*="mud-theme-dark"] .mud-container,
.mud-container[data-theme="dark"],
.mud-container:has([data-theme="dark"]),
.mud-container.dark {
    /* Outer container canvas uses the deeper stitch page bg (p-8 bg-[#0A0A0F]),
       distinct from surface #131318 so inner cards (#1B1B20) keep tonal separation. */
    color: #FFFFFF !important;

    --stitch-canvas:                    #0A0A0F;
    --stitch-surface:                   #131318;
    --stitch-surface-container-lowest:  #0E0E13;
    --stitch-surface-container-low:     #1B1B20;
    --stitch-surface-container:         #1F1F25;
    --stitch-surface-container-high:    #2A292F;
    --stitch-surface-container-highest: #35343A;

    --stitch-on-surface:                #FFFFFF;
    --stitch-on-surface-variant:        #D6DAE5;
    --stitch-on-surface-variant-soft:   rgba(214, 218, 229, 0.65);
    --stitch-on-surface-variant-faint:  rgba(214, 218, 229, 0.4);

    --stitch-outline:                   #8C909F;
    --stitch-outline-variant:           #424754;
    --stitch-outline-faint:             rgba(173, 198, 255, 0.10);  /* stitch "glass-border" — primary-tinted */

    --stitch-primary:                   #ADC6FF;
    --stitch-primary-container:         #4D8EFF;
    --stitch-on-primary-container:      #00285D;
    --stitch-primary-soft:              rgba(77, 142, 255, 0.15);

    --stitch-secondary:                 #4CD7F6;
    --stitch-secondary-container:       #03B5D3;
    --stitch-secondary-soft:            rgba(76, 215, 246, 0.12);

    --stitch-error:                     #FFB4AB;
    --stitch-error-container:           #93000A;
    --stitch-on-error-container:        #FFDAD6;
    --stitch-error-soft:                rgba(255, 180, 171, 0.14);

    --stitch-warning:                   #FFB74D;
    --stitch-warning-soft:              rgba(255, 183, 77, 0.14);

    --stitch-glow:                      0 0 15px rgba(77, 142, 255, 0.35);
    --stitch-shadow-card:               0 2px 6px rgba(0, 0, 0, 0.35), 0 10px 32px rgba(0, 0, 0, 0.3);
}

/* ══════════════════════════════════════════════════════════════
   HEADER STRIP (module label + big title + description)
   ══════════════════════════════════════════════════════════════ */

.mud-container .stitch-header {
    margin-bottom: 48px;
}

.mud-container .stitch-header-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.mud-container .stitch-eyebrow-label {
    color: var(--stitch-primary);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.mud-container .stitch-eyebrow-rule {
    height: 1px;
    width: 48px;
    background: var(--stitch-primary-soft);
    border: none;
    margin: 0;
}

.mud-container .stitch-header-title {
    margin: 0 0 8px;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--stitch-on-surface);
}

.mud-container .stitch-header-description {
    margin: 0;
    max-width: 640px;
    color: var(--stitch-on-surface-variant);
    font-size: 14px;
    line-height: 1.55;
}

/* ══════════════════════════════════════════════════════════════
   FORM CARD
   ══════════════════════════════════════════════════════════════ */

.mud-container .stitch-card {
    position: relative;
    background: var(--stitch-surface-container-low);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 12px;
    padding: 32px;
    box-shadow: var(--stitch-shadow-card);
    overflow: hidden;
}

/* Tonal gradient top accent */
.mud-container .stitch-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        to right,
        var(--stitch-primary-soft) 0%,
        var(--stitch-secondary-soft) 40%,
        transparent 100%
    );
    pointer-events: none;
}

.mud-container .stitch-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px 48px;
}

@media (min-width: 768px) {
    .mud-container .stitch-grid { grid-template-columns: 1fr 1fr; }
}

.mud-container .stitch-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mud-container .stitch-field-wide { grid-column: 1 / -1; }

.mud-container .stitch-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--stitch-on-surface-variant);
}

/* ── Underline input / select ── */
.mud-container .stitch-underline {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--stitch-outline-variant);
    padding: 10px 0 10px 0;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.mud-container .stitch-underline:focus-within {
    border-bottom: 2px solid var(--stitch-secondary);
    padding-bottom: 9px;
    box-shadow: 0 4px 12px -4px var(--stitch-secondary-soft);
}

.mud-container .stitch-underline .stitch-input-icon {
    color: var(--stitch-on-surface-variant-faint);
    font-size: 20px;
    transition: color 150ms ease;
}

.mud-container .stitch-underline:focus-within .stitch-input-icon {
    color: var(--stitch-secondary);
}

.mud-container .stitch-input,
.mud-container .stitch-select {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--stitch-on-surface);
    appearance: none;
}

.mud-container .stitch-input::placeholder {
    color: var(--stitch-on-surface-variant-faint);
}

.mud-container .stitch-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 20px;
}

.mud-container .stitch-select option {
    background: var(--stitch-surface-container);
    color: var(--stitch-on-surface);
}

/* ── Severity HUD (radio cards) ── */
.mud-container .stitch-severity-hud {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 4px;
}

@media (min-width: 1024px) {
    .mud-container .stitch-severity-hud { grid-template-columns: repeat(3, 1fr); }
}

.mud-container .stitch-severity-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--stitch-surface-container);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.mud-container .stitch-severity-card:hover {
    transform: translateY(-1px);
}

.mud-container .stitch-severity-icon {
    font-size: 36px;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 40;
}

.mud-container .stitch-severity-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

/* Severity variant idle icons */
/* Traffic-light severity palette — clearer semantics */
.mud-container .stitch-severity-card[data-severity="high"]   .stitch-severity-icon { color: var(--stitch-error); }
.mud-container .stitch-severity-card[data-severity="medium"] .stitch-severity-icon { color: var(--stitch-warning); }
.mud-container .stitch-severity-card[data-severity="low"]    .stitch-severity-icon { color: var(--stitch-primary); }

/* Active states — traffic-light palette */
.mud-container .stitch-severity-card.active[data-severity="high"] {
    background: var(--stitch-error-soft);
    border-color: var(--stitch-error);
    box-shadow: 0 0 0 1px var(--stitch-error) inset;
}

.mud-container .stitch-severity-card.active[data-severity="medium"] {
    background: var(--stitch-warning-soft);
    border-color: var(--stitch-warning);
    box-shadow: 0 0 0 1px var(--stitch-warning) inset;
}

.mud-container .stitch-severity-card.active[data-severity="low"] {
    background: var(--stitch-primary-soft);
    border-color: var(--stitch-primary);
    box-shadow: 0 0 0 1px var(--stitch-primary) inset;
}

/* ── Owner card (avatar + editable) ── */
.mud-container .stitch-owner-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--stitch-surface-container);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 6px;
}

.mud-container .stitch-owner-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--stitch-primary-soft);
    color: var(--stitch-primary);
    flex-shrink: 0;
    font-size: 22px;
}

.mud-container .stitch-owner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.mud-container .stitch-owner-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--stitch-on-surface);
}

.mud-container .stitch-owner-input::placeholder { color: var(--stitch-on-surface-variant-faint); }

.mud-container .stitch-owner-meta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--stitch-on-surface-variant-faint);
}

/* ── Textarea ── */
.mud-container .stitch-textarea {
    width: 100%;
    min-height: 108px;
    resize: vertical;
    padding: 14px 16px;
    background: var(--stitch-surface-container);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 8px;
    color: var(--stitch-on-surface);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.55;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.mud-container .stitch-textarea::placeholder { color: var(--stitch-on-surface-variant-faint); }

.mud-container .stitch-textarea:focus {
    border-color: var(--stitch-secondary);
    box-shadow: 0 4px 12px -4px var(--stitch-secondary-soft);
}

.mud-container .stitch-textarea.mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
}

/* ── Actions row ── */
.mud-container .stitch-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    padding-top: 32px;
    margin-top: 32px;
    border-top: 1px solid var(--stitch-outline-faint);
}

.mud-container .stitch-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--stitch-on-surface-variant);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    cursor: pointer;
    transition: color 150ms ease;
}

.mud-container .stitch-btn-ghost:hover { color: var(--stitch-on-surface); }

.mud-container .stitch-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--stitch-primary-container);
    border: 1px solid transparent;
    border-radius: 8px;
    color: #FFFFFF;   /* always white on blue CTA, both themes */
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(77, 142, 255, 0.25), 0 4px 12px rgba(77, 142, 255, 0.20);
    transition: transform 150ms ease, box-shadow 200ms ease, filter 150ms ease;
    line-height: 1.2;
}

.mud-container .stitch-btn-primary .mso { font-size: 16px; }

/* Force every descendant of the primary CTA to inherit the white button text.
   Without this, the global `.mud-container span` color rule wins and makes the
   inner label read as dark on blue. */
.mud-container .stitch-btn-primary,
.mud-container .stitch-btn-primary span,
.mud-container .stitch-btn-primary .mso {
    color: #FFFFFF !important;
}

.mud-container .stitch-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(77, 142, 255, 0.30), 0 8px 20px rgba(77, 142, 255, 0.28);
    filter: brightness(1.06);
}
.mud-container .stitch-btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(77, 142, 255, 0.22);
}

.mud-container .stitch-btn-primary:disabled {
    background: var(--stitch-surface-container-high);
    color: var(--stitch-on-surface-variant-soft);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
    filter: none;
}

/* ── Footer meta row ── */
.mud-container .stitch-meta {
    margin-top: 32px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.mud-container .stitch-meta-group { display: flex; gap: 32px; flex-wrap: wrap; }

.mud-container .stitch-meta-item { display: flex; flex-direction: column; gap: 2px; }

.mud-container .stitch-meta-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--stitch-on-surface-variant-faint);
}

.mud-container .stitch-meta-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: var(--stitch-on-surface);
}

.mud-container .stitch-meta-value.secondary { color: var(--stitch-secondary); }

.mud-container .stitch-meta-session {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--stitch-on-surface-variant-faint);
}

/* ══════════════════════════════════════════════════════════════
   TWO-COLUMN SHELL (form + aside)
   ══════════════════════════════════════════════════════════════ */

.mud-container .stitch-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

@media (min-width: 1100px) {
    .mud-container .stitch-shell {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

.mud-container .stitch-main { min-width: 0; }

.mud-container .stitch-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 16px;
}

/* Aside panel — same language as the form card, smaller */
.mud-container .stitch-panel {
    position: relative;
    background: var(--stitch-surface-container-low);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 10px;
    padding: 18px 20px;
    overflow: hidden;
}

.mud-container .stitch-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, var(--stitch-primary-soft), transparent 80%);
    pointer-events: none;
}

.mud-container .stitch-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 14px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--stitch-on-surface-variant);
}

.mud-container .stitch-panel-heading .mso { font-size: 14px; color: var(--stitch-primary); }

/* Completion progress */
.mud-container .stitch-progress {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mud-container .stitch-progress-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.mud-container .stitch-progress-count {
    font-size: 20px;
    font-weight: 700;
    color: var(--stitch-on-surface);
    letter-spacing: -0.02em;
}

.mud-container .stitch-progress-of {
    color: var(--stitch-on-surface-variant-faint);
    font-size: 13px;
    margin-inline-start: 4px;
}

.mud-container .stitch-progress-state {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--stitch-on-surface-variant);
}

.mud-container .stitch-progress-state.ready { color: var(--stitch-secondary); }

.mud-container .stitch-progress-bar {
    height: 3px;
    border-radius: 2px;
    background: var(--stitch-surface-container-high);
    overflow: hidden;
}

.mud-container .stitch-progress-fill {
    height: 100%;
    background: var(--stitch-primary-container);
    transition: width 200ms ease, background 200ms ease;
}

.mud-container .stitch-progress-fill.ready { background: var(--stitch-secondary); }

.mud-container .stitch-progress-note {
    font-size: 12px;
    line-height: 1.5;
    color: var(--stitch-on-surface-variant-soft);
    margin-top: 2px;
}

/* Checklist of completion steps */
.mud-container .stitch-checklist {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mud-container .stitch-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 2px;
    font-size: 12.5px;
    color: var(--stitch-on-surface-variant);
    transition: color 150ms ease;
}

.mud-container .stitch-check-item + .stitch-check-item {
    border-top: 1px solid var(--stitch-outline-faint);
}

.mud-container .stitch-check-icon {
    font-size: 16px;
    color: var(--stitch-on-surface-variant-faint);
    flex-shrink: 0;
}

.mud-container .stitch-check-item.done .stitch-check-icon {
    color: #10B981;
}

.mud-container .stitch-check-item.required:not(.done) .stitch-check-icon {
    color: var(--stitch-warning);
}

.mud-container .stitch-check-label {
    flex: 1;
    min-width: 0;
}

.mud-container .stitch-check-item.done .stitch-check-label {
    color: var(--stitch-on-surface);
    text-decoration: line-through;
    text-decoration-color: rgba(128, 128, 128, 0.35);
    text-decoration-thickness: 1px;
}

.mud-container .stitch-check-tag {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

.mud-container .stitch-check-tag.required {
    background: var(--stitch-warning-soft);
    color: var(--stitch-warning);
    border: 1px solid var(--stitch-warning);
}

.mud-container .stitch-check-tag.optional {
    background: transparent;
    color: var(--stitch-on-surface-variant-faint);
    border: 1px dashed var(--stitch-outline-faint);
}

/* ══════════════════════════════════════════════════════════════
   AI Assist panel — smart help on create/edit forms
   ══════════════════════════════════════════════════════════════ */

.mud-container .ai-assist-panel {
    position: relative;
    border: 1px solid rgba(132, 90, 223, 0.18);
    background:
      linear-gradient(180deg, rgba(132, 90, 223, 0.04), rgba(0, 151, 178, 0.03) 60%, transparent),
      var(--stitch-surface-container-low);
}

body.mud-theme-dark .mud-container .ai-assist-panel {
    border-color: rgba(173, 198, 255, 0.18);
    background:
      linear-gradient(180deg, rgba(132, 90, 223, 0.10), rgba(76, 215, 246, 0.05) 60%, transparent),
      var(--stitch-surface-container-low);
}

.mud-container .ai-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mud-container .ai-heading-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mud-container .ai-heading .ai-spark {
    font-size: 15px;
    background: linear-gradient(135deg, #845adf, #0097B2);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.mud-theme-dark .mud-container .ai-heading .ai-spark {
    background: linear-gradient(135deg, #b69dff, #4CD7F6);
    -webkit-background-clip: text;
            background-clip: text;
}

.mud-container .ai-tag {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.10em;
    padding: 2px 5px;
    border-radius: 3px;
    background: linear-gradient(135deg, #845adf, #0097B2);
    color: #FFFFFF;
    line-height: 1;
}

.mud-container .ai-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--stitch-on-surface-variant);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.mud-container .ai-collapse-btn:hover { background: rgba(128, 128, 128, 0.08); }

/* Tier card */
.mud-container .ai-tier {
    margin-top: 12px;
    padding: 12px;
    background: var(--stitch-surface);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mud-container .ai-tier.warn {
    background: var(--stitch-warning-soft);
    border-color: var(--stitch-warning);
}

.mud-container .ai-tier.muted {
    background: transparent;
    border-style: dashed;
}

.mud-container .ai-tier-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mud-container .ai-tier-icon { font-size: 16px; line-height: 1; }

.mud-container .ai-tier-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--stitch-on-surface);
}

.mud-container .ai-tier-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--stitch-on-surface-variant);
}

.mud-container .ai-tier-hint {
    font-size: 11px;
    color: var(--stitch-on-surface-variant-soft);
    font-style: italic;
}

.mud-container .ai-counter { font-style: italic; }

/* Action buttons */
.mud-container .ai-tier-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #845adf, #0097B2);
    border: none;
    border-radius: 6px;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(132, 90, 223, 0.25);
    transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    align-self: flex-start;
}

.mud-container .ai-tier-btn:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(132, 90, 223, 0.30);
}

.mud-container .ai-tier-btn:disabled {
    background: var(--stitch-surface-container-high);
    color: var(--stitch-on-surface-variant-soft);
    cursor: not-allowed;
    box-shadow: none;
}

.mud-container .ai-tier-btn.secondary {
    background: transparent;
    color: var(--stitch-primary);
    border: 1px solid var(--stitch-primary);
    box-shadow: none;
}

.mud-container .ai-tier-btn.secondary:hover:not(:disabled) {
    background: var(--stitch-primary-soft);
}

.mud-container .ai-tier-btn.mini {
    padding: 4px 10px;
    font-size: 11px;
}

.mud-container .ai-tier-btn .mso { font-size: 14px; color: inherit; }

/* Tier 2 — severity recommendation card */
.mud-container .ai-reco-card {
    padding: 10px;
    border-radius: 6px;
    background: var(--stitch-surface-container-high);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mud-container .ai-reco-top { display: flex; align-items: center; gap: 8px; }
.mud-container .ai-reco-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.65;
}
.mud-container .ai-reco-pill {
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.mud-container .ai-reco-card[data-sev="high"]   .ai-reco-pill { background: var(--stitch-error-soft);   color: var(--stitch-error);   border-color: var(--stitch-error); }
.mud-container .ai-reco-card[data-sev="medium"] .ai-reco-pill { background: var(--stitch-warning-soft); color: var(--stitch-warning); border-color: var(--stitch-warning); }
.mud-container .ai-reco-card[data-sev="low"]    .ai-reco-pill { background: var(--stitch-primary-soft); color: var(--stitch-primary); border-color: var(--stitch-primary); }

.mud-container .ai-reco-reason {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--stitch-on-surface-variant);
}

.mud-container .ai-reco-match {
    font-size: 11px;
    color: #10B981;
    font-weight: 600;
}

/* Tier 3 — duplicate alert link */
.mud-container .ai-dup-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--stitch-surface);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 6px;
    text-decoration: none;
    color: var(--stitch-on-surface);
    font-size: 11px;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.mud-container .ai-dup-link:hover {
    border-color: var(--stitch-primary);
    background: var(--stitch-primary-soft);
}

.mud-container .ai-dup-id {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    color: var(--stitch-primary);
}

.mud-container .ai-dup-meta {
    flex: 1;
    color: var(--stitch-on-surface-variant);
}

.mud-container .ai-dup-link .mso { font-size: 13px; opacity: 0.6; }

/* Tier 4 — transaction suggestion row */
.mud-container .ai-tx-suggestion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--stitch-surface);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 6px;
    font-size: 11px;
}

.mud-container .ai-tx-ref {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600;
    color: var(--stitch-primary);
}

.mud-container .ai-tx-amt {
    flex: 1;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--stitch-on-surface);
}

.mud-container .ai-tx-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: var(--stitch-primary);
    border: none;
    border-radius: 4px;
    color: #FFFFFF;
    cursor: pointer;
    transition: filter 120ms ease;
}

.mud-container .ai-tx-add:hover { filter: brightness(1.1); }
.mud-container .ai-tx-add .mso { font-size: 14px; }

/* Tier 5 — rule suggestion */
.mud-container .ai-rule-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--stitch-surface);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 6px;
}

.mud-container .ai-rule-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mud-container .ai-rule-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--stitch-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mud-container .ai-rule-meta {
    font-size: 10px;
    color: var(--stitch-on-surface-variant-soft);
}

/* Tier 6 — SLA card */
.mud-container .ai-sla-card {
    padding: 10px;
    border-radius: 6px;
    background: var(--stitch-surface-container-high);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mud-container .ai-sla-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--stitch-primary);
}

.mud-container .ai-sla-citation {
    font-size: 11px;
    line-height: 1.45;
    color: var(--stitch-on-surface-variant);
    font-style: italic;
}

/* Tier 8 — translate buttons row */
.mud-container .ai-translate-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* Footer disclosure note */
.mud-container .ai-footer-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--stitch-outline-faint);
    font-size: 10px;
    line-height: 1.5;
    color: var(--stitch-on-surface-variant-soft);
    font-style: italic;
}

.mud-container .ai-footer-note .mso { opacity: 0.6; }

/* Summary rows */
.mud-container .stitch-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 13px;
}

.mud-container .stitch-summary-row + .stitch-summary-row {
    border-top: 1px solid var(--stitch-outline-faint);
}

.mud-container .stitch-summary-label {
    font-size: 11px;
    color: var(--stitch-on-surface-variant-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mud-container .stitch-summary-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--stitch-on-surface);
    text-align: right;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mud-container .stitch-summary-value.accent    { color: var(--stitch-secondary); }
.mud-container .stitch-summary-value.info       { color: var(--stitch-primary); }
.mud-container .stitch-summary-value.warn      { color: var(--stitch-warning); }
.mud-container .stitch-summary-value.danger    { color: var(--stitch-error); }
.mud-container .stitch-summary-value.muted     { color: var(--stitch-on-surface-variant-soft); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════
   FORM HELPERS — autocomplete items, helper text, tx chips
   ══════════════════════════════════════════════════════════════ */

.mud-container .stitch-label-opt {
    font-weight: 500;
    opacity: 0.55;
    text-transform: none;
    letter-spacing: 0;
    margin-inline-start: 6px;
}

.mud-container .stitch-helper-text {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--stitch-on-surface-variant-soft);
    line-height: 1.5;
}

.mud-container .stitch-helper-text.error {
    color: var(--stitch-error);
}

/* ══════════════════════════════════════════════════════════════
   Autocomplete dropdown items — GLOBAL (not scoped to .mud-container)
   MudBlazor portals popovers outside the page DOM tree, so scoped
   rules don't reach them. Using literal colors + body.mud-theme-dark
   overrides instead of --stitch-* vars for the same reason.
   ══════════════════════════════════════════════════════════════ */

.stitch-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 2px;
    min-width: 0;
    width: 100%;
}

.stitch-ac-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(128, 128, 128, 0.12);
    color: #4A4F5B;
    flex-shrink: 0;
    font-size: 18px;
}

.stitch-ac-avatar[data-kind="person"] {
    background: rgba(0, 151, 178, 0.15);
    color: #0097B2;
}

.stitch-ac-avatar[data-kind="domain"] {
    background: rgba(77, 142, 255, 0.15);
    color: #0052CC;
}

body.mud-theme-dark .stitch-ac-avatar {
    background: rgba(194, 198, 214, 0.10);
    color: #C2C6D6;
}

body.mud-theme-dark .stitch-ac-avatar[data-kind="person"] {
    background: rgba(76, 215, 246, 0.16);
    color: #4CD7F6;
}

body.mud-theme-dark .stitch-ac-avatar[data-kind="domain"] {
    background: rgba(173, 198, 255, 0.16);
    color: #ADC6FF;
}

.stitch-ac-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.stitch-ac-title {
    font-size: 13px;
    font-weight: 600;
    color: #131318;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}

body.mud-theme-dark .stitch-ac-title {
    color: #FFFFFF;
}

.stitch-ac-subtitle {
    font-size: 11px;
    color: rgba(74, 79, 91, 0.72);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}

body.mud-theme-dark .stitch-ac-subtitle {
    color: rgba(214, 218, 229, 0.72);
}

.stitch-ac-subtitle.mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.01em;
}

.stitch-ac-badge {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(128, 128, 128, 0.14);
    color: #4A4F5B;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

body.mud-theme-dark .stitch-ac-badge {
    background: rgba(194, 198, 214, 0.14);
    color: #C2C6D6;
}

.stitch-ac-empty {
    padding: 14px 12px;
    text-align: center;
    font-size: 12px;
    color: rgba(74, 79, 91, 0.72);
    line-height: 1.5;
}

body.mud-theme-dark .stitch-ac-empty {
    color: rgba(214, 218, 229, 0.7);
}

/* MudAutocomplete popover smoothness — rounded, subtle shadow, comfy rows */
.mud-popover .mud-list-item {
    padding: 6px 12px;
    border-radius: 6px;
    margin: 2px 6px;
    transition: background-color 150ms ease;
}

.mud-popover .mud-list-item:hover,
.mud-popover .mud-list-item.mud-selected-item {
    background-color: rgba(77, 142, 255, 0.08);
}

body.mud-theme-dark .mud-popover .mud-list-item:hover,
body.mud-theme-dark .mud-popover .mud-list-item.mud-selected-item {
    background-color: rgba(173, 198, 255, 0.10);
}

/* The portaled popover container itself */
.mud-popover-provider .mud-popover {
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(60, 65, 80, 0.10);
    overflow: hidden;
}

body.mud-theme-dark .mud-popover-provider .mud-popover {
    border-color: rgba(173, 198, 255, 0.10);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.50), 0 4px 10px rgba(0, 0, 0, 0.30) !important;
}

/* Transaction chips (after parsing comma-separated input) */
.mud-container .stitch-tx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 10px;
}

.mud-container .stitch-tx-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    background: var(--stitch-primary-soft);
    color: var(--stitch-primary);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--stitch-primary);
}

.mud-container .stitch-tx-chip.mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.mud-container .stitch-tx-count {
    font-size: 11px;
    color: var(--stitch-on-surface-variant-soft);
    margin-inline-start: 6px;
    font-style: italic;
}

/* Empty-state prompt shown before a client is chosen (Related Transactions) */
.mud-container .stitch-tx-empty-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--stitch-surface-container-high);
    border: 1px dashed var(--stitch-outline-faint);
    border-radius: 8px;
    font-size: 12px;
    color: var(--stitch-on-surface-variant-soft);
}

.mud-container .stitch-tx-empty-state .mso {
    font-size: 16px;
    opacity: 0.7;
}

/* Rich transaction chip — picked from the autocomplete, displays direction +
   reference + amount, with a remove button. */
.mud-container .stitch-tx-chip-rich {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 10px;
    border-radius: 6px;
    background: var(--stitch-primary-soft);
    border: 1px solid var(--stitch-primary);
    color: var(--stitch-primary);
    font-size: 11px;
    font-weight: 600;
}

.mud-container .stitch-tx-chip-rich .mso { color: inherit; }

.mud-container .stitch-tx-chip-rich .stitch-tx-chip-ref {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.02em;
}

.mud-container .stitch-tx-chip-rich .stitch-tx-chip-amt {
    padding: 0 6px;
    border-inline-start: 1px solid currentColor;
    opacity: 0.85;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.mud-container .stitch-tx-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 120ms ease, background-color 120ms ease;
}

.mud-container .stitch-tx-chip-remove:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}

/* Dark-mode contrast for rich chips */
body.mud-theme-dark .mud-container .stitch-tx-chip-rich {
    background: rgba(173, 198, 255, 0.12);
    border-color: rgba(173, 198, 255, 0.55);
    color: #ADC6FF;
}

/* Subtitle that lives on the same line as the title (for counterparty in AC items) */
.stitch-ac-subtitle-inline {
    font-weight: 400;
    opacity: 0.7;
    font-size: 12px;
}

/* Transaction direction avatar tints for autocomplete items */
.stitch-ac-avatar[data-kind="in"]  { background: rgba(16, 185, 129, 0.14); color: #10B981; }
.stitch-ac-avatar[data-kind="out"] { background: rgba(239, 83, 80, 0.14);  color: #EF5350; }

body.mud-theme-dark .stitch-ac-avatar[data-kind="in"]  { background: rgba(129, 199, 132, 0.18); color: #81C784; }
body.mud-theme-dark .stitch-ac-avatar[data-kind="out"] { background: rgba(255, 138, 128, 0.18); color: #FF8A80; }

/* MudAutocomplete inside stitch — tone down default MudBlazor affordances */
.mud-container .stitch-mud-autocomplete .mud-input-root-outlined {
    border-radius: 8px;
}

/* Summary value can render as a chip-like pill (for severity/status reflection) */
.mud-container .stitch-summary-value.pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}

.mud-container .stitch-summary-value.pill.danger  { background: var(--stitch-error-soft);   border-color: var(--stitch-error);   color: var(--stitch-error); }
.mud-container .stitch-summary-value.pill.warn    { background: var(--stitch-warning-soft); border-color: var(--stitch-warning); color: var(--stitch-warning); }
.mud-container .stitch-summary-value.pill.info    { background: var(--stitch-primary-soft); border-color: var(--stitch-primary); color: var(--stitch-primary); }
.mud-container .stitch-summary-value.pill.accent  { background: var(--stitch-secondary-soft); border-color: var(--stitch-secondary); color: var(--stitch-secondary); }

/* Collapse aside into row-layout below shell breakpoint */
@media (max-width: 1099px) {
    .mud-container .stitch-aside {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .mud-container .stitch-aside .stitch-panel {
        flex: 1 1 260px;
    }
}

/* ══════════════════════════════════════════════════════════════
   LIST PAGE PRIMITIVES (breadcrumb + toolbar + bento stats +
   filter bar + data table + pagination)
   ══════════════════════════════════════════════════════════════ */

/* Breadcrumb + title + right actions */
.mud-container .stitch-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.mud-container .stitch-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--stitch-on-surface-variant);
}

.mud-container .stitch-breadcrumb a {
    color: var(--stitch-on-surface-variant);
    text-decoration: none;
    transition: color 150ms ease;
}

.mud-container .stitch-breadcrumb a:hover { color: var(--stitch-primary); }
.mud-container .stitch-breadcrumb .current { color: var(--stitch-on-surface); }
.mud-container .stitch-breadcrumb .mso { font-size: 12px; opacity: 0.5; }

.mud-container .stitch-toolbar h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--stitch-on-surface);
}

.mud-container .stitch-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mud-container .stitch-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--stitch-surface-container);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 8px;
    color: #131318;  /* explicit dark text in light mode */
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(19, 19, 24, 0.04);
    transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 200ms ease, color 150ms ease;
    line-height: 1.2;
}

.mud-container .stitch-btn-secondary:hover {
    background: var(--stitch-surface-container-high);
    border-color: var(--stitch-primary);
    color: var(--stitch-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(19, 19, 24, 0.08);
}

.mud-container .stitch-btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(19, 19, 24, 0.06);
}

.mud-container .stitch-btn-secondary .mso {
    font-size: 16px;
    opacity: 0.85;
    transition: opacity 150ms ease;
}

.mud-container .stitch-btn-secondary:hover .mso { opacity: 1; }

body.mud-theme-dark .mud-container .stitch-btn-secondary { color: #FFFFFF; }
body.mud-theme-dark .mud-container .stitch-btn-secondary:hover { color: var(--stitch-primary); }

/* ══════════════════════════════════════════════════════════════
   Guide chip — theme-aware, content-width pill (GLOBAL so it works
   in toolbars anywhere, not scoped to .mud-container).
   ══════════════════════════════════════════════════════════════ */

.aml-guide-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(77, 142, 255, 0.10);
    border: 1px solid rgba(77, 142, 255, 0.35);
    border-radius: 999px;
    color: #0052CC;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.aml-guide-chip .mso {
    font-size: 14px;
    line-height: 1;
    color: inherit;
}

.aml-guide-chip:hover {
    background: rgba(77, 142, 255, 0.18);
    border-color: #4D8EFF;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(77, 142, 255, 0.20);
}

.aml-guide-chip:active {
    transform: translateY(0);
}

/* Dark mode — lighten to stitch-primary tones */
body.mud-theme-dark .aml-guide-chip {
    background: rgba(173, 198, 255, 0.12);
    border-color: rgba(173, 198, 255, 0.35);
    color: #ADC6FF;
}

body.mud-theme-dark .aml-guide-chip:hover {
    background: rgba(173, 198, 255, 0.20);
    border-color: #ADC6FF;
    box-shadow: 0 2px 10px rgba(77, 142, 255, 0.25);
}

/* ══════════════════════════════════════════════════════════════
   PageGuideDrawer — theme-aware, fixed width, consistent across pages
   (drawer content is portaled by MudBlazor outside .mud-container, so
   rules must be GLOBAL, not scoped.)
   ══════════════════════════════════════════════════════════════ */

.aml-page-guide-drawer .mud-drawer-content {
    width: 460px !important;
    max-width: 100vw;
    background: #FFFFFF !important;
    border-inline-start: 1px solid rgba(60, 65, 80, 0.12) !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.08) !important;
    color: #131318;
}

.aml-page-guide-drawer.theme-dark .mud-drawer-content,
body.mud-theme-dark .aml-page-guide-drawer .mud-drawer-content {
    background: #131318 !important;
    border-inline-start-color: rgba(173, 198, 255, 0.10) !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45) !important;
    color: #FFFFFF;
}

/* ─── Smart Triage drawer (AlertList + CaseList) — portaled outside .mud-container ───
   Tokens are scoped under .mud-container so we can't lean on them here; instead we
   use literal stitch palette values and switch on body.mud-theme-dark. */

/* Light defaults */
.triage-drawer .mud-drawer-content {
    background: #FFFFFF !important;
    color: #1F2329;
    border-inline-start: 1px solid rgba(60, 65, 80, 0.12);
}

.triage-drawer-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.triage-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg,
        rgba(0, 82, 204, 0.10) 0%,
        rgba(77, 142, 255, 0.10) 100%);
    border-bottom: 1px solid rgba(0, 82, 204, 0.18);
}

.triage-drawer-header-icon { color: #0052CC; }
.triage-drawer-header-title {
    color: #1F2329;
    font-weight: 700;
}

.triage-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.triage-drawer-score {
    text-align: center;
    margin-bottom: 20px;
}
.triage-drawer-score-label { color: #4A4F5B; }

.triage-drawer-section { margin-bottom: 20px; }
.triage-drawer-section:last-child { margin-bottom: 0; }

.triage-drawer-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #4A4F5B;
}

.triage-drawer-factor { margin-bottom: 10px; }
.triage-drawer-factor-name {
    color: #1F2329 !important;
    font-weight: 600;
}
.triage-drawer-factor-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: #1F2329 !important;
}
.triage-drawer-factor-reasoning {
    color: #6B7280 !important;
    font-size: 0.7rem !important;
}

.triage-drawer-prose {
    color: #2A2F38 !important;
    line-height: 1.6;
    font-size: 0.85rem !important;
}

.triage-drawer-action-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.8rem;
    color: #2A2F38;
}

/* Dark overrides */
body.mud-theme-dark .triage-drawer .mud-drawer-content {
    background: #131318 !important;
    color: #FFFFFF;
    border-inline-start: 1px solid rgba(173, 198, 255, 0.10);
}

body.mud-theme-dark .triage-drawer-header {
    background: linear-gradient(135deg,
        rgba(77, 142, 255, 0.22) 0%,
        rgba(173, 198, 255, 0.10) 100%);
    border-bottom-color: rgba(173, 198, 255, 0.18);
}

body.mud-theme-dark .triage-drawer-header-icon { color: #ADC6FF; }
body.mud-theme-dark .triage-drawer-header-title { color: #FFFFFF; }

body.mud-theme-dark .triage-drawer-score-label { color: #A1A1AA; }
body.mud-theme-dark .triage-drawer-section-label { color: #D6DAE5; }
body.mud-theme-dark .triage-drawer-factor-name { color: #E4E4E7 !important; }
body.mud-theme-dark .triage-drawer-factor-value { color: #FFFFFF !important; }
body.mud-theme-dark .triage-drawer-factor-reasoning { color: #A1A1AA !important; }
body.mud-theme-dark .triage-drawer-prose { color: #D6DAE5 !important; }
body.mud-theme-dark .triage-drawer-action-row { color: #D6DAE5; }

.aml-page-guide-drawer .pgd-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.aml-page-guide-drawer .pgd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(60, 65, 80, 0.12);
    background: #F4F5F9;
    flex-shrink: 0;
}

.aml-page-guide-drawer.theme-dark .pgd-header,
body.mud-theme-dark .aml-page-guide-drawer .pgd-header {
    background: linear-gradient(135deg, #1A1A2E 0%, #252536 100%);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.aml-page-guide-drawer .pgd-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.aml-page-guide-drawer .pgd-header-icon {
    font-size: 22px;
    color: #0052CC;
}

.aml-page-guide-drawer.theme-dark .pgd-header-icon,
body.mud-theme-dark .aml-page-guide-drawer .pgd-header-icon {
    color: #ADC6FF;
}

.aml-page-guide-drawer .pgd-header-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #131318;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aml-page-guide-drawer.theme-dark .pgd-header-title,
body.mud-theme-dark .aml-page-guide-drawer .pgd-header-title {
    color: #FFFFFF;
}

.aml-page-guide-drawer .pgd-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #4A4F5B;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.aml-page-guide-drawer .pgd-close:hover {
    background: rgba(60, 65, 80, 0.08);
    color: #131318;
}

.aml-page-guide-drawer.theme-dark .pgd-close,
body.mud-theme-dark .aml-page-guide-drawer .pgd-close {
    color: #C2C6D6;
}

.aml-page-guide-drawer.theme-dark .pgd-close:hover,
body.mud-theme-dark .aml-page-guide-drawer .pgd-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.aml-page-guide-drawer .pgd-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    color: #131318;
}

.aml-page-guide-drawer.theme-dark .pgd-body,
body.mud-theme-dark .aml-page-guide-drawer .pgd-body {
    color: #E4E1E9;
}

/* GuideSection labels + body text inside the drawer (light-mode readability) */
.aml-page-guide-drawer .pgd-body .mud-typography,
.aml-page-guide-drawer .pgd-body strong,
.aml-page-guide-drawer .pgd-body em,
.aml-page-guide-drawer .pgd-body span:not([class*="material-symbols"]) {
    color: inherit !important;
}

/* GuideSection has its own hardcoded greys for dark mode; soften in light. */
.aml-page-guide-drawer:not(.theme-dark) .pgd-body .mud-typography[style*="#A1A1AA"],
body:not(.mud-theme-dark) .aml-page-guide-drawer .pgd-body .mud-typography[style*="#A1A1AA"] {
    color: #4A4F5B !important;
}

.aml-page-guide-drawer:not(.theme-dark) .pgd-body .mud-typography[style*="#71717A"],
body:not(.mud-theme-dark) .aml-page-guide-drawer .pgd-body .mud-typography[style*="#71717A"] {
    color: #6B7280 !important;
}

.aml-page-guide-drawer:not(.theme-dark) .pgd-body strong[style*="#E4E4E7"],
body:not(.mud-theme-dark) .aml-page-guide-drawer .pgd-body strong[style*="#E4E4E7"] {
    color: #131318 !important;
}

/* ══════════════════════════════════════════════════════════════
   AI toggle — Smart Triage (distinguished from regular filter toggles)
   ══════════════════════════════════════════════════════════════ */

.mud-container .stitch-ai-toggle {
    position: relative;
    padding-right: 36px;
    background: linear-gradient(135deg, rgba(132, 90, 223, 0.06), rgba(0, 151, 178, 0.06));
    border: 1px solid transparent;
    background-clip: padding-box;
    color: #5a43b0;
    font-weight: 600;
    overflow: hidden;
}

body.mud-theme-dark .mud-container .stitch-ai-toggle {
    background: linear-gradient(135deg, rgba(132, 90, 223, 0.14), rgba(76, 215, 246, 0.10));
    color: #c0b6ff;
}

/* Gradient border ring via pseudo-element */
.mud-container .stitch-ai-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, #845adf, #0097B2);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
}

body.mud-theme-dark .mud-container .stitch-ai-toggle::before {
    background: linear-gradient(135deg, #b69dff, #4CD7F6);
    opacity: 0.55;
}

/* Tiny "AI" badge in the right slot */
.mud-container .stitch-ai-toggle::after {
    content: "AI";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 5px;
    border-radius: 3px;
    background: linear-gradient(135deg, #845adf, #0097B2);
    color: #FFFFFF;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(132, 90, 223, 0.25);
}

/* Sparkle icon uses gradient fill */
.mud-container .stitch-ai-toggle .mso {
    background: linear-gradient(135deg, #845adf, #0097B2);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

body.mud-theme-dark .mud-container .stitch-ai-toggle .mso {
    background: linear-gradient(135deg, #b69dff, #4CD7F6);
    -webkit-background-clip: text;
            background-clip: text;
}

.mud-container .stitch-ai-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(132, 90, 223, 0.18);
}

/* Active state — gradient fill, white everything */
.mud-container .stitch-ai-toggle.active {
    background: linear-gradient(135deg, #845adf, #0097B2);
    color: #FFFFFF;
    box-shadow: 0 2px 10px rgba(132, 90, 223, 0.35), 0 4px 20px rgba(0, 151, 178, 0.18);
}

.mud-container .stitch-ai-toggle.active::before { opacity: 0; }

.mud-container .stitch-ai-toggle.active .mso {
    background: none;
    -webkit-text-fill-color: #FFFFFF;
    color: #FFFFFF;
}

.mud-container .stitch-ai-toggle.active::after {
    background: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
    box-shadow: none;
}

body.mud-theme-dark .mud-container .stitch-ai-toggle.active {
    color: #FFFFFF;
    box-shadow: 0 2px 12px rgba(182, 157, 255, 0.35), 0 4px 24px rgba(76, 215, 246, 0.22);
}

/* ─── Bento stats grid ─── */
.mud-container .stitch-bento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.mud-container .stitch-bento-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 20px;
    min-height: 92px;
    text-align: start;
    background: var(--stitch-surface-container-low);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 150ms ease, transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
    /* button reset — when used as <button>, suppress default browser styling */
    font: inherit;
    color: inherit;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}

.mud-container button.stitch-bento-card:hover {
    border-color: var(--stitch-primary);
    box-shadow: 0 4px 12px color-mix(in oklab, var(--stitch-primary) 15%, transparent);
}

.mud-container button.stitch-bento-card:focus-visible {
    outline: none;
    border-color: var(--stitch-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--stitch-primary) 25%, transparent);
}

.mud-container button.stitch-bento-card:active {
    transform: translateY(0);
}

.mud-container .stitch-bento-card:hover {
    background: var(--stitch-surface-container);
    transform: translateY(-1px);
}

.mud-container .stitch-bento-card.active {
    border-color: var(--stitch-primary);
    box-shadow: 0 0 0 1px var(--stitch-primary) inset;
}

/* Accent stripe on the reading-side of variant cards (flips automatically in RTL) */
.mud-container .stitch-bento-card[data-variant="high"]    { border-inline-start: 2px solid var(--stitch-error); }
.mud-container .stitch-bento-card[data-variant="overdue"] { border-inline-start: 2px solid var(--stitch-warning); }

/* Huge faint icon in background — upper corner opposite the reading direction
   (top-right in LTR, top-left in RTL). */
.mud-container .stitch-bento-icon {
    position: absolute;
    top: -8px;
    inset-inline-end: -8px;
    /* Belt-and-braces for browsers that don't honour inset-inline-end inside
       absolute-positioned flex children in all states. */
    right: -8px;
    left: auto;
    font-size: 74px;
    opacity: 0.16;
    color: var(--stitch-primary);
    transition: opacity 150ms ease, color 150ms ease, transform 200ms ease;
    pointer-events: none;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;
}

/* Dark mode — pale-blue tokens need a slight bump on near-black */
body.mud-theme-dark .mud-container .stitch-bento-icon,
.mud-container:has([data-theme="dark"]) .stitch-bento-icon {
    opacity: 0.18;
}

/* Hover intensification — icon lifts and brightens along with the card */
.mud-container .stitch-bento-card:hover .stitch-bento-icon {
    opacity: 0.26;
    transform: scale(1.04) translate(-2px, 2px);
}

body.mud-theme-dark .mud-container .stitch-bento-card:hover .stitch-bento-icon,
.mud-container:has([data-theme="dark"]) .stitch-bento-card:hover .stitch-bento-icon {
    opacity: 0.30;
}

.mud-container .stitch-bento-card[data-variant="high"] .stitch-bento-icon { color: var(--stitch-error); }
.mud-container .stitch-bento-card[data-variant="open"] .stitch-bento-icon { color: var(--stitch-secondary); }
.mud-container .stitch-bento-card[data-variant="overdue"] .stitch-bento-icon { color: var(--stitch-warning); }
.mud-container .stitch-bento-card:hover .stitch-bento-icon { opacity: 0.1; }

/* RTL: flip the background icon to the top-left corner (opposite the reading
   direction start, which is the right side in Arabic). Mirror the translate
   so the hover animation still lifts toward the card's outer corner. */
[dir="rtl"] .mud-container .stitch-bento-icon,
html[dir="rtl"] .mud-container .stitch-bento-icon {
    right: auto !important;
    left: -8px !important;
}

[dir="rtl"] .mud-container .stitch-bento-card:hover .stitch-bento-icon,
html[dir="rtl"] .mud-container .stitch-bento-card:hover .stitch-bento-icon {
    transform: scale(1.04) translate(2px, 2px);
}

.mud-container .stitch-bento-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--stitch-on-surface-variant);
    margin: 0 0 6px;
}

.mud-container .stitch-bento-value-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.mud-container .stitch-bento-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--stitch-on-surface);
}

.mud-container .stitch-bento-card[data-variant="high"] .stitch-bento-value { color: var(--stitch-error); }
.mud-container .stitch-bento-card[data-variant="overdue"] .stitch-bento-value { color: var(--stitch-warning); }

.mud-container .stitch-bento-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--stitch-error);
    animation: stitch-pulse 1.6s ease-in-out infinite;
}

@keyframes stitch-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.3; transform: scale(1.35); }
}

/* ─── Filter panel ─── */
.mud-container .stitch-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--stitch-surface-container);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 12px;
    margin-bottom: 20px;
}

.mud-container .stitch-search {
    position: relative;
    flex: 1;
    min-width: 280px;
    display: flex;
    align-items: center;
}

.mud-container .stitch-search .mso {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--stitch-on-surface-variant);
    pointer-events: none;
}

.mud-container .stitch-search input {
    width: 100%;
    padding: 10px 14px 10px 40px;
    background: var(--stitch-surface-container-low);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 8px;
    color: var(--stitch-on-surface);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.mud-container .stitch-search input:focus {
    border-color: var(--stitch-primary);
    box-shadow: 0 0 0 3px var(--stitch-primary-soft);
}

.mud-container .stitch-filter-select {
    padding: 9px 32px 9px 12px;
    background: var(--stitch-surface-container-low);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 8px;
    color: var(--stitch-on-surface-variant);
    font-family: inherit;
    font-size: 12px;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 150ms ease, color 150ms ease;
}

.mud-container .stitch-filter-select:focus,
.mud-container .stitch-filter-select:hover {
    color: var(--stitch-on-surface);
    border-color: var(--stitch-primary);
}

.mud-container .stitch-filter-select option {
    background: var(--stitch-surface-container);
    color: var(--stitch-on-surface);
}

.mud-container .stitch-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--stitch-surface-container-low);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 8px;
    color: var(--stitch-on-surface-variant);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 150ms ease, color 150ms ease;
}

.mud-container .stitch-filter-toggle:hover {
    background: var(--stitch-surface-container-high);
    color: var(--stitch-on-surface);
}

.mud-container .stitch-filter-toggle.active {
    background: var(--stitch-primary-container);
    color: var(--stitch-on-primary-container);
    border-color: var(--stitch-primary-container);
}

/* ─── Data table ─── */
.mud-container .stitch-table-wrap {
    background: var(--stitch-surface-container);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 12px;
    /* Horizontal scroll for wide tables (many-column admin lists with row actions).
       Vertical stays clipped so the rounded-corner mask is preserved. */
    overflow-x: auto;
    overflow-y: hidden;
}

/* ---------------------------------------------------------------------------
   Row-actions sticky column — opt-in via .stitch-table--actions-sticky on
   the <table>. The last <th> and last <td> in each row pin to the right edge
   so action buttons stay accessible without horizontal scrolling.

   Usage:
     <div class="stitch-table-wrap">
       <table class="stitch-table stitch-table--actions-sticky"> ... </table>
     </div>

   Implementation notes:
   • position:sticky needs separate-borders mode. We override here only on
     opted-in tables so the default collapsed-border look stays elsewhere.
   • Background is set per-cell so the scrolled content doesn't bleed under
     the sticky column. Header uses surface-container-high; body uses the
     row's own background (transparent inheritance + hover swap).
   • A subtle inset shadow on the left edge of the sticky column hints at
     the pinned-ness when the table is actually scrolled.
--------------------------------------------------------------------------- */
.mud-container .stitch-table.stitch-table--actions-sticky {
    border-collapse: separate;
    border-spacing: 0;
}

.mud-container .stitch-table.stitch-table--actions-sticky thead tr th {
    border-bottom: 1px solid var(--stitch-outline-faint);
}

.mud-container .stitch-table.stitch-table--actions-sticky tbody tr td {
    border-bottom: 1px solid var(--stitch-outline-faint);
}
.mud-container .stitch-table.stitch-table--actions-sticky tbody tr:last-child td {
    border-bottom: none;
}

.mud-container .stitch-table.stitch-table--actions-sticky thead tr th:last-child,
.mud-container .stitch-table.stitch-table--actions-sticky tbody tr td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    box-shadow: -8px 0 12px -8px rgba(0, 0, 0, 0.18);
}

.mud-container .stitch-table.stitch-table--actions-sticky thead tr th:last-child {
    background: var(--stitch-surface-container-high);
}

.mud-container .stitch-table.stitch-table--actions-sticky tbody tr td:last-child {
    background: var(--stitch-surface-container);
}

.mud-container .stitch-table.stitch-table--actions-sticky tbody tr:hover td:last-child {
    background: var(--stitch-surface-container-high);
}

/* Dark-mode shadow tweak so it reads against the deeper card surface */
.mud-theme-dark .mud-container .stitch-table.stitch-table--actions-sticky thead tr th:last-child,
.mud-theme-dark .mud-container .stitch-table.stitch-table--actions-sticky tbody tr td:last-child {
    box-shadow: -8px 0 14px -8px rgba(0, 0, 0, 0.55);
}

.mud-container .stitch-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.mud-container .stitch-table thead tr {
    background: var(--stitch-surface-container-high);
    border-bottom: 1px solid var(--stitch-outline-faint);
}

.mud-container .stitch-table th {
    padding: 16px 24px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--stitch-on-surface-variant);
}

.mud-container .stitch-table th.num { text-align: right; }

.mud-container .stitch-table tbody tr {
    border-bottom: 1px solid var(--stitch-outline-faint);
    transition: background-color 150ms ease;
    cursor: pointer;
}

.mud-container .stitch-table tbody tr:last-child { border-bottom: none; }

.mud-container .stitch-table tbody tr:hover {
    background: var(--stitch-surface-container-high);
}

.mud-container .stitch-table td {
    padding: 16px 24px;
    font-size: 13px;
    color: var(--stitch-on-surface);
    vertical-align: middle;
}

.mud-container .stitch-table td.mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--stitch-primary);
}

.mud-container .stitch-table td.muted {
    color: var(--stitch-on-surface-variant);
    font-size: 12px;
}

.mud-container .stitch-table td.date {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--stitch-on-surface-variant);
}

/* Entity column (avatar + name) */
.mud-container .stitch-entity {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.mud-container .stitch-entity-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background: var(--stitch-surface-container-highest);
    color: var(--stitch-on-surface-variant);
    flex-shrink: 0;
    font-size: 14px;
}

/* Distinguish entity kinds */
.mud-container .stitch-entity-avatar[data-kind="person"]          { background: var(--stitch-secondary-soft); color: var(--stitch-secondary); }
.mud-container .stitch-entity-avatar[data-kind="domain"]          { background: var(--stitch-primary-soft);   color: var(--stitch-primary); }
.mud-container .stitch-entity-avatar[data-kind="account_balance"] { background: var(--stitch-warning-soft);   color: var(--stitch-warning); }

.mud-container .stitch-entity-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--stitch-on-surface);
}

/* Status / severity chip */
.mud-container .stitch-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    border: 1px solid transparent;
}

.mud-container .stitch-chip[data-variant="high"],
.mud-container .stitch-chip[data-variant="critical"] {
    background: var(--stitch-error-soft);
    color: var(--stitch-error);
    border-color: var(--stitch-error);
}

.mud-container .stitch-chip[data-variant="medium"] {
    background: rgba(230, 193, 27, 0.1);
    color: #E6C11B;
    border-color: rgba(230, 193, 27, 0.4);
}

.mud-container .stitch-chip[data-variant="low"] {
    background: var(--stitch-surface-container-highest);
    color: var(--stitch-on-surface-variant);
    border-color: var(--stitch-outline-variant);
}

.mud-container .stitch-chip[data-variant="open"],
.mud-container .stitch-chip[data-variant="new"] {
    background: var(--stitch-primary-soft);
    color: var(--stitch-primary);
    border-color: var(--stitch-primary);
}

.mud-container .stitch-chip[data-variant="inreview"],
.mud-container .stitch-chip[data-variant="inprogress"] {
    background: var(--stitch-secondary-soft);
    color: var(--stitch-secondary);
    border-color: var(--stitch-secondary);
}

.mud-container .stitch-chip[data-variant="closed"],
.mud-container .stitch-chip[data-variant="resolved"] {
    background: var(--stitch-surface-container-highest);
    color: var(--stitch-on-surface-variant);
    border-color: var(--stitch-outline-variant);
}

.mud-container .stitch-chip[data-variant="promoted"] {
    background: rgba(192, 193, 255, 0.18);
    color: #C0C1FF;
    border-color: rgba(192, 193, 255, 0.55);
}

/* Light-mode adjustments so PROMOTED stays readable on white rows */
body:not(.mud-theme-dark) .mud-container .stitch-chip[data-variant="promoted"] {
    background: rgba(48, 46, 190, 0.08);
    color: #2F2EBE;
    border-color: rgba(48, 46, 190, 0.35);
}

/* Row actions — visible on row hover */
.mud-container .stitch-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.mud-container .stitch-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--stitch-on-surface-variant);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.mud-container .stitch-icon-btn:hover {
    background: var(--stitch-surface-container-highest);
    color: var(--stitch-on-surface);
}

.mud-container .stitch-icon-btn .mso { font-size: 18px; }
.mud-container .stitch-icon-btn[data-tone="primary"]:hover   { color: var(--stitch-primary); }
.mud-container .stitch-icon-btn[data-tone="secondary"]:hover { color: var(--stitch-secondary); }
.mud-container .stitch-icon-btn[data-tone="warn"]:hover      { color: var(--stitch-warning); }

/* ─── Empty state (inside table) ─── */
.mud-container .stitch-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--stitch-on-surface-variant);
}

.mud-container .stitch-empty .mso {
    font-size: 48px;
    opacity: 0.4;
    margin-bottom: 8px;
}

.mud-container .stitch-empty-title { font-size: 15px; font-weight: 600; color: var(--stitch-on-surface); margin-bottom: 4px; }
.mud-container .stitch-empty-hint  { font-size: 12px; opacity: 0.8; }

/* ─── Pagination footer ─── */
.mud-container .stitch-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--stitch-surface-container-high);
    border-top: 1px solid var(--stitch-outline-faint);
}

.mud-container .stitch-pagination-info {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--stitch-on-surface-variant);
}

.mud-container .stitch-pagination-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--stitch-on-surface);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   UNIFIED TABLE SYSTEM — MudDataGrid / MudTable / MudSimpleTable
   Override MudBlazor's default table styling so every grid in the
   system matches the hand-crafted .stitch-table aesthetic. This
   replaces the old ynx-data-grid class approach with a global
   cascade that targets the mud-table DOM structure directly.

   Design language: "executive command center" — dense, monospace
   data columns, uppercase micro-header labels, variant-chip
   status/severity cells, muted borders, no visual noise.
   ══════════════════════════════════════════════════════════════ */

/* ── Container — card-like wrap with border + radius ── */
.mud-table,
.mud-data-grid {
    background: var(--stitch-surface-container) !important;
    border: 1px solid var(--stitch-outline-faint) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

/* Remove MudBlazor's default inner borders that fight the design */
.mud-table .mud-table-container {
    border-radius: 0 !important;
}

/* ── Header row — subdued, uppercase micro-labels ── */
.mud-table-head {
    background: var(--stitch-surface-container-high) !important;
}

.mud-table-head .mud-table-cell,
.mud-table-head th {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: var(--stitch-on-surface-variant) !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--stitch-outline-faint) !important;
    white-space: nowrap;
}

/* Sort icons in header — inherit the subdued color */
.mud-table-head .mud-table-cell .mud-table-sort-label {
    color: var(--stitch-on-surface-variant) !important;
}
.mud-table-head .mud-table-cell .mud-table-sort-label .mud-icon-root {
    color: var(--stitch-on-surface-variant-soft) !important;
    font-size: 14px !important;
}

/* ── Body rows — clean, comfortable density ── */
.mud-table-body .mud-table-row {
    border-bottom: 1px solid var(--stitch-outline-faint) !important;
    transition: background-color 150ms ease !important;
    background: transparent !important;
}

.mud-table-body .mud-table-row:last-child {
    border-bottom: none !important;
}

.mud-table-body .mud-table-row:hover {
    background: var(--stitch-surface-container-high) !important;
}

/* Striped rows — very subtle, not the default MudBlazor gray stripes */
.mud-table-body .mud-table-row.mud-table-row-group-indented-1,
.mud-table-body .mud-table-row:nth-child(even) {
    background: transparent !important;
}
.mud-table.mud-table-striped .mud-table-body .mud-table-row:nth-child(odd) {
    background: rgba(0, 0, 0, 0.015) !important;
}
body.mud-theme-dark .mud-table.mud-table-striped .mud-table-body .mud-table-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.015) !important;
}

/* ── Body cells ── */
.mud-table-body .mud-table-cell,
.mud-table-body td {
    font-size: 13px !important;
    color: var(--stitch-on-surface) !important;
    padding: 14px 20px !important;
    border-bottom: none !important;
    vertical-align: middle !important;
}

/* Monospace data (IDs, refs, amounts) */
.mud-table-body .mud-table-cell span[style*="monospace"],
.mud-table-body .mud-table-cell .mono,
.mud-table-body td span[style*="monospace"] {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--stitch-primary) !important;
}

/* ── Pagination — match stitch-pagination ── */
.mud-table-pagination-toolbar,
.mud-data-grid .mud-table-pagination-toolbar {
    background: var(--stitch-surface-container-high) !important;
    border-top: 1px solid var(--stitch-outline-faint) !important;
    min-height: 44px !important;
    padding: 0 16px !important;
}

.mud-table-pagination-toolbar .mud-table-pagination-caption,
.mud-table-pagination-toolbar .mud-table-pagination-select {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
    color: var(--stitch-on-surface-variant) !important;
}

.mud-table-pagination-toolbar .mud-table-pagination-actions .mud-icon-button {
    color: var(--stitch-on-surface-variant) !important;
}
.mud-table-pagination-toolbar .mud-table-pagination-actions .mud-icon-button:hover {
    background: var(--stitch-surface-container) !important;
}

/* ── MudChip inside tables — harmonize with stitch-chip ── */
.mud-table .mud-chip {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    height: 22px !important;
    padding: 0 8px !important;
}

/* ── Action buttons inside table rows ── */
.mud-table-body .mud-table-cell .mud-icon-button {
    padding: 4px !important;
}
.mud-table-body .mud-table-cell .mud-icon-button .mud-icon-root {
    font-size: 18px !important;
}

/* ── Empty state inside data grids ── */
.mud-table-body .mud-table-row .mud-table-cell[colspan] {
    text-align: center !important;
    color: var(--stitch-on-surface-variant) !important;
    padding: 40px 20px !important;
}

/* ── Dense variant — tighter for Admin pages ── */
.mud-table.mud-table-dense .mud-table-head .mud-table-cell,
.mud-table.mud-table-dense .mud-table-head th {
    padding: 10px 16px !important;
}
.mud-table.mud-table-dense .mud-table-body .mud-table-cell,
.mud-table.mud-table-dense .mud-table-body td {
    padding: 8px 16px !important;
    font-size: 12px !important;
}

/* ── Bordered variant — suppress MudBlazor's default heavy borders ── */
.mud-table.mud-table-bordered .mud-table-cell {
    border: none !important;
}

/* ── Fixed header — ensure header stays visually connected ── */
.mud-table.mud-table-fixed-header .mud-table-head .mud-table-cell {
    background: var(--stitch-surface-container-high) !important;
    z-index: 2;
}

/* ── MudSimpleTable alignment ── */
.mud-simple-table {
    background: transparent !important;
}
.mud-simple-table table {
    border-collapse: collapse;
    width: 100%;
}
.mud-simple-table thead tr {
    background: var(--stitch-surface-container-high) !important;
}
.mud-simple-table thead th {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: var(--stitch-on-surface-variant) !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--stitch-outline-faint) !important;
}
.mud-simple-table tbody td {
    font-size: 13px !important;
    color: var(--stitch-on-surface) !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--stitch-outline-faint) !important;
}
.mud-simple-table tbody tr:last-child td {
    border-bottom: none !important;
}
.mud-simple-table.mud-table-hover tbody tr:hover {
    background: var(--stitch-surface-container-high) !important;
}

/* ── Progress bar inside table cells — thinner, on-theme ── */
.mud-table-body .mud-table-cell .mud-progress-linear {
    height: 4px !important;
    border-radius: 2px !important;
}

/* ══════════════════════════════════════════════════════════════ */

/* ── Material Symbols icon sizing helper ── */
/* Material Symbols Outlined — GLOBAL so icons render inside MudBlazor popovers
   (dropdowns are portaled outside .mud-container) and inside RTL contexts
   (Arabic mode inherits direction:rtl which disables ligature shaping unless
   we force LTR + unprefixed font-feature-settings). */
.mso {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none !important;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr !important;
    unicode-bidi: embed;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.mso.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* RTL belt-and-braces — re-force LTR + ligature shaping when Arabic mode
   applies direction:rtl / unicode-bidi on ancestors. */
[dir="rtl"] .mso,
[dir="rtl"] span.mso {
    font-family: 'Material Symbols Outlined' !important;
    direction: ltr !important;
    font-feature-settings: 'liga' 1 !important;
    unicode-bidi: isolate !important;
}

/* ══════════════════════════════════════════════════════════════
   SmartJsonView — compliance-friendly JSON rendering.
   Global (not scoped) so Components/Shared/SmartJsonView.razor works
   the same on any consuming page.
   ══════════════════════════════════════════════════════════════ */

.av-kv-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.av-raw-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 6px;
    color: var(--stitch-on-surface-variant);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.av-raw-toggle:hover {
    color: var(--stitch-primary);
    border-color: var(--stitch-primary);
    background: var(--stitch-primary-soft);
}

.av-smart {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.av-smart-group { display: flex; flex-direction: column; gap: 8px; }
.av-smart-group.root { gap: 10px; }
.av-smart-group:not(.root) {
    padding: 10px 14px;
    background: var(--stitch-surface-container);
    border-inline-start: 3px solid var(--stitch-primary-soft);
    border-start-start-radius: 0;
    border-start-end-radius: 6px;
    border-end-end-radius: 6px;
    border-end-start-radius: 0;
    margin-top: 4px;
}

.av-smart-row.scalar {
    display: grid;
    grid-template-columns: minmax(160px, 200px) 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
}
.av-smart-row.block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 0;
}

.av-smart-key {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.62;
    line-height: 1.4;
}

.av-smart-value {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--stitch-on-surface);
    word-break: break-word;
}
.av-smart-value.mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
}
.av-smart-value.muted {
    color: var(--stitch-on-surface-variant-soft);
    font-style: italic;
}

.av-smart-value.pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    width: fit-content;
}
.av-smart-value.pill.info    { background: var(--stitch-primary-soft);   color: var(--stitch-primary);   border-color: var(--stitch-primary); }
.av-smart-value.pill.accent  { background: var(--stitch-secondary-soft); color: var(--stitch-secondary); border-color: var(--stitch-secondary); }
.av-smart-value.pill.success { background: rgba(16,185,129,0.12); color: #10B981; border-color: #10B981; }
.av-smart-value.pill.warn    { background: var(--stitch-warning-soft);   color: var(--stitch-warning);   border-color: var(--stitch-warning); }
.av-smart-value.pill.danger  { background: var(--stitch-error-soft);     color: var(--stitch-error);     border-color: var(--stitch-error); }
.av-smart-value.pill.muted {
    background: var(--stitch-surface-container-high);
    color: var(--stitch-on-surface-variant-soft);
    border-color: var(--stitch-outline-faint);
}

.av-smart-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 8px;
    margin-top: 4px;
    background: var(--stitch-surface);
}
.av-smart-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12.5px; }
.av-smart-table thead tr {
    background: var(--stitch-surface-container-high);
    border-bottom: 1px solid var(--stitch-outline-faint);
}
.av-smart-table th {
    padding: 10px 14px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--stitch-on-surface-variant);
    white-space: nowrap;
}
.av-smart-table td {
    padding: 10px 14px;
    color: var(--stitch-on-surface);
    border-top: 1px solid var(--stitch-outline-faint);
}
.av-smart-table tr:first-child td { border-top: none; }
.av-smart-table td.td-inline { white-space: nowrap; }

.av-smart-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.av-smart-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 4px;
    background: var(--stitch-surface-container-high);
    color: var(--stitch-on-surface);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    border: 1px solid var(--stitch-outline-faint);
}

.av-smart-link {
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px dashed currentColor;
    transition: color 150ms ease, border-bottom-color 150ms ease;
}
.av-smart-link:hover {
    color: var(--stitch-primary);
    border-bottom-style: solid;
    border-bottom-color: var(--stitch-primary);
}
.av-smart-link.pill { border-bottom: none; }
.av-smart-link.pill:hover { filter: brightness(1.1); }

.av-details-json {
    margin: 0;
    padding: 12px 14px;
    background: var(--stitch-surface-container-high);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--stitch-on-surface);
    max-height: 420px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    width: 100%;
}
.av-details-raw { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 12px !important; }

/* ══════════════════════════════════════════════════════════════
   AmlRichHero — navy-gradient hero for entity view/edit pages.
   Intentionally keeps a dark palette in both themes (colorful island).
   Global (not scoped) so the shared component works anywhere.
   ══════════════════════════════════════════════════════════════ */

.aml-rich-hero {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 50%, #1e3a5f 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin: 4px 0 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(30, 58, 95, 0.35);
    color: #FFFFFF;
}
.aml-rich-hero::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 350px; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 100%);
    pointer-events: none;
}
.aml-rich-hero::after {
    content: '';
    position: absolute;
    bottom: -50px; left: -50px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
    pointer-events: none;
}

.aml-rich-hero-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.aml-rich-hero-left { flex: 1; min-width: 0; }

.aml-rich-hero-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
}

.aml-rich-avatar-section {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 16px;
}

.aml-rich-avatar {
    width: 72px;
    height: 72px;
    background: rgba(255,255,255,0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF !important;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.2);
}
.aml-rich-avatar .mud-icon-root { color: #FFFFFF !important; font-size: 32px; }

.aml-rich-ident { min-width: 0; }

.aml-rich-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9) !important;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.aml-rich-type-badge .mud-icon-root { color: inherit !important; }

.aml-rich-title {
    color: #FFFFFF !important;
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.aml-rich-subtitle {
    color: rgba(255,255,255,0.6) !important;
    font-size: 0.9rem;
    margin: 0;
    max-width: 500px;
}

/* Flags */
.aml-rich-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.aml-rich-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
}
.aml-rich-flag .mud-icon-root { color: inherit !important; }

.aml-rich-flag.open       { background: rgba(33, 150, 243, 0.2); color: #64B5F6 !important; }
.aml-rich-flag.inreview   { background: rgba(255, 193, 7, 0.2); color: #FFD54F !important; }
.aml-rich-flag.closed     { background: rgba(76, 175, 80, 0.2); color: #81C784 !important; }
.aml-rich-flag.promoted   { background: rgba(156, 39, 176, 0.2); color: #BA68C8 !important; }
.aml-rich-flag.high       { background: rgba(244, 67, 54, 0.2); color: #EF5350 !important; }
.aml-rich-flag.medium     { background: rgba(255, 152, 0, 0.2); color: #FFB74D !important; }
.aml-rich-flag.low        { background: rgba(76, 175, 80, 0.2); color: #81C784 !important; }
.aml-rich-flag.overdue    { background: rgba(244, 67, 54, 0.25); color: #FF8A80 !important; }

/* Metrics */
.aml-rich-metrics {
    display: flex;
    gap: 24px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.aml-rich-metric-label {
    display: block;
    color: rgba(255,255,255,0.5) !important;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.aml-rich-metric-value {
    color: #FFFFFF !important;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Workflow pill */
.aml-rich-workflow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
}
.aml-rich-workflow.open     { background: rgba(33,150,243,0.2); color: #64B5F6 !important; border: 1px solid rgba(33,150,243,0.3); }
.aml-rich-workflow.inreview { background: rgba(255,193,7,0.15); color: #FFD54F !important; border: 1px solid rgba(255,193,7,0.3); }
.aml-rich-workflow.closed   { background: rgba(76,175,80,0.15); color: #81C784 !important; border: 1px solid rgba(76,175,80,0.3); }
.aml-rich-workflow.promoted { background: rgba(156,39,176,0.15); color: #BA68C8 !important; border: 1px solid rgba(156,39,176,0.3); }
.aml-rich-workflow .mud-icon-root { color: inherit !important; }

/* Gauge */
.aml-rich-gauge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.aml-rich-gauge { width: 90px; height: 90px; position: relative; }
.aml-rich-gauge svg { width: 100%; height: 100%; }
.aml-rich-gauge-bg { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 8; }
.aml-rich-gauge-fill {
    fill: none; stroke-width: 8; stroke-linecap: round;
    transform: rotate(-90deg); transform-origin: center;
    transition: stroke-dashoffset 0.5s ease;
}
.aml-rich-gauge-text {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.aml-rich-gauge-value {
    color: #FFFFFF !important;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}
.aml-rich-gauge-label {
    color: rgba(255,255,255,0.5) !important;
    font-size: 0.6rem;
    text-transform: uppercase;
    margin-top: 2px;
}

.aml-rich-sev-badge {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #FFFFFF !important;
}
.aml-rich-sev-badge.high   { background: linear-gradient(135deg, #D32F2F 0%, #C62828 100%); }
.aml-rich-sev-badge.medium { background: linear-gradient(135deg, #F57C00 0%, #E65100 100%); }
.aml-rich-sev-badge.low    { background: linear-gradient(135deg, #388E3C 0%, #2E7D32 100%); }

/* Actions row */
.aml-rich-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.aml-rich-actions .mud-button-root,
.aml-rich-actions .mud-button-root span,
.aml-rich-actions .mud-button-label,
.aml-rich-actions .mud-icon-root {
    color: #FFFFFF !important;
}
.aml-rich-actions .mud-button-filled.mud-button-filled-primary {
    background-color: #4D8EFF !important;
    border-color: #4D8EFF !important;
    box-shadow: 0 2px 10px rgba(77,142,255,0.35) !important;
}
.aml-rich-actions .mud-button-outlined {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
}
.aml-rich-actions .mud-button-outlined:hover {
    background: rgba(255,255,255,0.12) !important;
}

/* Responsive */
@media (max-width: 960px) {
    .aml-rich-hero-content { flex-direction: column; gap: 24px; }
    .aml-rich-hero-right {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Agent Dock — Phase 1
   Persistent right-edge AI assistant. Mounted globally from
   MainLayout.razor when Ai:Agent:EnableAgent = true.
   Dock is NOT inside .mud-container — styles must be global.
   Reuses the AI gradient from §13.19 for brand consistency.
═══════════════════════════════════════════════════════════════ */

.aml-agent-dock {
    position: fixed;
    bottom: 32px;
    inset-inline-end: 32px;
    right: 32px; /* LTR fallback for non-logical-prop-aware contexts */
    z-index: 1250;
    font-family: 'Inter', system-ui, sans-serif;
    color: #131318;
}
[dir="rtl"] .aml-agent-dock {
    right: auto !important;
    left: 32px !important;
}

/* ── Rail (collapsed) ──────────────────────────────────────────────────── */

.aml-agent-dock.rail {
    width: 52px;
    height: 52px;
}
.aml-agent-rail {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #845ADF 0%, #0097B2 100%);
    color: #FFFFFF;
    box-shadow: 0 10px 30px -6px rgba(132, 90, 223, 0.45),
                0 4px 12px -2px rgba(0, 151, 178, 0.35);
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.aml-agent-rail:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px -6px rgba(132, 90, 223, 0.55),
                0 6px 14px -2px rgba(0, 151, 178, 0.45);
}
.aml-agent-rail:active {
    transform: translateY(0);
}
.aml-agent-rail-icon {
    font-size: 26px;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'opsz' 40;
    color: #FFFFFF;
}
.aml-agent-rail-pulse {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    right: 6px; /* LTR fallback */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    animation: aml-agent-pulse 2s infinite;
}
[dir="rtl"] .aml-agent-rail-pulse {
    right: auto !important;
    left: 6px !important;
}
@keyframes aml-agent-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ── Panel (expanded) ──────────────────────────────────────────────────── */

.aml-agent-dock.expanded {
    width: 400px;
    max-height: min(80vh, 680px);
}
.aml-agent-panel {
    background: #FFFFFF;
    border: 1px solid rgba(60, 65, 80, 0.12);
    border-radius: 14px;
    box-shadow: 0 22px 60px -12px rgba(16, 24, 40, 0.22),
                0 8px 20px -6px rgba(16, 24, 40, 0.12);
    display: flex;
    flex-direction: column;
    max-height: min(80vh, 680px);
    overflow: hidden;
}

/* Header */
.aml-agent-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(60, 65, 80, 0.10);
    background: linear-gradient(100deg, rgba(132,90,223,0.06) 0%, rgba(0,151,178,0.06) 100%);
}
.aml-agent-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.aml-agent-spark {
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'opsz' 40;
    background: linear-gradient(135deg, #845ADF, #0097B2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.aml-agent-title-text {
    font-size: 14px;
    font-weight: 700;
    color: #131318;
    letter-spacing: -0.01em;
}
.aml-agent-model-badge {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(132, 90, 223, 0.12);
    color: #5B38B0;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(132, 90, 223, 0.22);
}
.aml-agent-close-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #4A4F5B;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.aml-agent-close-btn:hover {
    background: rgba(60, 65, 80, 0.06);
    color: #131318;
}
.aml-agent-close-btn .mso { font-size: 18px; }

/* Messages scroll area */
.aml-agent-panel-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #FAFBFD;
}
.aml-agent-panel-messages::-webkit-scrollbar { width: 6px; }
.aml-agent-panel-messages::-webkit-scrollbar-thumb { background: rgba(60,65,80,0.2); border-radius: 3px; }

/* Empty state */
.aml-agent-empty {
    padding: 24px 12px;
    text-align: center;
    color: #4A4F5B;
}
.aml-agent-empty-icon {
    font-size: 40px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'opsz' 48;
    background: linear-gradient(135deg, #845ADF, #0097B2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    margin-bottom: 8px;
}
.aml-agent-empty-text {
    font-size: 13px;
    font-weight: 500;
    margin: 0 0 12px 0;
    color: #131318;
}
.aml-agent-empty-hints {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: #4A4F5B;
}
.aml-agent-empty-hints li {
    padding: 6px 10px;
    background: #FFFFFF;
    border: 1px solid rgba(60, 65, 80, 0.10);
    border-radius: 6px;
    text-align: start;
}

/* Bubbles */
.aml-agent-bubble {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 92%;
}
.aml-agent-bubble-user {
    align-self: flex-end;
    background: linear-gradient(135deg, #4D8EFF 0%, #0052CC 100%);
    color: #FFFFFF;
    padding: 10px 14px;
    border-radius: 14px;
    border-end-end-radius: 4px;
}
.aml-agent-bubble-user .aml-agent-bubble-text {
    font-size: 13px;
    line-height: 1.5;
}
.aml-agent-bubble-assistant {
    align-self: flex-start;
    background: #FFFFFF;
    border: 1px solid rgba(60, 65, 80, 0.10);
    padding: 10px 14px;
    border-radius: 14px;
    border-end-start-radius: 4px;
}
.aml-agent-bubble-assistant .aml-agent-bubble-text {
    font-size: 13px;
    line-height: 1.55;
    color: #131318;
}
.aml-agent-bubble-assistant .aml-agent-bubble-text strong { font-weight: 700; }
.aml-agent-bubble-assistant .aml-agent-bubble-text code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    background: rgba(132, 90, 223, 0.10);
    color: #5B38B0;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12px;
}
.aml-agent-bullet {
    display: inline-block;
    inset-inline-end: auto;
    margin-inline-end: 4px;
    color: #0097B2;
    font-weight: 700;
}

/* Tool trace (small muted line, not a bubble) */
.aml-agent-bubble-tool {
    align-self: flex-start;
    max-width: 100%;
}
.aml-agent-tool-trace {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    background: rgba(60, 65, 80, 0.05);
    border: 1px solid rgba(60, 65, 80, 0.10);
    border-radius: 999px;
    color: #4A4F5B;
}
.aml-agent-tool-trace .mso { font-size: 14px; }
.aml-agent-tool-trace[data-status="ok"] { color: #0F766E; border-color: rgba(16, 185, 129, 0.25); background: rgba(16, 185, 129, 0.08); }
.aml-agent-tool-trace[data-status="policydenied"] { color: #B45309; border-color: rgba(180, 98, 10, 0.25); background: rgba(180, 98, 10, 0.08); }
.aml-agent-tool-trace[data-status="notfound"] { color: #4A4F5B; }
.aml-agent-tool-trace[data-status="error"] { color: #BA1A1A; border-color: rgba(186, 26, 26, 0.25); background: rgba(186, 26, 26, 0.08); }
.aml-agent-tool-name { font-weight: 600; }
.aml-agent-tool-status { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.aml-agent-tool-latency { opacity: 0.7; }

/* Citations under an assistant bubble */
.aml-agent-bubble-citations {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.aml-agent-citation {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11px;
    background: rgba(0, 82, 204, 0.08);
    color: #0052CC;
    border: 1px solid rgba(0, 82, 204, 0.22);
    border-radius: 999px;
    cursor: pointer;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.aml-agent-citation:hover {
    background: rgba(0, 82, 204, 0.14);
    border-color: rgba(0, 82, 204, 0.40);
}
.aml-agent-citation .mso { font-size: 13px; }
.aml-agent-citation-kind {
    font-weight: 700;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
}
.aml-agent-citation-ref { font-weight: 600; }
.aml-agent-citation-label { opacity: 0.8; }

/* Typing indicator */
.aml-agent-typing {
    align-self: flex-start;
    display: inline-flex;
    gap: 4px;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid rgba(60, 65, 80, 0.10);
    border-radius: 14px;
    border-end-start-radius: 4px;
}
.aml-agent-typing .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4A4F5B;
    animation: aml-agent-typing-bounce 1.4s infinite ease-in-out both;
}
.aml-agent-typing .dot:nth-child(1) { animation-delay: -0.32s; }
.aml-agent-typing .dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes aml-agent-typing-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1.0); opacity: 1.0; }
}

/* Input area */
.aml-agent-panel-input {
    padding: 10px 12px;
    border-top: 1px solid rgba(60, 65, 80, 0.10);
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.aml-agent-input {
    width: 100%;
    resize: none;
    border: 1px solid rgba(60, 65, 80, 0.14);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: #131318;
    background: #FAFBFD;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.aml-agent-input::placeholder { color: #8C909F; }
.aml-agent-input:focus {
    border-color: #4D8EFF;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(77, 142, 255, 0.16);
}
.aml-agent-input:disabled { opacity: 0.6; cursor: not-allowed; }
.aml-agent-send-btn {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: linear-gradient(135deg, #845ADF 0%, #0097B2 100%);
    color: #FFFFFF !important;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(132, 90, 223, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.aml-agent-send-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 6px 16px -3px rgba(132, 90, 223, 0.45);
}
.aml-agent-send-btn:active:not(:disabled) { transform: translateY(0); }
.aml-agent-send-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.aml-agent-send-btn .mso { font-size: 16px; color: #FFFFFF; }
.aml-agent-send-btn .aml-agent-send-label { color: #FFFFFF; }

/* Footer disclosure */
.aml-agent-panel-footer {
    padding: 8px 14px 10px;
    background: #F4F5F9;
    border-top: 1px solid rgba(60, 65, 80, 0.08);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #4A4F5B;
}
.aml-agent-panel-footer .mso { font-size: 13px; color: #0097B2; }

/* ── Dark mode overrides (all four selectors per §4) ──────────────────── */

.mud-theme-dark .aml-agent-panel,
body.mud-theme-dark .aml-agent-panel,
html.mud-theme-dark .aml-agent-panel,
.aml-agent-dock[data-theme="dark"] .aml-agent-panel {
    background: #1B1B20;
    border-color: rgba(140, 144, 159, 0.22);
    box-shadow: 0 22px 60px -12px rgba(0, 0, 0, 0.55),
                0 8px 20px -6px rgba(0, 0, 0, 0.35);
}
.mud-theme-dark .aml-agent-panel-header,
body.mud-theme-dark .aml-agent-panel-header,
html.mud-theme-dark .aml-agent-panel-header,
.aml-agent-dock[data-theme="dark"] .aml-agent-panel-header {
    background: linear-gradient(100deg, rgba(132,90,223,0.14) 0%, rgba(0,151,178,0.14) 100%);
    border-color: rgba(140, 144, 159, 0.18);
}
.mud-theme-dark .aml-agent-title-text,
body.mud-theme-dark .aml-agent-title-text,
html.mud-theme-dark .aml-agent-title-text,
.aml-agent-dock[data-theme="dark"] .aml-agent-title-text {
    color: #E4E1E9;
}
.mud-theme-dark .aml-agent-model-badge,
body.mud-theme-dark .aml-agent-model-badge,
html.mud-theme-dark .aml-agent-model-badge,
.aml-agent-dock[data-theme="dark"] .aml-agent-model-badge {
    background: rgba(132, 90, 223, 0.18);
    color: #D6C5FB;
    border-color: rgba(132, 90, 223, 0.35);
}
.mud-theme-dark .aml-agent-close-btn,
body.mud-theme-dark .aml-agent-close-btn,
html.mud-theme-dark .aml-agent-close-btn,
.aml-agent-dock[data-theme="dark"] .aml-agent-close-btn {
    color: #C2C6D6;
}
.mud-theme-dark .aml-agent-close-btn:hover,
body.mud-theme-dark .aml-agent-close-btn:hover,
html.mud-theme-dark .aml-agent-close-btn:hover,
.aml-agent-dock[data-theme="dark"] .aml-agent-close-btn:hover {
    color: #E4E1E9;
    background: rgba(140, 144, 159, 0.12);
}
.mud-theme-dark .aml-agent-panel-messages,
body.mud-theme-dark .aml-agent-panel-messages,
html.mud-theme-dark .aml-agent-panel-messages,
.aml-agent-dock[data-theme="dark"] .aml-agent-panel-messages {
    background: #131318;
}
.mud-theme-dark .aml-agent-empty-text,
body.mud-theme-dark .aml-agent-empty-text,
html.mud-theme-dark .aml-agent-empty-text,
.aml-agent-dock[data-theme="dark"] .aml-agent-empty-text {
    color: #E4E1E9;
}
.mud-theme-dark .aml-agent-empty-hints li,
body.mud-theme-dark .aml-agent-empty-hints li,
html.mud-theme-dark .aml-agent-empty-hints li,
.aml-agent-dock[data-theme="dark"] .aml-agent-empty-hints li {
    background: #1F1F25;
    border-color: rgba(140, 144, 159, 0.18);
    color: #C2C6D6;
}
.mud-theme-dark .aml-agent-bubble-assistant,
body.mud-theme-dark .aml-agent-bubble-assistant,
html.mud-theme-dark .aml-agent-bubble-assistant,
.aml-agent-dock[data-theme="dark"] .aml-agent-bubble-assistant {
    background: #1F1F25;
    border-color: rgba(140, 144, 159, 0.18);
}
.mud-theme-dark .aml-agent-bubble-assistant .aml-agent-bubble-text,
body.mud-theme-dark .aml-agent-bubble-assistant .aml-agent-bubble-text,
html.mud-theme-dark .aml-agent-bubble-assistant .aml-agent-bubble-text,
.aml-agent-dock[data-theme="dark"] .aml-agent-bubble-assistant .aml-agent-bubble-text {
    color: #E4E1E9;
}
.mud-theme-dark .aml-agent-bubble-assistant code,
body.mud-theme-dark .aml-agent-bubble-assistant code,
html.mud-theme-dark .aml-agent-bubble-assistant code,
.aml-agent-dock[data-theme="dark"] .aml-agent-bubble-assistant code {
    background: rgba(132, 90, 223, 0.20);
    color: #D6C5FB;
}
.mud-theme-dark .aml-agent-tool-trace,
body.mud-theme-dark .aml-agent-tool-trace,
html.mud-theme-dark .aml-agent-tool-trace,
.aml-agent-dock[data-theme="dark"] .aml-agent-tool-trace {
    background: rgba(140, 144, 159, 0.08);
    border-color: rgba(140, 144, 159, 0.18);
    color: #C2C6D6;
}
.mud-theme-dark .aml-agent-citation,
body.mud-theme-dark .aml-agent-citation,
html.mud-theme-dark .aml-agent-citation,
.aml-agent-dock[data-theme="dark"] .aml-agent-citation {
    background: rgba(173, 198, 255, 0.14);
    color: #ADC6FF;
    border-color: rgba(173, 198, 255, 0.35);
}
.mud-theme-dark .aml-agent-citation:hover,
body.mud-theme-dark .aml-agent-citation:hover,
html.mud-theme-dark .aml-agent-citation:hover,
.aml-agent-dock[data-theme="dark"] .aml-agent-citation:hover {
    background: rgba(173, 198, 255, 0.22);
    border-color: rgba(173, 198, 255, 0.60);
}
.mud-theme-dark .aml-agent-typing,
body.mud-theme-dark .aml-agent-typing,
html.mud-theme-dark .aml-agent-typing,
.aml-agent-dock[data-theme="dark"] .aml-agent-typing {
    background: #1F1F25;
    border-color: rgba(140, 144, 159, 0.18);
}
.mud-theme-dark .aml-agent-typing .dot,
body.mud-theme-dark .aml-agent-typing .dot,
html.mud-theme-dark .aml-agent-typing .dot,
.aml-agent-dock[data-theme="dark"] .aml-agent-typing .dot {
    background: #C2C6D6;
}
.mud-theme-dark .aml-agent-panel-input,
body.mud-theme-dark .aml-agent-panel-input,
html.mud-theme-dark .aml-agent-panel-input,
.aml-agent-dock[data-theme="dark"] .aml-agent-panel-input {
    background: #1B1B20;
    border-color: rgba(140, 144, 159, 0.18);
}
.mud-theme-dark .aml-agent-input,
body.mud-theme-dark .aml-agent-input,
html.mud-theme-dark .aml-agent-input,
.aml-agent-dock[data-theme="dark"] .aml-agent-input {
    background: #131318;
    border-color: rgba(140, 144, 159, 0.25);
    color: #E4E1E9;
}
.mud-theme-dark .aml-agent-input:focus,
body.mud-theme-dark .aml-agent-input:focus,
html.mud-theme-dark .aml-agent-input:focus,
.aml-agent-dock[data-theme="dark"] .aml-agent-input:focus {
    background: #1B1B20;
    border-color: #4D8EFF;
    box-shadow: 0 0 0 3px rgba(77, 142, 255, 0.22);
}
.mud-theme-dark .aml-agent-panel-footer,
body.mud-theme-dark .aml-agent-panel-footer,
html.mud-theme-dark .aml-agent-panel-footer,
.aml-agent-dock[data-theme="dark"] .aml-agent-panel-footer {
    background: #131318;
    border-color: rgba(140, 144, 159, 0.14);
    color: #C2C6D6;
}

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

@media (max-width: 640px) {
    .aml-agent-dock {
        bottom: 16px;
        inset-inline-end: 16px;
        right: 16px;
    }
    [dir="rtl"] .aml-agent-dock {
        right: auto !important;
        left: 16px !important;
    }
    .aml-agent-dock.expanded {
        width: calc(100vw - 32px);
        max-height: 70vh;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   FORM UTILITIES (v39) — bits used by Create/Edit forms renovated to stitch
   ClientCreate, TransactionCreate, CaseEdit, and friends use these.
   ═══════════════════════════════════════════════════════════════════════ */

/* Description line under the toolbar h2 */
.mud-container .stitch-toolbar-desc {
    margin: 6px 0 0;
    color: var(--stitch-on-surface-muted);
    font-size: 13px;
    line-height: 1.55;
}

/* Wider direction HUD — 5 cards instead of 3 */
.mud-container .stitch-direction-hud {
    grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 900px) {
    .mud-container .stitch-direction-hud {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 600px) {
    .mud-container .stitch-direction-hud {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* In-grid section divider — slim horizontal rule with icon + label */
.mud-container .stitch-section-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 8px;
    color: var(--stitch-on-surface-muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--stitch-outline-faint);
    margin-top: 4px;
}
.mud-container .stitch-section-divider .mso {
    font-size: 16px;
    color: var(--stitch-primary);
}

/* Toggle row — checkbox + title + hint */
.mud-container .stitch-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--stitch-surface-container);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}
.mud-container .stitch-toggle-row:hover {
    border-color: var(--stitch-outline);
}
.mud-container .stitch-toggle-row > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.mud-container .stitch-toggle-track {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 20px;
    background: var(--stitch-outline-faint);
    border-radius: 12px;
    transition: background-color 150ms ease;
    margin-top: 2px;
}
.mud-container .stitch-toggle-dot {
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 16px;
    height: 16px;
    background: var(--stitch-on-surface);
    border-radius: 50%;
    transition: transform 150ms ease, inset-inline-start 150ms ease;
}
.mud-container .stitch-toggle-row > input[type="checkbox"]:checked ~ .stitch-toggle-track {
    background: var(--stitch-primary);
}
.mud-container .stitch-toggle-row > input[type="checkbox"]:checked ~ .stitch-toggle-track .stitch-toggle-dot {
    transform: translateX(16px);
    background: #fff;
}
[dir="rtl"] .mud-container .stitch-toggle-row > input[type="checkbox"]:checked ~ .stitch-toggle-track .stitch-toggle-dot {
    transform: translateX(-16px);
}
.mud-container .stitch-toggle-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mud-container .stitch-toggle-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--stitch-on-surface);
}
.mud-container .stitch-toggle-hint {
    font-size: 11.5px;
    color: var(--stitch-on-surface-muted);
    line-height: 1.4;
}

/* Form meta bar — below grid, above actions. FORM STATUS, TYPE, SESSION */
.mud-container .stitch-form-meta {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 14px 0 10px;
    margin-top: 14px;
    border-top: 1px dashed var(--stitch-outline-faint);
    flex-wrap: wrap;
}
.mud-container .stitch-form-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mud-container .stitch-form-meta-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stitch-on-surface-muted);
}
.mud-container .stitch-form-meta-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--stitch-on-surface);
}
.mud-container .stitch-form-meta-value.mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--stitch-primary);
}
.mud-container .stitch-form-meta-value.ok {
    color: var(--stitch-success);
}
.mud-container .stitch-form-meta-value.warn {
    color: var(--stitch-warning);
}

/* Form actions (Cancel + Submit buttons) */
.mud-container .stitch-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--stitch-outline-faint);
    margin-top: 14px;
}

/* Summary panel pill used in aside — single-line badges */
.mud-container .stitch-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    border: 1px solid transparent;
}
.mud-container .stitch-pill .mso {
    font-size: 13px;
}
.mud-container .stitch-pill[data-kind="ok"] {
    background: var(--stitch-success-soft);
    color: var(--stitch-success);
    border-color: color-mix(in oklab, var(--stitch-success) 30%, transparent);
}
.mud-container .stitch-pill[data-kind="warn"] {
    background: var(--stitch-warning-soft);
    color: var(--stitch-warning);
    border-color: color-mix(in oklab, var(--stitch-warning) 30%, transparent);
}
.mud-container .stitch-pill[data-kind="info"],
.mud-container .stitch-pill[data-kind="accent"] {
    background: var(--stitch-primary-soft);
    color: var(--stitch-primary);
    border-color: color-mix(in oklab, var(--stitch-primary) 30%, transparent);
}
.mud-container .stitch-pill[data-kind="muted"] {
    background: var(--stitch-surface-container-high);
    color: var(--stitch-on-surface-muted);
    border-color: var(--stitch-outline-faint);
}

/* Muted helper text — used throughout Summary asides for "Unset" */
.mud-container .stitch-muted {
    color: var(--stitch-on-surface-muted);
    font-style: italic;
    font-size: 12px;
}

/* Key/value grid — shared by summary asides and Details bodies.
   Originally lived in AlertView.razor.css behind ::deep; promoted to global
   so ClientDetails, TransactionDetails, CaseView, ClientCreate, TransactionCreate
   can share the same visual contract. */
.mud-container .av-kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 24px;
}
.mud-container .av-kv-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.mud-container .av-kv-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.55;
    color: var(--stitch-on-surface);
}
.mud-container .av-kv-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--stitch-on-surface);
    word-break: break-word;
}
.mud-container .av-kv-value.mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
}
.mud-container .av-kv-value.muted {
    font-weight: 500;
    opacity: 0.55;
    font-style: italic;
}

/* ─── cd-* legacy body classes (ClientDetails) — promoted from inline <style>.
       Kept as a thin body compatibility layer so the existing markup keeps
       working while we migrate card-by-card to stitch-card + av-kv-grid. ─── */
.mud-container .cd-info-card {
    background: var(--stitch-surface-container);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 10px;
    padding: 22px;
    height: 100%;
    transition: border-color 150ms ease, background 150ms ease;
}
.mud-container .cd-info-card:hover {
    border-color: var(--stitch-outline);
}
.mud-container .cd-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--stitch-outline-faint);
}
.mud-container .cd-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--stitch-primary);
}
.mud-container .cd-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--stitch-on-surface);
    margin: 0;
}
.mud-container .cd-field-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--stitch-on-surface-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 4px;
    font-weight: 600;
}
.mud-container .cd-field-value {
    font-size: 13.5px;
    color: var(--stitch-on-surface);
    font-weight: 600;
    word-break: break-word;
}
.mud-container .cd-field-value.mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
}

.mud-container .cd-history-section {
    background: var(--stitch-surface-container);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 18px;
}
.mud-container .cd-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--stitch-surface-container-high);
    border-bottom: 1px solid var(--stitch-outline-faint);
}
.mud-container .cd-history-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--stitch-on-surface);
    margin: 0;
}
.mud-container .cd-history-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stitch-primary);
    color: #fff;
    border-radius: 8px;
}
.mud-container .cd-loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px;
    gap: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════
   DATA MANAGEMENT (v40) — Admin/DataManagement.razor classes promoted
   from the inline <style> block. All colors reference --stitch-* vars so
   the page lights up correctly in both light and dark themes.
   ═══════════════════════════════════════════════════════════════════════ */

/* Status pill in the toolbar */
.mud-container .dm-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    border: 1px solid;
}
.mud-container .dm-status-empty {
    background: var(--stitch-surface-container-high);
    color: var(--stitch-on-surface-muted);
    border-color: var(--stitch-outline-faint);
}
.mud-container .dm-status-partial {
    background: var(--stitch-warning-soft);
    color: var(--stitch-warning);
    border-color: color-mix(in oklab, var(--stitch-warning) 30%, transparent);
}
.mud-container .dm-status-ready {
    background: var(--stitch-success-soft);
    color: var(--stitch-success);
    border-color: color-mix(in oklab, var(--stitch-success) 30%, transparent);
}

/* ══════════════════════════════════════════════════════════════
   UNIFIED MUDTABS OVERRIDE — tames MudBlazor's default bright
   Primary/Info blue on the active-tab indicator + slider bar
   across the whole product so MudTabs anywhere inside .mud-container
   renders with stitch tokens regardless of the `Color` prop.

   NOTE: ::deep is a Blazor scoped-CSS-only pseudo — it does nothing
   in a global stylesheet. The rules below target MudBlazor's DOM
   classes directly (no ::deep needed).
   ══════════════════════════════════════════════════════════════ */

/* Tabbar (the strip holding the tab buttons) */
.mud-container .mud-tabs .mud-tabs-tabbar,
.mud-container .mud-tabs .mud-tabs-tabbar-wrapper,
.mud-container .mud-tabs .mud-tabs-toolbar,
.mud-container .mud-tabs .mud-tabs-toolbar-content {
    background: var(--stitch-surface-container) !important;
    border-bottom: 1px solid var(--stitch-outline-faint) !important;
    border-radius: 8px 8px 0 0;
    color: var(--stitch-on-surface) !important;
    box-shadow: none !important;
}

/* Individual tab buttons — quiet default, stitch accent on active */
.mud-container .mud-tabs .mud-tab {
    color: var(--stitch-on-surface-variant) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    transition: color 150ms ease, background-color 150ms ease;
}

.mud-container .mud-tabs .mud-tab:hover {
    color: var(--stitch-on-surface) !important;
    background: var(--stitch-surface-container-high) !important;
}

.mud-container .mud-tabs .mud-tab.mud-tab-active,
.mud-container .mud-tabs .mud-tab-active {
    color: var(--stitch-primary) !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* The bright-blue slider bar — retint to stitch-primary */
.mud-container .mud-tabs .mud-tab-slider,
.mud-container .mud-tabs .mud-tab-slider-horizontal,
.mud-container .mud-tabs .mud-tab-slider-vertical {
    background: var(--stitch-primary) !important;
    box-shadow: 0 0 6px color-mix(in oklab, var(--stitch-primary) 40%, transparent);
}

/* MudTabPanel content area — consistent padding + transparent bg */
.mud-container .mud-tabs .mud-tabs-panels,
.mud-container .mud-tabs .mud-tab-panel {
    background: transparent !important;
}

/* Legacy .dm-tabs / .dm-panel helpers kept for pages that reference them */
.mud-container .dm-tabs {
    /* alias — rules above handle styling */
}
.mud-container .dm-panel {
    padding: 20px 4px;
}

/* KPI grid (Overview tab) */
.mud-container .dm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.mud-container .dm-kpi {
    background: var(--stitch-surface-container);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 6px;
    padding: 14px 16px;
    transition: border-color 150ms ease, transform 150ms ease;
}
.mud-container .dm-kpi:hover {
    border-color: var(--stitch-primary);
    transform: translateY(-1px);
}
.mud-container .dm-kpi .lbl {
    color: var(--stitch-on-surface-muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mud-container .dm-kpi .val {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 26px;
    font-weight: 700;
    color: var(--stitch-on-surface);
    margin-top: 6px;
    line-height: 1;
}
.mud-container .dm-kpi .val.zero {
    color: var(--stitch-on-surface-muted);
    opacity: 0.5;
}

/* Section header above a card grid */
.mud-container .dm-section-hdr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 8px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--stitch-outline-faint);
}
.mud-container .dm-section-hdr h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--stitch-on-surface);
    margin: 0;
}
.mud-container .dm-section-hdr .hint {
    color: var(--stitch-on-surface-muted);
    font-size: 12px;
}

/* Master-action row below the KPI grid on Overview */
.mud-container .dm-master-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px;
    background: var(--stitch-surface-container);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 6px;
    margin-bottom: 16px;
}

/* Action-card grid + card */
.mud-container .dm-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.mud-container .dm-card {
    background: var(--stitch-surface-container);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 6px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    transition: border-color 150ms ease, transform 150ms ease;
}
.mud-container .dm-card:hover {
    border-color: var(--stitch-primary);
    transform: translateY(-1px);
}
.mud-container .dm-card.danger {
    border-color: color-mix(in oklab, var(--stitch-error) 25%, transparent);
}
.mud-container .dm-card.danger:hover {
    border-color: var(--stitch-error);
}
.mud-container .dm-card.cyan-accent {
    border-color: color-mix(in oklab, var(--stitch-primary) 35%, transparent);
}
.mud-container .dm-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mud-container .dm-card-step {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--stitch-primary);
    background: var(--stitch-primary-soft);
    border: 1px solid color-mix(in oklab, var(--stitch-primary) 30%, transparent);
    border-radius: 4px;
    padding: 2px 6px;
    min-width: 28px;
    text-align: center;
}
.mud-container .dm-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mud-container .dm-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--stitch-on-surface);
    margin: 0;
    flex: 1;
}
.mud-container .dm-card-count {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--stitch-success);
    background: var(--stitch-success-soft);
    padding: 2px 8px;
    border-radius: 4px;
}
.mud-container .dm-card-count.zero {
    color: var(--stitch-on-surface-muted);
    background: var(--stitch-surface-container-high);
}
.mud-container .dm-card-desc {
    font-size: 12.5px;
    color: var(--stitch-on-surface);
    opacity: 0.85;
    line-height: 1.55;
}
.mud-container .dm-card-bullets {
    font-size: 11.5px;
    color: var(--stitch-on-surface-muted);
    line-height: 1.7;
    padding-inline-start: 2px;
}
.mud-container .dm-card-bullets div::before {
    content: "•";
    color: var(--stitch-primary);
    margin-inline-end: 6px;
}
.mud-container .dm-card-warn {
    font-size: 11.5px;
    color: var(--stitch-warning);
    padding: 6px 8px;
    background: var(--stitch-warning-soft);
    border-inline-start: 2px solid var(--stitch-warning);
    border-radius: 2px;
}
.mud-container .dm-card-ok {
    font-size: 11.5px;
    color: var(--stitch-success);
    padding: 6px 8px;
    background: var(--stitch-success-soft);
    border-inline-start: 2px solid var(--stitch-success);
    border-radius: 2px;
}
.mud-container .dm-card-actions {
    margin-top: auto;
    padding-top: 8px;
}

/* Result card (seed / migration output summary) */
.mud-container .dm-result {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 6px;
    border: 1px solid;
    background: var(--stitch-surface-container);
}
.mud-container .dm-result.ok {
    border-color: color-mix(in oklab, var(--stitch-success) 30%, transparent);
}
.mud-container .dm-result.err {
    border-color: color-mix(in oklab, var(--stitch-error) 30%, transparent);
}
.mud-container .dm-result-title {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
}
.mud-container .dm-result-title.ok {
    color: var(--stitch-success);
}
.mud-container .dm-result-title.err {
    color: var(--stitch-error);
}
.mud-container .dm-result-list {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--stitch-on-surface);
    opacity: 0.85;
    line-height: 1.7;
    padding-inline-start: 4px;
}

/* ══════════════════════════════════════════════════════════════
   GENERIC SECTION CARD — titled card wrapper for report pages,
   form sections, and anywhere you need a labeled content block.
   Pairs cleanly with the stitch-toolbar / stitch-bento page
   pattern.
   ══════════════════════════════════════════════════════════════ */

.mud-container .stitch-section {
    background: var(--stitch-surface-container-low);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 12px;
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
}

.mud-container .stitch-section::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--stitch-primary) 50%,
        transparent 100%
    );
    opacity: 0.25;
}

.mud-container .stitch-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--stitch-outline-faint);
    background: var(--stitch-surface-container);
    flex-wrap: wrap;
}

.mud-container .stitch-section-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--stitch-on-surface);
    letter-spacing: -0.01em;
}

.mud-container .stitch-section-title .mso {
    font-size: 18px;
    color: var(--stitch-primary);
}

.mud-container .stitch-section-sub {
    font-size: 11px;
    font-weight: 500;
    color: var(--stitch-on-surface-variant);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mud-container .stitch-section-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mud-container .stitch-section-body {
    padding: 20px;
}

.mud-container .stitch-section-body.flush {
    padding: 0;
}

.mud-container .stitch-section-body.compact {
    padding: 12px 20px;
}

.mud-container .stitch-section-grid {
    display: grid;
    gap: 20px;
}

.mud-container .stitch-section-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mud-container .stitch-section-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .mud-container .stitch-section-grid.cols-2,
    .mud-container .stitch-section-grid.cols-3 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   STITCH TABS — segmented tab row used on screening pages and
   anywhere we need Search / History / Batches style tabs. Matches
   the filter pill aesthetic.
   ══════════════════════════════════════════════════════════════ */

.mud-container .stitch-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--stitch-surface-container-high);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.mud-container .stitch-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--stitch-on-surface-variant);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease;
    letter-spacing: 0.01em;
}

.mud-container .stitch-tab .mso { font-size: 15px; }

.mud-container .stitch-tab:hover {
    color: var(--stitch-on-surface);
    background: var(--stitch-surface-container);
}

.mud-container .stitch-tab.active {
    background: var(--stitch-surface);
    color: var(--stitch-primary);
    box-shadow: 0 1px 2px rgba(19, 19, 24, 0.06);
}

body.mud-theme-dark .mud-container .stitch-tab.active {
    background: var(--stitch-surface-container-low);
    color: var(--stitch-primary-container);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ══════════════════════════════════════════════════════════════
   STITCH FORM GRID — responsive grid for labeled form fields
   (used on screening, bulk upload, and other parameter pages).
   ══════════════════════════════════════════════════════════════ */

.mud-container .stitch-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.mud-container .stitch-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.mud-container .stitch-form-row.span-2 { grid-column: span 2; }
.mud-container .stitch-form-row.span-full { grid-column: 1 / -1; }

@media (max-width: 700px) {
    .mud-container .stitch-form-row.span-2,
    .mud-container .stitch-form-row.span-full { grid-column: 1 / -1; }
}

.mud-container .stitch-form-row .stitch-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--stitch-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.mud-container .stitch-form-row .stitch-help {
    font-size: 11px;
    color: var(--stitch-on-surface-variant);
    opacity: 0.85;
}

/* ══════════════════════════════════════════════════════════════
   STITCH DROPZONE — file upload area matching the Stitch palette.
   ══════════════════════════════════════════════════════════════ */

.mud-container .stitch-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 24px;
    background: var(--stitch-surface-container);
    border: 1.5px dashed var(--stitch-outline-variant);
    border-radius: 12px;
    color: var(--stitch-on-surface-variant);
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
    cursor: pointer;
    min-height: 160px;
}

.mud-container .stitch-dropzone:hover {
    border-color: var(--stitch-primary);
    background: var(--stitch-surface-container-high);
    color: var(--stitch-on-surface);
}

.mud-container .stitch-dropzone.filled {
    border-style: solid;
    border-color: var(--stitch-success);
    background: var(--stitch-success-soft);
    color: var(--stitch-success);
}

.mud-container .stitch-dropzone .stitch-dropzone-icon {
    font-size: 36px;
    color: var(--stitch-primary);
    opacity: 0.8;
}

.mud-container .stitch-dropzone.filled .stitch-dropzone-icon {
    color: var(--stitch-success);
    opacity: 1;
}

.mud-container .stitch-dropzone-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--stitch-on-surface);
}

.mud-container .stitch-dropzone-hint {
    font-size: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--stitch-on-surface-variant);
    letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════
   STITCH INLINE ALERT — info / warning / success notice strip
   to replace MudAlert inside stitch pages.
   ══════════════════════════════════════════════════════════════ */

.mud-container .stitch-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid;
    font-size: 13px;
    line-height: 1.55;
    color: var(--stitch-on-surface);
    margin-bottom: 12px;
}

.mud-container .stitch-notice .mso {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.mud-container .stitch-notice-body { flex: 1; min-width: 0; }
.mud-container .stitch-notice-body strong { font-weight: 700; }
.mud-container .stitch-notice-body ul { margin: 4px 0 0; padding-inline-start: 18px; }
.mud-container .stitch-notice-body ul li { font-size: 12.5px; opacity: 0.9; line-height: 1.65; }

.mud-container .stitch-notice[data-tone="info"] {
    background: var(--stitch-primary-soft);
    border-color: color-mix(in oklab, var(--stitch-primary) 35%, transparent);
}
.mud-container .stitch-notice[data-tone="info"] .mso { color: var(--stitch-primary); }

.mud-container .stitch-notice[data-tone="success"] {
    background: var(--stitch-success-soft);
    border-color: color-mix(in oklab, var(--stitch-success) 35%, transparent);
}
.mud-container .stitch-notice[data-tone="success"] .mso { color: var(--stitch-success); }

.mud-container .stitch-notice[data-tone="warning"] {
    background: var(--stitch-warning-soft);
    border-color: color-mix(in oklab, var(--stitch-warning) 35%, transparent);
}
.mud-container .stitch-notice[data-tone="warning"] .mso { color: var(--stitch-warning); }

.mud-container .stitch-notice[data-tone="error"] {
    background: var(--stitch-error-soft);
    border-color: color-mix(in oklab, var(--stitch-error) 35%, transparent);
}
.mud-container .stitch-notice[data-tone="error"] .mso { color: var(--stitch-error); }

/* ══════════════════════════════════════════════════════════════
   STITCH METRIC TILE — small labeled metric used inside report
   sections (label + big mono value + optional caption).
   ══════════════════════════════════════════════════════════════ */

.mud-container .stitch-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.mud-container .stitch-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--stitch-surface-container);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 10px;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

.mud-container .stitch-metric[data-tone]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 3px;
}

.mud-container .stitch-metric[data-tone="primary"]::before { background: var(--stitch-primary); }
.mud-container .stitch-metric[data-tone="success"]::before { background: var(--stitch-success); }
.mud-container .stitch-metric[data-tone="warning"]::before { background: var(--stitch-warning); }
.mud-container .stitch-metric[data-tone="error"]::before   { background: var(--stitch-error); }
.mud-container .stitch-metric[data-tone="info"]::before    { background: var(--stitch-secondary); }

.mud-container .stitch-metric-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--stitch-on-surface-variant);
}

.mud-container .stitch-metric-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 22px;
    font-weight: 700;
    color: var(--stitch-on-surface);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.mud-container .stitch-metric[data-tone="success"] .stitch-metric-value { color: var(--stitch-success); }
.mud-container .stitch-metric[data-tone="warning"] .stitch-metric-value { color: var(--stitch-warning); }
.mud-container .stitch-metric[data-tone="error"]   .stitch-metric-value { color: var(--stitch-error); }
.mud-container .stitch-metric[data-tone="info"]    .stitch-metric-value { color: var(--stitch-secondary); }

.mud-container .stitch-metric-caption {
    font-size: 11px;
    font-weight: 500;
    color: var(--stitch-on-surface-variant);
    letter-spacing: 0.02em;
}

.mud-container .stitch-metric-caption.accent  { color: var(--stitch-primary); }
.mud-container .stitch-metric-caption.success { color: var(--stitch-success); }
.mud-container .stitch-metric-caption.warning { color: var(--stitch-warning); }
.mud-container .stitch-metric-caption.danger  { color: var(--stitch-error); }

/* ══════════════════════════════════════════════════════════════
   STITCH NOTIFICATION LIST — used on /notifications and anywhere
   an inbox-style feed makes sense.
   ══════════════════════════════════════════════════════════════ */

.mud-container .stitch-notif-list {
    display: flex;
    flex-direction: column;
    background: var(--stitch-surface-container-low);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 12px;
    overflow: hidden;
}

.mud-container .stitch-notif-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 18px;
    border: none;
    background: transparent;
    text-align: start;
    cursor: pointer;
    border-bottom: 1px solid var(--stitch-outline-faint);
    transition: background-color 150ms ease;
    color: var(--stitch-on-surface);
    font-family: inherit;
    width: 100%;
}

.mud-container .stitch-notif-item:last-child { border-bottom: none; }

.mud-container .stitch-notif-item:hover {
    background: var(--stitch-surface-container);
}

.mud-container .stitch-notif-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 7px;
    background: var(--stitch-outline);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--stitch-outline) 20%, transparent);
}

.mud-container .stitch-notif-item[data-priority="critical"] .stitch-notif-dot {
    background: var(--stitch-error);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--stitch-error) 20%, transparent);
    animation: stitchNotifPulse 2s infinite;
}

.mud-container .stitch-notif-item[data-priority="high"] .stitch-notif-dot {
    background: var(--stitch-warning);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--stitch-warning) 20%, transparent);
}

.mud-container .stitch-notif-item[data-priority="medium"] .stitch-notif-dot {
    background: var(--stitch-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--stitch-primary) 20%, transparent);
}

.mud-container .stitch-notif-item[data-priority="low"] .stitch-notif-dot {
    background: var(--stitch-success);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--stitch-success) 20%, transparent);
}

.mud-container .stitch-notif-item[data-read="true"] .stitch-notif-dot {
    background: var(--stitch-outline) !important;
    box-shadow: none !important;
    animation: none !important;
    opacity: 0.5;
}

@keyframes stitchNotifPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.mud-container .stitch-notif-body { min-width: 0; }

.mud-container .stitch-notif-subject {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--stitch-on-surface);
    line-height: 1.3;
}

.mud-container .stitch-notif-item[data-read="true"] .stitch-notif-subject {
    font-weight: 500;
    color: var(--stitch-on-surface-variant);
}

.mud-container .stitch-notif-text {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--stitch-on-surface-variant);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mud-container .stitch-notif-meta {
    margin-top: 8px;
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mud-container .stitch-notif-age {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    color: var(--stitch-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    padding-top: 4px;
}

/* ══════════════════════════════════════════════════════════════
   STITCH HEADER CHIP — soft pill used in toolbar-actions to show
   a compact counter (e.g. "Unread: 3") without stealing focus
   from the action buttons next to it.
   ══════════════════════════════════════════════════════════════ */

.mud-container .stitch-toolbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--stitch-primary-soft);
    color: var(--stitch-primary);
    border: 1px solid color-mix(in oklab, var(--stitch-primary) 30%, transparent);
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.mud-container .stitch-toolbar-chip strong {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    margin-inline-start: 2px;
}

/* ══════════════════════════════════════════════════════════════
   STITCH INPUT / SELECT / NUMERIC — native form controls styled
   to match the stitch-filter-select aesthetic for pages that use
   plain <input>/<select> instead of MudBlazor components.
   ══════════════════════════════════════════════════════════════ */

.mud-container .stitch-input,
.mud-container .stitch-select,
.mud-container .stitch-textarea {
    width: 100%;
    display: block;
    padding: 9px 12px;
    background: var(--stitch-surface);
    border: 1px solid var(--stitch-outline-variant);
    border-radius: 8px;
    color: var(--stitch-on-surface);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
}

.mud-container .stitch-textarea {
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
}

.mud-container .stitch-input:focus,
.mud-container .stitch-select:focus,
.mud-container .stitch-textarea:focus {
    outline: none;
    border-color: var(--stitch-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--stitch-primary) 18%, transparent);
}

.mud-container .stitch-input::placeholder,
.mud-container .stitch-textarea::placeholder {
    color: var(--stitch-on-surface-variant);
    opacity: 0.6;
}

body.mud-theme-dark .mud-container .stitch-input,
body.mud-theme-dark .mud-container .stitch-select,
body.mud-theme-dark .mud-container .stitch-textarea {
    background: var(--stitch-surface-container);
    border-color: var(--stitch-outline-variant);
    color: #E4E1E9;
}

/* ══════════════════════════════════════════════════════════════
   STITCH REPORT — side-by-side row layout for chart + details
   table and helper wrappers used on report pages.
   ══════════════════════════════════════════════════════════════ */

.mud-container .stitch-chart-wrap {
    position: relative;
    width: 100%;
    padding: 8px 4px;
    min-height: 280px;
}

.mud-container .stitch-chart-wrap .mud-chart {
    color: var(--stitch-on-surface) !important;
}

.mud-container .stitch-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.mud-container .stitch-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--stitch-on-surface-variant);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mud-container .stitch-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--stitch-primary);
}

.mud-container .stitch-legend-swatch[data-tone="success"] { background: var(--stitch-success); }
.mud-container .stitch-legend-swatch[data-tone="warning"] { background: var(--stitch-warning); }
.mud-container .stitch-legend-swatch[data-tone="error"]   { background: var(--stitch-error); }
.mud-container .stitch-legend-swatch[data-tone="info"]    { background: var(--stitch-secondary); }

/* Quick period summary tiles (used in Regulatory report) */
.mud-container .stitch-period-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.mud-container .stitch-period-tile {
    position: relative;
    padding: 18px 20px;
    background: var(--stitch-surface-container-low);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 12px;
    overflow: hidden;
}

.mud-container .stitch-period-tile::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 2px;
    background: var(--stitch-primary);
    opacity: 0.7;
}

.mud-container .stitch-period-tile[data-tone="success"]::before { background: var(--stitch-success); }
.mud-container .stitch-period-tile[data-tone="info"]::before    { background: var(--stitch-secondary); }

.mud-container .stitch-period-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--stitch-primary);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.mud-container .stitch-period-tile[data-tone="success"] .stitch-period-label { color: var(--stitch-success); }
.mud-container .stitch-period-tile[data-tone="info"]    .stitch-period-label { color: var(--stitch-secondary); }

.mud-container .stitch-period-value {
    margin-top: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--stitch-on-surface);
    line-height: 1;
}

.mud-container .stitch-period-caption {
    margin-top: 6px;
    font-size: 12px;
    color: var(--stitch-on-surface-variant);
}

/* ══════════════════════════════════════════════════════════════
   STITCH SIMPLE TABLE — lightweight table used inside sections
   where stitch-table-wrap is too heavy (e.g. breakdown summaries
   beside a chart).
   ══════════════════════════════════════════════════════════════ */

.mud-container .stitch-simple-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--stitch-on-surface);
}

.mud-container .stitch-simple-table thead th {
    padding: 8px 12px;
    background: var(--stitch-surface-container);
    text-align: start;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--stitch-on-surface-variant);
    border-bottom: 1px solid var(--stitch-outline-faint);
}

.mud-container .stitch-simple-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--stitch-outline-faint);
    vertical-align: middle;
}

.mud-container .stitch-simple-table tbody tr:last-child td { border-bottom: none; }

.mud-container .stitch-simple-table tbody tr:hover td {
    background: var(--stitch-surface-container);
}

.mud-container .stitch-simple-table td.mono,
.mud-container .stitch-simple-table td .mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
}

.mud-container .stitch-simple-table td.num {
    text-align: end;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   STITCH INFO BOX — lightweight labeled outlined box for use
   inside dialogs / tabs / nested content where a full stitch-section
   would be too heavy. Replaces MudPaper Elevation="0" Outlined="true".
   Works both inside and outside .mud-container — GLOBAL rule because
   MudDialog content is portaled outside the container scope.
   ══════════════════════════════════════════════════════════════ */

.stitch-info-box,
.mud-container .stitch-info-box {
    display: block;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1px solid rgba(60, 65, 80, 0.12);
    border-radius: 8px;
    color: #131318;
}

body.mud-theme-dark .stitch-info-box,
body.mud-theme-dark .mud-container .stitch-info-box {
    background: #1F1F25;
    border-color: rgba(140, 144, 159, 0.2);
    color: #E4E1E9;
}

.stitch-info-box-label,
.mud-container .stitch-info-box-label {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #4A4F5B;
    margin-bottom: 10px;
}

body.mud-theme-dark .stitch-info-box-label,
body.mud-theme-dark .mud-container .stitch-info-box-label {
    color: #C2C6D6;
}

/* ══════════════════════════════════════════════════════════════
   FALSE-POSITIVE MATCH ROW — subtle tint + strikethrough hint.
   Applied as MudDataGrid RowClassFunc on dispositioned match rows
   in the screening details dialog. Evidence stays visible; the
   row is just visually muted so officers can scan past it.
   ══════════════════════════════════════════════════════════════ */

.dispo-fp-row td,
.mud-container .dispo-fp-row td {
    background: color-mix(in oklab, #10B981 6%, transparent) !important;
    opacity: 0.82;
}

body.mud-theme-dark .dispo-fp-row td,
body.mud-theme-dark .mud-container .dispo-fp-row td {
    background: color-mix(in oklab, #10B981 10%, transparent) !important;
    opacity: 0.85;
}

/* ══════════════════════════════════════════════════════════════
   CLIENT DETAILS — Overview definition list
   Compact key/value rows used inside stitch-section bodies on
   the client Overview tab. Two-column grid at wider widths,
   stacked on narrow ones. Matches stitch-table row rhythm.
   ══════════════════════════════════════════════════════════════ */

.cd-def-list,
.mud-container .cd-def-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    margin: 0;
    padding: 0;
}

.cd-def-row,
.mud-container .cd-def-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cd-def-row-wide,
.mud-container .cd-def-row-wide {
    grid-column: 1 / -1;
}

.cd-def-row > dt,
.mud-container .cd-def-row > dt {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748B;
    margin: 0;
}

body.mud-theme-dark .cd-def-row > dt,
html.mud-theme-dark .cd-def-row > dt,
[data-theme="dark"] .cd-def-row > dt {
    color: #94A3B8;
}

.cd-def-row > dd,
.mud-container .cd-def-row > dd {
    font-size: 13px;
    font-weight: 500;
    color: #0F172A;
    margin: 0;
    word-break: break-word;
}

body.mud-theme-dark .cd-def-row > dd,
html.mud-theme-dark .cd-def-row > dd,
[data-theme="dark"] .cd-def-row > dd {
    color: #F1F5F9;
}

.cd-def-row .muted {
    color: #94A3B8;
    font-weight: 400;
}

.cd-link {
    color: #3B82F6;
    text-decoration: none;
    font-weight: 500;
}

.cd-link:hover {
    text-decoration: underline;
}

/* Compact progress bar used for the risk-score row */
.cd-risk-bar,
.mud-container .cd-risk-bar {
    flex: 0 0 120px;
    height: 6px;
    background: rgba(148, 163, 184, 0.2);
    border-radius: 3px;
    overflow: hidden;
}

.cd-risk-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

@media (max-width: 640px) {
    .cd-def-list,
    .mud-container .cd-def-list {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════
   STITCH MODAL — replaces MudDialog chrome for stitch-native
   dialogs. Overlay + centered card + sticky header/footer.
   Use @onclick:stopPropagation on the card to prevent outside-click
   dismiss from triggering when interacting with content.
   ══════════════════════════════════════════════════════════════ */

.stitch-modal-overlay,
.mud-container .stitch-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(4px);
    z-index: 1500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    animation: stitchModalFadeIn 140ms ease-out;
}

body.mud-theme-dark .stitch-modal-overlay,
html.mud-theme-dark .stitch-modal-overlay,
[data-theme="dark"] .stitch-modal-overlay {
    background: rgba(0, 0, 0, 0.58);
}

.stitch-modal,
.mud-container .stitch-modal {
    width: 100%;
    max-width: 1080px;
    background: #FFFFFF;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22), 0 2px 8px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 80px);
    overflow: hidden;
    animation: stitchModalScaleIn 160ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

body.mud-theme-dark .stitch-modal,
html.mud-theme-dark .stitch-modal,
[data-theme="dark"] .stitch-modal {
    background: #12121A;
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}

.stitch-modal-header,
.mud-container .stitch-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.04) 0%, transparent 100%);
}

body.mud-theme-dark .stitch-modal-header,
html.mud-theme-dark .stitch-modal-header,
[data-theme="dark"] .stitch-modal-header {
    border-bottom-color: rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, transparent 100%);
}

.stitch-modal-header .mso,
.mud-container .stitch-modal-header .mso {
    color: #3B82F6;
    font-size: 22px;
}

.stitch-modal-title,
.mud-container .stitch-modal-title {
    flex: 1;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #0F172A;
}

body.mud-theme-dark .stitch-modal-title,
html.mud-theme-dark .stitch-modal-title,
[data-theme="dark"] .stitch-modal-title {
    color: #F1F5F9;
}

.stitch-modal-subtitle,
.mud-container .stitch-modal-subtitle {
    font-size: 12px;
    font-weight: 400;
    color: #64748B;
    margin-top: 2px;
}

body.mud-theme-dark .stitch-modal-subtitle,
html.mud-theme-dark .stitch-modal-subtitle,
[data-theme="dark"] .stitch-modal-subtitle {
    color: #94A3B8;
}

.stitch-modal-close,
.mud-container .stitch-modal-close {
    background: transparent;
    border: none;
    color: #64748B;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms, color 120ms;
}

.stitch-modal-close:hover,
.mud-container .stitch-modal-close:hover {
    background: rgba(148, 163, 184, 0.14);
    color: #0F172A;
}

body.mud-theme-dark .stitch-modal-close:hover,
html.mud-theme-dark .stitch-modal-close:hover,
[data-theme="dark"] .stitch-modal-close:hover {
    background: rgba(148, 163, 184, 0.18);
    color: #F1F5F9;
}

.stitch-modal-body,
.mud-container .stitch-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #F8FAFC;
}

body.mud-theme-dark .stitch-modal-body,
html.mud-theme-dark .stitch-modal-body,
[data-theme="dark"] .stitch-modal-body {
    background: #0A0A0F;
}

.stitch-modal-actions,
.mud-container .stitch-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    background: #FFFFFF;
}

body.mud-theme-dark .stitch-modal-actions,
html.mud-theme-dark .stitch-modal-actions,
[data-theme="dark"] .stitch-modal-actions {
    border-top-color: rgba(148, 163, 184, 0.12);
    background: #12121A;
}

@keyframes stitchModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes stitchModalScaleIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ══════════════════════════════════════════════════════════════
   SCREENING IN-PROGRESS BANNER
   Persistent status strip shown while a name-screening request
   is in flight. Gradient progress stripe animates along the top
   edge so the user can see something is happening (the API call
   is black-box and can take several seconds).
   ══════════════════════════════════════════════════════════════ */

.stitch-screening-banner,
.mud-container .stitch-screening-banner {
    position: relative;
    margin-top: 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(6, 182, 212, 0.04));
    border: 1px solid rgba(59, 130, 246, 0.28);
    border-radius: 10px;
    overflow: hidden;
}

body.mud-theme-dark .stitch-screening-banner,
html.mud-theme-dark .stitch-screening-banner,
[data-theme="dark"] .stitch-screening-banner {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(6, 182, 212, 0.08));
    border-color: rgba(59, 130, 246, 0.32);
}

.stitch-screening-banner-progress,
.mud-container .stitch-screening-banner-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #3B82F6 30%,
        #06B6D4 50%,
        #3B82F6 70%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: stitchScreeningProgress 1.4s ease-in-out infinite;
}

@keyframes stitchScreeningProgress {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.stitch-screening-banner-content,
.mud-container .stitch-screening-banner-content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
}

.stitch-screening-banner-spinner,
.mud-container .stitch-screening-banner-spinner {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(59, 130, 246, 0.22);
    border-top-color: #3B82F6;
    animation: stitchScreeningSpin 0.9s linear infinite;
}

@keyframes stitchScreeningSpin {
    to { transform: rotate(360deg); }
}

.stitch-screening-banner-title,
.mud-container .stitch-screening-banner-title {
    font-weight: 600;
    font-size: 14px;
    color: #0F172A;
    letter-spacing: 0.01em;
}

body.mud-theme-dark .stitch-screening-banner-title,
html.mud-theme-dark .stitch-screening-banner-title,
[data-theme="dark"] .stitch-screening-banner-title {
    color: #F1F5F9;
}

.stitch-screening-banner-sub,
.mud-container .stitch-screening-banner-sub {
    font-size: 12px;
    color: #64748B;
    margin-top: 2px;
}

body.mud-theme-dark .stitch-screening-banner-sub,
html.mud-theme-dark .stitch-screening-banner-sub,
[data-theme="dark"] .stitch-screening-banner-sub {
    color: #94A3B8;
}

/* ══════════════════════════════════════════════════════════════
   STITCH-TOOLBAR SLIM MODIFIER
   For pages where the hero/rich-card carries the identity (name,
   subtitle, status). The toolbar becomes a thin nav strip —
   breadcrumb on one side, back/guide actions on the other, both
   on the same baseline, with the hero pulled up close below.
   ══════════════════════════════════════════════════════════════ */

.stitch-toolbar.stitch-toolbar-slim,
.mud-container .stitch-toolbar.stitch-toolbar-slim {
    align-items: center;
    margin-bottom: 12px;
}

.stitch-toolbar.stitch-toolbar-slim .stitch-breadcrumb,
.mud-container .stitch-toolbar.stitch-toolbar-slim .stitch-breadcrumb {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Error pages (404 / 403 / 401 / 500) — stitch theme.
   Used inside Routes.razor <NotFound> / <NotAuthorized> and Pages/Error.razor.
--------------------------------------------------------------------------- */
.stitch-error-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 140px);
    padding: 32px 16px;
}

.stitch-error-card {
    width: 100%;
    max-width: 680px;
    background: var(--stitch-surface-container-low);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 16px;
    padding: 48px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.stitch-error-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--stitch-primary) 50%, transparent 100%);
    opacity: 0.6;
}

.stitch-error-eyebrow {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--stitch-on-surface-variant);
    background: var(--stitch-surface-container-high);
    border: 1px solid var(--stitch-outline-variant);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 28px;
}

.stitch-error-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    color: var(--stitch-primary);
    letter-spacing: -0.04em;
    margin: 0 0 12px;
    text-shadow: 0 0 60px rgba(77, 142, 255, 0.35);
}

.stitch-error-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 22px;
    margin: 0 auto 20px;
    background: var(--stitch-surface-container-high);
    border: 1px solid var(--stitch-outline-variant);
}

.stitch-error-glyph .mso {
    font-size: 44px;
    color: var(--stitch-primary);
}

.stitch-error-glyph--warn {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.35);
}
.stitch-error-glyph--warn .mso { color: var(--stitch-warning); }

.stitch-error-glyph--error {
    background: var(--stitch-error-soft);
    border-color: var(--stitch-error);
}
.stitch-error-glyph--error .mso { color: var(--stitch-error); }

.stitch-error-glyph--auth {
    background: rgba(77, 142, 255, 0.08);
    border-color: rgba(77, 142, 255, 0.35);
}

.stitch-error-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--stitch-on-surface);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.stitch-error-subtitle {
    font-size: 14px;
    line-height: 1.6;
    color: var(--stitch-on-surface-variant);
    margin: 0 auto 28px;
    max-width: 520px;
}

.stitch-error-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 0 0 28px;
    text-align: left;
}

.stitch-error-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--stitch-surface-container);
    border: 1px solid var(--stitch-outline-faint);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
}

.stitch-error-link:hover {
    background: var(--stitch-surface-container-high);
    border-color: var(--stitch-primary);
    transform: translateY(-1px);
}

.stitch-error-link .mso {
    font-size: 22px;
    color: var(--stitch-primary);
    flex-shrink: 0;
}

.stitch-error-link-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--stitch-on-surface);
    line-height: 1.2;
}

.stitch-error-link-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--stitch-on-surface-variant);
    margin-top: 3px;
}

.stitch-error-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.stitch-error-actions .stitch-btn-primary,
.stitch-error-actions .stitch-btn-secondary,
.stitch-error-actions .stitch-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.stitch-error-requestid {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--stitch-surface-container-high);
    border: 1px solid var(--stitch-outline-variant);
    border-radius: 10px;
    margin: 0 auto 24px;
}

.stitch-error-requestid-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--stitch-on-surface-variant);
}

.stitch-error-requestid code {
    font-size: 12px;
    color: var(--stitch-on-surface);
    word-break: break-all;
}

.stitch-error-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(77, 142, 255, 0.06);
    border: 1px solid rgba(77, 142, 255, 0.25);
    border-radius: 10px;
    text-align: left;
    font-size: 12px;
    color: var(--stitch-on-surface-variant);
    line-height: 1.6;
    margin-bottom: 20px;
}

.stitch-error-notice .mso {
    color: var(--stitch-primary);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.stitch-error-notice code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 1px 6px;
    background: var(--stitch-surface-container-high);
    border-radius: 4px;
    color: var(--stitch-on-surface);
}

.stitch-error-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--stitch-on-surface-variant);
    padding-top: 18px;
    border-top: 1px solid var(--stitch-outline-faint);
}

.stitch-error-meta a {
    color: var(--stitch-primary);
    text-decoration: none;
}

.stitch-error-meta a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .stitch-error-card { padding: 32px 20px; }
    .stitch-error-code { font-size: 72px; }
    .stitch-error-title { font-size: 20px; }
    .stitch-error-glyph { width: 72px; height: 72px; }
    .stitch-error-glyph .mso { font-size: 36px; }
}

/* ─── AI Profile Recommender — search/template/CTA row ─── */
.mud-container .aml-recommender-filters {
    align-items: flex-end;
    gap: 14px;
    padding: 14px 16px;
}

.mud-container .aml-recommender-field {
    gap: 6px;
    margin: 0;
}

.mud-container .aml-recommender-field-client { flex: 2 1 360px; min-width: 280px; }
.mud-container .aml-recommender-field-template { flex: 1 1 240px; min-width: 220px; }

/* Lift input fields off the surface-container backdrop with a clear surface fill */
.mud-container .aml-recommender-filters .mud-input-root-outlined {
    background: var(--stitch-surface);
    border-radius: 8px;
}
.mud-container .aml-recommender-filters .mud-input-root-outlined .mud-input-outlined-border {
    border-color: var(--stitch-outline-variant);
}
.mud-container .aml-recommender-filters .mud-input-root-outlined:hover .mud-input-outlined-border {
    border-color: var(--stitch-outline);
}
.mud-container .aml-recommender-filters .mud-input-root-outlined.mud-shrink .mud-input-outlined-border,
.mud-container .aml-recommender-filters .mud-input-root-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--stitch-primary);
    border-width: 1.5px;
}

.mud-container .aml-recommender-cta {
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto;
}

/* Match the dense outlined input height (~40px) so the CTA bottom-aligns cleanly */
.mud-container .aml-recommender-analyze {
    height: 40px;
    padding: 0 22px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1;
}

.mud-container .aml-recommender-analyze:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: none;
}

@media (max-width: 720px) {
    .mud-container .aml-recommender-field-client,
    .mud-container .aml-recommender-field-template,
    .mud-container .aml-recommender-cta { flex: 1 1 100%; }
    .mud-container .aml-recommender-analyze { width: 100%; justify-content: center; }
}

/* ─── AI Profile Recommender — recommendation card header ─── */
.mud-container .aml-recommender-card-header {
    padding: 14px 18px;
    background:
        linear-gradient(135deg,
            color-mix(in oklab, var(--stitch-primary) 22%, transparent) 0%,
            color-mix(in oklab, var(--stitch-primary-container) 18%, transparent) 100%);
    border-bottom: 1px solid color-mix(in oklab, var(--stitch-primary) 28%, transparent);
}

.mud-container .aml-recommender-card-header-icon {
    color: var(--stitch-primary);
}

.mud-container .aml-recommender-card-header-title {
    color: var(--stitch-on-surface);
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Dark mode: lift the header so it reads against the dark surface */
[data-theme="dark"] .mud-container .aml-recommender-card-header,
.mud-theme-dark .mud-container .aml-recommender-card-header {
    background:
        linear-gradient(135deg,
            color-mix(in oklab, var(--stitch-primary-container) 32%, transparent) 0%,
            color-mix(in oklab, var(--stitch-primary) 22%, transparent) 100%);
    border-bottom-color: color-mix(in oklab, var(--stitch-primary-container) 40%, transparent);
}

[data-theme="dark"] .mud-container .aml-recommender-card-header-icon,
.mud-theme-dark .mud-container .aml-recommender-card-header-icon {
    color: var(--stitch-primary-container);
}

/* ══════════════════════════════════════════════════════════════
   PORTABLE STITCH PRIMITIVES — for portaled dialogs/drawers.
   MudDialogProvider lives at the root (Routes.razor), so dialog
   content renders OUTSIDE .mud-container and the .mud-container-
   scoped stitch rules don't apply. Any MudDialog / popover that
   carries Class="aml-stitch" picks up these rules instead.
   ══════════════════════════════════════════════════════════════ */

.aml-stitch {
    --stitch-canvas:                #FFFFFF;
    --stitch-surface:               #FFFFFF;
    --stitch-surface-container:     #F4F5F9;
    --stitch-surface-container-high:#EAECF2;
    --stitch-on-surface:            #131318;
    --stitch-on-surface-variant:    #4A4F5B;
    --stitch-outline-variant:       #C3C6D0;
    --stitch-outline-faint:         rgba(60, 65, 80, 0.12);
    --stitch-primary:               #0052CC;
    --stitch-primary-container:     #4D8EFF;
    --stitch-primary-soft:          rgba(77, 142, 255, 0.18);
    --stitch-error:                 #BA1A1A;
    --stitch-error-soft:            rgba(186, 26, 26, 0.10);
    color: var(--stitch-on-surface);
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

body.mud-theme-dark .aml-stitch {
    --stitch-canvas:                #0A0A0F;
    --stitch-surface:               #131318;
    --stitch-surface-container:     #1F1F25;
    --stitch-surface-container-high:#2A292F;
    --stitch-on-surface:            #FFFFFF;
    --stitch-on-surface-variant:    #D6DAE5;
    --stitch-outline-variant:       #424754;
    --stitch-outline-faint:         rgba(173, 198, 255, 0.10);
    --stitch-primary:               #ADC6FF;
    --stitch-primary-container:     #4D8EFF;
    --stitch-primary-soft:          rgba(77, 142, 255, 0.15);
    --stitch-error:                 #FFB4AB;
    --stitch-error-soft:            rgba(255, 180, 171, 0.14);
}

/* Layout primitives */
.aml-stitch .stitch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.aml-stitch .stitch-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.aml-stitch .stitch-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--stitch-on-surface-variant);
}

/* Native form controls */
.aml-stitch .stitch-input,
.aml-stitch .stitch-select,
.aml-stitch .stitch-textarea {
    width: 100%;
    display: block;
    padding: 9px 12px;
    background: var(--stitch-surface);
    border: 1px solid var(--stitch-outline-variant);
    border-radius: 8px;
    color: var(--stitch-on-surface);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
}

.aml-stitch .stitch-textarea {
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
}

.aml-stitch .stitch-input:focus,
.aml-stitch .stitch-select:focus,
.aml-stitch .stitch-textarea:focus {
    outline: none;
    border-color: var(--stitch-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--stitch-primary) 18%, transparent);
}

.aml-stitch .stitch-input::placeholder,
.aml-stitch .stitch-textarea::placeholder {
    color: var(--stitch-on-surface-variant);
    opacity: 0.6;
}

body.mud-theme-dark .aml-stitch .stitch-input,
body.mud-theme-dark .aml-stitch .stitch-select,
body.mud-theme-dark .aml-stitch .stitch-textarea {
    background: var(--stitch-surface-container);
}

/* Icon-only button (eye toggle, etc.) */
.aml-stitch .stitch-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--stitch-on-surface-variant);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
.aml-stitch .stitch-icon-btn:hover {
    background: var(--stitch-surface-container-high);
    color: var(--stitch-on-surface);
}
.aml-stitch .stitch-icon-btn .mso { font-size: 18px; }

/* Inline notice (info / warning / error / success) */
.aml-stitch .stitch-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid;
    font-size: 13px;
    line-height: 1.5;
    color: var(--stitch-on-surface);
}
.aml-stitch .stitch-notice .mso { font-size: 18px; line-height: 1.4; flex-shrink: 0; }
.aml-stitch .stitch-notice-body { flex: 1; min-width: 0; }

.aml-stitch .stitch-notice[data-tone="info"] {
    background: var(--stitch-primary-soft);
    border-color: color-mix(in oklab, var(--stitch-primary) 35%, transparent);
}
.aml-stitch .stitch-notice[data-tone="info"] .mso { color: var(--stitch-primary); }

.aml-stitch .stitch-notice[data-tone="error"] {
    background: var(--stitch-error-soft);
    border-color: color-mix(in oklab, var(--stitch-error) 35%, transparent);
}
.aml-stitch .stitch-notice[data-tone="error"] .mso { color: var(--stitch-error); }

/* Buttons — primary / ghost (mirrors .mud-container variants) */
.aml-stitch .stitch-btn-primary,
.aml-stitch .stitch-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 150ms ease, color 150ms ease,
                border-color 150ms ease, transform 80ms ease, box-shadow 150ms ease;
}

.aml-stitch .stitch-btn-primary {
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--stitch-primary) 0%, var(--stitch-primary-container) 100%);
    box-shadow: 0 1px 2px rgba(0, 82, 204, 0.18), 0 4px 12px rgba(77, 142, 255, 0.18);
}
.aml-stitch .stitch-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(77, 142, 255, 0.30), 0 8px 20px rgba(77, 142, 255, 0.28);
    filter: brightness(1.06);
}
.aml-stitch .stitch-btn-primary:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}
.aml-stitch .stitch-btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    filter: none;
}
.aml-stitch .stitch-btn-primary .mso { font-size: 16px; color: inherit; }

.aml-stitch .stitch-btn-ghost {
    color: var(--stitch-on-surface-variant);
    background: transparent;
    border-color: var(--stitch-outline-variant);
}
.aml-stitch .stitch-btn-ghost:hover {
    color: var(--stitch-on-surface);
    background: var(--stitch-surface-container);
}
.aml-stitch .stitch-btn-ghost .mso { font-size: 16px; }

/* Validation messages from EditForm */
.aml-stitch .validation-message {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--stitch-error);
}