/* Custom MudBlazor Theme - Multiple Color Schemes */

/* Blue Theme (Default) */
:root {
    /* Primary Colors - Blue */
    --mud-palette-primary: #1976d2 !important;
    --mud-palette-primary-hover: #1565c0 !important;
    --mud-palette-primary-darken: #0d47a1 !important;
    --mud-palette-primary-lighten: #42a5f5 !important;
    
    /* Secondary Colors - Light Blue */
    --mud-palette-secondary: #1976d2 !important;
    --mud-palette-secondary-hover: #1e88e5 !important;
    --mud-palette-secondary-darken: #1976d2 !important;
    --mud-palette-secondary-lighten: #64b5f6 !important;
    --mud-palette-primary-hover: white !important;
}

/* Light Theme with Grey */
[data-theme="light"] {
    /* Primary Colors - Grey */
    --mud-palette-primary: #a1a1a1 !important;
    --mud-palette-primary-hover: #b8b8b8 !important;
    --mud-palette-primary-darken: #8a8a8a !important;
    --mud-palette-primary-lighten: #c4c4c4 !important;
    
    /* Secondary Colors - Light Grey */
    --mud-palette-secondary: #a1a1a1 !important;
    --mud-palette-secondary-hover: #b8b8b8 !important;
    --mud-palette-secondary-darken: #8a8a8a !important;
    --mud-palette-secondary-lighten: #c4c4c4 !important;
    --mud-palette-primary-hover: white !important;
    
    /* Background Colors */
    --mud-palette-background: #fafafa !important;
    --mud-palette-surface: #ffffff !important;
    --mud-palette-drawer-background: #ffffff !important;
    --mud-palette-appbar-background: #ffffff !important;
    
    /* Text Colors */
    --mud-palette-text-primary: #212121 !important;
    --mud-palette-text-secondary: #757575 !important;
}

/* Dark Theme */
[data-theme="dark"] {
    /* Primary Colors - Blue */
    --mud-palette-primary: #90caf9 !important;
    --mud-palette-primary-hover: #64b5f6 !important;
    --mud-palette-primary-darken: #42a5f5 !important;
    --mud-palette-primary-lighten: #bbdefb !important;
    
    /* Secondary Colors - Light Blue */
    --mud-palette-secondary: #90caf9 !important;
    --mud-palette-secondary-hover: #64b5f6 !important;
    --mud-palette-secondary-darken: #42a5f5 !important;
    --mud-palette-secondary-lighten: #bbdefb !important;
    --mud-palette-primary-hover: #1976d2 !important;
    
    /* Background Colors */
    --mud-palette-background: #121212 !important;
    --mud-palette-surface: #1e1e1e !important;
    --mud-palette-drawer-background: #1e1e1e !important;
    --mud-palette-appbar-background: #1e1e1e !important;
    
    /* Text Colors */
    --mud-palette-text-primary: #ffffff !important;
    --mud-palette-text-secondary: #b0b0b0 !important;
    
    /* Additional MudBlazor Dark Theme Properties */
    --mud-palette-background-grey: #1e1e1e !important;
    --mud-palette-surface-hover: #2d2d2d !important;
    --mud-palette-divider: #424242 !important;
    --mud-palette-divider-light: #2d2d2d !important;
    --mud-palette-table-lines: #424242 !important;
    --mud-palette-table-striped: #1a1a1a !important;
    --mud-palette-table-hover: #2d2d2d !important;
    --mud-palette-overlay-dark: rgba(0, 0, 0, 0.5) !important;
    --mud-palette-overlay-light: rgba(0, 0, 0, 0.1) !important;
    
    /* Paper and Card backgrounds */
    --mud-palette-paper: #1e1e1e !important;
    --mud-palette-card: #1e1e1e !important;
    
    /* Input and Form elements */
    --mud-palette-input-background: #2d2d2d !important;
    --mud-palette-input-text: #ffffff !important;
    --mud-palette-input-border: #424242 !important;
    
    /* Button colors */
    --mud-palette-button-default: #2d2d2d !important;
    --mud-palette-button-default-hover: #424242 !important;
    --mud-palette-button-default-text: #ffffff !important;
}

