/* ==========================================================================
   OBSIDIAN COMMAND CENTER - Admin Panel Theme
   With Animations & Micro-interactions
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframe Animations
   -------------------------------------------------------------------------- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 20px 5px rgba(245, 158, 11, 0.2); }
}

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

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

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes ripple {
    to { transform: scale(4); opacity: 0; }
}

@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes borderGlow {
    0%, 100% { border-color: rgba(245, 158, 11, 0.2); }
    50% { border-color: rgba(245, 158, 11, 0.5); }
}

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

/* --------------------------------------------------------------------------
   Theme Transition - Smooth & Dramatic
   -------------------------------------------------------------------------- */
html {
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body {
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.3s ease !important;
}

*, *::before, *::after {
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s ease,
                color 0.25s ease,
                box-shadow 0.3s ease,
                transform 0.2s ease !important;
}

/* Exclude animations from transition */
.mud-progress-linear-bar,
.mud-progress-circular-svg,
.no-transition,
[class*="animate-"] {
    transition: none !important;
}

/* --------------------------------------------------------------------------
   CSS Variables
   -------------------------------------------------------------------------- */
:root {
    --occ-primary: #F59E0B;
    --occ-primary-light: #FBBF24;
    --occ-primary-dark: #D97706;
    --occ-accent: #B45309;
    --occ-success: #22C55E;
    --occ-warning: #F59E0B;
    --occ-error: #EF4444;
    --occ-info: #3B82F6;
    --occ-font-display: 'Instrument Sans', sans-serif;
    --occ-font-body: 'Outfit', sans-serif;
    --occ-font-mono: 'JetBrains Mono', monospace;
    --occ-radius-sm: 4px;
    --occ-radius-md: 6px;
    --occ-radius-lg: 8px;
    --occ-radius-xl: 12px;
}

.mud-theme-dark {
    --occ-background: #09090B;
    --occ-surface: #18181B;
    --occ-surface-elevated: #27272A;
    --occ-surface-hover: #3F3F46;
    --occ-border: #3F3F46;
    --occ-border-light: #27272A;
    --occ-text-primary: #FAFAFA;
    --occ-text-secondary: #A1A1AA;
    --occ-text-muted: #71717A;
    --occ-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --occ-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
    --occ-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);
    --occ-glow-primary: 0 0 20px rgba(245, 158, 11, 0.15);
    --occ-overlay: rgba(0, 0, 0, 0.5);
}

.mud-theme-light {
    --occ-background: #F4F4F5;
    --occ-surface: #FFFFFF;
    --occ-surface-elevated: #FAFAFA;
    --occ-surface-hover: #F4F4F5;
    --occ-border: #E4E4E7;
    --occ-border-light: #E4E4E7;
    --occ-text-primary: #18181B;
    --occ-text-secondary: #52525B;
    --occ-text-muted: #71717A;
    --occ-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --occ-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --occ-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --occ-glow-primary: 0 0 20px rgba(217, 119, 6, 0.15);
    --occ-overlay: rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   Base Styles
   -------------------------------------------------------------------------- */
html, body {
    font-family: var(--occ-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-family: var(--occ-font-display) !important;
    letter-spacing: -0.01em;
}

.occ-mono, .occ-data {
    font-family: var(--occ-font-mono);
}

/* --------------------------------------------------------------------------
   Page Content Animation
   -------------------------------------------------------------------------- */
.mud-main-content {
    animation: fadeIn 0.4s ease-out;
}

.mud-container {
    animation: fadeInUp 0.5s ease-out;
}

/* --------------------------------------------------------------------------
   Card Animations
   -------------------------------------------------------------------------- */
.mud-card {
    background: var(--occ-surface) !important;
    border: 1px solid var(--occ-border-light) !important;
    border-radius: var(--occ-radius-lg) !important;
    box-shadow: var(--occ-shadow-sm) !important;
    animation: fadeInUp 0.4s ease-out backwards;
    transform-origin: center;
}

.mud-card:hover {
    box-shadow: var(--occ-shadow-md) !important;
    transform: translateY(-2px);
}

/* Staggered card animation */
.mud-grid > .mud-item:nth-child(1) .mud-card { animation-delay: 0.05s; }
.mud-grid > .mud-item:nth-child(2) .mud-card { animation-delay: 0.1s; }
.mud-grid > .mud-item:nth-child(3) .mud-card { animation-delay: 0.15s; }
.mud-grid > .mud-item:nth-child(4) .mud-card { animation-delay: 0.2s; }
.mud-grid > .mud-item:nth-child(5) .mud-card { animation-delay: 0.25s; }
.mud-grid > .mud-item:nth-child(6) .mud-card { animation-delay: 0.3s; }

/* --------------------------------------------------------------------------
   Stat Cards - Special Animations
   -------------------------------------------------------------------------- */
.occ-stat-card {
    background: var(--occ-surface) !important;
    border: 1px solid var(--occ-border-light) !important;
    border-radius: var(--occ-radius-lg) !important;
    position: relative;
    overflow: hidden;
}

.occ-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.05), transparent);
    transition: left 0.5s ease;
}

