/* Custom Theme CSS with Modern Gradients for MudBlazor v8 */
/* Using CSS Variables for easy color customization */

:root {
    /* Light Theme Colors */
    --light-primary-start: #667eea;
    --light-primary-end: #764ba2;
    --light-drawer-start: #f093fb;
    --light-drawer-end: #f5576c;
    --light-surface-start: #ffffff;
    --light-surface-end: #f8f9fa;
    --light-border: rgba(0, 0, 0, 0.05);
    --light-shadow-primary: rgba(102, 126, 234, 0.3);
    --light-shadow-button: rgba(102, 126, 234, 0.4);
    --light-shadow-button-hover: rgba(102, 126, 234, 0.6);
    --light-shadow-nav: rgba(102, 126, 234, 0.1);
    --light-shadow-nav-active: rgba(102, 126, 234, 0.2);
    --light-shadow-nav-hover: rgba(102, 126, 234, 0.3);
    --light-shadow-card: rgba(102, 126, 234, 0.3);
    --light-shadow-card-hover: rgba(102, 126, 234, 0.4);
    
    /* Dark Theme Colors */
    --dark-primary-start: #2c3e50;
    --dark-primary-end: #34495e;
    --dark-button-start: #3498db;
    --dark-button-end: #2980b9;
    --dark-button-hover-start: #2980b9;
    --dark-button-hover-end: #1f5f8b;
    --dark-surface-start: #2c3e50;
    --dark-surface-end: #34495e;
    --dark-border: rgba(255, 255, 255, 0.1);
    --dark-shadow-primary: rgba(44, 62, 80, 0.5);
    --dark-shadow-button: rgba(52, 152, 219, 0.4);
    --dark-shadow-button-hover: rgba(52, 152, 219, 0.6);
    --dark-shadow-card: rgba(44, 62, 80, 0.5);
    --dark-shadow-card-hover: rgba(44, 62, 80, 0.6);
    
    /* Status Colors */
    --status-success-start: #4CAF50;
    --status-success-end: #45a049;
    --status-warning-start: #FF9800;
    --status-warning-end: #f57c00;
    --status-error-start: #F44336;
    --status-error-end: #d32f2f;
    
    /* Common Colors */
    --scrollbar-track-start: #f1f1f1;
    --scrollbar-track-end: #e1e1e1;
    --scrollbar-thumb-start: #667eea;
    --scrollbar-thumb-end: #764ba2;
    --scrollbar-thumb-hover-start: #5a6fd8;
    --scrollbar-thumb-hover-end: #6a4190;
    
    /* Hover State Colors */
    --light-button-hover-start: #5a6fd8;
    --light-button-hover-end: #6a4190;
}

/* Light Theme Gradients */
.mud-theme-light .mud-appbar {
    background: linear-gradient(135deg, var(--light-primary-start) 0%, var(--light-primary-end) 100%);
    box-shadow: 0 4px 20px var(--light-shadow-primary);
}

.mud-theme-light .mud-drawer {
    background: linear-gradient(180deg, var(--light-drawer-start) 0%, var(--light-drawer-end) 100%);
}

.mud-theme-light .mud-paper.elevation-2 {
    background: linear-gradient(135deg, var(--light-surface-start) 0%, var(--light-surface-end) 100%);
    border: 1px solid var(--light-border);
}

.mud-theme-light .mud-button-filled-primary {
    background: linear-gradient(135deg, var(--light-primary-start) 0%, var(--light-primary-end) 100%);
    border: none;
    box-shadow: 0 4px 15px var(--light-shadow-button);
    transition: all 0.3s ease;
}

.mud-theme-light .mud-button-filled-primary:hover {
    background: linear-gradient(135deg, var(--light-button-hover-start) 0%, var(--light-button-hover-end) 100%);
    box-shadow: 0 6px 20px var(--light-shadow-button-hover);
    transform: translateY(-2px);
}

