/* Ynex-Inspired Compact Professional Styling for Pharmacy Loyalty Admin */

/* Ynex Official Color Scheme */
:root {
    /* Primary Ynex Colors - Professional Blue */
    --ynex-primary: #3867d6;
    --ynex-primary-light: #4c7bff;
    --ynex-primary-dark: #2c5aa0;
    --ynex-secondary: #38cab3;
    --ynex-accent: #f7b731;
    --ynex-success: #20bf6b;
    --ynex-warning: #f7931e;
    --ynex-danger: #eb3b5a;
    --ynex-info: #3867d6;
    --ynex-light: #f8f9fa;
    --ynex-dark: #343a40;

    /* Ynex Dark Sidebar - Exact Colors */
    --ynex-sidebar-bg: #1e2139;
    --ynex-sidebar-dark: #181b2d;
    --ynex-sidebar-light: #252847;
    --ynex-sidebar-text: #8b92b9;
    --ynex-sidebar-text-active: #ffffff;
    --ynex-sidebar-border: #2a2f4a;

    /* Ynex Card Colors */
    --ynex-card-bg: #ffffff;
    --ynex-card-border: #e9ecef;
    --ynex-card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

    /* Ynex Gradients - Professional */
    --primary-gradient: linear-gradient(135deg, #3867d6 0%, #4c7bff 100%);
    --secondary-gradient: linear-gradient(135deg, #38cab3 0%, #20bf6b 100%);
    --success-gradient: linear-gradient(135deg, #20bf6b 0%, #26de81 100%);
    --warning-gradient: linear-gradient(135deg, #f7931e 0%, #f7b731 100%);
    --danger-gradient: linear-gradient(135deg, #eb3b5a 0%, #fd79a8 100%);
    --info-gradient: linear-gradient(135deg, #3867d6 0%, #4c7bff 100%);

    /* Ynex Background Colors - Official */
    --ynex-bg-primary: #f8f9fa;
    --ynex-bg-secondary: #ffffff;
    --ynex-bg-light: #f1f3f4;
    --ynex-bg-dark: #343a40;
    --ynex-body-bg: #f8f9fa;

    /* Ynex Shadows - Official */
    --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --card-shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --card-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --sidebar-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);

    /* Ynex Text Colors */
    --ynex-text-primary: #495057;
    --ynex-text-secondary: #6c757d;
    --ynex-text-muted: #8b92b9;


    /* Compatibility aliases for legacy variable names */
    --primary-color: var(--ynex-primary);
    --secondary-color: var(--ynex-secondary);
    --text-primary: var(--ynex-text-primary);
    --text-secondary: var(--ynex-text-secondary);
    --text-disabled: var(--ynex-text-muted);

    /* Compact Spacing System */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 0.75rem;  /* 12px */
    --spacing-lg: 1rem;     /* 16px */
    --spacing-xl: 1.5rem;   /* 24px */
    --spacing-2xl: 2rem;    /* 32px */

    /* Compact Border Radius */
    --border-radius-sm: 4px;
    --border-radius: 6px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;

    /* Compact Layout Dimensions */
    --appbar-height: 48px;
    --drawer-width: 240px;
    --content-padding: var(--spacing-lg);

    /* Typography Scale - More compact */
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-base: 0.875rem; /* 14px - smaller base */
    --font-size-lg: 1rem;      /* 16px */
    --font-size-xl: 1.125rem;  /* 18px */
    --font-size-2xl: 1.25rem;  /* 20px */
    --font-size-3xl: 1.5rem;   /* 24px */

    /* Smooth Transitions */
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease-out;
}

/* Ynex Body and Typography */
body {
    font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.5 !important;
    background-color: var(--ynex-body-bg) !important;
    color: var(--ynex-text-primary) !important;
}

.mud-typography {
    font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.5 !important;
}

/* Compact Typography Overrides */
.mud-typography-h1 { font-size: var(--font-size-3xl) !important; font-weight: 700 !important; line-height: 1.2 !important; }
.mud-typography-h2 { font-size: var(--font-size-2xl) !important; font-weight: 600 !important; line-height: 1.3 !important; }
.mud-typography-h3 { font-size: var(--font-size-xl) !important; font-weight: 600 !important; line-height: 1.4 !important; }
.mud-typography-h4 { font-size: var(--font-size-lg) !important; font-weight: 600 !important; line-height: 1.4 !important; }
.mud-typography-h5 { font-size: var(--font-size-base) !important; font-weight: 600 !important; line-height: 1.4 !important; }
.mud-typography-h6 { font-size: var(--font-size-sm) !important; font-weight: 600 !important; line-height: 1.4 !important; }
.mud-typography-body1 { font-size: var(--font-size-base) !important; line-height: 1.5 !important; }
.mud-typography-body2 { font-size: var(--font-size-sm) !important; line-height: 1.5 !important; }
.mud-typography-caption { font-size: var(--font-size-xs) !important; line-height: 1.4 !important; }

.mud-typography-h1 {
    font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.01562em !important;
}

.mud-typography-h2 {
    font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.00833em !important;
}

.mud-typography-h3 {
    font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-weight: 600 !important;
}

.mud-typography-h4 {
    font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-weight: 600 !important;
}

.mud-typography-h5 {
    font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-weight: 600 !important;
}

.mud-typography-h6 {
    font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-weight: 600 !important;
}

/* Ynex-Style Cards */
.mud-card {
    border-radius: var(--border-radius) !important;
    box-shadow: var(--ynex-card-shadow) !important;
    transition: var(--transition) !important;
    border: 1px solid var(--ynex-card-border) !important;
    background-color: var(--ynex-card-bg) !important;
}

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

/* Ynex-Style Metric Cards */
.metric-card {
    background: var(--ynex-card-bg) !important;
    border: 1px solid var(--ynex-card-border) !important;
    border-radius: var(--border-radius-lg) !important;
    transition: var(--transition) !important;
    position: relative;
    overflow: hidden;
    min-height: 80px;
    box-shadow: var(--ynex-card-shadow) !important;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--ynex-primary);
}

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

.metric-card .metric-icon {
    opacity: 0.8;
    transition: var(--transition);
}

.metric-card:hover .metric-icon {
    opacity: 1;
    transform: scale(1.05);
}

/* Ynex Metric Card Variants with Official Colors */
.metric-card.users::before {
    background: var(--ynex-primary);
}

.metric-card.products::before {
    background: var(--ynex-secondary);
}

.metric-card.stores::before {
    background: var(--ynex-warning);
}

.metric-card.health::before {
    background: var(--ynex-success);
}

.metric-card.users::before {
    background: var(--primary-gradient);
}

.metric-card.products::before {
    background: var(--secondary-gradient);
}

.metric-card.stores::before {
    background: var(--success-gradient);
}

.metric-card.health::before {
    background: var(--warning-gradient);
}

/* Compact Enhanced Buttons */
.mud-button-filled {
    border-radius: var(--border-radius) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    box-shadow: var(--card-shadow) !important;
    transition: var(--transition) !important;
    font-size: var(--font-size-sm) !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    min-height: 36px !important; /* Compact button height */
}

.mud-button-filled:hover {
    transform: translateY(-1px);
    box-shadow: var(--card-shadow-hover) !important;
}

/* Compact Button Sizes */
.mud-button-size-small {
    padding: var(--spacing-xs) var(--spacing-md) !important;
    min-height: 28px !important;
    font-size: var(--font-size-xs) !important;
}

.mud-button-size-large {
    padding: var(--spacing-md) var(--spacing-xl) !important;
    min-height: 44px !important;
    font-size: var(--font-size-base) !important;
}

/* Ynex-Style Gradient Buttons */
.gradient-button-primary {
    background: var(--primary-gradient) !important;
    border: none !important;
    color: white !important;
    min-height: 36px !important;
    box-shadow: 0 2px 4px rgba(56, 103, 214, 0.3) !important;
}

.gradient-button-primary:hover {
    box-shadow: 0 4px 8px rgba(56, 103, 214, 0.4) !important;
    transform: translateY(-1px) !important;
}

.gradient-button-secondary {
    background: var(--secondary-gradient) !important;
    border: none !important;
    color: white !important;
    min-height: 36px !important;
    box-shadow: 0 2px 4px rgba(56, 202, 179, 0.3) !important;
}

.gradient-button-secondary:hover {
    box-shadow: 0 4px 8px rgba(56, 202, 179, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Ynex Button Variants */
.ynex-btn-success {
    background: var(--success-gradient) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(32, 191, 107, 0.3) !important;
}

.ynex-btn-warning {
    background: var(--warning-gradient) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(247, 147, 30, 0.3) !important;
}

.ynex-btn-danger {
    background: var(--danger-gradient) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(235, 59, 90, 0.3) !important;
}

.ynex-btn-info {
    background: var(--info-gradient) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(56, 103, 214, 0.3) !important;
}

/* Compact Container and Layout Overrides */
.mud-container {
    padding: var(--content-padding) !important;
}

.mud-main-content {
    padding: var(--spacing-lg) !important;
}

/* Compact Card Content */
.mud-card-content {
    padding: var(--spacing-lg) !important;
}

.metric-card .mud-card-content {
    padding: var(--spacing-md) var(--spacing-lg) !important;
}

/* Ynex-Style Sidebar */
.mud-drawer {
    width: var(--drawer-width) !important;
    background: var(--ynex-sidebar-bg) !important;
    box-shadow: var(--sidebar-shadow) !important;
    border-right: none !important;
}

.mud-drawer .mud-nav-menu {
    padding: var(--spacing-md) !important;
    background: transparent !important;
}

.mud-drawer-content {
    background: var(--ynex-sidebar-bg) !important;
}

/* Ynex Sidebar Header */
.mud-drawer .pa-3 {
    background: var(--ynex-sidebar-dark) !important;
    border-bottom: 1px solid var(--ynex-sidebar-light) !important;
    margin-bottom: var(--spacing-md) !important;
}

.mud-drawer .pa-3 .mud-typography {
    color: var(--ynex-sidebar-text-active) !important;
}

/* Ynex-Style App Bar */
.mud-appbar {
    background: var(--ynex-bg-secondary) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    min-height: var(--appbar-height) !important;
    height: var(--appbar-height) !important;
    box-shadow: var(--card-shadow) !important;
}

.mud-appbar .mud-typography {
    color: var(--ynex-primary) !important;
    font-weight: 600 !important;
}

.mud-appbar .mud-icon-button {
    color: var(--ynex-sidebar-text) !important;
}

.mud-appbar .mud-icon-button:hover {
    background: rgba(56, 103, 214, 0.1) !important;
    color: var(--ynex-primary) !important;
}

/* Ynex-Style Navigation - Improved */
.mud-nav-link, .nav-link-custom {
    border-radius: var(--border-radius) !important;
    margin: var(--spacing-xs) var(--spacing-sm) !important;
    transition: var(--transition) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-size: var(--font-size-sm) !important;
    min-height: 32px !important;
    color: var(--ynex-sidebar-text) !important;
    border: none !important;
    position: relative;
}

.mud-nav-link:hover, .nav-link-custom:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--ynex-sidebar-text-active) !important;
    transform: translateX(2px);
}

/* Elegant Active Menu Style */
.mud-nav-link.active, .nav-link-custom.active {
    background: linear-gradient(135deg, rgba(56, 202, 179, 0.15) 0%, rgba(32, 191, 107, 0.15) 100%) !important;
    color: var(--ynex-sidebar-text-active) !important;
    border-left: 3px solid var(--ynex-secondary) !important;
    box-shadow: 0 2px 8px rgba(56, 202, 179, 0.2) !important;
    font-weight: 600 !important;
}

/* Ynex Navigation Icons */
.mud-nav-link .mud-icon, .nav-link-custom .mud-icon {
    color: inherit !important;
}

/* Ynex Dividers in Navigation */
.mud-drawer .mud-divider {
    border-color: var(--ynex-sidebar-light) !important;
    margin: var(--spacing-md) var(--spacing-sm) !important;
}

/* Ynex-Style Dark Mode - Professional */
.mud-theme-dark {
    /* Dark Mode Background Colors - Ynex Style */
    --ynex-body-bg-dark: #0f1419;
    --ynex-card-bg-dark: #1a1d29;
    --ynex-card-bg-secondary-dark: #252847;
    --ynex-card-border-dark: #2d3748;
    --ynex-text-primary-dark: #ffffff;
    --ynex-text-secondary-dark: #8b92b9;
    --ynex-text-muted-dark: #6c757d;

    /* Dark Mode Shadows */
    --ynex-card-shadow-dark: 0 4px 6px rgba(0, 0, 0, 0.3);
    --ynex-card-shadow-hover-dark: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Dark Mode Body - Ynex Style - FIXED */
html.mud-theme-dark,
html.mud-theme-dark body,
.mud-theme-dark,
.mud-theme-dark .mud-main-content,
.mud-theme-dark .mud-layout {
    background: linear-gradient(135deg, #0f1419 0%, #1a1d29 100%) !important;
    color: var(--ynex-text-primary-dark) !important;
    min-height: 100vh;
}

html.mud-theme-dark body {
    background: linear-gradient(135deg, #0f1419 0%, #1a1d29 100%) !important;
}

.mud-theme-dark .mud-container {
    background: transparent !important;
}

/* Dark Mode Cards - Ynex Style */
.mud-theme-dark .mud-card,
.mud-theme-dark .mud-paper,
.mud-theme-dark .mud-card-content,
.mud-theme-dark .mud-card-header {
    background: linear-gradient(135deg, #1a1d29 0%, #252847 100%) !important;
    border: 1px solid var(--ynex-card-border-dark) !important;
    color: var(--ynex-text-primary-dark) !important;
    box-shadow: var(--ynex-card-shadow-dark) !important;
    backdrop-filter: blur(10px);
}

.mud-theme-dark .mud-card:hover,
.mud-theme-dark .mud-paper:hover {
    box-shadow: var(--ynex-card-shadow-hover-dark) !important;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Forzar fondo oscuro en elementos principales */
.mud-theme-dark .mud-main-content,
.mud-theme-dark .mud-container,
.mud-theme-dark .mud-grid,
.mud-theme-dark .mud-grid-item {
    background: transparent !important;
}

/* Dark Mode AppBar - Ynex Style */
.mud-theme-dark .mud-appbar {
    background: linear-gradient(135deg, #1a1d29 0%, #252847 100%) !important;
    border-bottom: 1px solid var(--ynex-card-border-dark) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(20px);
}

.mud-theme-dark .mud-appbar .mud-typography {
    color: var(--ynex-primary) !important;
    font-weight: 600;
}

.mud-theme-dark .mud-appbar .mud-icon-button {
    color: var(--ynex-text-secondary-dark) !important;
    border-radius: 8px;
}

.mud-theme-dark .mud-appbar .mud-icon-button:hover {
    background: rgba(56, 103, 214, 0.15) !important;
    color: var(--ynex-primary) !important;
    transform: scale(1.05);
}

/* Dark Mode Navigation - Ynex Style */
.mud-theme-dark .mud-drawer {
    background: linear-gradient(180deg, #1a1d29 0%, #252847 100%) !important;
    border-right: 1px solid var(--ynex-card-border-dark) !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3) !important;
}

.mud-theme-dark .mud-nav-link,
.mud-theme-dark .nav-link-custom {
    color: var(--ynex-text-secondary-dark) !important;
    border-radius: 8px !important;
    margin: 2px 8px !important;
    transition: all 0.3s ease !important;
}

.mud-theme-dark .mud-nav-link:hover,
.mud-theme-dark .nav-link-custom:hover {
    background: rgba(56, 103, 214, 0.1) !important;
    color: var(--ynex-primary) !important;
    transform: translateX(4px);
}

.mud-theme-dark .mud-nav-link.active,
.mud-theme-dark .nav-link-custom.active {
    background: linear-gradient(135deg, rgba(56, 103, 214, 0.2) 0%, rgba(56, 202, 179, 0.2) 100%) !important;
    border-left: 3px solid var(--ynex-primary) !important;
    color: var(--ynex-primary) !important;
    box-shadow: 0 4px 12px rgba(56, 103, 214, 0.3) !important;
    font-weight: 600;
}

/* Dark Mode Metric Cards - Ynex Style */
.mud-theme-dark .metric-card {
    background: linear-gradient(135deg, #1a1d29 0%, #252847 100%) !important;
    border: 1px solid var(--ynex-card-border-dark) !important;
    box-shadow: var(--ynex-card-shadow-dark) !important;
    backdrop-filter: blur(10px);
}

.mud-theme-dark .metric-card:hover {
    background: linear-gradient(135deg, #252847 0%, #2d3748 100%) !important;
    box-shadow: var(--ynex-card-shadow-hover-dark) !important;
    transform: translateY(-4px) scale(1.02);
}

.mud-theme-dark .metric-card .mud-typography {
    color: var(--ynex-text-primary-dark) !important;
}

.mud-theme-dark .metric-card .mud-typography.mud-typography-body2 {
    color: var(--ynex-text-secondary-dark) !important;
}

.nav-group-custom {
    margin: 4px 0 !important;
}

.nav-menu-custom {
    padding: 0 !important;
}

/* Enhanced Tables */
.mud-table {
    border-radius: var(--border-radius) !important;
    overflow: hidden;
}

.mud-table-head {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    backdrop-filter: blur(10px);
}

.mud-table-row:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    transform: scale(1.01);
    transition: var(--transition) !important;
}

/* Loading Animation Enhancement */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    flex-direction: column;
}

.loading-text {
    margin-top: 16px;
    opacity: 0.7;
    animation: pulse 2s infinite;
}

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

/* Professional Form Styling */
.mud-input {
    border-radius: 8px !important;
}

.mud-input-outlined {
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    transition: var(--transition) !important;
}

.mud-input-outlined:focus-within {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 3px rgba(103, 126, 234, 0.1) !important;
}

/* Remove padding from MudBlazor outlined inputs */
.mud-input>input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    padding: 0 !important;
}

/* Additional specificity for input padding removal */
.mud-input-control .mud-input>input.mud-input-root-outlined,
.mud-input-control div.mud-input-slot.mud-input-root-outlined,
.mud-form .mud-input>input.mud-input-root-outlined,
.mud-form div.mud-input-slot.mud-input-root-outlined {
    padding: 10px !important;
}

/* Auto Scroll for Tables */
.mud-table-container {
    max-height: 70vh;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.mud-table {
    scroll-behavior: smooth;
}

/* Button Feedback Animation */
.mud-button {
    transition: all 0.2s ease-in-out !important;
}

.mud-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.mud-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Loading State Enhancement */
.mud-button .mud-progress-circular {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Dialog Improvements */
.mud-dialog {
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

.mud-dialog-actions {
    padding: 16px 24px !important;
    gap: 8px;
}

/* Table Row Hover Effect */
.mud-table-row:hover {
    background-color: rgba(103, 126, 234, 0.05) !important;
    transition: background-color 0.2s ease-in-out;
}

/* Button Ripple Effect */
.mud-button {
    position: relative;
    overflow: hidden;
}

.button-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
}

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

/* Enhanced Form Feedback */
.mud-input-control:focus-within {
    transform: translateY(-1px);
    transition: transform 0.2s ease-in-out;
}

/* Smooth Transitions for All Interactive Elements */
.mud-chip, .mud-select, .mud-text-field, .mud-button {
    transition: all 0.2s ease-in-out !important;
}

/* Loading State Improvements */
.mud-progress-circular {
    animation: spin 1s linear infinite;
}

/* Dialog Animation */
.mud-dialog-container {
    animation: dialog-fade-in 0.3s ease-out;
}

@keyframes dialog-fade-in {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Snackbar Improvements */
.mud-snackbar {
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Table Pagination Spanish */
.mud-table-pagination .mud-table-pagination-caption {
    font-size: 0.875rem;
}

/* Responsive Table Improvements */
@media (max-width: 768px) {
    .mud-table-container {
        max-height: 60vh;
    }

    .mud-dialog {
        margin: 16px !important;
        max-height: calc(100vh - 32px) !important;
    }
}

/* Enhanced Dialogs */
.mud-dialog {
    border-radius: var(--border-radius-lg) !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--ynex-card-border) !important;
    backdrop-filter: blur(20px) !important;
}

.mud-dialog .mud-dialog-title {
    padding: 24px 24px 16px 24px !important;
    border-bottom: 1px solid var(--ynex-card-border) !important;
    background: linear-gradient(135deg, rgba(56, 103, 214, 0.05) 0%, rgba(56, 202, 179, 0.05) 100%) !important;
}

.mud-dialog .mud-dialog-content {
    padding: 24px !important;
    background: var(--ynex-card-bg) !important;
}

.mud-dialog .mud-dialog-actions {
    padding: 16px 24px 24px 24px !important;
    border-top: 1px solid var(--ynex-card-border) !important;
    background: var(--ynex-card-bg) !important;
    gap: 12px !important;
}

/* Enhanced Form Styling */
.form-section {
    background: var(--ynex-card-bg) !important;
    border: 1px solid var(--ynex-card-border) !important;
    border-radius: var(--border-radius) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: var(--ynex-card-shadow) !important;
    transition: var(--transition) !important;
}

.form-section:hover {
    box-shadow: var(--card-shadow-hover) !important;
    transform: translateY(-1px);
}

.form-section-header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--ynex-card-border) !important;
}

.form-section-icon {
    margin-right: 12px !important;
    padding: 8px !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
    border-radius: 8px !important;
    color: white !important;
}

.form-section-title {
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    color: var(--text-primary) !important;
}

.form-section-subtitle {
    font-size: 0.875rem !important;
    color: var(--text-secondary) !important;
    margin-top: 4px !important;
}

/* Status Chips Enhancement */
.mud-chip {
    border-radius: 20px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px !important;
}

/* Dashboard Specific Styling */
.dashboard-header {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    margin-bottom: 2rem;
}

.quick-actions-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Icon Enhancements */
.mud-icon-root {
    transition: var(--transition) !important;
}

.metric-icon {
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
}

/* Compact Utility Classes */
.compact-spacing {
    margin: var(--spacing-sm) !important;
    padding: var(--spacing-sm) !important;
}

.compact-margin {
    margin: var(--spacing-sm) !important;
}

.compact-padding {
    padding: var(--spacing-sm) !important;
}

/* Compact Dashboard Specific */
.dashboard-header {
    font-size: var(--font-size-2xl) !important;
    font-weight: 700 !important;
    margin-bottom: var(--spacing-lg) !important;
}

.quick-actions-card .mud-card-content {
    padding: var(--spacing-lg) !important;
}

/* Enhanced Compact Responsive Design */
@media (max-width: 1200px) {
    .mud-drawer {
        width: 220px !important;
    }

    .metric-card .mud-card-content {
        padding: var(--spacing-sm) var(--spacing-md) !important;
    }
}

@media (max-width: 768px) {
    /* Mobile Layout Optimizations */
    .mud-container {
        padding: var(--spacing-sm) !important;
    }

    .metric-card {
        margin-bottom: var(--spacing-md) !important;
        min-height: 70px !important;
    }

    .metric-card .mud-card-content {
        padding: var(--spacing-sm) !important;
    }

    .mud-button-filled {
        width: 100% !important;
        margin-bottom: var(--spacing-sm) !important;
        min-height: 36px !important;
        font-size: var(--font-size-sm) !important;
    }

    .dashboard-header {
        font-size: var(--font-size-lg) !important;
        margin-bottom: var(--spacing-md) !important;
    }

    .mud-appbar {
        min-height: 44px !important;
        height: 44px !important;
    }

    .mud-drawer {
        width: 200px !important;
    }

    /* Mobile Navigation */
    .mud-nav-link, .nav-link-custom {
        padding: var(--spacing-xs) var(--spacing-sm) !important;
        font-size: var(--font-size-xs) !important;
        min-height: 28px !important;
    }

    /* Mobile Cards */
    .mud-card-header {
        padding: var(--spacing-sm) var(--spacing-md) !important;
    }

    .mud-card-content {
        padding: var(--spacing-sm) var(--spacing-md) !important;
    }

    /* Mobile Tables */
    .mud-table .mud-table-head .mud-table-cell,
    .mud-table .mud-table-body .mud-table-cell {
        padding: var(--spacing-xs) var(--spacing-sm) !important;
        font-size: var(--font-size-xs) !important;
    }

    /* Mobile Forms */
    .mud-input-control .mud-input {
        font-size: var(--font-size-sm) !important;
        padding: var(--spacing-xs) var(--spacing-sm) !important;
    }

    /* Mobile Quick Actions */
    .quick-actions-card .mud-card-content {
        padding: var(--spacing-md) !important;
    }

    .quick-actions-card .mud-button-filled {
        height: 36px !important;
        font-size: var(--font-size-xs) !important;
    }
}

@media (max-width: 480px) {
    /* Extra Small Mobile Devices */
    .mud-container {
        padding: var(--spacing-xs) !important;
    }

    .dashboard-header {
        font-size: var(--font-size-base) !important;
    }

    .mud-appbar {
        min-height: 40px !important;
        height: 40px !important;
    }

    .mud-drawer {
        width: 180px !important;
    }

    .metric-card {
        min-height: 60px !important;
    }

    .metric-card .mud-card-content {
        padding: var(--spacing-xs) !important;
    }

    .mud-icon-button {
        width: 32px !important;
        height: 32px !important;
    }

    .mud-button-filled {
        min-height: 32px !important;
        font-size: var(--font-size-xs) !important;
        padding: var(--spacing-xs) var(--spacing-sm) !important;
    }
}

/* Dark Mode Specific Enhancements */
.mud-theme-dark .metric-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dark Mode Tables - Ynex Style */
.mud-theme-dark .mud-table {
    background: linear-gradient(135deg, #1a1d29 0%, #252847 100%) !important;
    border: 1px solid var(--ynex-card-border-dark) !important;
    box-shadow: var(--ynex-card-shadow-dark) !important;
}

.mud-theme-dark .mud-table-head {
    background: linear-gradient(135deg, #252847 0%, #2d3748 100%) !important;
    border-bottom: 1px solid var(--ynex-card-border-dark) !important;
}

.mud-theme-dark .mud-table-head .mud-table-cell {
    color: var(--ynex-text-primary-dark) !important;
    font-weight: 600;
    border-bottom: 1px solid var(--ynex-card-border-dark) !important;
}

.mud-theme-dark .mud-table-row {
    border-bottom: 1px solid rgba(45, 55, 72, 0.5) !important;
}

.mud-theme-dark .mud-table-row:hover {
    background: rgba(56, 103, 214, 0.1) !important;
    transform: scale(1.01);
    transition: all 0.3s ease;
}

.mud-theme-dark .mud-table-cell {
    color: var(--ynex-text-primary-dark) !important;
    border-bottom: 1px solid rgba(45, 55, 72, 0.3) !important;
}

/* Light Mode Specific Enhancements */
.mud-theme-light .metric-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.mud-theme-light .mud-table-row:hover {
    background: rgba(0, 0, 0, 0.02) !important;
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

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

.slide-in-left {
    animation: slideInLeft 0.5s ease-out;
}

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

/* Dark Mode Inputs and Forms - Ynex Style */
.mud-theme-dark .mud-input-control .mud-input {
    background: linear-gradient(135deg, #1a1d29 0%, #252847 100%) !important;
    border: 1px solid var(--ynex-card-border-dark) !important;
    color: var(--ynex-text-primary-dark) !important;
    border-radius: 8px !important;
}

.mud-theme-dark .mud-input-control .mud-input:focus {
    border-color: var(--ynex-primary) !important;
    box-shadow: 0 0 0 2px rgba(56, 103, 214, 0.2) !important;
}

.mud-theme-dark .mud-input-control .mud-input-label {
    color: var(--ynex-text-secondary-dark) !important;
}

/* Dark Mode Buttons - Ynex Style */
.mud-theme-dark .mud-button-filled {
    background: linear-gradient(135deg, var(--ynex-primary) 0%, #4c7bff 100%) !important;
    box-shadow: 0 4px 12px rgba(56, 103, 214, 0.3) !important;
}

.mud-theme-dark .mud-button-filled:hover {
    box-shadow: 0 6px 20px rgba(56, 103, 214, 0.4) !important;
    transform: translateY(-2px);
}

/* Professional Scrollbar - Dark Mode */
.mud-theme-dark ::-webkit-scrollbar {
    width: 8px;
}

.mud-theme-dark ::-webkit-scrollbar-track {
    background: rgba(26, 29, 41, 0.5);
    border-radius: 4px;
}

.mud-theme-dark ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--ynex-primary) 0%, var(--ynex-secondary) 100%);
    border-radius: 4px;
}

.mud-theme-dark ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #4c7bff 0%, #38cab3 100%);
}

/* Dark Mode Text Colors - Force Override */
.mud-theme-dark .mud-typography,
.mud-theme-dark .mud-text,
.mud-theme-dark h1, .mud-theme-dark h2, .mud-theme-dark h3,
.mud-theme-dark h4, .mud-theme-dark h5, .mud-theme-dark h6,
.mud-theme-dark p, .mud-theme-dark span, .mud-theme-dark div {
    color: var(--ynex-text-primary-dark) !important;
}

.mud-theme-dark .mud-typography-body2,
.mud-theme-dark .mud-typography-caption {
    color: var(--ynex-text-secondary-dark) !important;
}

/* Dark Mode Background Override - SUPER FORCE */
html.mud-theme-dark,
html.mud-theme-dark body,
body.mud-theme-dark,
.mud-theme-dark,
.mud-theme-dark .mud-layout,
.mud-theme-dark .mud-main-content,
.mud-theme-dark .mud-container-fluid,
.mud-theme-dark .mud-container {
    background: #0f1419 !important;
    background-image: linear-gradient(135deg, #0f1419 0%, #1a1d29 100%) !important;
    background-color: #0f1419 !important;
}

/* Force dark background on all possible containers */
html.mud-theme-dark * {
    background-color: transparent;
}

html.mud-theme-dark .mud-card,
html.mud-theme-dark .mud-paper {
    background: linear-gradient(135deg, #1a1d29 0%, #252847 100%) !important;
}

/* EMERGENCY DARK MODE OVERRIDE - NUCLEAR OPTION */
[data-theme="dark"],
[data-theme="dark"] *,
.mud-theme-dark,
.mud-theme-dark *,
html[data-theme="dark"],
html[data-theme="dark"] body,
html.mud-theme-dark,
html.mud-theme-dark body {
    background-color: #0f1419 !important;
    background-image: linear-gradient(135deg, #0f1419 0%, #1a1d29 100%) !important;
}

/* Override any white backgrounds in dark mode */
.mud-theme-dark .mud-paper:not(.mud-elevation-0),
.mud-theme-dark .mud-card,
html.mud-theme-dark .mud-paper:not(.mud-elevation-0),
html.mud-theme-dark .mud-card {
    background: linear-gradient(135deg, #1a1d29 0%, #252847 100%) !important;
    background-color: #1a1d29 !important;
}

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

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-gradient);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6b5b95 100%);
}

/* Layout Classes for Dark Mode Control */
.dark-mode-layout {
    background: linear-gradient(135deg, #0f1419 0%, #1a1d29 100%) !important;
    background-color: #0f1419 !important;
    color: #ffffff !important;
    min-height: 100vh !important;
}

.light-mode-layout {
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
    color: #2c3e50 !important;
    min-height: 100vh !important;
}

/* Force dark mode styles with higher specificity */
.dark-mode-layout,
.dark-mode-layout .mud-main-content,
.dark-mode-layout .mud-container,
.dark-mode-layout .mud-container-fluid {
    background: linear-gradient(135deg, #0f1419 0%, #1a1d29 100%) !important;
    background-color: #0f1419 !important;
}

.dark-mode-layout .mud-card,
.dark-mode-layout .mud-paper {
    background: linear-gradient(135deg, #1a1d29 0%, #252847 100%) !important;
    background-color: #1a1d29 !important;
    color: #ffffff !important;
    border: 1px solid #2d3748 !important;
}

/* Global Compact Overrides */
.mud-table-container {
    border-radius: var(--border-radius) !important;
    overflow: hidden;
    box-shadow: var(--card-shadow) !important;
}

/* DataGrid Container Styling (align with tables) */
.mud-data-grid-container {
    border-radius: var(--border-radius) !important;
    overflow: hidden;
    box-shadow: var(--card-shadow) !important;
    border: 1px solid var(--ynex-card-border) !important;
}


/* Enhanced Form Controls */
.mud-input-control {
    margin-bottom: 20px !important;

    position: relative !important;
}

.mud-input-control .mud-input-label {
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    transition: var(--transition) !important;
}

.mud-input-control .mud-input {
    font-size: var(--font-size-sm) !important;
    padding: 10px 12px !important;
    border-radius: var(--border-radius) !important;
    border: 1.5px solid var(--ynex-card-border) !important;
    background: var(--ynex-card-bg) !important;
    transition: var(--transition) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

.mud-input-control .mud-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(56, 103, 214, 0.1) !important;
    background: var(--ynex-card-bg) !important;
}

.mud-input-control .mud-input:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Enhanced TextField Styling */
.enhanced-textfield .mud-input-control {
    position: relative !important;
}

.enhanced-textfield .mud-input-control::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(56, 103, 214, 0.02) 0%, rgba(56, 202, 179, 0.02) 100%) !important;
    border-radius: var(--border-radius) !important;
    opacity: 0 !important;
    transition: var(--transition) !important;
    pointer-events: none !important;
}

.enhanced-textfield .mud-input-control:hover::before {
    opacity: 1 !important;
}

/* Search Field Enhancement */
.search-field {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.8) 100%) !important;
    border: 1.5px solid var(--ynex-card-border) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px) !important;
    transition: var(--transition) !important;
}

.search-field:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 12px rgba(56, 103, 214, 0.15) !important;
}

.search-field:focus-within {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(56, 103, 214, 0.1) !important;
}

/* Enhanced Button Styling */
.enhanced-button {
    border-radius: var(--border-radius) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.025em !important;
    transition: var(--transition) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.enhanced-button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

.enhanced-button:hover::before {
    left: 100% !important;
}

.enhanced-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.enhanced-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Primary Button Enhancement */
.enhanced-button-primary {
    background: var(--primary-gradient) !important;
    border: none !important;
    color: white !important;
}

.enhanced-button-primary:hover {
    background: linear-gradient(135deg, #2d5aa0 0%, #2a9d8f 100%) !important;
}

/* Secondary Button Enhancement */
.enhanced-button-secondary {
    background: transparent !important;
    border: 1.5px solid var(--ynex-card-border) !important;
    color: var(--text-primary) !important;
}

.enhanced-button-secondary:hover {
    background: var(--ynex-card-bg) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

/* Dialog Action Buttons */
.dialog-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.dialog-cancel-btn {
    background: transparent !important;
    border: 1.5px solid var(--ynex-card-border) !important;
    color: var(--text-secondary) !important;
    padding: 10px 20px !important;
    border-radius: var(--border-radius) !important;
    font-weight: 500 !important;
    transition: var(--transition) !important;
}

.dialog-cancel-btn:hover {
    background: rgba(220, 53, 69, 0.1) !important;
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}

.dialog-submit-btn {
    background: var(--primary-gradient) !important;
    border: none !important;
    color: white !important;
    padding: 10px 24px !important;
    border-radius: var(--border-radius) !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
    box-shadow: 0 2px 8px rgba(56, 103, 214, 0.3) !important;
}

.dialog-submit-btn:hover {
    background: linear-gradient(135deg, #2d5aa0 0%, #2a9d8f 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(56, 103, 214, 0.4) !important;
}

.dialog-submit-btn:disabled {
    background: var(--ynex-card-border) !important;
    color: var(--text-disabled) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Enhanced Dialog Header Styling */
.dialog-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 !important;
}

.dialog-header-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
    border-radius: 12px !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(56, 103, 214, 0.3) !important;
}

.dialog-header-content {
    flex: 1 !important;
}

.dialog-title {
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    color: var(--text-primary) !important;
    margin-bottom: 4px !important;
}

.dialog-subtitle {
    font-size: 0.875rem !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
}

/* Form Section Content Styling */
.form-section-content {
    margin-top: 0 !important;
}

/* Enhanced Select Styling */
.enhanced-textfield .mud-select {
    border-radius: var(--border-radius) !important;
}

.enhanced-textfield .mud-select .mud-input-control {
    border: 1.5px solid var(--ynex-card-border) !important;
    border-radius: var(--border-radius) !important;
    transition: var(--transition) !important;
}

.enhanced-textfield .mud-select .mud-input-control:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05) !important;
}

.enhanced-textfield .mud-select .mud-input-control:focus-within {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(56, 103, 214, 0.1) !important;
}

/* Enhanced Numeric Field Styling */
.enhanced-textfield .mud-numeric-field {
    border-radius: var(--border-radius) !important;
}

.enhanced-textfield .mud-numeric-field .mud-input-control {
    border: 1.5px solid var(--ynex-card-border) !important;
    border-radius: var(--border-radius) !important;
    transition: var(--transition) !important;
}

.enhanced-textfield .mud-numeric-field .mud-input-control:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05) !important;
}

.enhanced-textfield .mud-numeric-field .mud-input-control:focus-within {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(56, 103, 214, 0.1) !important;
}

/* Compact Numeric Field Spinners */
.enhanced-textfield .mud-numeric-field .mud-input-adornment {
    width: 24px !important;
    min-width: 24px !important;
}

.enhanced-textfield .mud-numeric-field .mud-input-adornment .mud-icon-button {
    width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 2px !important;
}

.enhanced-textfield .mud-numeric-field .mud-input-adornment .mud-icon-button .mud-icon-root {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

/* Hide default browser numeric spinners */
.enhanced-textfield .mud-numeric-field input[type="number"]::-webkit-outer-spin-button,
.enhanced-textfield .mud-numeric-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.enhanced-textfield .mud-numeric-field input[type="number"] {
    -moz-appearance: textfield !important;
}

/* Animation Classes */
.fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards !important;
}

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

.slide-in-right {
    animation: slideInRight 0.4s ease-out forwards !important;
}

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

/* Enhanced Dialog Responsive */
@media (max-width: 768px) {
    .dialog-header {
        gap: 12px !important;
    }

    .dialog-header-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .dialog-title {
        font-size: 1.1rem !important;
    }

    .form-section {
        padding: 16px !important;
        margin-bottom: 16px !important;
    }

    .form-section-header {
        margin-bottom: 12px !important;
    }

    .form-section-icon {
        padding: 6px !important;
        margin-right: 8px !important;
    }
}

/* Compact Dialog Overrides */
.compact-dialog .mud-dialog-title{padding:10px 12px 8px!important}
.compact-dialog .mud-dialog-content{padding:12px!important;max-height:58vh;overflow-y:auto}
.compact-dialog .mud-dialog-actions{padding:8px 12px 10px!important}
.compact-dialog .dialog-title{font-size:0.98rem!important}
.compact-dialog .dialog-subtitle{font-size:.75rem!important}
.compact-dialog .form-section{padding:10px!important;margin-bottom:10px!important}
.compact-dialog .form-section-header{margin-bottom:6px!important;padding-bottom:4px!important}
.compact-dialog .mud-input-control{margin-bottom:8px!important}
.compact-dialog .mud-input-control .mud-input{padding:8px 10px!important}
.compact-dialog .dialog-submit-btn{padding:6px 12px!important}
.compact-dialog .dialog-cancel-btn{padding:6px 10px!important}


/* Compact Tables */
.mud-table .mud-table-head .mud-table-cell {
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
}

.mud-table .mud-table-body .mud-table-cell {
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-size: var(--font-size-sm) !important;
}

/* Compact Dialogs */
.mud-dialog .mud-dialog-title {
    font-size: var(--font-size-lg) !important;
    font-weight: 600 !important;
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-md) var(--spacing-xl) !important;
}

.mud-dialog .mud-dialog-content {
    padding: var(--spacing-md) var(--spacing-xl) !important;
}

.mud-dialog .mud-dialog-actions {
    padding: var(--spacing-md) var(--spacing-xl) var(--spacing-lg) var(--spacing-xl) !important;
}

/* Compact Snackbars */
.mud-snackbar {
    font-size: var(--font-size-sm) !important;
}

/* Compact Pagination */
.mud-pagination .mud-pagination-item {
    min-width: 32px !important;
    height: 32px !important;
    font-size: var(--font-size-sm) !important;
}

/* Compact Breadcrumbs */
.mud-breadcrumbs {
    font-size: var(--font-size-sm) !important;
}

/* Compact Chips */
.mud-chip {
    height: 24px !important;
    font-size: var(--font-size-xs) !important;
    padding: 0 var(--spacing-sm) !important;
}

/* Compact Tooltips */
.mud-tooltip {
    font-size: var(--font-size-xs) !important;
    padding: var(--spacing-xs) var(--spacing-sm) !important;
}

/* Enhanced Compact Button Styles */
.mud-button-outlined {
    border-radius: var(--border-radius) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    font-size: var(--font-size-sm) !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    min-height: 36px !important;
    border-width: 1px !important;
}

.mud-button-text {
    border-radius: var(--border-radius) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    font-size: var(--font-size-sm) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    min-height: 32px !important;
}

/* Compact Icon Buttons */
.mud-icon-button {
    width: 36px !important;
    height: 36px !important;
}

.mud-icon-button.mud-icon-button-size-small {
    width: 28px !important;
    height: 28px !important;
}

.mud-icon-button.mud-icon-button-size-large {
    width: 44px !important;
    height: 44px !important;
}

/* Compact Select and Input Controls */
.mud-select {
    min-height: 36px !important;
}

.mud-select .mud-input-control {
    margin-bottom: var(--spacing-sm) !important;
}

.mud-input-control .mud-input-control-input-container {
    min-height: 36px !important;
}

.mud-input-adornment {
    font-size: var(--font-size-sm) !important;
}

/* Compact Menu Items */
.mud-menu .mud-list-item {
    padding: var(--spacing-sm) var(--spacing-md) !important;
    min-height: 32px !important;
    font-size: var(--font-size-sm) !important;
}

/* Fix select dropdown item alignment */
.mud-select .mud-list-item {
    text-align: left !important;
    justify-content: flex-start !important;
}

.mud-select .mud-list-item .mud-list-item-text {
    text-align: left !important;
}

/* Clean select item row: name + colored chip count */
.select-item-row{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.select-item-row .mud-chip{margin-left:8px}


/* Compact Tabs */
.mud-tabs .mud-tab {
    min-height: 40px !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    font-size: var(--font-size-sm) !important;
}

/* Compact Progress Indicators */
.mud-progress-linear {
    height: 4px !important;
}

.mud-progress-circular.mud-progress-medium {
    width: 32px !important;
    height: 32px !important;
}

/* Compact Alerts */
.mud-alert {
    padding: var(--spacing-md) var(--spacing-lg) !important;
    font-size: var(--font-size-sm) !important;
}

.mud-alert .mud-alert-message {
    font-size: var(--font-size-sm) !important;
}

.mud-table-head .mud-table-cell {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
}

.mud-table-body .mud-table-row {
    transition: var(--transition) !important;
}

.mud-table-body .mud-table-row:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    transform: scale(1.005);
}

.mud-table-body .mud-table-cell {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Enhanced Button Groups */
.mud-button-group .mud-button {
    margin: 0 2px !important;
    border-radius: 6px !important;
}

/* Page Header Styling */
.page-header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-radius: var(--border-radius);
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Enhanced Search Field */
.mud-input-control {
    transition: var(--transition) !important;
}

.mud-input-control:focus-within {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Professional Snackbar */
.mud-snackbar {
    border-radius: var(--border-radius) !important;
    box-shadow: var(--card-shadow-hover) !important;
}

/* Enhanced Progress Indicators */
.mud-progress-circular {
    filter: drop-shadow(0 2px 8px rgba(103, 126, 234, 0.3));
}

/* Improved Spacing */
.content-spacing {
    padding: 24px;
}

.section-spacing {
    margin-bottom: 32px;
}