:root {
    /* ============ HAUPTFARBEN ============ */
    /* Primärfarben (Logo-Blau Dunkel) */
    --rz-primary: #004C9E;
    --rz-primary-light: #0066CC;
    --rz-primary-dark: #003875;
    --rz-primary-lighter: #3385D6;
    --rz-primary-darker: #002452;
    --rz-primary-subtle: #E6F0FA;
    /* Sekundärfarben (Logo-Blau Hell) */
    --rz-secondary: #2B9BD6;
    --rz-secondary-light: #52AEE0;
    --rz-secondary-dark: #1E7FB8;
    --rz-secondary-lighter: #7FC5E8;
    --rz-secondary-darker: #155E8A;
    --rz-secondary-subtle: #E8F6FC;
    /* Success-Farben (Grün, harmoniert mit Blau) */
    --rz-success: #28A745;
    --rz-success-light: #48BB62;
    --rz-success-dark: #1E8035;
    --rz-success-lighter: #6FD088;
    --rz-success-darker: #145523;
    --rz-success-subtle: #E8F5EB;
    /* Info-Farben (Logo-Blau Hell) */
    --rz-info: #2B9BD6;
    --rz-info-light: #52AEE0;
    --rz-info-dark: #1E7FB8;
    --rz-info-lighter: #7FC5E8;
    --rz-info-darker: #155E8A;
    --rz-info-subtle: #E8F6FC;
    /* Warning (Warmes Orange, harmoniert mit Blau) */
    --rz-warning: #FF8C00;
    --rz-warning-light: #FFA533;
    --rz-warning-dark: #CC7000;
    --rz-warning-lighter: #FFBE66;
    --rz-warning-darker: #995400;
    --rz-warning-subtle: #FFF4E6;
    /* Danger (Kühles Rot, harmoniert mit Blau) */
    --rz-danger: #DC3545;
    --rz-danger-light: #E4606D;
    --rz-danger-dark: #BD2130;
    --rz-danger-lighter: #EC8B95;
    --rz-danger-darker: #A01824;
    --rz-danger-subtle: #FCE8EA;
    /* ============ GRUNDFARBEN ============ */
    --rz-white: #ffffff;
    --rz-black: #1a1a1a;
    --rz-base: #f5f7fa;
    --rz-base-50: #fcfdfe;
    --rz-base-100: #f5f7fa;
    --rz-base-200: #e8ecf2;
    --rz-base-300: #d4dae3;
    --rz-base-400: #a8b2c1;
    --rz-base-500: #7c8a9f;
    --rz-base-600: #5a6b7d;
    --rz-base-700: #3e4c5b;
    --rz-base-800: #2a3339;
    --rz-base-900: #1a1f23;
    --rz-base-light: #f5f7fa;
    --rz-base-lighter: #ffffff;
    --rz-base-dark: #5a6b7d;
    --rz-base-darker: #1a1f23;
    /* ============ TEXT UND HINTERGRUND ============ */
    --rz-text-color: #2a3339;
    --rz-text-secondary: #5a6b7d;
    --rz-text-light: #ffffff;
    --rz-text-muted: #7c8a9f;
    --rz-background-color: #ffffff;
    --rz-surface-color: #fcfdfe;
    --rz-surface-hover: #f5f7fa;
    --rz-border-color: #e8ecf2;
    --rz-border-light: #f5f7fa;

    /* ============ HEADER UND SIDEBAR (Gleicher Farbton) ============ */
    --rz-header-background-color: #ffffff;
    --rz-sidebar-background-color: #ffffff;
    --rz-sidebar-item-background-color: #ffffff;
    --rz-sidebar-item-hover-background-color: #E6F0FA;
    --rz-sidebar-item-active-background-color: rgba(0, 76, 158, 0.12);
    --rz-sidebar-item-text-color: #2a3339;
    --rz-body-background-color: #f5f7fa;

    /* Karten-Hintergrund (hebt sich vom Body ab) */
    --rz-panel-background-color: #ffffff;
    --rz-card-background-color: #ffffff;

    /* ============ NAVIGATION UND PANEL MENU ============ */
    --rz-panel-menu-item-color: #2a3339;
    --rz-panel-menu-item-background-color: #ffffff;
    --rz-panel-menu-item-hover-color: #2a3339;
    --rz-panel-menu-item-hover-background-color: #E6F0FA;
    --rz-navigation-item-hover-background-color: #E6F0FA;
    --rz-navigation-item-active-background-color: rgba(0, 76, 158, 0.12);

    /* ============ SERIES / CHART COLORS ============ */
    --rz-series-1: #004C9E; /* Logo-Blau Dunkel */
    --rz-series-2: #2B9BD6; /* Logo-Blau Hell */
    --rz-series-3: #003875; /* Sehr dunkles Logo-Blau */
    --rz-series-4: #0066CC; /* Mittleres Logo-Blau */
    --rz-series-5: #52AEE0; /* Helles Logo-Blau */
    --rz-series-6: #1E7FB8; /* Dunkles Logo-Blau Hell */
    --rz-series-7: #002452; /* Sehr sehr dunkles Logo-Blau */
    --rz-series-8: #3385D6; /* Sehr helles Logo-Blau */
    --rz-series-9: #7FC5E8; /* Extra helles Logo-Blau */
    --rz-series-10: #155E8A; /* Mitteldunkles Logo-Blau */
}

