/* ============================================================================
   MUDBLAZOR GLASSMORPHISM OVERRIDES
   ============================================================================
   
   Global CSS overrides for MudBlazor components to implement glassmorphism
   design system across the entire application.
   
   IMPORTANT: Uses MudBlazor's CSS variables for proper theme support
   
   ============================================================================ */

/* ============================================================================
   GLASSMORPHISM DESIGN TOKENS
   ============================================================================ */

:root {
    /* Glass Effect Variables - Light Mode */
    --glass-bg-opacity: 0.85;
    --glass-bg-medium-opacity: 0.75;
    --glass-bg-strong-opacity: 0.95;
    --glass-border-opacity: 0.3;
    --glass-blur: 30px;
    --glass-blur-mobile: 20px;
    --glass-blur-small: 10px;
}

/* Dark mode adjustments */
.mud-theme-dark {
    --glass-border-opacity: 0.1;
}

/* ============================================================================
   MUDBLAZOR CONTAINER OVERRIDES
   ============================================================================ */

/* MudPaper - Primary glass effect */
.mud-paper {
    background: var(--mud-palette-surface) !important;
    background: color-mix(in srgb, var(--mud-palette-surface) var(--glass-bg-opacity), transparent) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--mud-palette-dark) 20%, transparent) !important;
    transition: all var(--duration-300) var(--ease-in-out);
}

.mud-paper:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--mud-palette-dark) 30%, transparent) !important;
}

/* MudCard - Glass card styling */
.mud-card {
    background: color-mix(in srgb, var(--mud-palette-surface) var(--glass-bg-opacity), transparent) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--mud-palette-dark) 20%, transparent) !important;
    border-radius: var(--radius-lg) !important;
    transition: all var(--duration-300) var(--ease-in-out);
}

.mud-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px color-mix(in srgb, var(--mud-palette-dark) 35%, transparent) !important;
}

/* MudCard Header */
.mud-card-header {
    background: transparent !important;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
}

/* MudCard Content & Actions */
.mud-card-content,
.mud-card-actions {
    background: transparent !important;
}

.mud-card-actions {
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
}

/* ============================================================================
   MUDBLAZOR APPBAR OVERRIDES
   ============================================================================ */

.mud-appbar {
    background: color-mix(in srgb, var(--mud-palette-appbar-background) var(--glass-bg-opacity), transparent) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--mud-palette-dark) 20%, transparent) !important;
}

/* AppBar Icons - Fix contrast for light mode */
.mud-appbar .mud-icon-button {
    color: inherit !important;
    background: transparent !important;
    border: none !important;
}

.mud-appbar .mud-icon-button:hover {
    background: color-mix(in srgb, currentColor 10%, transparent) !important;
}

/* Light mode - ensure icons are visible on primary color */
.mud-theme-light .mud-appbar.mud-appbar-color-primary {
    color: white !important;
}

.mud-theme-light .mud-appbar.mud-appbar-color-primary .mud-icon-button {
    color: white !important;
}

.mud-theme-light .mud-appbar.mud-appbar-color-primary .mud-text {
    color: white !important;
}

/* Dark mode - ensure proper contrast */
.mud-theme-dark .mud-appbar .mud-icon-button {
    color: var(--mud-palette-text-primary) !important;
}

/* ============================================================================
   MUDBLAZOR DRAWER OVERRIDES
   ============================================================================ */

.mud-drawer {
    background: color-mix(in srgb, var(--mud-palette-drawer-background) var(--glass-bg-opacity), transparent) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-right: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--mud-palette-dark) 20%, transparent) !important;
}

.mud-drawer-content {
    background: transparent !important;
}

/* ============================================================================
   MUDBLAZOR DIALOG OVERRIDES
   ============================================================================ */

.mud-dialog {
    background: color-mix(in srgb, var(--mud-palette-surface) var(--glass-bg-strong-opacity), transparent) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--mud-palette-dark) 20%, transparent) !important;
    border-radius: var(--radius-lg) !important;
}

.mud-dialog-title {
    background: transparent !important;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
}

.mud-dialog-content {
    background: transparent !important;
}

.mud-dialog-actions {
    background: transparent !important;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
}