/* Blue Theme (Default) */
[data-theme="blue"] {
    /* Primary Colors - Blue */
    --mud-palette-primary: #1976d2 !important;
    --mud-palette-primary-hover: #1565c0 !important;
    --mud-palette-primary-darken: #0d47a1 !important;
    --mud-palette-primary-lighten: #42a5f5 !important;
    
    /* Secondary Colors - Light Blue */
    --mud-palette-secondary: #1976d2 !important;
    --mud-palette-secondary-hover: #1e88e5 !important;
    --mud-palette-secondary-darken: #1976d2 !important;
    --mud-palette-secondary-lighten: #64b5f6 !important;
    --mud-palette-primary-hover: white !important;
}

/* Green Theme */
[data-theme="green"] {
    /* Primary Colors - Green */
    --mud-palette-primary: #14a800 !important;
    --mud-palette-primary-hover: #118000 !important;
    --mud-palette-primary-darken: #0d6000 !important;
    --mud-palette-primary-lighten: #1ed400 !important;
    
    /* Secondary Colors - Light Green */
    --mud-palette-secondary: #14a800 !important;
    --mud-palette-secondary-hover: #1ed400 !important;
    --mud-palette-secondary-darken: #14a800 !important;
    --mud-palette-secondary-lighten: #4caf50 !important;
    --mud-palette-primary-hover: white !important;
}

/* Button Styles for all themes */
.mud-button-filled.mud-button-filled-primary{
    background: var(--mud-palette-primary) !important;
    color: white !important;
}

.mud-button-filled.mud-button-filled-primary:hover{
    border: 1px solid var(--mud-palette-primary) !important;
    background: transparent !important;
    color: var(--mud-palette-primary) !important;
}

/* Theme transition */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Active theme button styling */
.theme-button-active {
    background-color: #e5e7eb !important;
    border-color: #9ca3af !important;
    color: #374151 !important;
}

.theme-button-active:hover {
    background-color: #d1d5db !important;
    border-color: #6b7280 !important;
}

/* Dark theme specific overrides */
[data-theme="dark"] .mud-paper {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

[data-theme="dark"] .mud-text {
    color: var(--mud-palette-text-primary) !important;
}

[data-theme="dark"] .mud-input {
    background-color: var(--mud-palette-input-background) !important;
    color: var(--mud-palette-input-text) !important;
    border-color: var(--mud-palette-input-border) !important;
}

[data-theme="dark"] .mud-button {
    background-color: var(--mud-palette-button-default) !important;
    color: var(--mud-palette-button-default-text) !important;
}

[data-theme="dark"] .mud-button:hover {
    background-color: var(--mud-palette-button-default-hover) !important;
}

[data-theme="dark"] .mud-main-content {
    background-color: var(--mud-palette-background) !important;
}

[data-theme="dark"] .mud-layout {
    background-color: var(--mud-palette-background) !important;
}

/* Tab and Navigation areas */
[data-theme="dark"] .mud-tabs {
    background-color: transparent !important;
    color: var(--mud-palette-text-primary) !important;
}

[data-theme="dark"] .mud-tab {
    background-color: transparent !important;
    color: var(--mud-palette-text-primary) !important;
}

[data-theme="dark"] .mud-tab:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .mud-tab.mud-tab-active {
    background-color: var(--mud-palette-primary) !important;
    color: white !important;
}

[data-theme="dark"] .mud-tabs-toolbar {
    background-color: transparent !important;
    border-bottom-color: var(--mud-palette-divider) !important;
}

/* AppBar and Navigation */
[data-theme="dark"] .mud-appbar {
    background-color: var(--mud-palette-appbar-background) !important;
}

[data-theme="dark"] .mud-nav-menu {
    background-color: var(--mud-palette-surface) !important;
}

[data-theme="dark"] .mud-nav-link {
    color: var(--mud-palette-text-primary) !important;
}

[data-theme="dark"] .mud-nav-link:hover {
    background-color: var(--mud-palette-surface-hover) !important;
}

[data-theme="dark"] .mud-nav-link.mud-nav-link-active {
    background-color: var(--mud-palette-primary) !important;
    color: white !important;
}

/* Container and Section backgrounds */
[data-theme="dark"] .mud-container {
    background-color: var(--mud-palette-background) !important;
}

[data-theme="dark"] .mud-grid {
    background-color: var(--mud-palette-background) !important;
}

[data-theme="dark"] .mud-item {
    background-color: var(--mud-palette-background) !important;
}

/* Filled buttons should use primary color */
[data-theme="dark"] .mud-button-filled.mud-button-filled-primary {
    background-color: var(--mud-palette-primary) !important;
    color: white !important;
}

[data-theme="dark"] .mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--mud-palette-primary-hover) !important;
    color: white !important;
}