/* ============ BLAZOR WASM LOADING ANIMATION ============ */
.loading-progress {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(6rem, 10vw, 12rem);
    height: clamp(6rem, 10vw, 12rem);
    z-index: 9999;
}

.loading-progress svg {
    width: 100%;
    height: 100%;
}

.loading-progress defs {
    width: 0;
    height: 0;
}

.loading-progress + .loading-progress-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + clamp(4rem, 6vw, 8rem)));
    z-index: 9999;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: clamp(0.4rem, 1vw, 0.8rem);
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: url(#loading-gradient);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    text-align: center;
    font-weight: bold;
    color: var(--rz-primary);
    white-space: nowrap;
    font-size: clamp(0.875rem, 2vw, 1.25rem);
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Lade...");
}

/* Styling für das Blazor Error UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ============ SIDEBAR UND PANELMENU ANPASSUNGEN (Light Mode) ============ */
/* Sidebar-Items konsistent mit Header/Sidebar Background */
.rz-sidebar .rz-navigation-item,
.rz-sidebar .rz-panelmenu-item,
.panel-menu .rz-navigation-item,
.navigation-menu .rz-navigation-item {
    background-color: #ffffff;
    color: #2a3339;
}

/* Hover-Effekt für Sidebar-Items (wie DataGrid) */
.rz-sidebar .rz-navigation-item:hover,
.rz-sidebar .rz-panelmenu-item:hover,
.panel-menu .rz-navigation-item:hover,
.navigation-menu .rz-navigation-item:hover {
    background-color: var(--rz-navigation-item-hover-background-color) !important;
}

/* Aktiver Menüpunkt (wie DataGrid Selection) */
.rz-sidebar .rz-navigation-item.rz-state-active,
.rz-sidebar .rz-panelmenu-item.rz-state-active,
.panel-menu .rz-navigation-item.rz-state-active,
.navigation-menu .rz-navigation-item.rz-state-active {
    background-color: var(--rz-navigation-item-active-background-color) !important;
    border-left: 3px solid var(--rz-primary);
}

/* Icons in der Sidebar */
.rz-sidebar .rz-navigation-item-icon,
.rz-sidebar .rz-panelmenu-item-icon,
.panel-menu .rz-navigation-item-icon,
.navigation-menu .rz-navigation-item-icon {
    color: #5a6b7d;
}

/* Text in der Sidebar */
.rz-sidebar .rz-navigation-item-text,
.rz-sidebar .rz-panelmenu-item-text,
.panel-menu .rz-navigation-item-text,
.navigation-menu .rz-navigation-item-text {
    color: #2a3339;
}

/* Einstellungen-Button am Ende der Sidebar */
.rz-sidebar .rz-button,
.rz-sidebar button {
    background-color: #ffffff;
    color: #2a3339 !important;
    border-color: #e8ecf2;
}

.rz-sidebar .rz-button:hover,
.rz-sidebar button:hover {
    background-color: var(--rz-sidebar-item-hover-background-color) !important;
}

/* Theme-Toggle-Button im Header */
.rz-header .rz-button {
    color: #2a3339 !important;
}

.rz-header .rz-button .rz-button-icon-left {
    color: #2a3339 !important;
}

/* PanelMenu Header */
.rz-panelmenu-header {
    background-color: #ffffff;
    color: #2a3339;
}

.rz-panelmenu-header:hover {
    background-color: var(--rz-panel-menu-item-hover-background-color) !important;
}

/* PanelMenu Content */
.rz-panelmenu-content {
    background-color: #ffffff;
}

/* Trenner/Border in der Sidebar */
.rz-sidebar {
    border-color: #e8ecf2;
}

/* ============ LEAD FOLLOW-UP HERVORHEBUNG ============ */
/* Hervorhebung für überfällige Follow-Ups (Cards) */
.lead-followup-overdue {
    background-color: var(--rz-warning-subtle) !important;
    border-left: 4px solid var(--rz-warning) !important;
}

.lead-followup-overdue:hover {
    background-color: var(--rz-warning-subtle) !important;
    filter: brightness(0.95);
}

/* Hervorhebung für überfällige Follow-Ups (DataGrid Zeilen) */
/* Radzen DataGrid benötigt spezifischere Selektoren um die internen Styles zu überschreiben */
.rz-datatable-data tr.lead-followup-overdue,
.rz-grid-table tbody tr.lead-followup-overdue {
    background-color: var(--rz-warning-subtle) !important;
    border-left: 4px solid var(--rz-warning) !important;
}

.rz-datatable-data tr.lead-followup-overdue:hover,
.rz-grid-table tbody tr.lead-followup-overdue:hover {
    background-color: var(--rz-warning-subtle) !important;
    filter: brightness(0.95);
}

/* Alle Zellen in der überfälligen Zeile müssen auch den Background haben */
.rz-datatable-data tr.lead-followup-overdue td,
.rz-grid-table tbody tr.lead-followup-overdue td {
    background-color: var(--rz-warning-subtle) !important;
}

/* Hervorhebung für überfällige Follow-Ups (Text und Icon in Cards) */
.followup-overdue-icon {
    color: var(--rz-warning) !important;
}

.followup-overdue-text {
    color: var(--rz-warning) !important;
    font-weight: 600;
}