/* Dialog Backdrop */
.mud-overlay-dialog {
    background: color-mix(in srgb, var(--mud-palette-dark) 50%, transparent) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Prevent background bleed in light mode */
.mud-theme-light .mud-overlay-dialog {
    background: color-mix(in srgb, var(--mud-palette-dark) 30%, transparent) !important;
}

/* Dark mode dialog overlay */
.mud-theme-dark .mud-overlay-dialog {
    background: color-mix(in srgb, var(--mud-palette-dark) 60%, transparent) !important;
}

/* ============================================================================
   MUDBLAZOR INPUT OVERRIDES
   ============================================================================ */

.mud-input-control {
    border-radius: var(--radius-md) !important;
}

.mud-input-outlined .mud-input-root {
    background: color-mix(in srgb, var(--mud-palette-surface) 60%, transparent) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-md) !important;
}

.mud-input-outlined:hover .mud-input-root {
    background: color-mix(in srgb, var(--mud-palette-surface) 75%, transparent) !important;
}

/* ============================================================================
   MUDBLAZOR BUTTON OVERRIDES
   ============================================================================ */

/* Primary Button - Use theme colors */
.mud-button-filled.mud-button-filled-primary {
    background: var(--mud-palette-primary) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--mud-palette-primary) 40%, transparent) !important;
    transition: all var(--duration-300) var(--ease-in-out);
}

.mud-button-filled.mud-button-filled-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--mud-palette-primary) 50%, transparent) !important;
}

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

/* Outlined Button Glass Effect */
.mud-button-outlined {
    background: color-mix(in srgb, var(--mud-palette-surface) 50%, transparent) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent) !important;
    transition: all var(--duration-300) var(--ease-in-out);
}

.mud-button-outlined:hover {
    background: color-mix(in srgb, var(--mud-palette-surface) 75%, transparent) !important;
    transform: translateY(-2px);
}

/* Text Button */
.mud-button-text:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) !important;
}

/* Icon Button Glass */
.mud-icon-button {
    background: color-mix(in srgb, var(--mud-palette-surface) 50%, transparent) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    transition: all var(--duration-300) var(--ease-in-out);
}

.mud-icon-button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
}

/* ============================================================================
   MUDBLAZOR TABLE/DATAGRID OVERRIDES
   ============================================================================ */

.mud-table {
    background: transparent !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}

.mud-table-container {
    background: color-mix(in srgb, var(--mud-palette-surface) var(--glass-bg-opacity), transparent) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--mud-palette-dark) 20%, transparent) !important;
}

.mud-table-head {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mud-table-row:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent) !important;
    transition: background var(--duration-200) var(--ease-in-out);
}

.mud-theme-dark .mud-table-row:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent) !important;
}

.mud-table-cell {
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent) !important;
}

/* MudDataGrid */
.mud-data-grid {
    background: transparent !important;
}

.mud-data-grid-container {
    background: color-mix(in srgb, var(--mud-palette-surface) var(--glass-bg-opacity), transparent) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--mud-palette-dark) 20%, transparent) !important;
}

/* ============================================================================
   MUDBLAZOR MENU/POPOVER OVERRIDES
   ============================================================================ */

.mud-menu,
.mud-popover {
    background: color-mix(in srgb, var(--mud-palette-surface) var(--glass-bg-strong-opacity), transparent) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    border-radius: var(--radius-md) !important;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--mud-palette-dark) 20%, transparent) !important;
}

.mud-list-item:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) !important;
}

/* ============================================================================
   MUDBLAZOR CHIP OVERRIDES
   ============================================================================ */

.mud-chip {
    background: color-mix(in srgb, var(--mud-palette-surface) 60%, transparent) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-dark) 10%, transparent);
    transition: all var(--duration-200) var(--ease-in-out);
}

.mud-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mud-palette-dark) 15%, transparent);
}

/* ============================================================================
   MUDBLAZOR ALERT OVERRIDES
   ============================================================================ */

.mud-alert {
    background: color-mix(in srgb, var(--mud-palette-surface) var(--glass-bg-opacity), transparent) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    border-radius: var(--radius-md) !important;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--mud-palette-dark) 20%, transparent) !important;
}

/* ============================================================================
   MUDBLAZOR TABS OVERRIDES
   ============================================================================ */

.mud-tabs {
    background: color-mix(in srgb, var(--mud-palette-surface) var(--glass-bg-opacity), transparent) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    border-radius: var(--radius-lg) !important;
}

.mud-tab {
    transition: all var(--duration-200) var(--ease-in-out);
}

