/* Custodeum Dark Theme Color Palette */
/* Primary: #01d0ff - Bright cyan blue for accent and primary elements */
/* Secondary: #00b4dd - Slightly darker blue */
/* Accent: #f5a60c - Orange accent for highlights */
/* Light: #ededef - Light grey/white for text */
/* Dark-1: #666666 - Lighter grey for borders and subtle elements */
/* Dark-2: #4d4d4d - Medium dark grey for cards and surfaces */
/* Dark-3: #333333 - Dark grey for secondary backgrounds */
/* Dark-Bg: #000000 - Black for main backgrounds */
/* Background: #000000 - Pure black for page background */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Good Times custom font
   NOTE: The web app serves this font from /wwwroot/fonts/good-times.woff so
   end-users do NOT need the font installed locally. Make sure the actual
   Good Times webfont file is deployed to /Custodeum/wwwroot/fonts/good-times.woff. */
@font-face {
    font-family: 'Good Times';
    src: url('/fonts/good-times.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.font-good-times {
    font-family: Poppins, 'Good Times', sans-serif;
}

/* Typography tokens for headings used by MudBlazor + native h3-h6.
   These keep Good Times confined to headings while body text uses Poppins. */
:root {
    --syba-font-family: 'Poppins', 'Segoe UI', sans-serif;
    --mud-typography-h3-family: Poppins, 'Good Times', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --mud-typography-h3-size: 2rem;

    --mud-typography-h4-family: Poppins, 'Good Times', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --mud-typography-h4-size: 1.8rem;

    --mud-typography-h5-family: Poppins, 'Good Times', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --mud-typography-h5-size: 1rem;

    --mud-typography-h6-family: Poppins, 'Good Times', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --mud-typography-h6-size: 1rem;
}

/* Good Times headings look best in uppercase */
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6 {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Global UI scale knob
   - Use for consistent “density” tuning across MudBlazor + our custom pages.
   - 0.9 == ~90% */
:root {
    --syba-ui-scale: 0.9;
    /* Global control shape (inputs/selects/textboxes) */
    --syba-control-radius: 8px;
    --syba-control-padding-y: calc(10px * var(--syba-ui-scale));
    --syba-control-padding-x: calc(12px * var(--syba-ui-scale));
    --syba-control-border-width: 1.5px;
    --mud-elevation-0: none;
    --mud-default-borderradius: 4px;
}

/* Theme tokens + MudBlazor CSS Variable Fallbacks.
   These provide fallback values when the Blazor circuit goes stale and MudThemeProvider fails
   to re-inject its dynamic CSS variables. They must match the theme defined in MainLayout.razor. */
html:not([data-theme]),
html[data-theme="dark"] {
    --mud-palette-primary: #01d0ff;
    --mud-palette-primary-text: #01d0ff;
    --mud-palette-primary-hover: rgba(1, 208, 255, 0.1);
    --mud-palette-primary-lighten: #33d9ff;
    --mud-palette-primary-darken: #00a8cc;
    --mud-palette-primary-rgb: 1, 208, 255;
    --mud-palette-secondary: #334155;
    --mud-palette-secondary-text: #334155;
    --mud-palette-tertiary: #475569;
    --mud-palette-tertiary-text: #475569;
    --mud-palette-info: #01d0ff;
    --mud-palette-info-text: #01d0ff;
    --mud-palette-success: #4CAF50;
    --mud-palette-success-text: #4CAF50;
    --mud-palette-warning: #f5a60c;
    --mud-palette-warning-text: #f5a60c;
    --mud-palette-error: #f44336;
    --mud-palette-error-text: #f44336;
    --mud-palette-dark: #19191c;
    --mud-palette-dark-text: #19191c;
    --mud-palette-dark-rgb: 25, 25, 28;
    --mud-palette-text-primary: rgba(255, 255, 255, 0.8);
    /* Dark theme secondary text needs to remain readable on #05060d/#121212 */
    --mud-palette-text-secondary: rgba(255, 255, 255, 0.5);
    --mud-palette-text-disabled: rgba(255, 255, 255, 0.4);
    --mud-palette-action-default: rgba(255, 255, 255, 0.5);
    --mud-palette-action-default-hover: rgba(102, 102, 102, 0.1);
    --mud-palette-action-disabled: #73738c;
    --mud-palette-action-disabled-background: #393946;
    --mud-palette-surface: #2d2d30;
    --mud-palette-background: #19191c;
    --mud-palette-background-gray: #2d2d30;
    --mud-palette-drawer-background: #19191c;
    --mud-palette-drawer-text: rgba(255, 255, 255, 0.8);
    --mud-palette-drawer-icon: #01d0ff;
    --mud-palette-appbar-background: #19191c;
    --mud-palette-appbar-text: rgba(255, 255, 255, 0.8);
    --mud-palette-lines-default: rgba(255, 255, 255, 0.1);
    --mud-palette-lines-inputs: rgba(1, 208, 255, 0.3);
    --mud-palette-table-lines: rgba(255, 255, 255, 0.1);
    --mud-palette-table-striped: rgba(0, 0, 0, 0.02);
    --mud-palette-table-hover: rgba(1, 208, 255, 0.05);
    --mud-palette-divider: rgba(255, 255, 255, 0.1);
    --mud-palette-divider-light: rgba(255, 255, 255, 0.1);
    --mud-palette-gray-default: #73738c;
    --mud-palette-gray-light: #8f8fa3;
    --mud-palette-gray-lighter: #ababba;
    --mud-palette-gray-dark: #393946;
    --mud-palette-gray-darker: #19191c;
    --mud-palette-overlay-dark: rgba(0, 0, 0, 0.5);
    --mud-palette-overlay-light: rgba(255, 255, 255, 0.5);
    --mud-palette-white: #ffffff;
    --mud-palette-black: #121212;
    --mud-palette-primary-contrast-text: #121212;
    --mud-palette-secondary-contrast-text: #ffffff;
    --mud-palette-tertiary-contrast-text: #ffffff;
    --mud-palette-info-contrast-text: #121212;
    --mud-palette-success-contrast-text: #121212;
    --mud-palette-warning-contrast-text: #121212;
    --mud-palette-error-contrast-text: #ffffff;
    --mud-palette-dark-contrast-text: #ededef;

    --primary-color: #01d0ff;
    --secondary-color: #334155;
    --accent-color: #475569;
    --background-color: #19191c;
    --dark-3-color: #19191c;
    --dark-2-color: #2d2d30;
    --dark-1-color: #393946;
    --text-color: rgba(255, 255, 255, 0.8);

    --syba-primary-text: #01d0ff;

    --syba-page-background: #19191c;
    --syba-card-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
    --syba-card-border: rgba(255, 255, 255, 0.1);
    --syba-header-blur-bg: rgba(5, 6, 13, 0.3);
}

html[data-theme="light"] {
    --mud-palette-primary: #01d0ff;
    --mud-palette-primary-text: #0c4a6e;
    --mud-palette-primary-hover: rgba(1, 208, 255, 0.1);
    --mud-palette-primary-lighten: #33d9ff;
    --mud-palette-primary-darken: #00a8cc;
    --mud-palette-primary-rgb: 1, 208, 255;
    --mud-palette-secondary: #334155;
    --mud-palette-secondary-text: #334155;
    --mud-palette-tertiary: #64748b;
    --mud-palette-tertiary-text: #64748b;
    --mud-palette-info: #0369a1;
    --mud-palette-info-text: #0369a1;
    --mud-palette-success: #16a34a;
    --mud-palette-success-text: #16a34a;
    --mud-palette-warning: #f59e0b;
    --mud-palette-warning-text: #f59e0b;
    --mud-palette-error: #dc2626;
    --mud-palette-error-text: #dc2626;
    --mud-palette-dark: #111827;
    --mud-palette-dark-text: #111827;
    --mud-palette-dark-rgb: 17, 24, 39;
    --mud-palette-text-primary: #212b37;
    --mud-palette-text-secondary: #212b37;
    --mud-palette-text-disabled: #9ca3af;
    --mud-palette-action-default: #6e829f;
    --mud-palette-action-default-hover: rgba(107, 114, 128, 0.1);
    --mud-palette-action-disabled: #949eb7;
    --mud-palette-action-disabled-background: #e6eaeb;
    --mud-palette-surface: #ffffff;
    --mud-palette-background: #f9fafc;
    --mud-palette-background-gray: #f2f4f5;
    --mud-palette-drawer-background: #ffffff;
    --mud-palette-drawer-text: #61748f;
    --mud-palette-drawer-icon: #0c4a6e;
    --mud-palette-appbar-background: #ffffff;
    --mud-palette-appbar-text: #111827;
    --mud-palette-lines-default: #ecf3fb;
    --mud-palette-lines-inputs: rgba(1, 208, 255, 0.3);
    --mud-palette-table-lines: #ecf3fb;
    --mud-palette-table-striped: rgba(0, 0, 0, 0.02);
    --mud-palette-table-hover: rgba(1, 208, 255, 0.05);
    --mud-palette-divider: #ecf3fb;
    --mud-palette-divider-light: #ecf3fb;
    --mud-palette-gray-default: #7987a1;
    --mud-palette-gray-light: #949eb7;
    --mud-palette-gray-lighter: #e6eaeb;
    --mud-palette-gray-dark: #374151;
    --mud-palette-gray-darker: #111827;
    --mud-palette-overlay-dark: rgba(0, 0, 0, 0.4);
    --mud-palette-overlay-light: rgba(255, 255, 255, 0.6);
    --mud-palette-white: #ffffff;
    --mud-palette-black: #111827;
    --mud-palette-primary-contrast-text: #121212;
    --mud-palette-secondary-contrast-text: #ffffff;
    --mud-palette-tertiary-contrast-text: #121212;
    --mud-palette-info-contrast-text: #ffffff;
    --mud-palette-success-contrast-text: #ffffff;
    --mud-palette-warning-contrast-text: #121212;
    --mud-palette-error-contrast-text: #ffffff;
    --mud-palette-dark-contrast-text: #ffffff;

    --primary-color: #01d0ff;
    --secondary-color: #334155;
    --accent-color: #64748b;
    --background-color: #f9fafc;
    --dark-3-color: #f9fafc;
    --dark-2-color: #ffffff;
    --dark-1-color: #ecf3fb;
    --text-color: #212b37;

    --syba-primary-text: #0c4a6e;

    --syba-page-background: #f9fafc;
    --syba-card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
    --syba-card-border: #ecf3fb;
    --syba-header-blur-bg: rgba(255, 255, 255, 0.7);
}

/* Scale rem-based typography (MudBlazor uses lots of rems). Use !important to beat library defaults. */
html {
    font-size: calc(16px * var(--syba-ui-scale)) !important;
}

html, body {
    font-family: var(--syba-font-family);
    background: var(--syba-page-background) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    min-height: 100vh !important;
    height: 100% !important;
    color: var(--mud-palette-text-primary) !important;
    line-height: 1.6;
}

/* Application list: darker link color for readable app names (primary is too light on light bg) */
.app-name-link.mud-link {
    color: #0369a1 !important;
}
.app-name-link.mud-link:hover {
    color: #0284c7 !important;
}
.mud-theme-dark .app-name-link.mud-link {
    color: var(--mud-palette-primary-darken) !important;
}
.mud-theme-dark .app-name-link.mud-link:hover {
    color: var(--mud-palette-primary) !important;
}

/* ---- Global density overrides for “metric cards” used across Details/Reports pages ----
   Many pages define these classes with fixed px/rem + !important, so we use:
   - !important (to beat inline styles)
   - higher-specificity selectors (to beat per-page .metric-* !important rules) */
.metric-card {
    padding: calc(20px * var(--syba-ui-scale)) !important;
    border-radius: calc(16px * var(--syba-ui-scale)) !important;
}

.metric-card .metric-card-content {
    gap: calc(16px * var(--syba-ui-scale)) !important;
}

.metric-card .metric-icon {
    font-size: calc(2.5rem * var(--syba-ui-scale)) !important;
}

.metric-card .metric-value {
    font-size: calc(1.875rem * var(--syba-ui-scale)) !important;
}

.metric-card .metric-label {
    font-size: calc(0.875rem * var(--syba-ui-scale)) !important;
}

/* Apply consistent enterprise typography across MudBlazor surfaces. */
.mud-typography,
.mud-button,
.mud-input,
.mud-select,
.mud-text-field,
.mud-autocomplete,
.mud-menu,
.mud-list,
.mud-list-item,
.mud-card,
.mud-card-header,
.mud-card-content,
.mud-table,
.mud-table-head,
.mud-table-cell,
.mud-chip,
.mud-badge,
.mud-tab,
.mud-dialog,
.mud-dialog-title,
.mud-dialog-content,
.mud-snackbar,
.mud-appbar,
.mud-drawer,
.mud-nav-link,
.mud-nav-link-text {
    font-family: var(--syba-font-family) !important;
}

a, .btn-link {
    color: var(--syba-primary-text) !important;
    text-decoration: none;
    transition: color 0.3s;
}

a:hover, .btn-link:hover {
    color: var(--mud-palette-warning) !important;
    opacity: 0.9;
}

/* Light mode readability: avoid cyan link text on white backgrounds in content tables/lists */
html[data-theme="light"] .mud-main-content a,
html[data-theme="light"] .mud-main-content .mud-link {
    color: var(--mud-palette-text-primary) !important;
}

html[data-theme="light"] .mud-main-content a:hover,
html[data-theme="light"] .mud-main-content .mud-link:hover,
html[data-theme="light"] .mud-main-content a:focus,
html[data-theme="light"] .mud-main-content .mud-link:focus {
    color: var(--mud-palette-primary-text) !important;
}

/* Dark theme: table name links use light text color instead of blue/primary */
html:not([data-theme="light"]) .mud-table a,
html:not([data-theme="light"]) .mud-table .mud-link,
html:not([data-theme="light"]) .mud-table .mud-primary-text {
    color: var(--mud-palette-text-primary) !important;
}

html:not([data-theme="light"]) .mud-table a:hover,
html:not([data-theme="light"]) .mud-table .mud-link:hover {
    color: var(--mud-palette-text-primary) !important;
    opacity: 0.9;
}

/* Global button system: cleaner enterprise look across the app */
.mud-button-root {
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.01em;
    box-shadow: none !important;
}

.mud-button-root .mud-button-label,
.mud-button-root .mud-icon-root,
.mud-button-root .mud-svg-icon {
    transition: color 0.2s ease, fill 0.2s ease;
}

/* Filled primary/info actions: always use the active palette (supports web branding/custom themes). */
html[data-theme="light"] .mud-button-filled.mud-button-filled-primary,
html[data-theme="light"] .mud-button-filled-primary,
html[data-theme="light"] .mud-button-filled.mud-button-filled-info,
html[data-theme="light"] .mud-button-filled-info {
    background-color: var(--mud-palette-primary) !important;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.55) !important;
    color: var(--mud-palette-primary-contrast-text) !important;
}

html[data-theme="light"] .mud-button-filled.mud-button-filled-primary .mud-button-label,
html[data-theme="light"] .mud-button-filled-primary .mud-button-label,
html[data-theme="light"] .mud-button-filled.mud-button-filled-info .mud-button-label,
html[data-theme="light"] .mud-button-filled-info .mud-button-label {
    color: var(--mud-palette-primary-contrast-text) !important;
}

html[data-theme="light"] .mud-button-filled.mud-button-filled-primary:hover,
html[data-theme="light"] .mud-button-filled-primary:hover,
html[data-theme="light"] .mud-button-filled.mud-button-filled-info:hover,
html[data-theme="light"] .mud-button-filled-info:hover {
    filter: brightness(0.95);
}

/* Dark mode: force filled button backgrounds so action buttons never render as text-only. */
html:not([data-theme="light"]) .mud-button-filled.mud-button-filled-primary,
html:not([data-theme="light"]) .mud-button-filled-primary {
    background-color: var(--mud-palette-primary) !important;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.6) !important;
    color: var(--mud-palette-primary-contrast-text) !important;
}
html:not([data-theme="light"]) .mud-button-filled.mud-button-filled-primary .mud-button-label,
html:not([data-theme="light"]) .mud-button-filled-primary .mud-button-label,
html:not([data-theme="light"]) .mud-button-filled.mud-button-filled-primary .mud-icon-root,
html:not([data-theme="light"]) .mud-button-filled-primary .mud-icon-root,
html:not([data-theme="light"]) .mud-button-filled.mud-button-filled-primary .mud-svg-icon,
html:not([data-theme="light"]) .mud-button-filled-primary .mud-svg-icon {
    color: var(--mud-palette-primary-contrast-text) !important;
    fill: currentColor !important;
}
html:not([data-theme="light"]) .mud-button-filled.mud-button-filled-warning,
html:not([data-theme="light"]) .mud-button-filled-warning {
    background-color: var(--mud-palette-warning) !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 65%, #ffffff 35%) !important;
    color: var(--mud-palette-warning-contrast-text) !important;
}
html:not([data-theme="light"]) .mud-button-filled.mud-button-filled-warning .mud-button-label,
html:not([data-theme="light"]) .mud-button-filled-warning .mud-button-label,
html:not([data-theme="light"]) .mud-button-filled.mud-button-filled-warning .mud-icon-root,
html:not([data-theme="light"]) .mud-button-filled-warning .mud-icon-root,
html:not([data-theme="light"]) .mud-button-filled.mud-button-filled-warning .mud-svg-icon,
html:not([data-theme="light"]) .mud-button-filled-warning .mud-svg-icon {
    color: var(--mud-palette-warning-contrast-text) !important;
    fill: currentColor !important;
}
html:not([data-theme="light"]) .mud-button-filled.mud-button-filled-info,
html:not([data-theme="light"]) .mud-button-filled-info {
    background-color: var(--mud-palette-info) !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 65%, #ffffff 35%) !important;
    color: var(--mud-palette-info-contrast-text) !important;
}
html:not([data-theme="light"]) .mud-button-filled.mud-button-filled-info .mud-button-label,
html:not([data-theme="light"]) .mud-button-filled-info .mud-button-label,
html:not([data-theme="light"]) .mud-button-filled.mud-button-filled-info .mud-icon-root,
html:not([data-theme="light"]) .mud-button-filled-info .mud-icon-root,
html:not([data-theme="light"]) .mud-button-filled.mud-button-filled-info .mud-svg-icon,
html:not([data-theme="light"]) .mud-button-filled-info .mud-svg-icon {
    color: var(--mud-palette-info-contrast-text) !important;
    fill: currentColor !important;
}

/* Outlined buttons: subtle neutral border with clear hover affordance */
.mud-button-outlined.mud-button-outlined-primary,
.mud-button-outlined-primary {
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    background-color: transparent !important;
}

.mud-button-outlined.mud-button-outlined-primary:hover,
.mud-button-outlined-primary:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
    border-color: rgba(var(--mud-palette-primary-rgb), 0.35) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Text buttons should read like links, but use high-contrast body text */
.mud-button-text.mud-button-text-primary,
.mud-button-text-primary {
    color: var(--mud-palette-text-primary) !important;
}

