/* wwwroot/css/themes.css */
:root {
    --primary-color: #1976d2;
    --secondary-color: #dc004e;
    --accent-color: #ff9800;
    --background-color: #ffffff;
    --surface-color: #f5f5f5;
}

[data-theme="dark"] {
    --primary-color: #90caf9;
    --secondary-color: #f48fb1;
    --accent-color: #ffab40;
    --background-color: #121212;
    --surface-color: #1e1e1e;
}

/* App-specific variables (will be set dynamically by JavaScript) */
:root {
    --LPTechnician-primary-color: var(--primary-color);
    --LPTechnician-secondary-color: var(--secondary-color);
    --LPTechnician-accent-color: var(--accent-color);
    --LPCustomer-primary-color: var(--primary-color);
    --LPCustomer-secondary-color: var(--secondary-color);
    --LPCustomer-accent-color: var(--accent-color);
}

/* Apply to Radzen components */
.rz-button-primary {
    background-color: var(--primary-color) !important;
}

.rz-button-secondary {
    background-color: var(--secondary-color) !important;
}

/* You can add more Radzen component styling here */
.rz-panel {
    border-color: var(--primary-color);
}

.rz-datepicker .rz-state-active {
    background-color: var(--primary-color) !important;
}

/* Add custom classes that use your theme variables */
.app-primary-bg {
    background-color: var(--primary-color);
}

.app-secondary-bg {
    background-color: var(--secondary-color);
}

.app-accent-bg {
    background-color: var(--accent-color);
}

.app-primary-text {
    color: var(--primary-color);
}
/* Add to your themes.css */
.mud-theme-text {
    color: var(--mud-palette-text-primary);
}

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