.mud-tab:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) !important;
}

.mud-tab-active {
    background: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent) !important;
}

/* ============================================================================
   MUDBLAZOR EXPANSION PANEL OVERRIDES
   ============================================================================ */

.mud-expansion-panel {
    background: color-mix(in srgb, var(--mud-palette-surface) var(--glass-bg-opacity), transparent) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--mud-palette-dark) 20%, transparent) !important;
    margin-bottom: var(--spacing-2);
}

.mud-expand-panel-header:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent) !important;
}

/* ============================================================================
   MUDBLAZOR PROGRESS OVERRIDES
   ============================================================================ */

.mud-progress-linear {
    background: color-mix(in srgb, var(--mud-palette-surface) 30%, transparent) !important;
    border-radius: var(--radius-full) !important;
}

.mud-progress-linear-bar {
    background: var(--mud-palette-primary) !important;
    border-radius: var(--radius-full) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}

/* ============================================================================
   MUDBLAZOR SWITCH/CHECKBOX OVERRIDES
   ============================================================================ */

.mud-switch {
    transition: all var(--duration-200) var(--ease-in-out);
}

.mud-switch-checked .mud-switch-track {
    background: var(--mud-palette-primary) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}

.mud-checkbox-checked .mud-checkbox-icon {
    color: var(--mud-palette-primary) !important;
}

/* ============================================================================
   MUDBLAZOR TOOLTIP OVERRIDES
   ============================================================================ */

.mud-tooltip {
    background: color-mix(in srgb, var(--mud-palette-dark) 85%, transparent) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--mud-palette-dark) 20%, transparent) !important;
}

/* ============================================================================
   MUDBLAZOR SNACKBAR OVERRIDES
   ============================================================================ */

.mud-snackbar {
    background: color-mix(in srgb, var(--mud-palette-surface) var(--glass-bg-strong-opacity), transparent) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    border-radius: var(--radius-md) !important;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--mud-palette-dark) 20%, transparent) !important;
}

/* ============================================================================
   MUDBLAZOR BADGE OVERRIDES
   ============================================================================ */

.mud-badge {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-dark) 20%, transparent);
}

/* ============================================================================
   MUDBLAZOR BREADCRUMBS OVERRIDES
   ============================================================================ */

.mud-breadcrumbs {
    background: color-mix(in srgb, var(--mud-palette-surface) var(--glass-bg-opacity), transparent) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    border-radius: var(--radius-md) !important;
    padding: var(--spacing-2) var(--spacing-4);
}

/* ============================================================================
   MUDBLAZOR AVATAR OVERRIDES
   ============================================================================ */

.mud-avatar {
    border: 2px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mud-palette-dark) 10%, transparent);
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
    /* Reduce blur on mobile for performance */
    .mud-paper,
    .mud-card,
    .mud-dialog,
    .mud-appbar,
    .mud-drawer {
        backdrop-filter: blur(var(--glass-blur-mobile));
        -webkit-backdrop-filter: blur(var(--glass-blur-mobile));
    }
}

@media (max-width: 480px) {
    /* Further reduce blur on small mobile devices */
    .mud-paper,
    .mud-card,
    .mud-dialog,
    .mud-appbar,
    .mud-drawer {
        backdrop-filter: blur(var(--glass-blur-small));
        -webkit-backdrop-filter: blur(var(--glass-blur-small));
    }
}

/* ============================================================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .mud-paper,
    .mud-card,
    .mud-button,
    .mud-chip,
    .mud-icon-button {
        transition: none !important;
    }
}

/* ============================================================================
   UTILITY CLASSES FOR GLASS EFFECTS
   ============================================================================ */

/* Custom glass variants - Use theme colors */
.glass-light {
    background: color-mix(in srgb, var(--mud-palette-surface) var(--glass-bg-opacity), transparent) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--mud-palette-dark) 20%, transparent);
}

.glass-medium {
    background: color-mix(in srgb, var(--mud-palette-surface) var(--glass-bg-medium-opacity), transparent) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--mud-palette-dark) 20%, transparent);
}

.glass-strong {
    background: color-mix(in srgb, var(--mud-palette-surface) var(--glass-bg-strong-opacity), transparent) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) var(--glass-border-opacity), transparent);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--mud-palette-dark) 20%, transparent);
}

/* No glass effect (for exceptions) */
.no-glass {
    background: var(--mud-palette-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
}