.mud-button-text.mud-button-text-primary:hover,
.mud-button-text-primary:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Dark mode: text and outlined buttons must stay visible (secondary/grey palette is dark on dark bg) */
html:not([data-theme="light"]) .mud-button-text.mud-button-text-primary,
html:not([data-theme="light"]) .mud-button-text-primary,
html:not([data-theme="light"]) .mud-button-text.mud-button-text-secondary,
html:not([data-theme="light"]) .mud-button-text-secondary {
    color: var(--mud-palette-text-primary) !important;
}
html:not([data-theme="light"]) .mud-button-text .mud-button-label,
html:not([data-theme="light"]) .mud-button-text .mud-icon-root,
html:not([data-theme="light"]) .mud-button-text .mud-svg-icon {
    color: inherit !important;
    fill: currentColor !important;
}
html:not([data-theme="light"]) .mud-button-text.mud-button-text-primary:hover,
html:not([data-theme="light"]) .mud-button-text-primary:hover,
html:not([data-theme="light"]) .mud-button-text.mud-button-text-secondary:hover,
html:not([data-theme="light"]) .mud-button-text-secondary:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
    color: var(--mud-palette-primary) !important;
}

html:not([data-theme="light"]) .mud-button-outlined.mud-button-outlined-primary,
html:not([data-theme="light"]) .mud-button-outlined-primary,
html:not([data-theme="light"]) .mud-button-outlined.mud-button-outlined-secondary,
html:not([data-theme="light"]) .mud-button-outlined-secondary {
    color: var(--mud-palette-text-primary) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}
html:not([data-theme="light"]) .mud-button-outlined .mud-button-label,
html:not([data-theme="light"]) .mud-button-outlined .mud-icon-root,
html:not([data-theme="light"]) .mud-button-outlined .mud-svg-icon {
    color: inherit !important;
    fill: currentColor !important;
}
html:not([data-theme="light"]) .mud-button-outlined.mud-button-outlined-primary:hover,
html:not([data-theme="light"]) .mud-button-outlined-primary:hover,
html:not([data-theme="light"]) .mud-button-outlined.mud-button-outlined-secondary:hover,
html:not([data-theme="light"]) .mud-button-outlined-secondary:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
    border-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary) !important;
}

.mud-icon-root.mud-svg-icon {
    fill: currentColor;
}

/* ---- Icons on colored surfaces: ensure SVG icons always contrast with background ----
   Icons use fill: currentColor, so they inherit parent color. When parent color matches
   the surface (e.g. avatar/card background), icons become invisible. Force contrast
   for avatars, filled buttons, and other colored containers. */
/* Avatars (e.g. system selector cards, campaign source icons) */
.mud-avatar-filled {
    background: transparent !important;
    background-color: transparent !important;
}
.mud-avatar.mud-avatar-filled-primary .mud-icon-root,
.mud-avatar.mud-avatar-filled-primary .mud-svg-icon,
.mud-avatar.mud-avatar-filled-primary.mud-avatar-filled .mud-icon-root,
.mud-avatar.mud-avatar-filled-primary.mud-avatar-filled .mud-svg-icon {
    color: var(--mud-palette-primary-contrast-text) !important;
    fill: currentColor !important;
}
.mud-avatar.mud-avatar-filled-secondary .mud-icon-root,
.mud-avatar.mud-avatar-filled-secondary .mud-svg-icon,
.mud-avatar.mud-avatar-filled-secondary.mud-avatar-filled .mud-icon-root,
.mud-avatar.mud-avatar-filled-secondary.mud-avatar-filled .mud-svg-icon {
    color: var(--mud-palette-secondary-contrast-text) !important;
    fill: currentColor !important;
}
.mud-avatar.mud-avatar-filled-tertiary .mud-icon-root,
.mud-avatar.mud-avatar-filled-tertiary .mud-svg-icon { color: var(--mud-palette-tertiary-contrast-text) !important; fill: currentColor !important; }
.mud-avatar.mud-avatar-filled-info .mud-icon-root,
.mud-avatar.mud-avatar-filled-info .mud-svg-icon { color: var(--mud-palette-info-contrast-text) !important; fill: currentColor !important; }
.mud-avatar.mud-avatar-filled-success .mud-icon-root,
.mud-avatar.mud-avatar-filled-success .mud-svg-icon { color: var(--mud-palette-success-contrast-text) !important; fill: currentColor !important; }
.mud-avatar.mud-avatar-filled-warning .mud-icon-root,
.mud-avatar.mud-avatar-filled-warning .mud-svg-icon { color: var(--mud-palette-warning-contrast-text) !important; fill: currentColor !important; }
.mud-avatar.mud-avatar-filled-error .mud-icon-root,
.mud-avatar.mud-avatar-filled-error .mud-svg-icon { color: var(--mud-palette-error-contrast-text) !important; fill: currentColor !important; }
.mud-avatar.mud-avatar-filled-dark .mud-icon-root,
.mud-avatar.mud-avatar-filled-dark .mud-svg-icon { color: var(--mud-palette-dark-contrast-text) !important; fill: currentColor !important; }
/* Per-color avatar (when class is on avatar root without .mud-avatar prefix in selector) */
.mud-avatar-filled-primary .mud-icon-root,
.mud-avatar-filled-primary .mud-svg-icon { color: var(--mud-palette-primary-contrast-text) !important; fill: currentColor !important; }
.mud-avatar-filled-secondary .mud-icon-root,
.mud-avatar-filled-secondary .mud-svg-icon { color: var(--mud-palette-secondary-contrast-text) !important; fill: currentColor !important; }
.mud-avatar-filled-tertiary .mud-icon-root,
.mud-avatar-filled-tertiary .mud-svg-icon { color: var(--mud-palette-tertiary-contrast-text) !important; fill: currentColor !important; }
.mud-avatar-filled-info .mud-icon-root,
.mud-avatar-filled-info .mud-svg-icon { color: var(--mud-palette-info-contrast-text) !important; fill: currentColor !important; }
.mud-avatar-filled-success .mud-icon-root,
.mud-avatar-filled-success .mud-svg-icon { color: var(--mud-palette-success-contrast-text) !important; fill: currentColor !important; }
.mud-avatar-filled-warning .mud-icon-root,
.mud-avatar-filled-warning .mud-svg-icon { color: var(--mud-palette-warning-contrast-text) !important; fill: currentColor !important; }
.mud-avatar-filled-error .mud-icon-root,
.mud-avatar-filled-error .mud-svg-icon { color: var(--mud-palette-error-contrast-text) !important; fill: currentColor !important; }
.mud-avatar-filled-dark .mud-icon-root,
.mud-avatar-filled-dark .mud-svg-icon { color: var(--mud-palette-dark-contrast-text) !important; fill: currentColor !important; }
/* Filled buttons: force contrast on button and label only; do not force icons so custom SVGs (e.g. Okta logo) render */
.mud-button-filled-primary,
.mud-button-filled-primary .mud-button-label { color: var(--mud-palette-primary-contrast-text) !important; fill: currentColor !important; }
.mud-button-filled-secondary,
.mud-button-filled-secondary .mud-button-label { color: var(--mud-palette-secondary-contrast-text) !important; fill: currentColor !important; }
.mud-button-filled-tertiary,
.mud-button-filled-tertiary .mud-button-label { color: var(--mud-palette-tertiary-contrast-text) !important; fill: currentColor !important; }
.mud-button-filled-info,
.mud-button-filled-info .mud-button-label { color: var(--mud-palette-info-contrast-text) !important; fill: currentColor !important; }
.mud-button-filled-success,
.mud-button-filled-success .mud-button-label { color: var(--mud-palette-success-contrast-text) !important; fill: currentColor !important; }
.mud-button-filled-warning,
.mud-button-filled-warning .mud-button-label { color: var(--mud-palette-warning-contrast-text) !important; fill: currentColor !important; }
.mud-button-filled-error,
.mud-button-filled-error .mud-button-label { color: var(--mud-palette-error-contrast-text) !important; fill: currentColor !important; }
.mud-button-filled-dark,
.mud-button-filled-dark .mud-button-label { color: var(--mud-palette-dark-contrast-text) !important; fill: currentColor !important; }

/* ========== Snackbar: theme-aligned visibility (light + dark) ==========
   Snackbars are portaled and must explicitly use theme surface + contrast.
   - Container: theme surface background for non-filled; filled keep severity color.
   - Filled (colored bg): use *-contrast-text so message/icon are readable on severity color.
   - Text/outlined variant (surface bg): use text-primary so message is readable on surface. */
.mud-snackbar {
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    box-shadow: var(--syba-card-shadow) !important;
}
/* Non-filled snackbars (default, text variant): use theme surface so they're visible in both themes */
.mud-snackbar:not(.mud-alert-filled-success):not(.mud-alert-filled-error):not(.mud-alert-filled-warning):not(.mud-alert-filled-info):not(.mud-alert-filled-primary):not(.mud-alert-filled-normal),
.mud-snackbar[class*="mud-alert-text-"] {
    background-color: var(--mud-palette-surface) !important;
}
/* Filled snackbar root can carry severity class directly; keep background opaque. */
.mud-snackbar.mud-alert-filled-success { background: var(--mud-palette-success) !important; background-color: var(--mud-palette-success) !important; }
.mud-snackbar.mud-alert-filled-error { background: var(--mud-palette-error) !important; background-color: var(--mud-palette-error) !important; }
.mud-snackbar.mud-alert-filled-warning { background: var(--mud-palette-warning) !important; background-color: var(--mud-palette-warning) !important; }
.mud-snackbar.mud-alert-filled-info { background: var(--mud-palette-info) !important; background-color: var(--mud-palette-info) !important; }
.mud-snackbar.mud-alert-filled-primary { background: var(--mud-palette-primary) !important; background-color: var(--mud-palette-primary) !important; }
.mud-snackbar .mud-snackbar-content,
.mud-snackbar .mud-snackbar-content-message,
.mud-snackbar .mud-alert-message {
    color: inherit !important;
}
.mud-snackbar .mud-icon-root,
.mud-snackbar .mud-svg-icon {
    color: inherit !important;
    fill: currentColor !important;
}
.mud-snackbar .mud-button-root:not([class*="mud-button-filled"]) .mud-button-label,
.mud-snackbar .mud-button-text .mud-button-label {
    color: var(--mud-palette-text-primary) !important;
}

/* Filled snackbars: severity-colored background — force contrast text (overrides base above).
   Include .mud-snackbar-content-message so the message div (where text lives) is visible in light and dark mode. */