.occ-stat-card:hover::before {
    left: 100%;
}

.occ-stat-card:hover {
    border-color: rgba(245, 158, 11, 0.3) !important;
    box-shadow: var(--occ-shadow-md), 0 0 20px rgba(245, 158, 11, 0.1) !important;
    transform: translateY(-4px) scale(1.01);
}

.occ-stat-card:hover .occ-stat-icon {
    animation: iconPop 0.3s ease;
}

.occ-stat-card-highlight {
    border-left: 3px solid var(--occ-primary) !important;
}

.occ-stat-card-highlight:hover {
    animation: borderGlow 1.5s ease-in-out infinite;
}

.occ-stat-value {
    font-family: var(--occ-font-mono);
    font-size: 28px;
    font-weight: 600;
    color: var(--occ-text-primary);
    animation: countUp 0.6s ease-out;
}

.occ-stat-label {
    font-family: var(--occ-font-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    color: var(--occ-text-muted) !important;
}

.occ-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--occ-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--occ-surface-elevated);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.occ-stat-icon:hover {
    transform: rotate(10deg) scale(1.1);
}

.occ-stat-icon-primary { background: rgba(245, 158, 11, 0.1); color: var(--occ-primary); }
.occ-stat-icon-success { background: rgba(34, 197, 94, 0.1); color: #22C55E; }
.occ-stat-icon-info { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }
.occ-stat-icon-error { background: rgba(239, 68, 68, 0.1); color: #EF4444; }
.occ-stat-icon-amber { background: rgba(245, 158, 11, 0.15); color: var(--occ-primary); }
.occ-stat-icon-warning { background: rgba(245, 158, 11, 0.1); color: var(--occ-primary); }

/* --------------------------------------------------------------------------
   Button Animations
   -------------------------------------------------------------------------- */
.mud-button-root {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mud-button-root::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.mud-button-root:active::after {
    width: 200px;
    height: 200px;
}

.mud-button-filled:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.mud-button-filled:active {
    transform: translateY(0);
}

.mud-button-outlined:hover {
    transform: scale(1.02);
}

/* Floating action button pulse */
.mud-fab {
    animation: pulseGlow 2s ease-in-out infinite;
}

.mud-fab:hover {
    animation: none;
    transform: scale(1.1) rotate(90deg);
}

/* --------------------------------------------------------------------------
   Icon Button Animations
   -------------------------------------------------------------------------- */
.mud-icon-button:hover .mud-icon-root {
    transform: scale(1.15);
}

.mud-icon-button:active .mud-icon-root {
    transform: scale(0.95);
}

/* --------------------------------------------------------------------------
   Table Animations
   -------------------------------------------------------------------------- */
.mud-table {
    background: var(--occ-surface) !important;
    border: 1px solid var(--occ-border-light) !important;
    border-radius: var(--occ-radius-lg) !important;
    animation: fadeIn 0.4s ease-out;
}

.mud-table-head {
    background: var(--occ-surface-elevated) !important;
}

.mud-table-head th {
    font-family: var(--occ-font-display) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--occ-text-secondary) !important;
    border-bottom: 1px solid var(--occ-border-light) !important;
}

.mud-table-row {
    border-bottom: 1px solid var(--occ-border-light) !important;
    transition: all 0.2s ease !important;
}

.mud-table-row:hover {
    background: var(--occ-surface-hover) !important;
    transform: scale(1.005);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mud-table-row:hover td:first-child {
    border-left: 3px solid var(--occ-primary);
}

/* Row entrance animation */
.mud-table-body .mud-table-row {
    animation: fadeInLeft 0.3s ease-out backwards;
}

.mud-table-body .mud-table-row:nth-child(1) { animation-delay: 0.05s; }
.mud-table-body .mud-table-row:nth-child(2) { animation-delay: 0.1s; }
.mud-table-body .mud-table-row:nth-child(3) { animation-delay: 0.15s; }
.mud-table-body .mud-table-row:nth-child(4) { animation-delay: 0.2s; }
.mud-table-body .mud-table-row:nth-child(5) { animation-delay: 0.25s; }

/* --------------------------------------------------------------------------
   Dialog/Modal Animations & Styling
   -------------------------------------------------------------------------- */
/* Dark theme dialog defaults (fallback for dialogs rendered outside theme container) */
.mud-dialog {
    background: var(--occ-surface, #18181B) !important;
    border: 1px solid var(--occ-border-light, #27272A) !important;
    border-radius: var(--occ-radius-xl, 12px) !important;
    box-shadow: var(--occ-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.7)) !important;
    animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.mud-dialog-title {
    background: var(--occ-surface, #18181B) !important;
    border-bottom: 1px solid var(--occ-border-light, #27272A) !important;
    padding: 16px 24px !important;
    color: var(--occ-text-primary, #FAFAFA) !important;
}

.mud-dialog-title .mud-typography {
    color: var(--occ-text-primary, #FAFAFA) !important;
    font-family: var(--occ-font-display) !important;
    font-weight: 600 !important;
}

.mud-dialog-content {
    background: var(--occ-surface, #18181B) !important;
    color: var(--occ-text-primary, #FAFAFA) !important;
    padding: 24px !important;
}

.mud-dialog-content .mud-typography {
    color: var(--occ-text-primary, #FAFAFA) !important;
}

.mud-dialog-content .mud-input-control {
    background: var(--occ-surface-elevated, #27272A) !important;
}

.mud-dialog-actions {
    background: var(--occ-surface, #18181B) !important;
    border-top: 1px solid var(--occ-border-light, #27272A) !important;
    padding: 12px 24px !important;
    gap: 8px !important;
}

/* Dialog buttons styling */
.mud-dialog-actions .mud-button-root {
    min-width: 80px !important;
}

.mud-dialog-actions .mud-button-text {
    color: var(--occ-text-secondary, #A1A1AA) !important;
}

.mud-dialog-actions .mud-button-text:hover {
    background: var(--occ-surface-hover, #3F3F46) !important;
    color: var(--occ-text-primary, #FAFAFA) !important;
}

.mud-dialog-actions .mud-button-filled {
    background: var(--occ-primary, #F59E0B) !important;
    color: #09090B !important;
}

.mud-dialog-actions .mud-button-filled:hover {
    background: var(--occ-primary-light, #FBBF24) !important;
}

/* Danger/Error dialog buttons */
.mud-dialog-actions .mud-button-filled.mud-button-filled-error {
    background: #EF4444 !important;
    color: #FFFFFF !important;
}

.mud-dialog-actions .mud-button-filled.mud-button-filled-error:hover {
    background: #DC2626 !important;
}

/* Dialog input fields */
.mud-dialog .mud-input-outlined .mud-input-slot {
    background: var(--occ-surface-elevated, #27272A) !important;
}

.mud-dialog .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--occ-border-light, #27272A) !important;
}

.mud-dialog .mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--occ-primary, #F59E0B) !important;
}

/* Dialog select/picker styling */
.mud-dialog .mud-select .mud-input-slot {
    background: var(--occ-surface-elevated, #27272A) !important;
}

.mud-dialog .mud-picker .mud-input-slot {
    background: var(--occ-surface-elevated, #27272A) !important;
}

/* Confirmation dialog specific styling */
.mud-dialog .mud-alert {
    background: var(--occ-surface-elevated, #27272A) !important;
    border: 1px solid var(--occ-border-light, #27272A) !important;
}

/* Dialog MudList styling (for search results etc.) */
.mud-dialog .mud-list {
    background: var(--occ-surface-elevated, #27272A) !important;
    border: 1px solid var(--occ-border-light, #27272A) !important;
}

.mud-dialog .mud-list-item {
    color: var(--occ-text-primary, #FAFAFA) !important;
}

.mud-dialog .mud-list-item:hover {
    background: var(--occ-surface-hover, #3F3F46) !important;
}

.mud-overlay {
    animation: fadeIn 0.2s ease-out;
    background: var(--occ-overlay) !important;
    backdrop-filter: blur(4px);
}

.mud-overlay-dark {
    background: var(--occ-overlay) !important;
    backdrop-filter: blur(4px);
}

/* Light theme dialog adjustments */
.mud-theme-light .mud-dialog {
    background: #FFFFFF !important;
    border-color: #E4E4E7 !important;
}

.mud-theme-light .mud-dialog-title {
    background: #FAFAFA !important;
    border-bottom-color: #E4E4E7 !important;
}

.mud-theme-light .mud-dialog-content {
    background: #FFFFFF !important;
}

.mud-theme-light .mud-dialog-actions {
    background: #FAFAFA !important;
    border-top-color: #E4E4E7 !important;
}

.mud-theme-light .mud-dialog .mud-input-outlined .mud-input-slot {
    background: #F4F4F5 !important;
}

.mud-theme-light .mud-dialog .mud-select .mud-input-slot {
    background: #F4F4F5 !important;
}

.mud-theme-light .mud-overlay,
.mud-theme-light .mud-overlay-dark {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px);
}

/* Inline Dialog Specific Styling (for @bind-Visible dialogs) */
.occ-inline-dialog,
.occ-inline-dialog.mud-dialog {
    background: var(--occ-surface) !important;
    border: 1px solid var(--occ-border-light) !important;
    border-radius: var(--occ-radius-xl) !important;
    box-shadow: var(--occ-shadow-lg) !important;
}

.occ-inline-dialog .mud-dialog-title,
.occ-inline-dialog .mud-dialog-content,
.occ-inline-dialog .mud-dialog-actions {
    background: var(--occ-surface) !important;
}

.occ-inline-dialog .mud-dialog-title {
    border-bottom: 1px solid var(--occ-border-light) !important;
    padding: 16px 24px !important;
}

.occ-inline-dialog .mud-dialog-content {
    padding: 24px !important;
    color: var(--occ-text-primary) !important;
}

.occ-inline-dialog .mud-dialog-actions {
    border-top: 1px solid var(--occ-border-light) !important;
    padding: 12px 24px !important;
}

.occ-inline-dialog .mud-input-outlined .mud-input-slot {
    background: var(--occ-surface-elevated) !important;
}

.occ-inline-dialog .mud-select .mud-input-slot {
    background: var(--occ-surface-elevated) !important;
}

/* Light theme override for inline dialogs */
.mud-theme-light .occ-inline-dialog,
.mud-theme-light .occ-inline-dialog.mud-dialog {
    background: #FFFFFF !important;
    border-color: #E4E4E7 !important;
}

.mud-theme-light .occ-inline-dialog .mud-dialog-title,
.mud-theme-light .occ-inline-dialog .mud-dialog-content,
.mud-theme-light .occ-inline-dialog .mud-dialog-actions {
    background: #FFFFFF !important;
}

.mud-theme-light .occ-inline-dialog .mud-dialog-title {
    background: #FAFAFA !important;
    border-bottom-color: #E4E4E7 !important;
}

.mud-theme-light .occ-inline-dialog .mud-dialog-actions {
    background: #FAFAFA !important;
    border-top-color: #E4E4E7 !important;
}

/* Overlay Dialog Container - ensures dialog is centered */
.mud-overlay-dialog {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1300 !important;
}

.mud-overlay-dialog .occ-inline-dialog {
    margin: 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}

/* --------------------------------------------------------------------------
   Snackbar/Toast Animations & Styling
   -------------------------------------------------------------------------- */
.mud-snackbar {
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 8px !important;
}

.mud-snackbar-content-message {
    animation: fadeIn 0.3s ease-out 0.1s backwards;
}

/* Force override MudBlazor palette colors for snackbars rendered outside theme container */
/* These use CSS custom properties that MudBlazor sets on :root */

/* Success - Green */
.mud-snackbar.mud-alert-text-success,
.mud-snackbar.mud-alert-filled-success,
.mud-snackbar.mud-alert-outlined-success {
    --mud-palette-success: #22C55E !important;
    --mud-palette-success-text: #22C55E !important;
    background: rgba(34, 197, 94, 0.15) !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    color: #22C55E !important;
}

.mud-snackbar.mud-alert-text-success *,
.mud-snackbar.mud-alert-filled-success *,
.mud-snackbar.mud-alert-outlined-success * {
    color: #22C55E !important;
}

/* Error - Red */
.mud-snackbar.mud-alert-text-error,
.mud-snackbar.mud-alert-filled-error,
.mud-snackbar.mud-alert-outlined-error {
    --mud-palette-error: #EF4444 !important;
    --mud-palette-error-text: #EF4444 !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #EF4444 !important;
}

.mud-snackbar.mud-alert-text-error *,
.mud-snackbar.mud-alert-filled-error *,
.mud-snackbar.mud-alert-outlined-error * {
    color: #EF4444 !important;
}

/* Warning - Orange/Amber */
.mud-snackbar.mud-alert-text-warning,
.mud-snackbar.mud-alert-filled-warning,
.mud-snackbar.mud-alert-outlined-warning {
    --mud-palette-warning: #F59E0B !important;
    --mud-palette-warning-text: #F59E0B !important;
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    color: #F59E0B !important;
}

.mud-snackbar.mud-alert-text-warning *,
.mud-snackbar.mud-alert-filled-warning *,
.mud-snackbar.mud-alert-outlined-warning * {
    color: #F59E0B !important;
}

/* Info - Blue */
.mud-snackbar.mud-alert-text-info,
.mud-snackbar.mud-alert-filled-info,
.mud-snackbar.mud-alert-outlined-info {
    --mud-palette-info: #3B82F6 !important;
    --mud-palette-info-text: #3B82F6 !important;
    background: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    color: #3B82F6 !important;
}

.mud-snackbar.mud-alert-text-info *,
.mud-snackbar.mud-alert-filled-info *,
.mud-snackbar.mud-alert-outlined-info * {
    color: #3B82F6 !important;
}

/* Normal/Default */
.mud-snackbar.mud-alert-text-normal,
.mud-snackbar.mud-alert-text-default {
    background: #27272A !important;
    border: 1px solid #3F3F46 !important;
    color: #FAFAFA !important;
}

.mud-snackbar.mud-alert-text-normal *,
.mud-snackbar.mud-alert-text-default * {
    color: #FAFAFA !important;
}

/* --------------------------------------------------------------------------
   Chip Animations
   -------------------------------------------------------------------------- */
.mud-chip {
    transition: all 0.2s ease !important;
}

.mud-chip:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.occ-chip-sm {
    height: 24px !important;
    font-size: 11px !important;
}

/* --------------------------------------------------------------------------
   Avatar Animations
   -------------------------------------------------------------------------- */
.mud-avatar {
    transition: all 0.3s ease !important;
}

.mud-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.occ-avatar {
    background: var(--occ-surface-elevated) !important;
    border: 1px solid var(--occ-border-light) !important;
    color: var(--occ-text-secondary) !important;
}

/* --------------------------------------------------------------------------
   Input Animations
   -------------------------------------------------------------------------- */
.mud-input-root {
    font-family: var(--occ-font-body) !important;
}

.mud-input {
    background: var(--occ-surface) !important;
    border-radius: var(--occ-radius-md) !important;
    transition: all 0.3s ease !important;
}

.mud-input:focus-within {
    border-color: var(--occ-primary) !important;
    box-shadow: var(--occ-glow-primary) !important;
    transform: scale(1.01);
}

.mud-input-label {
    transition: all 0.2s ease !important;
}

/* --------------------------------------------------------------------------
   Progress Bar Animations
   -------------------------------------------------------------------------- */
.mud-progress-linear {
    overflow: hidden;
}

.mud-progress-linear-bar {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.occ-progress-bar {
    background: var(--occ-surface-elevated) !important;
    position: relative;
    overflow: hidden;
}

.occ-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 2s infinite;
    background-size: 200% 100%;
}

/* --------------------------------------------------------------------------
   Loading Skeleton Animation
   -------------------------------------------------------------------------- */
.mud-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--occ-surface-elevated) !important;
}

.mud-skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    animation: shimmer 1.5s infinite;
    background-size: 200% 100%;
}

/* --------------------------------------------------------------------------
   Pagination Animation
   -------------------------------------------------------------------------- */
.mud-pagination .mud-pagination-item {
    transition: all 0.2s ease !important;
}

.mud-pagination .mud-pagination-item:hover {
    transform: scale(1.1);
}

.mud-pagination .mud-pagination-item.mud-pagination-item-selected {
    animation: pulse 0.3s ease;
}

/* --------------------------------------------------------------------------
   Tabs Animation
   -------------------------------------------------------------------------- */
.mud-tab {
    transition: all 0.3s ease !important;
    position: relative;
}

.mud-tab:hover {
    background: rgba(245, 158, 11, 0.05);
}

.mud-tab.mud-tab-active {
    color: var(--occ-primary) !important;
}

.mud-tabs-toolbar-active-content {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* --------------------------------------------------------------------------
   Switch Animation
   -------------------------------------------------------------------------- */
.mud-switch-track {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mud-switch-thumb {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mud-switch:hover .mud-switch-thumb {
    transform: scale(1.1);
}

/* --------------------------------------------------------------------------
   Tooltip Animation
   -------------------------------------------------------------------------- */
.mud-tooltip {
    animation: fadeIn 0.2s ease-out;
}

/* --------------------------------------------------------------------------
   Menu/Dropdown Animation
   -------------------------------------------------------------------------- */
.mud-menu {
    animation: slideDown 0.2s ease-out;
}

.mud-list-item {
    transition: all 0.2s ease !important;
}

.mud-list-item:hover {
    padding-left: 20px !important;
    background: rgba(245, 158, 11, 0.05) !important;
}

/* --------------------------------------------------------------------------
   Custom OCC Cards
   -------------------------------------------------------------------------- */
.occ-card {
    background: var(--occ-surface) !important;
    border: 1px solid var(--occ-border-light) !important;
    border-radius: var(--occ-radius-lg) !important;
    animation: fadeInUp 0.4s ease-out;
}

.occ-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--occ-shadow-md) !important;
}

.occ-card-header {
    background: var(--occ-surface-elevated) !important;
    border-bottom: 1px solid var(--occ-border-light) !important;
    padding: 16px !important;
}

.occ-card-title {
    font-family: var(--occ-font-display) !important;
    font-weight: 600 !important;
    color: var(--occ-text-primary) !important;
    display: flex;
    align-items: center;
}

.occ-card-title .mud-icon-root {
    transition: transform 0.3s ease;
}

.occ-card:hover .occ-card-title .mud-icon-root {
    transform: scale(1.1);
}

/* --------------------------------------------------------------------------
   Page Components
   -------------------------------------------------------------------------- */
.occ-page-title {
    font-family: var(--occ-font-display) !important;
    font-weight: 700 !important;
    color: var(--occ-text-primary) !important;
    animation: fadeInLeft 0.4s ease-out;
}

.occ-back-btn {
    background: var(--occ-surface-elevated) !important;
    border: 1px solid var(--occ-border-light) !important;
    transition: all 0.3s ease !important;
}

.occ-back-btn:hover {
    transform: translateX(-3px);
    background: var(--occ-surface-hover) !important;
}

.occ-table {
    background: transparent !important;
}

.occ-divider {
    border-color: var(--occ-border-light) !important;
    opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Animated Gradient Headers
   -------------------------------------------------------------------------- */
.occ-gradient-header {
    background: linear-gradient(-45deg, #F59E0B, #D97706, #B45309, #92400E);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   Floating Elements
   -------------------------------------------------------------------------- */
.occ-float {
    animation: float 3s ease-in-out infinite;
}

.occ-float-slow {
    animation: float 5s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Pulse Effects
   -------------------------------------------------------------------------- */
.occ-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.occ-pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Notification Badge Animation
   -------------------------------------------------------------------------- */
.mud-badge-content {
    animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mud-badge-dot {
    animation: pulse 1.5s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Text Colors
   -------------------------------------------------------------------------- */
.occ-text-primary { color: var(--occ-text-primary) !important; }
.occ-text-secondary { color: var(--occ-text-secondary) !important; }
.occ-text-muted { color: var(--occ-text-muted) !important; }
.occ-text-amber { color: var(--occ-primary) !important; }
.occ-text-success { color: #22C55E !important; }
.occ-text-error { color: #EF4444 !important; }
.occ-text-info { color: #3B82F6 !important; }

.mud-theme-light .occ-text-success { color: #16A34A !important; }
.mud-theme-light .occ-text-error { color: #DC2626 !important; }
.mud-theme-light .occ-text-info { color: #2563EB !important; }

/* --------------------------------------------------------------------------
   Backgrounds
   -------------------------------------------------------------------------- */
.occ-bg-surface { background: var(--occ-surface) !important; }
.occ-bg-elevated { background: var(--occ-surface-elevated) !important; }
.occ-bg-success { background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%); }
.occ-bg-info { background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); }
.occ-bg-amber { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); }

/* --------------------------------------------------------------------------
   Monospace
   -------------------------------------------------------------------------- */
.occ-mono {
    font-family: var(--occ-font-mono) !important;
    font-size: 13px !important;
}

/* --------------------------------------------------------------------------
   Scrollbar
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--occ-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--occ-border);
    border-radius: 4px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--occ-primary);
}

/* --------------------------------------------------------------------------
   Hover Glow Effects
   -------------------------------------------------------------------------- */
.occ-hover-glow:hover {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3) !important;
}

/* --------------------------------------------------------------------------
   Click Ripple Effect (Add to clickable elements)
   -------------------------------------------------------------------------- */
.occ-ripple {
    position: relative;
    overflow: hidden;
}

.occ-ripple::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(245, 158, 11, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
    opacity: 0;
}

.occ-ripple:active::before {
    width: 300px;
    height: 300px;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Reduce motion for accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* --------------------------------------------------------------------------
   Filter Button Groups - Active State Styling
   -------------------------------------------------------------------------- */
.occ-button-group,
.occ-btn-group {
    background: var(--occ-surface) !important;
    border: 1px solid var(--occ-border-light) !important;
    border-radius: var(--occ-radius-md) !important;
    padding: 4px !important;
    gap: 4px !important;
}

.occ-button-group .mud-button-root,
.occ-btn-group .mud-button-root {
    border-radius: calc(var(--occ-radius-md) - 2px) !important;
    font-weight: 500 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-width: 70px !important;
}

/* Inactive/Outlined buttons in filter groups */
.occ-button-group .mud-button-root.mud-button-outlined,
.occ-btn-group .mud-button-root.mud-button-outlined {
    border: none !important;
    background: transparent !important;
    color: var(--occ-text-secondary) !important;
}

.occ-button-group .mud-button-root.mud-button-outlined:hover,
.occ-btn-group .mud-button-root.mud-button-outlined:hover {
    background: var(--occ-surface-hover) !important;
    color: var(--occ-text-primary) !important;
}

/* Active/Filled buttons in filter groups */
.occ-button-group .mud-button-root.mud-button-filled,
.occ-btn-group .mud-button-root.mud-button-filled {
    background: var(--occ-primary) !important;
    color: #000 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;
}

.occ-button-group .mud-button-root.mud-button-filled:hover,
.occ-btn-group .mud-button-root.mud-button-filled:hover {
    background: var(--occ-primary-light) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important;
    transform: translateY(-1px);
}

/* Light theme adjustments */
.mud-theme-light .occ-button-group,
.mud-theme-light .occ-btn-group {
    background: var(--occ-surface-elevated) !important;
    border-color: var(--occ-border-color) !important;
}

.mud-theme-light .occ-button-group .mud-button-root.mud-button-outlined,
.mud-theme-light .occ-btn-group .mud-button-root.mud-button-outlined {
    color: var(--occ-text-muted) !important;
}

.mud-theme-light .occ-button-group .mud-button-root.mud-button-outlined:hover,
.mud-theme-light .occ-btn-group .mud-button-root.mud-button-outlined:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--occ-text-primary) !important;
}

/* General MudButtonGroup styling (fallback for groups without custom classes) */
.mud-button-group-root {
    background: var(--occ-surface) !important;
    border: 1px solid var(--occ-border-light) !important;
    border-radius: var(--occ-radius-md) !important;
    padding: 3px !important;
    overflow: hidden;
}

.mud-button-group-root .mud-button-root {
    border-radius: calc(var(--occ-radius-md) - 2px) !important;
    margin: 1px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mud-button-group-root .mud-button-root.mud-button-outlined {
    border: none !important;
    background: transparent !important;
    color: var(--occ-text-secondary) !important;
}

.mud-button-group-root .mud-button-root.mud-button-outlined:hover {
    background: var(--occ-surface-hover) !important;
    color: var(--occ-text-primary) !important;
}

.mud-button-group-root .mud-button-root.mud-button-filled.mud-button-filled-warning {
    background: var(--occ-primary) !important;
    color: #09090B !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
}

.mud-button-group-root .mud-button-root.mud-button-filled.mud-button-filled-warning:hover {
    background: var(--occ-primary-light) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.45) !important;
}

.mud-theme-light .mud-button-group-root {
    background: #FFFFFF !important;
    border-color: #E4E4E7 !important;
}

.mud-theme-light .mud-button-group-root .mud-button-root.mud-button-outlined {
    color: #71717A !important;
}

.mud-theme-light .mud-button-group-root .mud-button-root.mud-button-outlined:hover {
    background: #F4F4F5 !important;
    color: #18181B !important;
}

/* --------------------------------------------------------------------------
   Filter Buttons (standalone)
   -------------------------------------------------------------------------- */
.occ-filter-btn {
    font-weight: 500 !important;
    transition: all 0.25s ease !important;
}

.occ-filter-btn.mud-button-filled {
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;
}

.occ-filter-btn.mud-button-filled:hover {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important;
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Breadcrumb Styling
   -------------------------------------------------------------------------- */
.occ-breadcrumb {
    padding: 0 !important;
    margin-bottom: 16px !important;
}

.occ-breadcrumb .mud-breadcrumb-item {
    font-family: var(--occ-font-body) !important;
    font-size: 0.875rem !important;
    color: var(--occ-text-muted) !important;
    transition: color 0.2s ease !important;
}

.occ-breadcrumb .mud-breadcrumb-item:hover:not(.mud-disabled) {
    color: var(--occ-primary) !important;
}

.occ-breadcrumb .mud-breadcrumb-item.mud-disabled {
    color: var(--occ-text-primary) !important;
    font-weight: 500 !important;
}

.occ-breadcrumb .mud-breadcrumb-separator {
    color: var(--occ-text-muted) !important;
    opacity: 0.5;
}

/* MudBreadcrumbs default styling */
.mud-breadcrumbs {
    animation: fadeInLeft 0.3s ease-out;
}

.mud-breadcrumbs .mud-breadcrumb-item {
    color: var(--occ-text-muted) !important;
    font-size: 0.875rem !important;
    transition: color 0.2s ease !important;
}

.mud-breadcrumbs .mud-breadcrumb-item:hover:not(.mud-disabled) {
    color: var(--occ-primary) !important;
}

.mud-breadcrumbs .mud-breadcrumb-item.mud-disabled {
    color: var(--occ-text-primary) !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

.mud-breadcrumbs .mud-breadcrumb-separator {
    color: var(--occ-text-muted) !important;
    opacity: 0.4;
    margin: 0 8px !important;
}

/* Light theme breadcrumbs */
.mud-theme-light .mud-breadcrumbs .mud-breadcrumb-item {
    color: #71717A !important;
}

.mud-theme-light .mud-breadcrumbs .mud-breadcrumb-item.mud-disabled {
    color: #18181B !important;
}

/* --------------------------------------------------------------------------
   Legacy/Bootstrap Overrides
   -------------------------------------------------------------------------- */
a, .btn-link {
    color: var(--occ-primary);
    transition: color 0.2s ease;
}

a:hover, .btn-link:hover {
    color: var(--occ-primary-light);
}

.btn-primary {
    background-color: var(--occ-primary);
    border-color: var(--occ-primary-dark);
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--occ-success);
}

.invalid {
    outline: 1px solid var(--occ-error);
    animation: shake 0.3s ease;
}

.validation-message {
    color: var(--occ-error);
    animation: fadeIn 0.3s ease-out;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--occ-error);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    animation: shake 0.5s ease;
}

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

/* --------------------------------------------------------------------------
   ApexCharts Tooltip Styling (Dark Mode)
   -------------------------------------------------------------------------- */
.apexcharts-tooltip {
    background: #18181B !important;
    border: 1px solid #27272A !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.apexcharts-tooltip-title {
    background: #27272A !important;
    border-bottom: 1px solid #3F3F46 !important;
    color: #FAFAFA !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
}

.apexcharts-tooltip-series-group {
    background: transparent !important;
    padding: 6px 12px !important;
}

.apexcharts-tooltip-text {
    color: #FAFAFA !important;
}

.apexcharts-tooltip-text-y-label {
    color: #A1A1AA !important;
}

.apexcharts-tooltip-text-y-value {
    color: #FAFAFA !important;
    font-weight: 600 !important;
}

.apexcharts-tooltip-marker {
    margin-right: 8px !important;
}

.apexcharts-xaxistooltip {
    background: #18181B !important;
    border: 1px solid #27272A !important;
    color: #FAFAFA !important;
}

.apexcharts-xaxistooltip-bottom::before,
.apexcharts-xaxistooltip-bottom::after {
    border-bottom-color: #27272A !important;
}

.apexcharts-yaxistooltip {
    background: #18181B !important;
    border: 1px solid #27272A !important;
    color: #FAFAFA !important;
}

/* Light theme tooltip overrides */
.mud-theme-light .apexcharts-tooltip {
    background: #FFFFFF !important;
    border: 1px solid #E4E4E7 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

.mud-theme-light .apexcharts-tooltip-title {
    background: #F4F4F5 !important;
    border-bottom: 1px solid #E4E4E7 !important;
    color: #18181B !important;
}

.mud-theme-light .apexcharts-tooltip-text {
    color: #18181B !important;
}

.mud-theme-light .apexcharts-tooltip-text-y-label {
    color: #71717A !important;
}

.mud-theme-light .apexcharts-tooltip-text-y-value {
    color: #18181B !important;
}

.mud-theme-light .apexcharts-xaxistooltip {
    background: #FFFFFF !important;
    border: 1px solid #E4E4E7 !important;
    color: #18181B !important;
}

.mud-theme-light .apexcharts-xaxistooltip-bottom::before,
.mud-theme-light .apexcharts-xaxistooltip-bottom::after {
    border-bottom-color: #E4E4E7 !important;
}

.mud-theme-light .apexcharts-yaxistooltip {
    background: #FFFFFF !important;
    border: 1px solid #E4E4E7 !important;
    color: #18181B !important;
}