.mud-theme-light .mud-button-outlined-secondary {
    border: 2px solid;
    border-image: linear-gradient(135deg, var(--light-primary-start) 0%, var(--light-primary-end) 100%) 1;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

/* Dark Theme Gradients */
.mud-theme-dark .mud-appbar {
    background: linear-gradient(135deg, var(--dark-primary-start) 0%, var(--dark-primary-end) 100%);
    box-shadow: 0 4px 20px var(--dark-shadow-primary);
}

.mud-theme-dark .mud-drawer {
    background: linear-gradient(180deg, var(--dark-primary-start) 0%, var(--dark-primary-end) 100%);
}

.mud-theme-dark .mud-paper.elevation-2 {
    background: linear-gradient(135deg, var(--dark-surface-start) 0%, var(--dark-surface-end) 100%);
    border: 1px solid var(--dark-border);
}

.mud-theme-dark .mud-button-filled-primary {
    background: linear-gradient(135deg, var(--dark-button-start) 0%, var(--dark-button-end) 100%);
    border: none;
    box-shadow: 0 4px 15px var(--dark-shadow-button);
    transition: all 0.3s ease;
}

.mud-theme-dark .mud-button-filled-primary:hover {
    background: linear-gradient(135deg, var(--dark-button-hover-start) 0%, var(--dark-button-hover-end) 100%);
    box-shadow: 0 6px 20px var(--dark-shadow-button-hover);
    transform: translateY(-2px);
}

.mud-theme-dark .mud-button-outlined-secondary {
    border: 2px solid;
    border-image: linear-gradient(135deg, var(--dark-button-start) 0%, var(--dark-button-end) 100%) 1;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1) 0%, rgba(41, 128, 185, 0.1) 100%);
}

/* Common Gradient Styles */
.mud-nav-link {
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 2px 8px;
}

.mud-nav-link:hover {
    background: linear-gradient(135deg, var(--light-shadow-nav) 0%, rgba(118, 75, 162, 0.1) 100%);
    transform: translateX(5px);
}

.mud-nav-link.mud-nav-link-active {
    background: linear-gradient(135deg, var(--light-shadow-nav-active) 0%, rgba(118, 75, 162, 0.2) 100%);
    box-shadow: 0 2px 10px var(--light-shadow-nav-hover);
}

/* Dashboard Cards with Gradients */
.dashboard-card {
    background: linear-gradient(135deg, var(--light-primary-start) 0%, var(--light-primary-end) 100%);
    color: white;
    border-radius: 16px;
    padding: 24px;
    margin: 16px 0;
    box-shadow: 0 8px 32px var(--light-shadow-card);
    transition: all 0.3s ease;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px var(--light-shadow-card-hover);
}

.dashboard-card.dark-theme {
    background: linear-gradient(135deg, var(--dark-primary-start) 0%, var(--dark-primary-end) 100%);
    box-shadow: 0 8px 32px var(--dark-shadow-card);
}

.dashboard-card.dark-theme:hover {
    box-shadow: 0 12px 40px var(--dark-shadow-card-hover);
}

/* Status Indicators with Gradients */
.status-online {
    background: linear-gradient(135deg, var(--status-success-start) 0%, var(--status-success-end) 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.status-pending {
    background: linear-gradient(135deg, var(--status-warning-start) 0%, var(--status-warning-end) 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
}

.status-error {
    background: linear-gradient(135deg, var(--status-error-start) 0%, var(--status-error-end) 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(244, 67, 54, 0.4);
}

/* Loading Spinner with Gradient */
.mud-progress-circular .mud-progress-circular-svg {
    stroke: url(#gradient);
}

/* Custom Scrollbar with Gradient */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: linear-gradient(180deg, var(--scrollbar-track-start) 0%, var(--scrollbar-track-end) 100%);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--scrollbar-thumb-start) 0%, var(--scrollbar-thumb-end) 100%);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--scrollbar-thumb-hover-start) 0%, var(--scrollbar-thumb-hover-end) 100%);
}

/* Animation Keyframes */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animated-gradient {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

/* Responsive Gradients */
@media (max-width: 768px) {
    .mud-theme-light .mud-appbar,
    .mud-theme-dark .mud-appbar {
        background: linear-gradient(90deg, var(--light-primary-start) 0%, var(--light-primary-end) 100%);
    }
    
    .dashboard-card {
        margin: 8px 0;
        padding: 16px;
    }
}

/* Utility Classes for Easy Color Overrides */
.color-override-primary {
    --light-primary-start: #ff6b6b;
    --light-primary-end: #ee5a24;
    --dark-primary-start: #2d3436;
    --dark-primary-end: #636e72;
}

.color-override-secondary {
    --light-primary-start: #00b894;
    --light-primary-end: #00a085;
    --dark-primary-start: #2d3436;
    --dark-primary-end: #636e72;
}

.color-override-warm {
    --light-primary-start: #fdcb6e;
    --light-primary-end: #e17055;
    --dark-primary-start: #2d3436;
    --dark-primary-end: #636e72;
}