.mud-snackbar .mud-alert-filled-success,
.mud-snackbar .mud-alert-filled-success .mud-alert-message,
.mud-snackbar .mud-alert-filled-success .mud-snackbar-content-message,
.mud-snackbar .mud-alert-filled-success .mud-icon-root,
.mud-snackbar .mud-alert-filled-success .mud-svg-icon { color: var(--mud-palette-success-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-alert-filled-error,
.mud-snackbar .mud-alert-filled-error .mud-alert-message,
.mud-snackbar .mud-alert-filled-error .mud-snackbar-content-message,
.mud-snackbar .mud-alert-filled-error .mud-icon-root,
.mud-snackbar .mud-alert-filled-error .mud-svg-icon { color: var(--mud-palette-error-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-alert-filled-warning,
.mud-snackbar .mud-alert-filled-warning .mud-alert-message,
.mud-snackbar .mud-alert-filled-warning .mud-snackbar-content-message,
.mud-snackbar .mud-alert-filled-warning .mud-icon-root,
.mud-snackbar .mud-alert-filled-warning .mud-svg-icon { color: var(--mud-palette-warning-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-alert-filled-info,
.mud-snackbar .mud-alert-filled-info .mud-alert-message,
.mud-snackbar .mud-alert-filled-info .mud-snackbar-content-message,
.mud-snackbar .mud-alert-filled-info .mud-icon-root,
.mud-snackbar .mud-alert-filled-info .mud-svg-icon { color: var(--mud-palette-info-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-alert-filled-primary,
.mud-snackbar .mud-alert-filled-primary .mud-alert-message,
.mud-snackbar .mud-alert-filled-primary .mud-snackbar-content-message,
.mud-snackbar .mud-alert-filled-primary .mud-icon-root,
.mud-snackbar .mud-alert-filled-primary .mud-svg-icon { color: var(--mud-palette-primary-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-alert-filled-normal,
.mud-snackbar .mud-alert-filled-normal .mud-alert-message,
.mud-snackbar .mud-alert-filled-normal .mud-snackbar-content-message,
.mud-snackbar .mud-alert-filled-normal .mud-icon-root,
.mud-snackbar .mud-alert-filled-normal .mud-svg-icon { color: var(--mud-palette-primary-contrast-text) !important; fill: currentColor !important; }
/* Severity without -filled (MudBlazor variant class names) */
.mud-snackbar .mud-alert-success .mud-alert-message,
.mud-snackbar .mud-alert-success .mud-snackbar-content-message,
.mud-snackbar .mud-alert-success .mud-icon-root,
.mud-snackbar .mud-alert-success .mud-svg-icon { color: var(--mud-palette-success-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-alert-error .mud-alert-message,
.mud-snackbar .mud-alert-error .mud-snackbar-content-message,
.mud-snackbar .mud-alert-error .mud-icon-root,
.mud-snackbar .mud-alert-error .mud-svg-icon { color: var(--mud-palette-error-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-alert-warning .mud-alert-message,
.mud-snackbar .mud-alert-warning .mud-snackbar-content-message,
.mud-snackbar .mud-alert-warning .mud-icon-root,
.mud-snackbar .mud-alert-warning .mud-svg-icon { color: var(--mud-palette-warning-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-alert-info .mud-alert-message,
.mud-snackbar .mud-alert-info .mud-snackbar-content-message,
.mud-snackbar .mud-alert-info .mud-icon-root,
.mud-snackbar .mud-alert-info .mud-svg-icon { color: var(--mud-palette-info-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-alert-primary .mud-alert-message,
.mud-snackbar .mud-alert-primary .mud-snackbar-content-message,
.mud-snackbar .mud-alert-primary .mud-icon-root,
.mud-snackbar .mud-alert-primary .mud-svg-icon { color: var(--mud-palette-primary-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-alert-normal .mud-alert-message,
.mud-snackbar .mud-alert-normal .mud-snackbar-content-message,
.mud-snackbar .mud-alert-normal .mud-icon-root,
.mud-snackbar .mud-alert-normal .mud-svg-icon { color: var(--mud-palette-primary-contrast-text) !important; fill: currentColor !important; }

/* Snackbar chip content (when MudBlazor uses chip for message): theme contrast */
.mud-snackbar .mud-chip-color-success,
.mud-snackbar .mud-chip-color-success * { color: var(--mud-palette-success-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-chip-color-error,
.mud-snackbar .mud-chip-color-error * { color: var(--mud-palette-error-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-chip-color-warning,
.mud-snackbar .mud-chip-color-warning * { color: var(--mud-palette-warning-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-chip-color-info,
.mud-snackbar .mud-chip-color-info * { color: var(--mud-palette-info-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-chip-color-primary,
.mud-snackbar .mud-chip-color-primary * { color: var(--mud-palette-primary-contrast-text) !important; fill: currentColor !important; }

/* Page-level filled alerts: ensure text and icons are readable (MudBlazor uses -text which can match background). */
.mud-alert-filled-error,
.mud-alert-filled-error .mud-alert-message,
.mud-alert-filled-error .mud-icon-root,
.mud-alert-filled-error .mud-svg-icon { color: var(--mud-palette-error-contrast-text) !important; fill: currentColor !important; }
.mud-alert-filled-warning,
.mud-alert-filled-warning .mud-alert-message,
.mud-alert-filled-warning .mud-icon-root,
.mud-alert-filled-warning .mud-svg-icon { color: var(--mud-palette-warning-contrast-text) !important; fill: currentColor !important; }
.mud-alert-filled-info,
.mud-alert-filled-info .mud-alert-message,
.mud-alert-filled-info .mud-icon-root,
.mud-alert-filled-info .mud-svg-icon { color: var(--mud-palette-info-contrast-text) !important; fill: currentColor !important; }
.mud-alert-filled-success,
.mud-alert-filled-success .mud-alert-message,
.mud-alert-filled-success .mud-icon-root,
.mud-alert-filled-success .mud-svg-icon { color: var(--mud-palette-success-contrast-text) !important; fill: currentColor !important; }
.mud-alert-filled-primary,
.mud-alert-filled-primary .mud-alert-message,
.mud-alert-filled-primary .mud-icon-root,
.mud-alert-filled-primary .mud-svg-icon { color: var(--mud-palette-primary-contrast-text) !important; fill: currentColor !important; }

/* Dark theme: page-level filled alerts – ensure message body and paragraphs stay visible (MudBlazor can set color: inherit on p). */
html:not([data-theme="light"]) .mud-alert-filled-info .mud-alert-message,
html:not([data-theme="light"]) .mud-alert-filled-info .mud-alert-message p,
html:not([data-theme="light"]) .mud-alert-filled-info .mud-alert-message .mud-typography,
html:not([data-theme="light"]) .mud-alert-filled-info .mud-alert-message strong {
    color: var(--mud-palette-info-contrast-text) !important;
}

/* MudBlazor v8: .mud-alert-text-* = outlined/text variant (surface background, not filled).
   Use text-primary so message/icon/button are always readable on surface in both themes. */
.mud-snackbar.mud-alert-text-success,
.mud-snackbar.mud-alert-text-success .mud-snackbar-content,
.mud-snackbar.mud-alert-text-success .mud-snackbar-content-message,
.mud-snackbar.mud-alert-text-success .mud-button-root,
.mud-snackbar.mud-alert-text-success .mud-icon-root,
.mud-snackbar.mud-alert-text-success .mud-svg-icon,
.mud-snackbar.mud-alert-text-error .mud-snackbar-content,
.mud-snackbar.mud-alert-text-error .mud-snackbar-content-message,
.mud-snackbar.mud-alert-text-error .mud-button-root,
.mud-snackbar.mud-alert-text-error .mud-icon-root,
.mud-snackbar.mud-alert-text-error .mud-svg-icon,
.mud-snackbar.mud-alert-text-warning .mud-snackbar-content,
.mud-snackbar.mud-alert-text-warning .mud-snackbar-content-message,
.mud-snackbar.mud-alert-text-warning .mud-button-root,
.mud-snackbar.mud-alert-text-warning .mud-icon-root,
.mud-snackbar.mud-alert-text-warning .mud-svg-icon,
.mud-snackbar.mud-alert-text-info .mud-snackbar-content,
.mud-snackbar.mud-alert-text-info .mud-snackbar-content-message,
.mud-snackbar.mud-alert-text-info .mud-button-root,
.mud-snackbar.mud-alert-text-info .mud-icon-root,
.mud-snackbar.mud-alert-text-info .mud-svg-icon,
.mud-snackbar.mud-alert-text-primary .mud-snackbar-content,
.mud-snackbar.mud-alert-text-primary .mud-snackbar-content-message,
.mud-snackbar.mud-alert-text-primary .mud-button-root,
.mud-snackbar.mud-alert-text-primary .mud-icon-root,
.mud-snackbar.mud-alert-text-primary .mud-svg-icon { color: var(--mud-palette-text-primary) !important; fill: currentColor !important; }
.mud-snackbar.mud-alert-text-success,
.mud-snackbar.mud-alert-text-error,
.mud-snackbar.mud-alert-text-warning,
.mud-snackbar.mud-alert-text-info,
.mud-snackbar.mud-alert-text-primary { color: var(--mud-palette-text-primary) !important; }

/* Snackbar close/dismiss button: visible in both themes (default = text-primary; on filled = severity contrast) */
.mud-snackbar .mud-button-root.mud-icon-button .mud-icon-root,
.mud-snackbar .mud-button-root.mud-icon-button .mud-svg-icon {
    color: var(--mud-palette-text-primary) !important;
    fill: currentColor !important;
}
.mud-snackbar .mud-alert-filled-success .mud-button-root.mud-icon-button .mud-icon-root,
.mud-snackbar .mud-alert-filled-success .mud-button-root.mud-icon-button .mud-svg-icon { color: var(--mud-palette-success-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-alert-filled-error .mud-button-root.mud-icon-button .mud-icon-root,
.mud-snackbar .mud-alert-filled-error .mud-button-root.mud-icon-button .mud-svg-icon { color: var(--mud-palette-error-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-alert-filled-warning .mud-button-root.mud-icon-button .mud-icon-root,
.mud-snackbar .mud-alert-filled-warning .mud-button-root.mud-icon-button .mud-svg-icon { color: var(--mud-palette-warning-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-alert-filled-info .mud-button-root.mud-icon-button .mud-icon-root,
.mud-snackbar .mud-alert-filled-info .mud-button-root.mud-icon-button .mud-svg-icon { color: var(--mud-palette-info-contrast-text) !important; fill: currentColor !important; }
.mud-snackbar .mud-alert-filled-primary .mud-button-root.mud-icon-button .mud-icon-root,
.mud-snackbar .mud-alert-filled-primary .mud-button-root.mud-icon-button .mud-svg-icon { color: var(--mud-palette-primary-contrast-text) !important; fill: currentColor !important; }

/* Dark mode: ensure snackbar is visible (MudBlazor can leave opacity at 0 from animation in dark theme). */
html:not([data-theme="light"]) .mud-snackbar {
    opacity: 1 !important;
}

/* Dark mode: ensure snackbar message text is always visible (portaled snackbars can miss theme context). */
html:not([data-theme="light"]) .mud-snackbar .mud-snackbar-content-message,
html:not([data-theme="light"]) .mud-snackbar .mud-alert-message {
    color: inherit !important;
}
html:not([data-theme="light"]) .mud-snackbar.mud-alert-filled-success .mud-snackbar-content-message,
html:not([data-theme="light"]) .mud-snackbar.mud-alert-filled-success .mud-alert-message { color: var(--mud-palette-success-contrast-text, var(--mud-palette-text-primary)) !important; }
html:not([data-theme="light"]) .mud-snackbar.mud-alert-filled-error .mud-snackbar-content-message,
html:not([data-theme="light"]) .mud-snackbar.mud-alert-filled-error .mud-alert-message { color: var(--mud-palette-error-contrast-text, var(--mud-palette-text-primary)) !important; }
html:not([data-theme="light"]) .mud-snackbar.mud-alert-filled-warning .mud-snackbar-content-message,
html:not([data-theme="light"]) .mud-snackbar.mud-alert-filled-warning .mud-alert-message { color: var(--mud-palette-warning-contrast-text, var(--mud-palette-text-primary)) !important; }
html:not([data-theme="light"]) .mud-snackbar.mud-alert-filled-info .mud-snackbar-content-message,
html:not([data-theme="light"]) .mud-snackbar.mud-alert-filled-info .mud-alert-message { color: var(--mud-palette-info-contrast-text, var(--mud-palette-text-primary)) !important; }
html:not([data-theme="light"]) .mud-snackbar.mud-alert-filled-primary .mud-snackbar-content-message,
html:not([data-theme="light"]) .mud-snackbar.mud-alert-filled-primary .mud-alert-message { color: var(--mud-palette-primary-contrast-text, var(--mud-palette-text-primary)) !important; }

/* Filled snackbar class can be on the snackbar root itself (not always a descendant). */
.mud-snackbar.mud-alert-filled-success,
.mud-snackbar.mud-alert-filled-success .mud-snackbar-content-message,
.mud-snackbar.mud-alert-filled-success .mud-alert-message { color: var(--mud-palette-success-contrast-text, var(--mud-palette-text-primary)) !important; }
.mud-snackbar.mud-alert-filled-error,
.mud-snackbar.mud-alert-filled-error .mud-snackbar-content-message,
.mud-snackbar.mud-alert-filled-error .mud-alert-message { color: var(--mud-palette-error-contrast-text, var(--mud-palette-text-primary)) !important; }
.mud-snackbar.mud-alert-filled-warning,
.mud-snackbar.mud-alert-filled-warning .mud-snackbar-content-message,
.mud-snackbar.mud-alert-filled-warning .mud-alert-message { color: var(--mud-palette-warning-contrast-text, var(--mud-palette-text-primary)) !important; }
.mud-snackbar.mud-alert-filled-info,
.mud-snackbar.mud-alert-filled-info .mud-snackbar-content-message,
.mud-snackbar.mud-alert-filled-info .mud-alert-message { color: var(--mud-palette-info-contrast-text, var(--mud-palette-text-primary)) !important; }
.mud-snackbar.mud-alert-filled-primary,
.mud-snackbar.mud-alert-filled-primary .mud-snackbar-content-message,
.mud-snackbar.mud-alert-filled-primary .mud-alert-message { color: var(--mud-palette-primary-contrast-text, var(--mud-palette-text-primary)) !important; }

/* ---- Light mode safety overrides ----
   Some pages ship their own “dark-only” selector CSS (dark cards + semi-white text),
   which makes text unreadable in light mode. These overrides keep light mode usable
   even if a page forgot to convert its local <style> block. */
html[data-theme="light"] .text-secondary {
    color: var(--mud-palette-text-primary) !important;
}

/* Light theme readability guardrail:
   keep informational text at primary text contrast instead of blue-tinted secondary tones. */
html[data-theme="light"] .mud-typography-color-inherit,
html[data-theme="light"] .mud-typography-caption,
html[data-theme="light"] .mud-typography-subtitle2 {
    color: var(--mud-palette-text-primary) !important;
}

/* Light theme: metric cards use surface background (white) — ensure numbers and labels are visible.
   Many pages use .metric-value / .metric-label with color: white for dark cards; in light mode
   cards are surface-colored so text must be dark. Applies app-wide (Access Modeling, Audit Analytics,
   Details, Reports, etc.). */
html[data-theme="light"] .metric-card .metric-value,
html[data-theme="light"] .metric-card .metric-label {
    color: var(--mud-palette-text-primary) !important;
}
html[data-theme="light"] .metric-card .metric-icon {
    color: var(--mud-palette-text-primary) !important;
}

/* Light theme: metric card border visible on light background (component defaults to rgba(255,255,255,0.08)). */
html[data-theme="light"] .metric-card {
    border-color: var(--mud-palette-divider) !important;
}

/* Dark mode keeps cyan nav icon accents. */
html[data-theme="dark"] .mud-drawer .mud-nav-link .mud-icon-root,
html[data-theme="dark"] .mud-drawer .mud-nav-group .mud-icon-root,
html:not([data-theme]) .mud-drawer .mud-nav-link .mud-icon-root,
html:not([data-theme]) .mud-drawer .mud-nav-group .mud-icon-root {
    color: var(--syba-primary-text) !important;
}

/* Light mode: unify nav text/icon color in drawer */
html[data-theme="light"] .mud-drawer .mud-nav-link,
html[data-theme="light"] .mud-drawer .mud-nav-link .mud-nav-link-text,
html[data-theme="light"] .mud-drawer .mud-nav-group > button > span,
html[data-theme="light"] .mud-drawer .mud-nav-group > button > .mud-nav-link-text,
html[data-theme="light"] .mud-drawer .mud-nav-link .mud-icon-root,
html[data-theme="light"] .mud-drawer .mud-nav-group .mud-icon-root {
    color: var(--mud-palette-drawer-text) !important;
}

/* ---- Checkbox: ensure tick/checkmark is visible when checked (app-wide, e.g. filters, tables, SYSTEM lists) ---- */
.mud-checkbox.mud-checked .mud-checkbox-icon,
.mud-checkbox.mud-checkbox-checked .mud-checkbox-icon,
.mud-checkbox.mud-checked .mud-icon-root,
.mud-checkbox.mud-checkbox-checked .mud-icon-root,
.mud-checkbox.mud-checked .mud-svg-icon,
.mud-checkbox.mud-checkbox-checked .mud-svg-icon {
    color: var(--mud-palette-primary-contrast-text) !important;
    fill: currentColor !important;
}
.mud-checkbox.mud-checked .mud-checkbox-icon .mud-svg-icon,
.mud-checkbox.mud-checkbox-checked .mud-checkbox-icon .mud-svg-icon {
    color: inherit !important;
    fill: currentColor !important;
}
/* When checkbox has a filled primary background, tick uses contrast text (dark on cyan) */
.mud-checkbox.mud-checked .mud-checkbox-input,
.mud-checkbox.mud-checkbox-checked .mud-checkbox-input {
    background-color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
}

html[data-theme="light"] .system-selector-paper {
    background: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    box-shadow: var(--syba-card-shadow) !important;
}

html[data-theme="light"] .system-card {
    background-color: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-divider) !important;
}

html[data-theme="light"] .system-card:hover {
    border-color: rgba(var(--mud-palette-primary-rgb), 0.45) !important;
    box-shadow: var(--syba-card-shadow) !important;
}

/* Light theme: resource detail "Manage" sidebar – selected list item (all resource pages use dark-only .active locally) */
html[data-theme="light"] .app-details-section-item.active,
html[data-theme="light"] .entra-app-details-section-item.active,
html[data-theme="light"] .user-details-section-item.active,
html[data-theme="light"] .entra-user-details-section-item.active,
html[data-theme="light"] .ad-user-details-section-item.active,
html[data-theme="light"] .group-details-section-item.active,
html[data-theme="light"] .entra-group-details-section-item.active,
html[data-theme="light"] .ad-group-details-section-item.active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 600;
    border-left: 3px solid var(--mud-palette-primary);
}

html[data-theme="light"] .app-details-section-item.active .mud-icon-root,
html[data-theme="light"] .entra-app-details-section-item.active .mud-icon-root,
html[data-theme="light"] .user-details-section-item.active .mud-icon-root,
html[data-theme="light"] .entra-user-details-section-item.active .mud-icon-root,
html[data-theme="light"] .ad-user-details-section-item.active .mud-icon-root,
html[data-theme="light"] .group-details-section-item.active .mud-icon-root,
html[data-theme="light"] .entra-group-details-section-item.active .mud-icon-root,
html[data-theme="light"] .ad-group-details-section-item.active .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* Light theme: resource detail sidebar list item hover */
html[data-theme="light"] .app-details-section-item:hover,
html[data-theme="light"] .entra-app-details-section-item:hover,
html[data-theme="light"] .user-details-section-item:hover,
html[data-theme="light"] .entra-user-details-section-item:hover,
html[data-theme="light"] .ad-user-details-section-item:hover,
html[data-theme="light"] .group-details-section-item:hover,
html[data-theme="light"] .entra-group-details-section-item:hover,
html[data-theme="light"] .ad-group-details-section-item:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05) !important;
}

/* Profile menu (top-right avatar) tweaks */
.profile-menu.mud-menu {
    border: none !important; /* remove boxy outline just for profile menu */
}

.profile-menu-avatar {
    cursor: pointer;
}

.profile-menu-avatar-icon,
.profile-menu-avatar .mud-icon-root,
.profile-menu-avatar .mud-svg-icon {
    color: var(--mud-palette-primary-contrast-text) !important;
    fill: currentColor !important;
}

/* Dark mode: force profile avatar visible (primary background + contrast icon) */
html[data-theme="dark"] .profile-menu-avatar,
html:not([data-theme="light"]) .profile-menu-avatar {
    background-color: var(--mud-palette-primary) !important;
}

html[data-theme="dark"] .profile-menu-avatar-icon,
html[data-theme="dark"] .profile-menu-avatar .mud-icon-root,
html[data-theme="dark"] .profile-menu-avatar .mud-svg-icon,
html:not([data-theme="light"]) .profile-menu-avatar-icon,
html:not([data-theme="light"]) .profile-menu-avatar .mud-icon-root,
html:not([data-theme="light"]) .profile-menu-avatar .mud-svg-icon {
    color: var(--mud-palette-primary-contrast-text) !important;
    fill: currentColor !important;
}

.btn-primary {
    color: var(--mud-palette-primary-contrast-text) !important;
    background-color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: transparent !important;
    color: var(--syba-primary-text) !important;
    border-color: var(--syba-primary-text) !important;
}

.btn-secondary {
    color: var(--mud-palette-text-primary) !important;
    background-color: var(--mud-palette-dark) !important;
    border-color: var(--mud-palette-primary) !important;
    border-radius: 4px;
    font-weight: 600;
}

.btn-secondary:hover {
    background-color: rgba(1, 208, 255, 0.2) !important;
    border-color: var(--mud-palette-primary) !important;
}

.btn-tertiary, 
.btn-warning {
    color: var(--mud-palette-warning-contrast-text) !important;
    background-color: var(--mud-palette-warning) !important;
    border-color: var(--mud-palette-warning) !important;
    border-radius: 4px;
    font-weight: 600;
}

.okta-incidents-button,
.okta-incidents-button .mud-button-label {
    color: #ffffff !important;
}

.btn-tertiary:hover, 
.btn-warning:hover {
    background-color: transparent !important;
    color: var(--mud-palette-warning) !important;
    border-color: var(--mud-palette-warning) !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem rgba(1, 208, 255, 0.4) !important;
}

/* Remove focus box-shadow from Mud text fields and date pickers so they don’t show an extra box */
.mud-text-field .form-control:focus,
.mud-text-field input:focus,
.mud-input-control input:focus {
    box-shadow: none !important;
}

.content {
    padding-top: 1.1rem;
}

h1,
h2 {
    color: var(--mud-palette-text-primary) !important;
    font-weight: 500;
    font-family: var(--syba-font-family);
}

/* Headings h3–h6 use Good Times + the sizes above, so we get a
   distinctive display style without affecting body copy. */
h3 {
    color: var(--mud-palette-text-primary) !important;
    font-weight: 500;
    font-family: Poppins, 'Good Times', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 2rem !important;
}

/* Ensure MudBlazor h3 typography instances also use Good Times, even when
   MudBlazor applies its own .mud-typography-h3 class. */
h3.mud-typography-h3 {
    font-family: Poppins, 'Good Times', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-size: 2rem !important;
}

h4 {
    color: var(--mud-palette-text-primary) !important;
    font-weight: 500;
    font-family: Poppins, 'Good Times', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.8rem !important;
}

h4.mud-typography-h4 {
    font-family: Poppins, 'Good Times', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-size: 1.8rem !important;
}

h5 {
    color: var(--mud-palette-text-primary) !important;
    font-weight: 500;
    font-family: 'Poppins', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-size: 1.5rem !important;
}

h5.mud-typography-h5 {
    font-family: 'Poppins', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-size: 1.5rem !important;
}

h6 {
    color: var(--mud-palette-text-primary) !important;
    font-weight: 700;
    font-family: 'Poppins', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-size: var(--mud-typography-h6-size);
}

h6.mud-typography-h6 {
    font-family: 'Poppins', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-size: var(--mud-typography-h6-size) !important;
}
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-primary) !important;
}

.invalid {
    outline: 1px solid var(--mud-palette-error) !important;
}

.validation-message {
    color: var(--mud-palette-error) !important;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #333333;
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-error);
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: var(--mud-palette-primary) !important;
}

/* Allow complex MudAlert content (cards/grids) to use full width.
   MudBlazor renders inner content inside `.mud-alert-position` (flex by default),
   which can constrain nested `width:100%` layouts. Scope to only alerts that opt in. */
.syba-alert-fullwidth .mud-alert-position {
    display: block !important;
    width: 100%;
}

.syba-alert-fullwidth .mud-alert-message {
    width: 100%;
    max-width: 100%;
}

.syba-alert-fullwidth .mud-alert-icon {
    margin-bottom: 0.5rem;
}

.form-control, input, select, textarea {
    color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-palette-divider) !important;
}

/* Avoid native file input rendering glitches in WebKit when a global radius is forced. */
.form-control,
input:not([type="file"]),
select,
textarea {
    border-radius: var(--syba-control-radius);
}

/* Apply size/shape only to text-like native controls (avoid checkboxes/radios/etc). */
.form-control,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
    padding: var(--syba-control-padding-y) var(--syba-control-padding-x);
}

.form-floating > .form-control-plaintext::placeholder, 
.form-floating > .form-control::placeholder {
    color: #666666 !important;
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, 
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Dark Theme Styles */
#blazor-error-ui {
    background-color: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-primary) !important;
    color: var(--mud-palette-text-primary) !important;
    border-radius: 4px;
}

#blazor-error-ui a {
    color: var(--syba-primary-text) !important;
}

.form-control, .mud-input {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-palette-divider) !important;
}

.form-control:focus, .mud-input:focus {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-palette-primary) !important;
}

.mud-dialog {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-radius: 8px;
    box-shadow: var(--syba-card-shadow) !important;
    border: 1px solid var(--mud-palette-divider) !important;
}

.mud-dialog-title {
    background: transparent !important;
    color: var(--mud-palette-text-primary) !important;
    border-bottom: 1px solid var(--mud-palette-divider) !important;
}

.mud-dialog-content {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.mud-dialog-actions {
    background: transparent !important;
    border-top: 1px solid var(--mud-palette-divider) !important;
}

.mud-select-input {
    /*
    background-color: #333333 !important;
    */
    color: var(--mud-palette-text-primary) !important;
}

.mud-input-label-outlined
{
    background-color: transparent !important;
}

/* Dialog-specific: make outlined labels blend into dialog surface */
.scim-group-mapping-dialog .mud-input-label-outlined,
.scim-group-mapping-dialog .mud-input-label-inputcontrol {
    background-color: var(--mud-palette-surface) !important;
    padding-left: 4px;
    padding-right: 4px;
}

.mud-input-control>.mud-input-control-input-container>div.mud-input.mud-input-text {
     margin-top: 0px !important; 
}

.mud-input.mud-input-underline:before {
    border-bottom: none !important;
}

.mud-list {
    background-color: transparent !important;
}

/* Exception: Lists used in dropdowns/menus should have visible background */
.mud-select-menu .mud-list,
.mud-popover .mud-list,
.mud-menu .mud-list {
    background-color: var(--mud-palette-surface) !important;
}

.mud-input.mud-input-underline:after
{
    border-bottom: none !important;
}
.mud-table-pagination-toolbar {
    border-top: 1px solid rgba(1, 208, 255, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 8px 16px !important;
    flex-wrap: wrap !important;
    background-color: var(--mud-palette-surface) !important;
    height: auto !important;
    min-height: 52px !important;
}

/* Fix the rows per page select dropdown size - wide enough for "10, 25, 50, 100" */
.mud-table-pagination-select {
    min-width: 100px !important;
    max-width: 140px !important;
}

.mud-table-pagination-select .mud-input-control {
    min-width: 100px !important;
    max-width: 140px !important;
}

.mud-table-pagination-select .mud-input {
    min-width: 100px !important;
    max-width: 140px !important;
}

.mud-table-pagination-select .mud-select {
    min-width: 100px !important;
    max-width: 140px !important;
    min-height: 40px !important;
}

.mud-table-pagination-select .mud-input-slot {
    padding: 8px 12px !important;
    min-height: 40px !important;
}

/* Style the rows per page label */
.mud-table-pagination-caption {
    white-space: nowrap !important;
    font-size: 0.875rem !important;
}

/* Fix pagination actions spacing */
.mud-table-pagination-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Ensure pagination display text doesn't wrap */
.mud-table-pagination-spacer {
    flex-grow: 1 !important;
}

.mud-table-pagination-display-text {
    white-space: nowrap !important;
    font-size: 0.875rem !important;
}

/* Table footer must be visible (override global transparency) */
.mud-table-foot {
    background-color: var(--mud-palette-surface) !important;
    background: var(--mud-palette-surface) !important;
}

.mud-table-pagination-toolbar .mud-select,
.mud-table-pagination-toolbar .mud-input,
.mud-table-pagination-toolbar .mud-button-root {
    color: var(--mud-palette-text-primary) !important;
}

/* Table toolbar search and filter inputs - ensure visible and correctly sized */
.mud-table-toolbar .mud-input-control .mud-input,
.mud-table-toolbar .mud-input.mud-input-outlined,
.mud-table-toolbar .mud-input.mud-input-underline,
.mud-table-toolbar .mud-text-field .mud-input {
    min-height: 40px !important;
}

.mud-table-toolbar .mud-input-control .mud-input .mud-input-slot,
.mud-table-toolbar .mud-input-slot {
    min-height: 38px !important;
    padding: 8px 12px !important;
}

/* Card/paper header search fields (e.g. "Search products...") */
.table-header .mud-input-control .mud-input.mud-input-outlined,
.table-header .mud-input.mud-input-outlined,
.data-table-card .mud-input.mud-input-outlined,
.mud-paper .table-header .mud-text-field .mud-input {
    min-height: 40px !important;
}

.table-header .mud-input.mud-input-outlined .mud-input-slot,
.data-table-card .mud-input.mud-input-outlined .mud-input-slot {
    min-height: 38px !important;
    padding: 8px 12px !important;
}

/* Visible border for search/input in table headers and cards */
.table-header .mud-input-control .mud-input-outlined-border,
.data-table-card .mud-input-control .mud-input-outlined-border,
.mud-table-toolbar .mud-input-control .mud-input-outlined-border {
    border-color: rgba(1, 208, 255, 0.4) !important;
}

.mud-input-label {
    /* Don't override label text color globally (breaks MudBlazor Color=... and focus states) */
    background-color: var(--mud-palette-background) !important;
}

.mud-input-adorned-end {
    color: var(--mud-palette-text-primary) !important;
}

.mud-table-container {
    background: transparent !important;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

.mud-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

/* Global table cell defaults: wrap content, never force horizontal scrolling */
.mud-table-cell {
    color: var(--mud-palette-text-primary) !important;
    border-bottom: 1px solid rgba(1, 208, 255, 0.5) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    min-width: 0 !important;
    padding: 8px 16px !important;
    vertical-align: top;
    line-height: 1.4;
}

.mud-table-root {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.mud-table-head {
    background: transparent !important;
    border-bottom: 1px solid var(--mud-palette-divider) !important;
}

.mud-table-head th,
.mud-table-head .mud-table-cell {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--syba-primary-text) !important;
}

/* Internal Audit table: allow wrapping and top-align cells so content does not overlap */
.syba-internal-audit-table .mud-table-cell {
    white-space: normal !important;
    vertical-align: top;
}

.mud-tabs-toolbar {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.mud-tab {
    color: var(--mud-palette-text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.mud-tab.mud-tab-active {
    color: var(--mud-palette-primary) !important;
    font-weight: 700;
    border-bottom: 3px solid var(--mud-palette-primary) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
}

.mud-tab:hover:not(.mud-tab-active) {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Light mode: MudBlazor tabs with Color.Primary get a solid primary toolbar background
   that is unreadable with cyan (#01d0ff). Force transparent and use high-contrast text. */
html[data-theme="light"] .mud-tabs-toolbar {
    background: var(--mud-palette-surface) !important;
    background-color: var(--mud-palette-surface) !important;
}

html[data-theme="light"] .mud-tab {
    color: var(--mud-palette-text-secondary) !important;
}

html[data-theme="light"] .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary-darken) !important;
    border-bottom-color: var(--mud-palette-primary-darken) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
}

html[data-theme="light"] .mud-tab:hover:not(.mud-tab-active) {
    color: var(--mud-palette-text-primary) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06) !important;
}

.mud-card-header {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.mud-card-header .mud-card-header-content .mud-typography-subtitle1,
.mud-card-header .mud-card-header-content .mud-typography-subtitle2 {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--syba-primary-text) !important;
}

.mud-card-content, .mud-card-actions {
    color: var(--mud-palette-text-primary) !important;
}

.mud-chart-legend {
    background-color: transparent !important;
}

.mud-chart-legend-item {
    color: var(--mud-palette-text-primary) !important;
}

.mud-list {

    color: var(--mud-palette-text-primary) !important;
    border-radius: 8px;
    /*
    border: 1px solid #01d0ff !important;
    background-color: #000000 !important;
    */
}

.mud-list-item {
    color: var(--mud-palette-text-primary) !important;
}

.mud-list-item:hover {
    background-color: rgba(1, 208, 255, 0.05) !important;
}

/* Bell icon badge layout: grid keeps icon and overlay aligned */
.mud-badge-root {
    position: relative;
    display: grid;
}

/* MudBlazor's .mud-theme-* classes (applied to filled badges/chips/buttons)
   set `color: var(--mud-palette-*-text)`. In this theme the `*-text` tokens are
   "colored text" variants that match the main color itself, which makes the
   badge count invisible (#01d0ff text on #01d0ff background, etc.). Force the
   proper contrast text variable specifically for badges so the count is always
   readable while leaving the `*-text` tokens intact for existing colored-text
   usages elsewhere (Home.razor status chips, MainLayout sidebar, etc.). */
.mud-badge.mud-theme-primary   { color: var(--mud-palette-primary-contrast-text)   !important; }
.mud-badge.mud-theme-secondary { color: var(--mud-palette-secondary-contrast-text) !important; }
.mud-badge.mud-theme-tertiary  { color: var(--mud-palette-tertiary-contrast-text)  !important; }
.mud-badge.mud-theme-info      { color: var(--mud-palette-info-contrast-text)      !important; }
.mud-badge.mud-theme-success   { color: var(--mud-palette-success-contrast-text)   !important; }
.mud-badge.mud-theme-warning   { color: var(--mud-palette-warning-contrast-text)   !important; }
.mud-badge.mud-theme-error     { color: var(--mud-palette-error-contrast-text)     !important; }
.mud-badge.mud-theme-dark      { color: var(--mud-palette-dark-contrast-text)      !important; }

.mud-menu {
    background-color: transparent !important;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
    border: 0px !important;
    overflow: visible !important;
}

.mud-menu-item {
    color: var(--mud-palette-text-primary) !important;
}

/* Secondary text should follow readable text tokens, not accent palette colors. */
.mud-secondary-text {
    color: var(--mud-palette-text-secondary) !important;
    --mud-ripple-color: var(--mud-palette-text-secondary) !important;
}

/* Dark mode readability boost for secondary text used in summary dashboards/cards. */
html[data-theme="dark"] .mud-secondary-text,
html:not([data-theme]) .mud-secondary-text {
    color: var(--mud-palette-text-primary) !important;
    --mud-ripple-color: var(--mud-palette-text-primary) !important;
}

.mud-menu-item:hover {
    background-color: rgba(1, 208, 255, 0.05) !important;
}

.table {
    color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-palette-divider) !important;
}

.table th, .table td {
    border-color: var(--mud-palette-divider) !important;
}

/* Fix table zebra-striping */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(1, 208, 255, 0.02) !important;
}

/* Fix table hover */
.table-hover tbody tr:hover {
    background-color: rgba(1, 208, 255, 0.05) !important;
}

/* Dropdown menus */
.dropdown-menu {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-palette-divider) !important;
    box-shadow: var(--syba-card-shadow);
    border-radius: 6px;
}

.dropdown-item {
    color: var(--mud-palette-text-primary) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(1, 208, 255, 0.05) !important;
    color: var(--syba-primary-text) !important;
}

.form-label, label {
    color: var(--mud-palette-text-primary) !important;
    font-weight: 500;
}

/* Card styling */
.card {
    background-color: var(--mud-palette-surface) !important;
    border-color: var(--mud-palette-divider) !important;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    overflow: visible !important;
}

/* Keep MudBlazor Card/Paper default overflow behavior so scroll containers work correctly.
   Scoped components can still opt-in with explicit overflow rules where needed. */

/* Tables inside cards/papers: contained, no side-scrolling */
.mud-card .mud-table-container,
.mud-paper .mud-table-container {
    overflow-x: hidden !important;
}

/* OU list paper needs dedicated scrolling behavior */
.ou-list-paper {
    overflow: auto !important;
    max-height: 400px;
}

.ou-list-paper.expanded {
    max-height: 65vh;
}

/* Toolbar for the OU list with filter count and expand/collapse button */
.ou-list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* OU tree row with expand icon, switch, and name */
.ou-tree-row {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 2px 0;
}

.ou-tree-row:hover {
    background-color: rgba(1, 208, 255, 0.05);
    border-radius: 4px;
}

/* Expand/collapse button for tree nodes */
.ou-expand-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 2px !important;
    flex-shrink: 0;
}

/* Placeholder to maintain alignment when no expand button */
.ou-expand-placeholder {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* OU name text - truncate with ellipsis */
.ou-dn-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.card-header {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-bottom-color: var(--mud-palette-divider) !important;
    font-weight: 600;
}

.card-footer {
    background-color: var(--mud-palette-surface) !important;
    border-top-color: var(--mud-palette-divider) !important;
}

/* MudBlazor drawer */
.mud-drawer {
    background-color: var(--mud-palette-drawer-background) !important;
    color: var(--mud-palette-drawer-text) !important;
    border-right: 1px solid var(--mud-palette-divider) !important;
}

.mud-drawer.mud-drawer-mini {
    width: 56px;
}

.mud-drawer .mud-nav-link-text {
    color: var(--mud-palette-drawer-text) !important;
}

.mud-drawer .mud-nav-link.active {
    background-color: rgba(1, 208, 255, 0.1) !important;
    color: var(--mud-palette-primary) !important;
}

html[data-theme="light"] .mud-drawer .mud-nav-link.active {
    background-color: rgba(15, 23, 42, 0.04) !important;
    color: var(--mud-palette-drawer-text) !important;
}

.mud-nav-group > button {
    background-color: transparent !important;
}

.mud-nav-group > button > span {
    color: var(--mud-palette-drawer-icon) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.mud-nav-group > button > .mud-nav-link-text {
    color: var(--mud-palette-text-primary) !important;
}

html[data-theme="light"] .mud-nav-group > button > span,
html[data-theme="light"] .mud-nav-group > button > .mud-nav-link-text {
    color: var(--mud-palette-drawer-text) !important;
}

/* Custom navigation text styling */
.nav-text {
    color: var(--mud-palette-text-secondary) !important;
    font-weight: 500;
}

/* Connector-specific nav icons in the left drawer */
.mud-drawer .connector-icon-group > button .mud-nav-link-icon.mud-icon-root:not(.mud-nav-link-expand-icon) {
    font-size: 0 !important;
    line-height: 1 !important;
    width: 20px;
    height: 20px;
    display: inline-block;
    color: transparent !important;
    fill: transparent !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.mud-drawer .connector-icon-group > button .mud-nav-link-icon.mud-icon-root:not(.mud-nav-link-expand-icon) path {
    fill: transparent !important;
}

.mud-drawer .connector-icon-group-okta > button .mud-nav-link-icon.mud-icon-root:not(.mud-nav-link-expand-icon) {
    background-image: url('/images/vendors/okta.svg');
}

.mud-drawer .connector-icon-group-entra > button .mud-nav-link-icon.mud-icon-root:not(.mud-nav-link-expand-icon) {
    background-image: url('/images/vendors/entra.svg');
}

.mud-drawer .connector-icon-group-adobe > button .mud-nav-link-icon.mud-icon-root:not(.mud-nav-link-expand-icon) {
    background-image: url('/images/vendors/adobe.svg');
}

.mud-drawer .connector-icon-group-ad > button .mud-nav-link-icon.mud-icon-root:not(.mud-nav-link-expand-icon) {
    background-image: url('/images/vendors/active-directory-icon.png');
}

.mud-drawer .connector-icon-group-salesforce > button .mud-nav-link-icon.mud-icon-root:not(.mud-nav-link-expand-icon) {
    background-image: url('/images/vendors/Salesforce.svg');
}

/* Monochrome vendor icons need inversion in dark theme */
html[data-theme="dark"] .mud-drawer .connector-icon-group-okta > button .mud-nav-link-icon.mud-icon-root:not(.mud-nav-link-expand-icon),
html:not([data-theme="light"]) .mud-drawer .connector-icon-group-okta > button .mud-nav-link-icon.mud-icon-root:not(.mud-nav-link-expand-icon),
html[data-theme="dark"] .mud-drawer .connector-icon-group-ad > button .mud-nav-link-icon.mud-icon-root:not(.mud-nav-link-expand-icon),
html:not([data-theme="light"]) .mud-drawer .connector-icon-group-ad > button .mud-nav-link-icon.mud-icon-root:not(.mud-nav-link-expand-icon) {
    filter: brightness(0) invert(1);
}

/* Recent Syncs section styling improvements */
.recent-syncs-paper {
    transition: all 0.3s ease;
    height: 100%;
}

.recent-syncs-title {
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 8px;
}

.recent-syncs-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--mud-palette-primary);
}

.mud-list.sync-list {
    padding: 8px 0 !important;
    background-color: transparent !important;
}

.mud-list-item.sync-list-item {
    border-radius: 4px;
    margin-bottom: 0px;
    transition: all 0.2s ease;
    background-color: rgba(1, 208, 255, 0.03);
}

.mud-list-item.sync-list-item:hover {
    background-color: rgba(1, 208, 255, 0.08) !important;
    transform: translateX(2px);
}

.sync-tenant-name {
    font-weight: 600 !important;
    letter-spacing: 0.3px;
}

.sync-time-chip {
    font-size: 0.75rem !important;
    height: 24px !important;
    font-weight: 500 !important;
}

.sync-time-chip.success {
    background-color: rgba(76, 175, 80, 0.15) !important;
    color: #81c784 !important;
}

.sync-time-chip.warning {
    background-color: rgba(255, 152, 0, 0.15) !important;
    color: #ffb74d !important;
}

.sync-all-button {
    margin-top: 8px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

.sync-all-button:hover {
    background-color: rgba(1, 208, 255, 0.1) !important;
    transform: translateY(-1px);
}

/* MudBlazor search input styling */
.mud-input-slot.mud-input-root.mud-input-root-text,
.mud-input-slot.mud-input-root.mud-input-root-adorned-start,
.mud-input-root.mud-input-root-text.mud-input-root-adorned-start,
.mud-input-root.mud-input-root-adorned-start {
   /* background-color: #000000 !important;
   border: 1px solid #01d0ff !important;
   */
    color: var(--mud-palette-text-primary) !important;
    border-radius: 4px !important;
    padding-left: 10px;
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    border: none !important;
}

.input-border {
    border: var(--mud-palette-primary) !important;
    background-color: transparent !important;
    border-radius: 10px !important;
    border-width: 5px !important;
}

/* Remove all borders from mud-input elements except bottom border */
.mud-input.mud-input-text.mud-input-adorned-start.mud-input-underline {
    border: none !important;
    border-bottom: 1px solid var(--mud-palette-primary) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

.mud-input.mud-input-text.mud-input-adorned-start.mud-input-underline input.mud-input-slot,
.mud-input.mud-input-text.mud-input-adorned-start.mud-input-underline .mud-input-slot {
    border: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

.mud-input-root.mud-input-root-adorned-start:hover,
.mud-input-root.mud-input-root-adorned-start:focus {
    background-color: rgba(1, 208, 255, 0.05) !important;
}

.mud-input-adornment {
    color: var(--syba-primary-text) !important;
}

/* MudBlazor chips: keep labels readable and prevent vertical letter stacking. */
.mud-chip {
    max-width: 100%;
    height: auto !important;
    min-height: 32px;
}
.mud-chip .mud-chip-content {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.2;
}

.mud-chip .mud-chip-close-button {
    margin-right: 0 !important;
    margin-inline-end: 0 !important;
    margin-left: 6px !important;
    margin-inline-start: 6px !important;
    flex: 0 0 auto;
}

/* Use MudBlazor defaults for chip close buttons to avoid icon clipping. */

/* Resources section: prevent close glyph clipping from negative inline-end spacing. */
.resources-layout .mud-chip .mud-chip-close-button {
    margin-right: 0 !important;
    margin-inline-end: 0 !important;
    margin-left: 6px !important;
    margin-inline-start: 6px !important;
    flex: 0 0 auto;
}

/* Resources section: keep chip text/icon vertically centered in dense layouts. */
.resources-layout .mud-chip {
    min-height: 32px;
    align-items: center;
}
.resources-layout .mud-chip .mud-chip-content {
    line-height: 1.2;
}
.resources-layout .mud-chip .mud-chip-close-button .mud-icon-button-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Opt-in utility for chips that intentionally need multiline content. */
.mud-chip.chip-wrap .mud-chip-content,
.chip-wrap .mud-chip-content {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* MudBlazor chips: ensure both label + icons have correct contrast text.
   Be defensive about MudBlazor class names across versions (filled vs variant-filled).
   SVG/path icons (e.g. tick in selected state) are forced to white so they stay visible
   when the icon sits on a dark checkbox/box in both light and dark themes. */
.mud-chip-color-primary.mud-chip-filled,
.mud-chip-color-primary.mud-chip-variant-filled,
.mud-chip-color-primary.mud-chip-filled *,
.mud-chip-color-primary.mud-chip-variant-filled * { color: var(--mud-palette-primary-contrast-text) !important;}
.mud-chip-color-primary.mud-chip-filled .mud-svg-icon,
.mud-chip-color-primary.mud-chip-variant-filled .mud-svg-icon,
.mud-chip-color-primary.mud-chip-filled .mud-svg-icon path,
.mud-chip-color-primary.mud-chip-variant-filled .mud-svg-icon path,
.mud-chip-color-primary.mud-chip-filled svg path,
.mud-chip-color-primary.mud-chip-variant-filled svg path { color: inherit !important;}

.mud-chip-color-secondary.mud-chip-filled,
.mud-chip-color-secondary.mud-chip-variant-filled,
.mud-chip-color-secondary.mud-chip-filled *,
.mud-chip-color-secondary.mud-chip-variant-filled * { color: var(--mud-palette-secondary-contrast-text) !important; }
.mud-chip-color-secondary.mud-chip-filled .mud-svg-icon,
.mud-chip-color-secondary.mud-chip-variant-filled .mud-svg-icon,
.mud-chip-color-secondary.mud-chip-filled .mud-svg-icon path,
.mud-chip-color-secondary.mud-chip-variant-filled .mud-svg-icon path,
.mud-chip-color-secondary.mud-chip-filled svg path,
.mud-chip-color-secondary.mud-chip-variant-filled svg path { color: inherit !important; }

.mud-chip-color-tertiary.mud-chip-filled,
.mud-chip-color-tertiary.mud-chip-variant-filled,
.mud-chip-color-tertiary.mud-chip-filled *,
.mud-chip-color-tertiary.mud-chip-variant-filled * {margin-right: 0px;margin-left: 0px;margin-inline-end: 0px; color: var(--mud-palette-tertiary-contrast-text) !important; }
.mud-chip-color-tertiary.mud-chip-filled .mud-svg-icon,
.mud-chip-color-tertiary.mud-chip-variant-filled .mud-svg-icon,
.mud-chip-color-tertiary.mud-chip-filled .mud-svg-icon path,
.mud-chip-color-tertiary.mud-chip-variant-filled .mud-svg-icon path,
.mud-chip-color-tertiary.mud-chip-filled svg path,
.mud-chip-color-tertiary.mud-chip-variant-filled svg path { color: inherit !important; }

.mud-chip-color-info.mud-chip-filled,
.mud-chip-color-info.mud-chip-variant-filled,
.mud-chip-color-info.mud-chip-filled *,
.mud-chip-color-info.mud-chip-variant-filled * { color: var(--mud-palette-info-contrast-text) !important; }
.mud-chip-color-info.mud-chip-filled .mud-svg-icon,
.mud-chip-color-info.mud-chip-variant-filled .mud-svg-icon,
.mud-chip-color-info.mud-chip-filled .mud-svg-icon path,
.mud-chip-color-info.mud-chip-variant-filled .mud-svg-icon path,
.mud-chip-color-info.mud-chip-filled svg path,
.mud-chip-color-info.mud-chip-variant-filled svg path { color: inherit !important; }

.mud-chip-color-success.mud-chip-filled,
.mud-chip-color-success.mud-chip-variant-filled,
.mud-chip-color-success.mud-chip-filled *,
.mud-chip-color-success.mud-chip-variant-filled * { color: var(--mud-palette-success-contrast-text) !important;}
.mud-chip-color-success.mud-chip-filled .mud-svg-icon,
.mud-chip-color-success.mud-chip-variant-filled .mud-svg-icon,
.mud-chip-color-success.mud-chip-filled .mud-svg-icon path,
.mud-chip-color-success.mud-chip-variant-filled .mud-svg-icon path,
.mud-chip-color-success.mud-chip-filled svg path,
.mud-chip-color-success.mud-chip-variant-filled svg path { color: inherit !important;}

.mud-chip-color-warning.mud-chip-filled,
.mud-chip-color-warning.mud-chip-variant-filled,
.mud-chip-color-warning.mud-chip-filled *,
.mud-chip-color-warning.mud-chip-variant-filled * { color: var(--mud-palette-warning-contrast-text) !important; }
.mud-chip-color-warning.mud-chip-filled .mud-svg-icon,
.mud-chip-color-warning.mud-chip-variant-filled .mud-svg-icon,
.mud-chip-color-warning.mud-chip-filled .mud-svg-icon path,
.mud-chip-color-warning.mud-chip-variant-filled .mud-svg-icon path,
.mud-chip-color-warning.mud-chip-filled svg path,
.mud-chip-color-warning.mud-chip-variant-filled svg path { color: inherit !important; }

.mud-chip-color-error.mud-chip-filled,
.mud-chip-color-error.mud-chip-variant-filled,
.mud-chip-color-error.mud-chip-filled *,
.mud-chip-color-error.mud-chip-variant-filled * { color: var(--mud-palette-error-contrast-text) !important;}
.mud-chip-color-error.mud-chip-filled .mud-svg-icon,
.mud-chip-color-error.mud-chip-variant-filled .mud-svg-icon,
.mud-chip-color-error.mud-chip-filled .mud-svg-icon path,
.mud-chip-color-error.mud-chip-variant-filled .mud-svg-icon path,
.mud-chip-color-error.mud-chip-filled svg path,
.mud-chip-color-error.mud-chip-variant-filled svg path { color: inherit !important; }

.mud-chip-color-dark.mud-chip-filled,
.mud-chip-color-dark.mud-chip-variant-filled,
.mud-chip-color-dark.mud-chip-filled *,
.mud-chip-color-dark.mud-chip-variant-filled * { color: var(--mud-palette-dark-contrast-text) !important; }
.mud-chip-color-dark.mud-chip-filled .mud-svg-icon,
.mud-chip-color-dark.mud-chip-variant-filled .mud-svg-icon,
.mud-chip-color-dark.mud-chip-filled .mud-svg-icon path,
.mud-chip-color-dark.mud-chip-variant-filled .mud-svg-icon path,
.mud-chip-color-dark.mud-chip-filled svg path,
.mud-chip-color-dark.mud-chip-variant-filled svg path { color: inherit !important;  }

/* Default filled chips (no explicit color): keep readable text and icons visible */
.mud-chip-filled:not([class*="mud-chip-color-"]) *,
.mud-chip-variant-filled:not([class*="mud-chip-color-"]) * { color: var(--mud-palette-text-primary) !important; }
.mud-chip-filled:not([class*="mud-chip-color-"]) .mud-svg-icon,
.mud-chip-variant-filled:not([class*="mud-chip-color-"]) .mud-svg-icon,
.mud-chip-filled:not([class*="mud-chip-color-"]) .mud-svg-icon path,
.mud-chip-variant-filled:not([class*="mud-chip-color-"]) .mud-svg-icon path,
.mud-chip-filled:not([class*="mud-chip-color-"]) svg path,
.mud-chip-variant-filled:not([class*="mud-chip-color-"]) svg path { color: var(--mud-palette-text-primary) !important; fill: var(--mud-palette-text-primary) !important; }

/* Light mode outlined chips can appear too faint on white surfaces.
   Note: fill is intentionally omitted from the * wildcard — applying fill:currentColor to
   SVG path elements via * makes the close-button icon invisible on outlined chips. */
html[data-theme="light"] .mud-chip-color-primary.mud-chip-outlined,
html[data-theme="light"] .mud-chip-color-primary.mud-chip-variant-outlined {
    color: var(--syba-primary-text) !important;
    border-color: var(--syba-primary-text) !important;
}
html[data-theme="light"] .mud-chip-color-primary.mud-chip-outlined *,
html[data-theme="light"] .mud-chip-color-primary.mud-chip-variant-outlined * {
    color: var(--syba-primary-text) !important;
}

/* Close button (X) on outlined primary chips: match chip text color so the icon is visible. */
html[data-theme="light"] .mud-chip-color-primary.mud-chip-outlined .mud-chip-close-button .mud-icon-root,
html[data-theme="light"] .mud-chip-color-primary.mud-chip-variant-outlined .mud-chip-close-button .mud-icon-root,
html[data-theme="light"] .mud-chip-color-primary.mud-chip-outlined .mud-chip-close-button .mud-svg-icon,
html[data-theme="light"] .mud-chip-color-primary.mud-chip-variant-outlined .mud-chip-close-button .mud-svg-icon,
html[data-theme="light"] .mud-chip-color-primary.mud-chip-outlined .mud-chip-close-button .mud-icon-button-label,
html[data-theme="light"] .mud-chip-color-primary.mud-chip-variant-outlined .mud-chip-close-button .mud-icon-button-label {
    color: var(--syba-primary-text) !important;
    fill: var(--syba-primary-text) !important;
}
/*
html[data-theme="light"] .mud-chip-color-primary.mud-chip-outlined .mud-chip-close-button .mud-icon-button-label path,
html[data-theme="light"] .mud-chip-color-primary.mud-chip-variant-outlined .mud-chip-close-button .mud-icon-button-label path {
    fill: var(--syba-primary-text) !important;
}
    */

html[data-theme="light"] .mud-chip-color-info.mud-chip-outlined,
html[data-theme="light"] .mud-chip-color-info.mud-chip-variant-outlined {
    color: var(--mud-palette-info-text) !important;
    border-color: var(--mud-palette-info-text) !important;
}
html[data-theme="light"] .mud-chip-color-info.mud-chip-outlined *,
html[data-theme="light"] .mud-chip-color-info.mud-chip-variant-outlined * {
    color: var(--mud-palette-info-text) !important;
}

/* Close button on outlined info chips. */
html[data-theme="light"] .mud-chip-color-info.mud-chip-outlined .mud-chip-close-button .mud-icon-button-label,
html[data-theme="light"] .mud-chip-color-info.mud-chip-variant-outlined .mud-chip-close-button .mud-icon-button-label {
    color: var(--mud-palette-info-text) !important;
    fill: var(--mud-palette-info-text) !important;
}
html[data-theme="light"] .mud-chip-color-info.mud-chip-outlined .mud-chip-close-button .mud-icon-button-label path,
html[data-theme="light"] .mud-chip-color-info.mud-chip-variant-outlined .mud-chip-close-button .mud-icon-button-label path {
    fill: var(--mud-palette-info-text) !important;
}

/* User portal: fix SVG icon fill in outlined chips.
   The global fill:currentColor !important on * overrides path[fill="none"]
   bounding boxes, making them visible and covering the real icon shape.
   We restore the correct fill per element type here. */
.user-portal-layout .mud-chip-outlined .mud-svg-icon,
.user-portal-layout .mud-chip-variant-outlined .mud-svg-icon {
    fill: currentColor !important;
}
.user-portal-layout .mud-chip-outlined .mud-svg-icon path,
.user-portal-layout .mud-chip-variant-outlined .mud-svg-icon path {
    fill: inherit !important;
}
.user-portal-layout .mud-chip-outlined .mud-svg-icon path[fill="none"],
.user-portal-layout .mud-chip-variant-outlined .mud-svg-icon path[fill="none"] {
    fill: none !important;
}

/* User portal: remove outlined toggle-group border for cleaner look. */
.user-portal-layout .mud-toggle-group-outlined {
    border-width: 0 !important;
}

/* User portal: remove table pager top divider line. */
.user-portal-layout .mud-table-pagination-toolbar {
    border-top-width: 0 !important;
}

/* NOTE: legacy semantic variables (e.g. --background-color, --text-color) are now defined per-theme
   via html[data-theme=\"dark\"|\"light\"] near the top of this file. */

/* License Chart styling */
.license-chart-title {
    font-weight: 700 !important;
}

/* Blazor Reconnect Modal Styling */
#components-reconnect-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    /* Hidden by default. Blazor toggles state classes to show/hide this element. */
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--syba-font-family) !important;
}

/* Show the reconnect overlay only when Blazor marks it as visible */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed {
    display: flex !important;
}

/* Explicitly hide when Blazor marks it hidden (defensive) */
#components-reconnect-modal.components-reconnect-hide {
    display: none !important;
}

#components-reconnect-modal::before {
    content: "Connection Lost - Reconnecting..." !important;
    display: block !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 2px solid var(--mud-palette-primary) !important;
    border-radius: 12px !important;
    padding: 24px 32px !important;
    box-shadow: 0 8px 32px rgba(1, 208, 255, 0.4) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-align: center !important;
    min-width: 350px !important;
    max-width: 500px !important;
    backdrop-filter: blur(10px) !important;
    animation: reconnect-pulse 2s infinite !important;
}

/* Add a pulsing animation */
@keyframes reconnect-pulse {
    0% {
        box-shadow: 0 8px 32px rgba(1, 208, 255, 0.3);
        border-color: var(--mud-palette-primary);
    }
    50% {
        box-shadow: 0 8px 32px rgba(1, 208, 255, 0.6);
        border-color: var(--mud-palette-warning);
    }
    100% {
        box-shadow: 0 8px 32px rgba(1, 208, 255, 0.3);
        border-color: var(--mud-palette-primary);
    }
}

/* Hide the default content and show custom message */
#components-reconnect-modal > * {
    display: none !important;
}

.license-chart-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--mud-palette-primary);
}

.chart-legend-item {
    display: flex;
    align-items: center;
}

.chart-legend-color {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    margin-right: 8px;
}

.chart-legend-text {
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
}

/* Override MudChart text color to follow theme */
.mud-chart text {
    fill: var(--mud-palette-text-primary) !important;
}

.mud-chart .mud-chart-legend text {
    fill: var(--mud-palette-text-primary) !important;
}

.mud-chart .mud-chart-grid-line {
    stroke: var(--mud-palette-divider) !important;
}

.mud-chart .mud-chart-yaxis-labels text,
.mud-chart .mud-chart-xaxis-labels text {
    fill: var(--mud-palette-text-primary) !important;
    font-size: 0.75rem !important;
}

/* Chart.js Styles */
#licenseChart {
    width: 100% !important;
    height: 100% !important;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}

.chart-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin-right: 0.5rem;
}

.chart-legend-text {
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

/* Login Dialog Background */
.custom-dialog-background {
    background-color: var(--mud-palette-surface) !important;
}

.components-reconnect-dialog {
    background-color: var(--mud-palette-surface) !important;
}

.mud-input-outlined-border{
    border-color: var(--mud-palette-lines-inputs) !important;
    border-radius: var(--syba-control-radius) !important;
    border-width: var(--syba-control-border-width) !important;
}

/* Global “bigger + squarer” MudBlazor outlined inputs/selects/date pickers */
.mud-input-root.mud-input-root-outlined,
.mud-input.mud-input-outlined {
    border-radius: var(--syba-control-radius) !important;
}

.mud-input.mud-input-outlined .mud-input-slot,
.mud-input.mud-input-outlined textarea.mud-input-slot,
.mud-input.mud-input-outlined.mud-select-input,
.mud-input.mud-input-outlined.mud-autocomplete,
.mud-select-input {
    line-height: 1.25 !important;
}

/* Keep adornments/icons vertically centered with new height */
.mud-input.mud-input-outlined .mud-input-adornment,
.mud-input.mud-input-outlined .mud-input-adornment-start,
.mud-input.mud-input-outlined .mud-input-adornment-end {
    align-self: center;
}

.mud-input-label-inputcontrol {
    background-color: var(--mud-palette-surface) !important;
}


.mud-input-outlined {
    background-color: var(--mud-palette-surface) !important;
}

.mud-input-label {
    background-color: transparent !important;
    padding-left: 10px !important;
}

.mud-input-label-outlined {
    background-color: var(--mud-palette-surface) !important;
}

/* Make all sections and components transparent to show the radial gradient background.
   Only apply in dark mode; in light mode MudBlazor's own surface/background colours are correct. */
html:not([data-theme="light"]) section, 
html:not([data-theme="light"]) .mud-container,
html:not([data-theme="light"]) .mud-card,
html:not([data-theme="light"]) .mud-paper,
html:not([data-theme="light"]) .mud-table-container,
html:not([data-theme="light"]) .mud-main-content,
html:not([data-theme="light"]) .mud-appbar,
html:not([data-theme="light"]) .mud-drawer:not(.mud-drawer-pos-right),
html:not([data-theme="light"]) .mud-card-header,
html:not([data-theme="light"]) .mud-card-content,
html:not([data-theme="light"]) .mud-card-actions,
html:not([data-theme="light"]) .mud-table-head,
html:not([data-theme="light"]) .mud-table-body,
html:not([data-theme="light"]) .mud-table-foot,
html:not([data-theme="light"]) .mud-table-row,
html:not([data-theme="light"]) .mud-th,
html:not([data-theme="light"]) thead,
html:not([data-theme="light"]) thead th,
html:not([data-theme="light"]) .mud-table thead,
html:not([data-theme="light"]) .mud-table thead th,
html:not([data-theme="light"]) .mud-table thead tr,
html:not([data-theme="light"]) .mud-tabs-toolbar,
html:not([data-theme="light"]) .mud-tab-panel,
html:not([data-theme="light"]) .mud-expand-panels,
html:not([data-theme="light"]) .mud-expand-panel,
html:not([data-theme="light"]) .mud-expand-panel-header,
html:not([data-theme="light"]) .mud-expand-panel-content,
html:not([data-theme="light"]) .mud-stepper,
html:not([data-theme="light"]) .mud-stepper-header,
html:not([data-theme="light"]) .mud-stepper-content,
html:not([data-theme="light"]) .mud-timeline,
html:not([data-theme="light"]) .mud-timeline-item,
html:not([data-theme="light"]) .mud-sheet,
html:not([data-theme="light"]) .mud-grid,
html:not([data-theme="light"]) .mud-grid-item,
html:not([data-theme="light"]) .mud-stack,
html:not([data-theme="light"]) .mud-box,
html:not([data-theme="light"]) .mud-typography,
html:not([data-theme="light"]) div[class*="mud-"]:not(.mud-button):not(.mud-chip):not(.mud-badge):not(.mud-icon):not(.mud-avatar):not(.mud-progress-linear):not(.mud-progress-linear-bar):not(.mud-progress-linear-bars):not(.mud-progress-circular):not(.mud-menu):not(.mud-list):not(.mud-select-menu):not(.mud-popover):not(.mud-picker):not(.mud-autocomplete):not(.mud-datepicker):not(.mud-dialog):not([class*="mud-dialog"]):not(.mud-message-box):not([class*="mud-message"]):not(.mud-snackbar):not([class*="mud-snackbar"]):not(.mud-alert):not([class*="mud-alert"]) {
    background: transparent;
}

/* App navigation drawer should remain opaque (avoid page content showing through). */
html:not([data-theme="light"]) .mud-drawer.modern-drawer:not(.mud-drawer-pos-right),
html:not([data-theme="light"]) .mud-drawer.modern-drawer:not(.mud-drawer-pos-right) .mud-drawer-header,
html:not([data-theme="light"]) .mud-drawer.modern-drawer:not(.mud-drawer-pos-right) .mud-drawer-content {
    background: var(--mud-palette-drawer-background) !important;
    background-color: var(--mud-palette-drawer-background) !important;
}

/* Campaign review with web branding: force solid backgrounds - EXCLUDE from global transparency rule above */
.campaign-review-branding-enabled .mud-card,
.campaign-review-branding-enabled .mud-paper,
.campaign-review-branding-enabled .mud-table-container,
.campaign-review-branding-enabled .mud-card-header,
.campaign-review-branding-enabled .mud-card-content,
.campaign-review-branding-enabled .mud-card-actions {
    background-color: var(--mud-palette-surface) !important;
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.campaign-review-branding-enabled .mud-container {
    color: var(--mud-palette-text-primary) !important;
}

/* Access modeling charts (Okta and Entra) – shared sizing so axis/labels are visible in light and dark */
.access-modeling-chart {
    height: 400px;
}
.access-modeling-chart--md {
    height: 350px;
}
@media (max-width: 960px) {
    .access-modeling-chart {
        height: 320px;
    }
    .access-modeling-chart--md {
        height: 280px;
    }
}

/* Sign-in type breakdown cards: equal height, consistent spacing */
.access-modeling-signin-card {
    padding: 12px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 120px;
}
.access-modeling-signin-card__failure {
    margin-top: auto;
}
/* Ensure MudTooltip inline wrapper stretches to fill the grid item */
.access-modeling-signin-card-wrapper,
.mud-tooltip-root:has(> .access-modeling-signin-card) {
    width: 100%;
    display: flex;
}

/* Table footer and pagination must stay visible (override transparency above) */
.mud-table-foot,
.mud-table-pagination-toolbar {
    background-color: var(--mud-palette-surface) !important;
    background: var(--mud-palette-surface) !important;
}

/* User portal (/my/*): ensure content and text are always visible in both light and dark themes.
   Fixes invisible text when theme variables and surfaces get out of sync (e.g. web branding). */

/* Let layout size to content so the background doesn't stretch to full viewport height. */
.user-portal-layout .mud-layout {
    height: auto !important;
    min-height: 0 !important;
}

/* User portal nav menu: bind to MudTheme palette so drawer adapts to light/dark/branding automatically. */
.user-portal-layout {
    --user-portal-nav-bg: var(--mud-palette-drawer-background);
    --user-portal-nav-text: var(--mud-palette-drawer-text);
    --user-portal-nav-divider: rgba(255, 255, 255, 0.12);
    --user-portal-nav-hover-bg: rgba(255, 255, 255, 0.08);
    --user-portal-nav-active-bg: rgba(var(--mud-palette-primary-rgb, 1, 208, 255), 0.15);
}
/* When web branding is active, bind nav to the branding palette and use theme-aware hover/active backgrounds. */
.user-portal-layout.portal-branding-enabled {
    --user-portal-nav-bg: var(--mud-palette-drawer-background);
    --user-portal-nav-text: var(--mud-palette-drawer-text);
    --user-portal-nav-divider: var(--mud-palette-divider);
    /* Fallback 1, 208, 255 (Custodeum cyan) if scope does not set primary-rgb */
    --user-portal-nav-hover-bg: rgba(var(--mud-palette-primary-rgb, 1, 208, 255), 0.08);
    --user-portal-nav-active-bg: rgba(var(--mud-palette-primary-rgb, 1, 208, 255), 0.12);
}
.user-portal-layout .modern-drawer {
    background: var(--user-portal-nav-bg) !important;
    color: var(--user-portal-nav-text) !important;
    border-right: 1px solid var(--user-portal-nav-divider) !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08) !important;
}
.user-portal-layout .modern-drawer .mud-nav-link {
    border-radius: 10px !important;
    margin: 4px 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.user-portal-layout .modern-drawer .mud-nav-link,
.user-portal-layout .modern-drawer .mud-nav-link .mud-nav-link-text,
.user-portal-layout .modern-drawer .mud-nav-menu .mud-nav-link-text,
.user-portal-layout .modern-drawer .mud-icon-root,
.user-portal-layout .modern-drawer .mud-svg-icon {
    color: var(--user-portal-nav-text) !important;
    fill: currentColor !important;
}
/* Hover: subtle background only; keep text/icon color so they never go invisible (e.g. white-on-white). */
.user-portal-layout .modern-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: var(--user-portal-nav-hover-bg) !important;
    color: var(--user-portal-nav-text) !important;
}
.user-portal-layout .modern-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) .mud-nav-link-text,
.user-portal-layout .modern-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) .mud-icon-root,
.user-portal-layout .modern-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) .mud-svg-icon {
    color: var(--user-portal-nav-text) !important;
    fill: currentColor !important;
}
/* Active: background highlight + left accent; text/icon stay nav color. */
.user-portal-layout .modern-drawer .mud-nav-link.active {
    background-color: var(--user-portal-nav-active-bg) !important;
    color: var(--user-portal-nav-text) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}
.user-portal-layout .modern-drawer .mud-nav-link.active .mud-nav-link-text,
.user-portal-layout .modern-drawer .mud-nav-link.active .mud-icon-root,
.user-portal-layout .modern-drawer .mud-nav-link.active .mud-svg-icon {
    color: var(--user-portal-nav-text) !important;
    fill: currentColor !important;
}
.user-portal-layout .modern-drawer .mud-divider {
    border-color: var(--user-portal-nav-divider) !important;
}
.user-portal-layout.portal-branding-enabled .modern-drawer {
    background: var(--user-portal-nav-bg) !important;
    color: var(--user-portal-nav-text) !important;
}
.user-portal-layout.portal-branding-enabled .modern-drawer .mud-nav-link,
.user-portal-layout.portal-branding-enabled .modern-drawer .mud-nav-link .mud-nav-link-text,
.user-portal-layout.portal-branding-enabled .modern-drawer .mud-icon-root,
.user-portal-layout.portal-branding-enabled .modern-drawer .mud-svg-icon {
    color: var(--user-portal-nav-text) !important;
    fill: currentColor !important;
}

.user-portal-layout .mud-main-content,
.user-portal-layout .mud-container,
.user-portal-layout .mud-paper,
.user-portal-layout .mud-card,
.user-portal-layout .mud-table-container,
.user-portal-layout .mud-table,
.user-portal-layout .mud-table-head,
.user-portal-layout .mud-table-body,
.user-portal-layout .mud-table-row,
.user-portal-layout .mud-table-cell,
.user-portal-layout .mud-th,
.user-portal-layout .mud-typography,
.user-portal-layout .mud-button-root .mud-button-label,
.user-portal-layout .mud-input,
.user-portal-layout .mud-input input,
.user-portal-layout .mud-input-label,
.user-portal-layout .mud-input-slot,
.user-portal-layout .mud-chip:not([class*="mud-chip-color-"]) .mud-chip-content {
    color: var(--mud-palette-text-primary) !important;
}

/* User portal: primary buttons and tabs use theme palette (no hardcoded blue). */
.user-portal-layout .mud-button-filled-primary,
.user-portal-layout .mud-button-filled.mud-button-filled-primary,
.user-portal-layout .mud-button-root.mud-button-filled-primary {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-contrast-text) !important;
}
.user-portal-layout .mud-button-filled-primary .mud-button-label,
.user-portal-layout .mud-button-filled-primary .mud-icon-root,
.user-portal-layout .mud-button-filled-primary .mud-svg-icon,
.user-portal-layout .mud-button-filled.mud-button-filled-primary .mud-button-label {
    color: var(--mud-palette-primary-contrast-text) !important;
    fill: currentColor !important;
}
.user-portal-layout .mud-button-outlined-primary,
.user-portal-layout .mud-button-outlined.mud-button-outlined-primary {
    border-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary) !important;
}
.user-portal-layout .mud-button-outlined-primary .mud-button-label,
.user-portal-layout .mud-button-outlined-primary .mud-icon-root,
.user-portal-layout .mud-button-outlined.mud-button-outlined-primary .mud-button-label {
    color: var(--mud-palette-primary) !important;
    fill: currentColor !important;
}
/* User portal tabs: ensure tab text and toolbar are always visible regardless of portal branding */
.user-portal-layout .mud-tabs-toolbar {
    border-bottom: 1px solid rgba(var(--mud-palette-primary-rgb), 0.2) !important;
    background-color: transparent !important;
}
.user-portal-layout .mud-tabs .mud-tab {
    color: var(--mud-palette-text-primary) !important;
    opacity: 0.65;
    font-weight: 500;
}
.user-portal-layout .mud-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-text-primary) !important;
    opacity: 1;
    font-weight: 700;
}
.user-portal-layout .mud-tabs .mud-tab:hover:not(.mud-tab-active) {
    opacity: 1;
    color: var(--mud-palette-text-primary) !important;
    background-color: rgba(var(--mud-palette-primary-rgb, 1, 208, 255), 0.06) !important;
}
.user-portal-layout .mud-tabs .mud-tab-slider {
    background-color: var(--mud-palette-primary) !important;
    height: 3px !important;
}

/* User portal: default chips should always stay readable (avoid text == background in custom palettes).
   Covers both truly uncolored chips AND Color.Default chips (mud-chip-color-default). */
.user-portal-layout .mud-chip.mud-chip-filled:not([class*="mud-chip-color-"]),
.user-portal-layout .mud-chip.mud-chip-filled.mud-chip-color-default {
    background-color: rgba(var(--mud-palette-primary-rgb, 1, 208, 255), 0.10) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    color: var(--mud-palette-text-primary) !important;
}
.user-portal-layout .mud-chip.mud-chip-filled:not([class*="mud-chip-color-"]) .mud-chip-content,
.user-portal-layout .mud-chip.mud-chip-filled:not([class*="mud-chip-color-"]) .mud-icon-root,
.user-portal-layout .mud-chip.mud-chip-filled:not([class*="mud-chip-color-"]) .mud-svg-icon,
.user-portal-layout .mud-chip.mud-chip-filled.mud-chip-color-default .mud-chip-content,
.user-portal-layout .mud-chip.mud-chip-filled.mud-chip-color-default .mud-icon-root,
.user-portal-layout .mud-chip.mud-chip-filled.mud-chip-color-default .mud-svg-icon {
    color: var(--mud-palette-text-primary) !important;
    fill: currentColor !important;
}
.user-portal-layout .mud-chip.mud-chip-outlined:not([class*="mud-chip-color-"]),
.user-portal-layout .mud-chip.mud-chip-outlined.mud-chip-color-default {
    border-color: var(--mud-palette-divider) !important;
    color: var(--mud-palette-text-primary) !important;
}
.user-portal-layout .mud-chip.mud-chip-outlined.mud-chip-color-default .mud-chip-content {
    color: var(--mud-palette-text-primary) !important;
}

/* Icons: do not force a single color so they remain visible (nav, search, buttons, etc.). */

.user-portal-layout .mud-typography-color-secondary,
.user-portal-layout .text-muted {
    color: var(--mud-palette-text-secondary) !important;
}

.user-portal-layout .mud-paper,
.user-portal-layout .mud-card,
.user-portal-layout .mud-table-container,
.user-portal-layout .mud-table-head,
.user-portal-layout .mud-table-body,
.user-portal-layout .mud-table-cell,
.user-portal-layout .mud-th {
    background-color: var(--mud-palette-surface) !important;
    background: var(--mud-palette-surface) !important;
}

.user-portal-layout .mud-table-cell,
.user-portal-layout .mud-th {
    border-bottom-color: var(--mud-palette-divider) !important;
}

/* User portal: filled alerts use contrast text on colored background (not text-primary) */
.user-portal-layout .mud-alert-filled-info,
.user-portal-layout .mud-alert-filled-info .mud-alert-message,
.user-portal-layout .mud-alert-filled-info .mud-alert-title,
.user-portal-layout .mud-alert-filled-info .mud-icon-root,
.user-portal-layout .mud-alert-filled-info .mud-svg-icon {
    color: var(--mud-palette-info-contrast-text) !important;
    fill: currentColor !important;
}
.user-portal-layout .mud-alert-filled-warning,
.user-portal-layout .mud-alert-filled-warning .mud-alert-message,
.user-portal-layout .mud-alert-filled-warning .mud-alert-title,
.user-portal-layout .mud-alert-filled-warning .mud-icon-root,
.user-portal-layout .mud-alert-filled-warning .mud-svg-icon {
    color: var(--mud-palette-warning-contrast-text) !important;
    fill: currentColor !important;
}
.user-portal-layout .mud-alert-filled-error,
.user-portal-layout .mud-alert-filled-error .mud-alert-message,
.user-portal-layout .mud-alert-filled-error .mud-alert-title,
.user-portal-layout .mud-alert-filled-error .mud-icon-root,
.user-portal-layout .mud-alert-filled-error .mud-svg-icon {
    color: var(--mud-palette-error-contrast-text) !important;
    fill: currentColor !important;
}
.user-portal-layout .mud-alert-filled-success,
.user-portal-layout .mud-alert-filled-success .mud-alert-message,
.user-portal-layout .mud-alert-filled-success .mud-alert-title,
.user-portal-layout .mud-alert-filled-success .mud-icon-root,
.user-portal-layout .mud-alert-filled-success .mud-svg-icon {
    color: var(--mud-palette-success-contrast-text) !important;
    fill: currentColor !important;
}
.user-portal-layout .mud-alert-filled-primary .mud-alert-message,
.user-portal-layout .mud-alert-filled-primary .mud-alert-title,
.user-portal-layout .mud-alert-filled-primary .mud-icon-root,
.user-portal-layout .mud-alert-filled-primary .mud-svg-icon {
    color: var(--mud-palette-primary-contrast-text) !important;
    fill: currentColor !important;
}
/* Text/outline alerts (surface background): use text-primary */
.user-portal-layout .mud-alert-text-info .mud-alert-message,
.user-portal-layout .mud-alert-text-info .mud-alert-title,
.user-portal-layout .mud-alert-text-warning .mud-alert-message,
.user-portal-layout .mud-alert-text-warning .mud-alert-title,
.user-portal-layout .mud-alert-text-error .mud-alert-message,
.user-portal-layout .mud-alert-text-error .mud-alert-title,
.user-portal-layout .mud-alert-text-success .mud-alert-message,
.user-portal-layout .mud-alert-text-success .mud-alert-title {
    color: var(--mud-palette-text-primary) !important;
}

/* User portal: inputs and selects – surface background and readable text/placeholder */
.user-portal-layout .mud-input,
.user-portal-layout .mud-input-outlined,
.user-portal-layout .mud-select .mud-input-root {
    background-color: var(--mud-palette-surface) !important;
}
.user-portal-layout .mud-input input,
.user-portal-layout .mud-input-slot,
.user-portal-layout .mud-input-label {
    color: var(--mud-palette-text-primary) !important;
}
.user-portal-layout .mud-input input::placeholder {
    color: var(--mud-palette-text-secondary) !important;
    opacity: 1;
}
.user-portal-layout .mud-select .mud-input-slot,
.user-portal-layout .mud-select .mud-input-slot .mud-select-input {
    color: var(--mud-palette-text-primary) !important;
}

/* User portal My Apps: selected system filter chip (All / Entra / Okta) must be clearly visible */
.user-portal-layout .my-apps-toolbar-chips .mud-chip-color-primary.mud-chip-filled,
.user-portal-layout .my-apps-toolbar-chips .mud-chip-color-primary.mud-chip-variant-filled {
    background-color: var(--mud-palette-primary) !important;
    background: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
}
.user-portal-layout .my-apps-toolbar-chips .mud-chip-color-primary.mud-chip-filled *,
.user-portal-layout .my-apps-toolbar-chips .mud-chip-color-primary.mud-chip-variant-filled *,
.user-portal-layout .my-apps-toolbar-chips .mud-chip-color-primary.mud-chip-filled .mud-chip-content,
.user-portal-layout .my-apps-toolbar-chips .mud-chip-color-primary.mud-chip-variant-filled .mud-chip-content {
    color: var(--mud-palette-primary-contrast-text) !important;
}
.user-portal-layout .my-apps-toolbar-chips .mud-chip-color-primary.mud-chip-outlined,
.user-portal-layout .my-apps-toolbar-chips .mud-chip-color-primary.mud-chip-variant-outlined {
    border-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary) !important;
}
.user-portal-layout .my-apps-toolbar-chips .mud-chip-color-primary.mud-chip-outlined *,
.user-portal-layout .my-apps-toolbar-chips .mud-chip-color-primary.mud-chip-variant-outlined * {
    color: var(--mud-palette-primary) !important;
}

/* Automation builder: hide MudStepper's built-in Finish/Complete button on the last step.
   We render our own "Complete" / "Save Changes" action in the Review step to persist the rule. */
.hide-stepper-finish .mud-stepper-actions {
    display: none !important;
}

/* ============================================================================
   Shared multi-step wizard header (CampaignCreation-style)
   Used by provisioning flows (Create User / Create Group / etc.)
   ============================================================================ */
.multi-step-form-container {
    margin: 0 auto;
    padding: 20px;
}

.form-progress-container {
    margin-bottom: 28px;
}

.form-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 2px;
    margin-bottom: 16px;
    position: relative;
}

.form-progress-indicator {
    position: absolute;
    height: 100%;
    background: var(--mud-palette-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.form-steps {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.form-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s ease, transform 0.2s ease;
    text-align: center;
    min-width: 0;
}

.form-step.active {
    opacity: 1;
}

.form-step.completed {
    opacity: 0.9;
}

.form-step:hover {
    transform: translateY(-1px);
    opacity: 1;
}

.step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-contrast-text);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.form-step.completed .step-number {
    background: var(--mud-palette-success);
    color: var(--mud-palette-success-contrast-text);
}

.step-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.step-description {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

@media (max-width: 900px) {
    .form-steps {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .form-step {
        flex: 0 0 auto;
        width: calc(50% - 10px);
        align-items: flex-start;
        text-align: left;
        padding: 6px 0;
    }

    .step-label,
    .step-description {
        max-width: 100%;
    }
}

/* Right-side detail drawers (e.g., "More details") must be opaque.
   Global transparency rules above set `background: transparent !important`, which overrides `background-color`.
   So we explicitly set `background` + `background-color` with !important. */
.mud-drawer.mud-drawer-pos-right {
    background: var(--mud-palette-surface) !important;
    background-color: var(--mud-palette-surface) !important;
    border-left: 1px solid var(--mud-palette-divider) !important;
}

.mud-drawer.mud-drawer-pos-right .mud-drawer-header {
    background: var(--mud-palette-surface) !important;
    background-color: var(--mud-palette-surface) !important;
    border-bottom: 1px solid var(--mud-palette-divider) !important;
}

.mud-drawer.mud-drawer-pos-right .mud-drawer-content {
    background: var(--mud-palette-surface) !important;
    background-color: var(--mud-palette-surface) !important;
}

/* Dark mode only: force opaque background for right-side drawer and its contents.
   In light mode there is no background issue; the global transparent rule above applies only in dark mode
   and was causing the help drawer (and other right-side drawers) to show content bleeding through. */
html:not([data-theme="light"]) .mud-drawer.mud-drawer-pos-right,
html:not([data-theme="light"]) .mud-drawer.mud-drawer-pos-right .mud-drawer-header,
html:not([data-theme="light"]) .mud-drawer.mud-drawer-pos-right .mud-drawer-content,
html:not([data-theme="light"]) .mud-drawer.mud-drawer-pos-right div[class*="mud-"]:not(.mud-button):not(.mud-chip):not(.mud-badge):not(.mud-icon):not(.mud-avatar):not(.mud-progress-linear):not(.mud-progress-linear-bar):not(.mud-progress-linear-bars):not(.mud-progress-circular):not(.mud-menu):not(.mud-list):not(.mud-select-menu):not(.mud-popover):not(.mud-picker):not(.mud-autocomplete):not(.mud-datepicker):not(.mud-dialog):not([class*="mud-dialog"]):not(.mud-message-box):not([class*="mud-message"]) {
    background: var(--mud-palette-surface) !important;
    background-color: var(--mud-palette-surface) !important;
}

/* Dialogs and modals should have solid backgrounds for usability - highest specificity */
.mud-dialog,
.mud-dialog-container,
.mud-dialog-root,
.mud-dialog-surface,
.mud-dialog-paper,
div.mud-dialog,
div[class*="mud-dialog"],
div[class*="mud-dialog-width"],
.mud-dialog[style*="background"],
div.mud-dialog[style*="background"] {
    background-color: var(--mud-palette-surface) !important;
    background: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
}

/* MudBlazor message box dialogs - highest specificity */
.mud-message-box,
.mud-message-box .mud-dialog,
.mud-message-box .mud-dialog-container,
.mud-message-box .mud-dialog-surface,
div.mud-message-box,
div[class*="mud-message-box"],
.mud-message-box[style*="background"],
div.mud-message-box[style*="background"] {
    background-color: var(--mud-palette-surface) !important;
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Ensure all dialog content areas have solid backgrounds */
.mud-dialog-content,
.mud-dialog-body,
.mud-dialog .mud-dialog-content,
.mud-dialog .mud-dialog-body,
div.mud-dialog .mud-dialog-content {
    background-color: var(--mud-palette-surface) !important;
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* MudBlazor dialog paper/surface elements */
.mud-dialog .mud-paper,
.mud-dialog-surface .mud-paper,
.mud-dialog-container .mud-paper,
div.mud-dialog .mud-paper,
div[class*="mud-dialog"] .mud-paper {
    background-color: var(--mud-palette-surface) !important;
    background: var(--syba-page-background) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Additional MudBlazor dialog wrapper classes - be specific to avoid conflicts */
div[class*="mud-dialog"]:not(.mud-button):not(.mud-icon):not(.mud-dialog-actions),
div[class*="mud-message-box"],
div[class*="mud-dialog-width"] {
    background-color: var(--mud-palette-surface) !important;
    background: var(--syba-page-background) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Fixed dialog modals (custom dialog implementation) */
.fixed-dialog,
.fixed-dialog .mud-paper,
.fixed-dialog .mud-card {
    background-color: var(--mud-palette-surface) !important;
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Ensure MudPaper and MudCard inside dialogs have solid backgrounds */
.mud-dialog .mud-paper,
.mud-dialog .mud-card,
.fixed-dialog .mud-paper,
.fixed-dialog .mud-card,
[class*="mud-dialog"] .mud-paper,
[class*="mud-dialog"] .mud-card {
    background-color: var(--mud-palette-surface) !important;
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* MudBlazor dialog overlay/backdrop */
.mud-overlay,
.mud-overlay-dialog,
.mud-overlay-scrim {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Bootstrap modals should have solid backgrounds */
.modal,
.modal-dialog,
.modal-content {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-divider) !important;
}

.modal-header,
.modal-body,
.modal-footer {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-palette-divider) !important;
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Calendar and datepicker popups need solid backgrounds for date visibility */
.mud-picker,
.mud-picker-popover,
.mud-datepicker,
.mud-datepicker-popover,
.mud-picker-popover .mud-paper,
.mud-datepicker-popover .mud-paper,
.mud-picker .mud-paper,
.mud-datepicker .mud-paper,
.mud-calendar,
.mud-calendar-month,
.mud-calendar-header,
.mud-picker-month-container,
.mud-picker-year-container {
    color: var(--mud-palette-text-primary) !important;
}

/* Calendar date cells need visible backgrounds */
.mud-picker-calendar-container,
.mud-picker-calendar-container .mud-picker-calendar-day,
.mud-calendar-day {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Dropdowns and menus should have visible backgrounds for usability (.mud-menu excluded: transparent) */
.mud-select-menu,
.mud-popover:not(.mud-tooltip-root),
.mud-popover-paper,
.mud-autocomplete-popover,
.mud-list:has(.mud-menu-item),
.mud-paper:has(.mud-menu-item),
.mud-paper:has(.mud-list-item),
.mud-select .mud-select-menu,
.mud-select .mud-paper,
.mud-select-menu .mud-paper,
.mud-popover .mud-paper {
    background-color: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
}

/* MudBlazor popovers can inherit dark text tokens that are too low-contrast in dark mode. */
html:not([data-theme="light"]) .mud-popover:not(.mud-tooltip-root),
html:not([data-theme="light"]) .mud-popover:not(.mud-tooltip-root) .mud-paper,
html:not([data-theme="light"]) .mud-popover:not(.mud-tooltip-root) .mud-list,
html:not([data-theme="light"]) .mud-popover:not(.mud-tooltip-root) .mud-list-item,
html:not([data-theme="light"]) .mud-popover:not(.mud-tooltip-root) .mud-typography {
    color: var(--mud-palette-text-primary) !important;
}

/* Keep tooltip popovers readable in dark mode. The global popover surface override above
   can make tooltip text low-contrast when inherited styles collide. */
html:not([data-theme="light"]) .mud-popover.mud-tooltip-root {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html:not([data-theme="light"]) .mud-popover.mud-tooltip-root .mud-tooltip {
    background-color: #141d2b !important;
    color: #eaf2ff !important;
    border: 1px solid rgba(126, 173, 255, 0.35) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6) !important;
}

html:not([data-theme="light"]) .mud-popover.mud-tooltip-root .mud-tooltip .mud-typography {
    color: inherit !important;
}

/* Initial Sync Progress Component Styles */
.initial-sync-progress-card {
    background-color: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid var(--mud-palette-primary) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(1, 208, 255, 0.2) !important;
}

.progress-container {
    position: relative;
}

.progress-bar-wrapper {
    width: 100%;
    height: 8px;
    background-color: rgba(1, 208, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.progress-bar {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: var(--mud-palette-primary);
    border-radius: 4px;
    position: relative;
    animation: progress-animation 2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(1, 208, 255, 0.35);
}

@keyframes progress-animation {
    0% {
        width: 0%;
    }
    50% {
        width: 70%;
    }
    100% {
        width: 100%;
    }
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.18);
}

.sync-steps {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 2rem;
    padding: 1rem;
}

.sync-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    animation: pulse-step 2s ease-in-out infinite;
}

.sync-step:nth-child(1) {
    animation-delay: 0s;
}

.sync-step:nth-child(2) {
    animation-delay: 0.5s;
}

.sync-step:nth-child(3) {
    animation-delay: 1s;
}

.sync-step:nth-child(4) {
    animation-delay: 1.5s;
}

@keyframes pulse-step {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.sync-step .step-icon {
    color: var(--syba-primary-text);
    font-size: 32px;
    filter: drop-shadow(0 0 8px rgba(1, 208, 255, 0.5));
}

.progress-text {
    text-align: center;
    animation: fade-pulse 2s ease-in-out infinite;
}

@keyframes fade-pulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

/* MudBlazor Progress Bar Global Fixes - Updated for MudBlazor 8.x */
/* Ensure all progress bars have visible background and progress indicator */
.mud-progress-linear {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.14) !important;
    height: 6px !important;
    border-radius: 3px !important;
}

.mud-progress-linear .mud-progress-linear-bar {
    background-color: var(--mud-palette-primary) !important;
}

/* Warning Color */
.mud-progress-linear-color-warning {
    background-color: rgba(245, 158, 11, 0.16) !important;
}

.mud-progress-linear-color-warning .mud-progress-linear-bar {
    background-color: var(--mud-palette-warning) !important;
}

/* Primary Color */
.mud-progress-linear-color-primary {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.14) !important;
}

.mud-progress-linear-color-primary .mud-progress-linear-bar {
    background-color: var(--mud-palette-primary) !important;
}

/* Info Color */
.mud-progress-linear-color-info {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.14) !important;
}

.mud-progress-linear-color-info .mud-progress-linear-bar {
    background-color: var(--mud-palette-primary) !important;
}

/* Success Color */
.mud-progress-linear-color-success {
    background-color: rgba(76, 175, 80, 0.15) !important;
}

.mud-progress-linear-color-success .mud-progress-linear-bar {
    background-color: var(--mud-palette-success) !important;
}

/* Error Color */
.mud-progress-linear-color-error {
    background-color: rgba(244, 67, 54, 0.15) !important;
}

.mud-progress-linear-color-error .mud-progress-linear-bar {
    background-color: var(--mud-palette-error) !important;
}

/* --------------------------------------------------------
   Legacy color compatibility layer
   - Normalizes old hardcoded accents used in page-local styles
   - Keeps visual alignment without editing every page immediately
   -------------------------------------------------------- */
html[data-theme="light"] [style*="background-color: #01d0ff"],
html[data-theme="light"] [style*="background: #01d0ff"] {
    background-color: var(--mud-palette-primary) !important;
}

html[data-theme="light"] [style*="color: #01d0ff"] {
    color: var(--mud-palette-text-primary) !important;
}

html[data-theme="light"] [style*="background-color: #f97316"],
html[data-theme="light"] [style*="background: #f97316"] {
    background-color: var(--mud-palette-warning) !important;
}

html[data-theme="light"] [style*="color: #f97316"] {
    color: var(--mud-palette-text-primary) !important;
}

html[data-theme="light"] [style*="background-color: #00b4dd"],
html[data-theme="light"] [style*="background: #00b4dd"] {
    background-color: var(--mud-palette-info) !important;
}

html[data-theme="light"] [style*="color: #00b4dd"] {
    color: var(--mud-palette-text-primary) !important;
}

html[data-theme="light"] [style*="background-color: #adff2f"],
html[data-theme="light"] [style*="background: #adff2f"],
html[data-theme="light"] [style*="background-color: #ADFF2F"],
html[data-theme="light"] [style*="background: #ADFF2F"] {
    background-color: var(--mud-palette-info) !important;
}

html[data-theme="light"] [style*="color: #adff2f"],
html[data-theme="light"] [style*="color: #ADFF2F"],
html[data-theme="light"] [style*="color: #ff8f67"] {
    color: var(--mud-palette-text-primary) !important;
}

html[data-theme="light"] [style*="background-color: #ff8f67"],
html[data-theme="light"] [style*="background: #ff8f67"] {
    background-color: var(--mud-palette-warning) !important;
}

html[data-theme="light"] [style*="background-color: #1bc5bd"],
html[data-theme="light"] [style*="background: #1bc5bd"],
html[data-theme="light"] [style*="background-color: #e352ff"],
html[data-theme="light"] [style*="background: #e352ff"] {
    background-color: var(--mud-palette-info) !important;
}

html[data-theme="light"] [style*="color: #1bc5bd"],
html[data-theme="light"] [style*="color: #e352ff"],
html[data-theme="light"] [style*="color: #FFD700"],
html[data-theme="light"] [style*="color: #ffd700"] {
    color: var(--mud-palette-text-primary) !important;
}

/* Dark/default compatibility: keep legacy accent values on enterprise palette */
html[data-theme="dark"] [style*="background-color: #adff2f"],
html[data-theme="dark"] [style*="background: #adff2f"],
html[data-theme="dark"] [style*="background-color: #ADFF2F"],
html[data-theme="dark"] [style*="background: #ADFF2F"],
html:not([data-theme]) [style*="background-color: #adff2f"],
html:not([data-theme]) [style*="background: #adff2f"],
html:not([data-theme]) [style*="background-color: #ADFF2F"],
html:not([data-theme]) [style*="background: #ADFF2F"] {
    background-color: var(--mud-palette-info) !important;
}

html[data-theme="dark"] [style*="background-color: #ff8f67"],
html[data-theme="dark"] [style*="background: #ff8f67"],
html:not([data-theme]) [style*="background-color: #ff8f67"],
html:not([data-theme]) [style*="background: #ff8f67"] {
    background-color: var(--mud-palette-warning) !important;
}

html[data-theme="dark"] [style*="background-color: #1bc5bd"],
html[data-theme="dark"] [style*="background: #1bc5bd"],
html[data-theme="dark"] [style*="background-color: #e352ff"],
html[data-theme="dark"] [style*="background: #e352ff"],
html:not([data-theme]) [style*="background-color: #1bc5bd"],
html:not([data-theme]) [style*="background: #1bc5bd"],
html:not([data-theme]) [style*="background-color: #e352ff"],
html:not([data-theme]) [style*="background: #e352ff"] {
    background-color: var(--mud-palette-info) !important;
}

/* Additional legacy accents from older dashboards (teal/magenta/gold) */
[style*="color: #1bc5bd"],
[style*="color:#1bc5bd"] {
    color: var(--mud-palette-info) !important;
}

[style*="color: #e352ff"],
[style*="color:#e352ff"] {
    color: var(--mud-palette-secondary) !important;
}

[style*="color: #FFD700"],
[style*="color:#FFD700"],
[style*="color: #ffd700"],
[style*="color:#ffd700"] {
    color: var(--mud-palette-warning) !important;
}

[style*="background: #1bc5bd"],
[style*="background:#1bc5bd"],
[style*="background-color: #1bc5bd"],
[style*="background-color:#1bc5bd"] {
    background-color: var(--mud-palette-info) !important;
}

[style*="background: #e352ff"],
[style*="background:#e352ff"],
[style*="background-color: #e352ff"],
[style*="background-color:#e352ff"] {
    background-color: var(--mud-palette-secondary) !important;
}

[style*="background: #FFD700"],
[style*="background:#FFD700"],
[style*="background-color: #FFD700"],
[style*="background-color:#FFD700"],
[style*="background: #ffd700"],
[style*="background:#ffd700"] {
    background-color: var(--mud-palette-warning) !important;
}

[style*="background: rgba(27, 197, 189"],
[style*="background:rgba(27, 197, 189"] {
    background: rgba(var(--mud-palette-info-rgb), 0.12) !important;
}

[style*="background: rgba(227, 82, 255"],
[style*="background:rgba(227, 82, 255"] {
    background: rgba(var(--mud-palette-secondary-rgb), 0.12) !important;
}

[style*="background: rgba(255, 215, 0"],
[style*="background:rgba(255, 215, 0"] {
    background: rgba(var(--mud-palette-warning-rgb), 0.12) !important;
}

[style*="border: 1px solid rgba(27, 197, 189"],
[style*="border:1px solid rgba(27, 197, 189"] {
    border-color: rgba(var(--mud-palette-info-rgb), 0.35) !important;
}

[style*="border: 1px solid rgba(227, 82, 255"],
[style*="border:1px solid rgba(227, 82, 255"] {
    border-color: rgba(var(--mud-palette-secondary-rgb), 0.35) !important;
}

[style*="border: 1px solid rgba(255, 215, 0"],
[style*="border:1px solid rgba(255, 215, 0"] {
    border-color: rgba(var(--mud-palette-warning-rgb), 0.35) !important;
}

/* SVG legacy colors */
[stroke="#1bc5bd"] { stroke: var(--mud-palette-info) !important; }
[stroke="#e352ff"] { stroke: var(--mud-palette-secondary) !important; }
[stroke="#FFD700"],
[stroke="#ffd700"] { stroke: var(--mud-palette-warning) !important; }

[fill="#1bc5bd"] { fill: var(--mud-palette-info) !important; }
[fill="#e352ff"] { fill: var(--mud-palette-secondary) !important; }
[fill="#FFD700"],
[fill="#ffd700"] { fill: var(--mud-palette-warning) !important; }

/* Common legacy utility/class names still present in local component styles */
.card-purple,
.card-blue-purple,
.card-pink,
.card-teal,
.card-orange,
.metric-card-accent-orange,
.purple-icon,
.pink-icon,
.orange-icon,
.blue-icon {
    background-color: var(--mud-palette-surface) !important;
    border-color: var(--mud-palette-divider) !important;
}

.metric-card-accent,
.metric-card-accent-orange {
    background: var(--mud-palette-primary) !important;
}

.metric-card-accent-secondary {
    background: var(--mud-palette-info) !important;
}

.metric-card-accent-tertiary {
    background: var(--mud-palette-warning) !important;
}

/* Keep progress bars professional and token-based globally */
.mud-progress-linear {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.14) !important;
}

.mud-progress-linear .mud-progress-linear-bar,
.mud-progress-linear-color-primary .mud-progress-linear-bar,
.mud-progress-linear-color-info .mud-progress-linear-bar {
    background-color: var(--mud-palette-primary) !important;
}

.mud-progress-linear-color-warning .mud-progress-linear-bar {
    background-color: var(--mud-palette-warning) !important;
}

.mud-progress-linear-color-error .mud-progress-linear-bar {
    background-color: var(--mud-palette-error) !important;
}

.step-section{
    background: transparent !important;
}

/* Group provisioning adornment text styling - ensure prefix/suffix is visible */
.mud-input-adornment-text {
    color: var(--syba-primary-text) !important;
    font-weight: 600 !important;
    white-space: nowrap;
    padding-right: 4px;
}

.mud-input-adornment-start {
    color: var(--syba-primary-text) !important;
    margin-right: 8px !important;
}

/* Ensure outlined text fields with adornments have proper spacing */
.mud-input.mud-input-outlined.mud-input-adorned-start .mud-input-slot {
    padding-left: 8px !important;
}

/* ============================================================================
   Consistent Input/Select Control Styling
   Ensures MudTextField matches MudSelect in size and appearance
   ============================================================================ */

/* Unified minimum height for all outlined controls (textfields, selects, autocompletes) */
.mud-input-control.mud-input-control-margin-dense .mud-input.mud-input-outlined,
.mud-input-control .mud-input.mud-input-outlined {
    min-height: 46px !important;
}

/* Ensure the inner input slot fills the control properly */
.mud-input.mud-input-outlined .mud-input-slot.mud-input-root {
    min-height: 46px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
}

/* Match select dropdown button height for OUTLINED variant */
.mud-select.mud-input-outlined,
.mud-input.mud-input-outlined.mud-select-input {
    min-height: 46px !important;
}

/* Ensure select inner content aligns properly for OUTLINED variant */
.mud-select.mud-input-outlined .mud-input-slot.mud-select-input {
    min-height: 46px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
}

/* Non-outlined selects (filled/underline) - use outlined styling by default for consistency */
.mud-select:not(.mud-input-outlined) {
    min-height: 46px !important;
}

.mud-select:not(.mud-input-outlined) .mud-input-slot {
    min-height: 46px !important;
    padding: 10px 0 !important;
    padding-left: 10px !important;
    display: flex !important;
    align-items: center !important;
}

/* Ensure non-outlined select text is properly vertically centered */
.mud-select:not(.mud-input-outlined) .mud-select-input {
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
}

/* Autocomplete consistent styling */
.mud-autocomplete.mud-input-outlined .mud-input-slot {
    min-height: 46px !important;
    padding: 12px 14px !important;
}

/* Text field input element styling */
.mud-input.mud-input-outlined input.mud-input-slot {
    min-height: 22px !important;
    padding: 12px 14px !important;
}

/* Non-outlined text fields - consistent height */
.mud-input:not(.mud-input-outlined) input.mud-input-slot {
    min-height: 46px !important;
    padding: 10px 0 !important;
}

/* Textarea (multi-line) should keep flexible height but match padding */
.mud-input.mud-input-outlined textarea.mud-input-slot {
    padding: 12px 14px !important;
    min-height: auto !important;
}

/* Remove extra box/shadow from date pickers and outlined text fields app-wide */
.mud-text-field .mud-input-control,
.mud-text-field .mud-input-control .mud-input-outlined-border,
.mud-text-field .mud-input.mud-input-outlined,
.mud-input-control .mud-input-outlined-border,
.mud-input.mud-input-outlined {
    box-shadow: none !important;
}

/* Ensure border styling is consistent across all outlined controls */
.mud-input-control .mud-input-outlined-border {
    border-width: var(--syba-control-border-width) !important;
    border-radius: var(--syba-control-radius) !important;
    border-color: var(--mud-palette-lines-inputs) !important;
    transition: border-color 0.2s ease !important;
}

/* Focus state for all outlined controls */
.mud-input-control:focus-within .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
}

/* Label positioning consistency */
.mud-input-label.mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(14px, -9px) scale(0.75) !important;
    padding: 0 4px !important;
}

/* Shrunk label state (when focused or has value) */
.mud-input-label.mud-input-label-outlined.mud-shrink {
    transform: translate(14px, -9px) scale(0.75) !important;
    padding: 0 4px !important;
}

/* Placeholder label state (inside the input) - keep visible (hiding makes labels "disappear") */
.mud-input-label.mud-input-label-outlined:not(.mud-shrink) {
    display: block !important;
}

/* Legend element (shows in the border) - ensure it has the right background */
.mud-input-control.mud-input-outlined fieldset legend {
    background-color: var(--mud-palette-surface) !important;
    padding: 0 4px !important;
}

/* Ensure adornments (icons, text) don't affect height consistency */
.mud-input.mud-input-outlined .mud-input-adornment {
    height: auto !important;
    align-self: center !important;
}

/* Select dropdown arrow positioning */
.mud-select.mud-input-outlined .mud-input-adornment-end {
    margin-right: 8px !important;
}

/* Fix for duplicate/hidden mud-input-slot elements taking up space */
/* Target any mud-input-slot with display:none in inline style */
.mud-input-slot.mud-input-root.mud-input-root-outlined[style*="display:none"],
.mud-input-slot.mud-input-root.mud-input-root-outlined[style*="display: none"],
div.mud-input-slot.mud-input-root.mud-input-root-outlined[style*="display:none"],
div.mud-input-slot.mud-input-root.mud-input-root-outlined[style*="display: none"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    position: absolute !important;
    visibility: hidden !important;
    flex: 0 0 0 !important;
    flex-basis: 0 !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

/* Ensure hidden input slots don't affect layout in parent containers */
.mud-input.mud-input-outlined > div.mud-input-slot.mud-input-root.mud-input-root-outlined[style*="display:none"],
.mud-input.mud-input-outlined > div.mud-input-slot.mud-input-root.mud-input-root-outlined[style*="display: none"],
.mud-input-control > div.mud-input-slot.mud-input-root.mud-input-root-outlined[style*="display:none"],
.mud-input-control > div.mud-input-slot.mud-input-root.mud-input-root-outlined[style*="display: none"] {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    flex: 0 0 0 !important;
}

/* Prevent hidden elements from affecting flex/grid layouts */
.mud-grid > div.mud-input-slot[style*="display:none"],
.mud-grid > div.mud-input-slot[style*="display: none"],
.mud-item > div.mud-input-slot[style*="display:none"],
.mud-item > div.mud-input-slot[style*="display: none"] {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    flex-basis: 0 !important;
}

/* Vendor icons (Microsoft, Okta, Adobe, ServiceNow, etc.)
   SVGs in /images/vendors/ use fill: currentColor so they inherit text color
   and work in both light and dark themes. Use as <img src="..." class="vendor-icon" />
   or inline SVG with class .vendor-icon. */
.vendor-icon {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
    color: inherit;
}
.vendor-icon-sm { width: 1em; height: 1em; vertical-align: -0.2em; }
.vendor-icon-lg { width: 1.5em; height: 1.5em; vertical-align: -0.3em; }
.vendor-icon-xl { width: 2em; height: 2em; vertical-align: -0.4em; }
/* When using as <img>, SVG fill won't inherit; use CSS filter for dark/light if needed, or embed SVG inline. */
img.vendor-icon { filter: none; }
/* Multi-color brand icons (e.g. Entra) keep their colors in both light and dark mode. */
img.vendor-icon.vendor-icon-colored { filter: none !important; }
html[data-theme="dark"] img.vendor-icon:not(.vendor-icon-colored) { filter: brightness(0) invert(1); }
html:not([data-theme="light"]) img.vendor-icon:not(.vendor-icon-colored) { filter: brightness(0) invert(1); }
html[data-theme="light"] img.vendor-icon { filter: none; }

/* Fallback for places that render vendor images without .vendor-icon class */
html[data-theme="dark"] img[src$="/images/vendors/okta.svg"],
html:not([data-theme="light"]) img[src$="/images/vendors/okta.svg"],
html[data-theme="dark"] img[src$="/images/vendors/active-directory-icon.png"],
html:not([data-theme="light"]) img[src$="/images/vendors/active-directory-icon.png"],
html[data-theme="dark"] img[src$="/images/vendors/microsoft.svg"],
html:not([data-theme="light"]) img[src$="/images/vendors/microsoft.svg"] {
    filter: brightness(0) invert(1);
}

/* ApexCharts: improve grid and axis visibility in dark mode (color set in JS; stroke ensures lines are visible) */
html[data-theme="dark"] .apexcharts-gridline,
html:not([data-theme="light"]) .apexcharts-gridline {
    stroke-width: 1px;
}
html[data-theme="dark"] .apexcharts-xaxis-tick,
html[data-theme="dark"] .apexcharts-yaxis-tick,
html:not([data-theme="light"]) .apexcharts-xaxis-tick,
html:not([data-theme="light"]) .apexcharts-yaxis-tick {
    stroke: rgba(255, 255, 255, 0.4);
}

/* ========== Docs viewer ========== */
.docs-layout {
    padding-bottom: 2rem;
}

.docs-layout .docs-sidebar {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 110px);
    overflow: auto;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    font-family: var(--syba-font-family);
    font-size: 0.9375rem;
}

.docs-layout .docs-sidebar .mud-nav-link {
    border-radius: 8px;
    margin-bottom: 2px;
}

.docs-layout .docs-sidebar .mud-nav-link:hover {
    background: rgba(1, 208, 255, 0.06);
}

.docs-nav-active {
    background: rgba(1, 208, 255, 0.12) !important;
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 8px;
    font-weight: 600;
}

.docs-breadcrumb-wrap {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.docs-breadcrumbs .mud-breadcrumb-item {
    font-size: 0.95rem;
}

.docs-layout .docs-article {
    min-height: 480px;
    border-radius: 12px;
    border-left: 4px solid var(--mud-palette-primary);
}

/* Use a Latin-safe font stack in docs to avoid decorative font substituting Greek/lookalike glyphs (e.g. A → Α) */
.docs-content {
    font-size: 1.0625rem; /* ~17px – larger body for readability */
    font-family: var(--syba-font-family);
}

.docs-content h1,
.docs-content h2,
.docs-content h3,
.docs-content h4 {
    font-family: var(--syba-font-family);
    line-height: 1.3;
    scroll-margin-top: 5rem;
}

/* Page title: single clear H1 */
.docs-content h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

.docs-content h1:first-child {
    margin-top: 0;
}

/* Major sections (Where to find it, How to use it, etc.) */
.docs-content h2 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.docs-content h2:first-of-type {
    margin-top: 1.25rem;
}

/* Subsections under H2 – clearly subordinate */
.docs-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--mud-palette-primary);
}

.docs-content h4 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-top: 1.25rem;
    margin-bottom: 0.4rem;
}

.docs-content p,
.docs-content li {
    line-height: 1.7;
}

/* Global: breadcrumbs are disabled across all pages */
.mud-breadcrumbs {
    display: none !important;
}

.docs-content ul,
.docs-content ol {
    padding-left: 1.5rem;
}

.docs-content a {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.docs-content a:hover {
    text-decoration: underline;
}

/* Subtle section dividers so headers define structure, not the rule */
.docs-content hr {
    border: none;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin: 1.25rem 0;
    opacity: 0.7;
}

.docs-content pre {
    background: rgba(2, 132, 199, 0.1);
    border-radius: 10px;
    padding: 1rem;
    overflow-x: auto;
    border: 1px solid var(--mud-palette-lines-default);
}

.docs-content code {
    background: rgba(2, 132, 199, 0.15);
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    font-size: 0.9em;
}

.docs-content pre code {
    background: transparent;
    padding: 0;
}

.docs-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 8px;
    overflow: hidden;
}

.docs-content th,
.docs-content td {
    border: 1px solid var(--mud-palette-table-lines);
    padding: 0.65rem 0.85rem;
    text-align: left;
}

.docs-content th {
    background: var(--mud-palette-table-hover);
    font-weight: 600;
}

.docs-content blockquote {
    border-left: 4px solid var(--mud-palette-primary);
    margin: 1.25rem 0;
    padding: 0.75rem 1.25rem;
    background: rgba(1, 208, 255, 0.08);
    border-radius: 0 8px 8px 0;
}

.docs-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ========== Docs home ========== */
.docs-home-header {
    margin-bottom: 0.5rem;
}

.docs-home-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.docs-home-subtitle {
    margin-top: 0.25rem;
    max-width: 42rem;
}

.docs-section-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.docs-section-card {
    transition: box-shadow 0.25s ease, transform 0.2s ease, border-color 0.2s ease;
    border-radius: 12px;
    height: 100%;
    border: 1px solid var(--mud-palette-lines-default);
}

.docs-section-card-link:hover .docs-section-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    border-color: var(--mud-palette-primary);
}

.docs-section-card-icon {
    margin-bottom: 0.75rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(1, 208, 255, 0.1);
    border-radius: 10px;
}

.docs-section-card-body {
    padding: 0;
}

.docs-section-card-title {
    font-weight: 600;
    line-height: 1.3;
}

.docs-section-card-desc {
    font-size: 0.875rem;
    line-height: 1.4;
    min-height: 2.8em;
}

/* MudAlert: ensure inner content (MudText, lists, etc.) inherits the alert's
   own severity-appropriate text color instead of the global palette text color.
   Custom web branding may override --mud-palette-text-primary to a light value
   for dark surfaces, which becomes invisible inside alerts with light backgrounds. */
.mud-alert .mud-alert-message,
.mud-alert .mud-alert-message .mud-typography,
.mud-alert .mud-alert-message ul,
.mud-alert .mud-alert-message li,
.mud-alert .mud-alert-message p {
    color: inherit !important;
}

/* Automation Hub sidebar buttons: override MudBlazor's display:inherit on .mud-button-label
   which inherits inline-flex + justify-content:center from the button root and centres the text. */
.automation-filter-button .mud-button-label,
.automation-filter-sub-button .mud-button-label,
.automation-category-toggle .mud-button-label {
    display: block;
    width: 100%;
    text-align: left;
}

/* ============================================================================
   Automation design tokens and shared primitives
   ============================================================================ */
:root {
    --auto-space-1: 4px;
    --auto-space-2: 8px;
    --auto-space-3: 12px;
    --auto-space-4: 16px;
    --auto-space-5: 20px;
    --auto-space-6: 24px;

    --auto-radius-sm: 8px;
    --auto-radius-md: 12px;
    --auto-radius-lg: 16px;
    --auto-node-radius: 12px;

    --auto-surface: var(--mud-palette-surface);
    --auto-surface-muted: var(--mud-palette-background-grey);
    --auto-border: var(--mud-palette-divider);
    --auto-shadow: var(--syba-card-shadow);

    --auto-node-trigger: var(--mud-palette-primary);
    --auto-node-lookup: var(--mud-palette-info);
    --auto-node-condition: var(--mud-palette-secondary);
    --auto-node-action: var(--mud-palette-success);

    --auto-status-success: var(--mud-palette-success);
    --auto-status-warning: var(--mud-palette-warning);
    --auto-status-error: var(--mud-palette-error);
    --auto-status-neutral: var(--mud-palette-text-secondary);
}

.automation-surface {
    background: var(--auto-surface);
    border: 1px solid var(--auto-border);
    border-radius: var(--auto-radius-md);
    box-shadow: var(--auto-shadow);
}

.automation-status-chip.is-success {
    color: var(--auto-status-success);
    border-color: color-mix(in srgb, var(--auto-status-success) 35%, transparent);
}

.automation-status-chip.is-warning {
    color: var(--auto-status-warning);
    border-color: color-mix(in srgb, var(--auto-status-warning) 35%, transparent);
}

.automation-status-chip.is-error {
    color: var(--auto-status-error);
    border-color: color-mix(in srgb, var(--auto-status-error) 35%, transparent);
}

/* ============================================================================
   Automation Flow Diagram — theme-aware nodes, avatars, and connectors.

   A global rule forces .mud-avatar-filled to have a transparent background,
   which made the MudAvatar-based circular icons invisible on the flow diagram
   (especially in light mode where the avatars' contrast-text icon color is
   usually white). The flow diagram now uses plain <div class="automation-flow-avatar">
   wrappers so colors are fully under our control and work in both themes.
   ============================================================================ */

.automation-flow-diagram .automation-flow-node {
    background: var(--mud-palette-surface);
}

.automation-flow-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    background-color: var(--automation-flow-avatar-bg, var(--mud-palette-background-grey));
    color: var(--automation-flow-avatar-fg, var(--mud-palette-text-primary));
    transition: background-color 0.15s ease, color 0.15s ease;
}

.automation-flow-avatar .mud-icon-root,
.automation-flow-avatar .mud-svg-icon {
    color: inherit !important;
    fill: currentColor !important;
    font-size: 1.25rem;
}

.automation-flow-avatar-primary {
    --automation-flow-avatar-bg: var(--mud-palette-primary);
    --automation-flow-avatar-fg: var(--mud-palette-primary-contrast-text);
}

.automation-flow-avatar-secondary {
    --automation-flow-avatar-bg: var(--mud-palette-secondary);
    --automation-flow-avatar-fg: var(--mud-palette-secondary-contrast-text);
}

.automation-flow-avatar-info {
    --automation-flow-avatar-bg: var(--mud-palette-info);
    --automation-flow-avatar-fg: var(--mud-palette-info-contrast-text);
}

.automation-flow-avatar-success {
    --automation-flow-avatar-bg: var(--mud-palette-success);
    --automation-flow-avatar-fg: var(--mud-palette-success-contrast-text);
}

.automation-flow-avatar-warning {
    --automation-flow-avatar-bg: var(--mud-palette-warning);
    --automation-flow-avatar-fg: var(--mud-palette-warning-contrast-text);
}

.automation-flow-avatar-error {
    --automation-flow-avatar-bg: var(--mud-palette-error);
    --automation-flow-avatar-fg: var(--mud-palette-error-contrast-text);
}

.automation-flow-avatar-default,
.automation-flow-avatar-end {
    --automation-flow-avatar-bg: var(--mud-palette-background-grey);
    --automation-flow-avatar-fg: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
}

/* Vertical connector line + arrow between nodes. */
.automation-flow-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 44px;
    position: relative;
    flex-shrink: 0;
}

.automation-flow-connector-line {
    width: 2px;
    height: 100%;
    background-color: var(--mud-palette-lines-default);
    border-radius: 1px;
}

.automation-flow-connector-arrow {
    position: absolute;
    bottom: 0;
    color: var(--mud-palette-text-secondary);
}

/* Pass / Fail branch chips on a conditional connector. Readable in both themes. */
.automation-flow-branch-chip {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 999px;
    white-space: nowrap;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.automation-flow-branch-chip .mud-icon-root,
.automation-flow-branch-chip .mud-svg-icon {
    color: inherit !important;
    fill: currentColor !important;
    font-size: 1rem;
}

.automation-flow-branch-chip.is-pass {
    left: 48px;
    color: var(--mud-palette-success);
    border-color: color-mix(in srgb, var(--mud-palette-success) 45%, transparent);
    background-color: color-mix(in srgb, var(--mud-palette-success) 12%, var(--mud-palette-surface));
}

.automation-flow-branch-chip.is-fail {
    right: 48px;
    color: var(--mud-palette-error);
    border-color: color-mix(in srgb, var(--mud-palette-error) 45%, transparent);
    background-color: color-mix(in srgb, var(--mud-palette-error) 12%, var(--mud-palette-surface));
}

/* ── Owned-App Workspace Navigation ────────────────────────────────── */
.owned-workspace-nav {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    border-bottom: 2px solid var(--mud-palette-divider);
    -webkit-overflow-scrolling: touch;
}

.owned-workspace-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 6px 6px 0 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.owned-workspace-nav-item:hover {
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.owned-workspace-nav-item.is-active {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
    font-weight: 600;
}

.owned-workspace-nav-item.is-disabled {
    color: var(--mud-palette-text-disabled);
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: auto;
}

.owned-workspace-nav-item.is-disabled:hover {
    color: var(--mud-palette-text-disabled);
    background: transparent;
}

@media (max-width: 600px) {
    .owned-workspace-nav-item {
        padding: 8px 12px;
        font-size: 0.75rem;
    }

    .owned-workspace-nav-item .mud-icon-root {
        display: none;
    }
}

/* ── Owned-App Workspace Card Grid ─────────────────────────────────── */
.owned-workspace-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.owned-workspace-card .owned-workspace-card-body {
    flex: 1;
}

.owned-workspace-card-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.owned-workspace-status-chip {
    margin-left: 0;
}

.owned-workspace-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
    margin-bottom: 12px;
}

/* Disabled / not-applicable state for workspace cards (e.g. Inactivity Policy
   when the app doesn't require assignment and has no group-only removal policy).
   Mutes the visual presence so it's obviously inactive while still readable. */
.owned-workspace-card.is-disabled {
    background: color-mix(in srgb, var(--mud-palette-text-disabled) 6%, transparent);
    border: 1px dashed color-mix(in srgb, var(--mud-palette-text-disabled) 45%, transparent);
    box-shadow: none;
}

.owned-workspace-card.is-disabled .owned-workspace-card-icon {
    background: color-mix(in srgb, var(--mud-palette-text-disabled) 18%, transparent);
    color: var(--mud-palette-text-disabled);
}

.owned-workspace-card.is-disabled .owned-workspace-card-body .mud-typography-subtitle1,
.owned-workspace-card.is-disabled .owned-workspace-card-body .mud-typography-body2 {
    color: var(--mud-palette-text-disabled);
}

.owned-workspace-hover-help {
    position: relative;
    display: inline-flex;
    outline: none;
}

.owned-workspace-hover-help-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 28%, transparent);
    background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent);
    color: var(--mud-palette-info);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: help;
}

.owned-workspace-hover-help-trigger .mud-icon-root {
    font-size: 1rem;
}

.owned-workspace-card.is-disabled .owned-workspace-hover-help-trigger {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 26%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    color: var(--mud-palette-text-primary);
}

.owned-workspace-hover-help-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 20;
    width: min(360px, calc(100vw - 48px));
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 20%, var(--mud-palette-divider));
    background: color-mix(in srgb, var(--mud-palette-surface) 96%, var(--mud-palette-background));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.owned-workspace-hover-help-popover::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 24px;
    width: 14px;
    height: 14px;
    background: inherit;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-primary) 20%, var(--mud-palette-divider));
    border-left: 1px solid color-mix(in srgb, var(--mud-palette-primary) 20%, var(--mud-palette-divider));
    transform: rotate(45deg);
}

.owned-workspace-hover-help:hover .owned-workspace-hover-help-popover,
.owned-workspace-hover-help:focus-within .owned-workspace-hover-help-popover {
    opacity: 1;
    transform: translateY(0);
}

.owned-workspace-hover-help:focus-visible .owned-workspace-hover-help-trigger {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

/* Access Modeling: "App: <username>" line shown beneath email in the User cell
   when the downstream-app username (Okta AppUserName) differs from the directory
   email. Uses the tertiary palette so it's visually distinct from the primary
   display name + email without adding a new column. */
.access-modeling-app-username {
    display: inline-flex;
    align-items: center;
    font-style: italic;
    letter-spacing: 0.01em;
}

.access-modeling-app-username .mud-icon-inline {
    font-size: 0.95em;
    opacity: 0.8;
}

/* ============================================================
   Global MudSwitch: illuminate the track when toggled ON.

   MudBlazor's bundled CSS only nudges the track from opacity
   0.48 → 0.5 when checked — a change that is invisible in
   this dark theme. These rules override that with an explicit
   primary-colour fill so there is always a clear on/off state.

   Works for both light and dark themes because
   --mud-palette-primary is re-injected by MudThemeProvider for
   each theme. The !important flag is required so these rules
   beat MudBlazor.min.css regardless of load order.
   ============================================================ */

/* Default-colour switches (no Color="…" prop, or Color.Default):
   apply the primary colour when ON */
.mud-switch-base.mud-checked + .mud-switch-track.mud-default {
    background-color: var(--mud-palette-primary) !important;
    opacity: 0.85 !important;
}

/* All other checked tracks: raise opacity so the colour they
   already carry (primary, success, warning, etc.) is clearly
   visible rather than a near-invisible semi-transparent wash */
.mud-switch-base.mud-checked + .mud-switch-track {
    opacity: 0.85 !important;
}

/* PIM Admin phase 2 text action group:
   MudBlazor injects a seam by applying an inline-start border on grouped buttons.
   Force-remove that seam for these scaffold actions regardless of internal class names. */
.pim-admin-phase2-actions .mud-button-group-horizontal .mud-button-root:not(:first-child) {
    border-left: 0 !important;
    border-inline-start: 0 !important;
}

/* Resource detail pages: give hidden-tab layouts enough breathing room. */
[class*="-details-content-tabs"] {
    overflow: hidden;
}

[class*="-details-content-tabs"] > .mud-tabs-panels {
    border-top: 0 !important;
}

[class*="-details-content-tabs"] .mud-tab-panel {
    padding: 24px !important;
}

[class*="-details-content-tabs"] .mud-tab-panel > .mud-typography-h6:first-child {
    margin-top: 4px !important;
    margin-bottom: 16px !important;
}

[class*="-details-content-tabs"] .mud-table-container {
    box-shadow: none !important;
}

[class*="-details-content-tabs"] .mud-table-head .mud-table-cell {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

[class*="-details-content-tabs"] .mud-table-cell {
    vertical-align: top;
}

/* Resources section: additional per-cell width cap and inline-element shaping on top of global table rules. */
.resources-layout .mud-table-cell,
.resources-layout .mud-table-head .mud-table-cell,
.resources-layout .mud-table-body .mud-table-cell,
.resources-layout .mud-table-foot .mud-table-cell {
    max-width: clamp(8rem, 18vw, 22rem);
}

.resources-layout .mud-table-head .mud-table-cell,
.resources-layout .mud-table-head .mud-table-sort-label {
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.resources-layout .mud-table-cell .mud-button-root,
.resources-layout .mud-table-cell .mud-icon-button {
    flex: 0 0 auto;
}