/* 
 * DX Dark Theme - Custom Dark Theme for DispatchXpert
 * Based on Radzen Standard Dark with custom overrides
 */

/* Import Radzen Standard Dark as base - THIS IS CRITICAL FOR STYLING */
@import url('../_content/Radzen.Blazor/css/standard-dark.css');

/* Custom DX Dark Overrides */
:root {
    /* Primary Brand Colors - Customize these! */
    --rz-primary: #1976d2 !important;
    --rz-primary-light: #42a5f5 !important;
    --rz-primary-dark: #1565c0 !important;
    --rz-primary-lighter: rgba(25, 118, 210, 0.12) !important;
    
    /* Background Colors - Darker than standard */
    --rz-base-background-color: #1a1a1a !important;
    --rz-content-background-color: #242424 !important;
    --rz-sidebar-background-color: #444444 !important;
    
    /* Custom Gray Colors - Matches button color */
    --dx-sidebar-gray: #444444 !important;
    
    /* Keep standard dark theme for components */
    --rz-series-1: #1976d2 !important;
    
    /* CALENDAR-SPECIFIC OVERRIDES - Force light calendar in dark theme */
    --calendar-bg: #ffffff !important;
    --calendar-text: #212529 !important;
    --calendar-text-secondary: #6c757d !important;
    --calendar-border: #dee2e6 !important;
    --calendar-hover-bg: #e9ecef !important;
    --calendar-disabled-text: #adb5bd !important;
    --calendar-disabled-bg: #f8f9fa !important;
}

/* Sidebar Customization - Darker Gray (matches buttons) */
.layout-sidebar-left,
.layout-sidebar-right {
    background: var(--dx-sidebar-gray) !important;
}

.layout-sidebar-left *,
.layout-sidebar-right * {
    color: white !important;
}

/* Badges with explicit colors */
.badge,
.rz-badge {
    border-radius: 12px;
    padding: 0.25em 0.6em;
    font-weight: 600;
}

span.badge[style*="background-color: #dc3545"],
.rz-badge-danger {
    background-color: #f44336 !important;
    color: white !important;
}

span.badge[style*="background-color: #ffc107"],
.rz-badge-warning {
    background-color: #ff9800 !important;
    color: black !important;
}

span.badge[style*="background-color: #28a745"],
.rz-badge-success {
    background-color: #4caf50 !important;
    color: white !important;
}

/* ===================================================================
   RADZEN DATEPICKER CALENDAR - THEME-ADAPTIVE STYLING
   CRITICAL: Must be at END of file to override standard-dark.css
   These styles apply to ALL RadzenDatePicker calendars
   =================================================================== */

/* Calendar container - inherits theme background and text colors */
.rz-calendar,
.rz-datepicker-calendar,
div.rz-calendar,
div.rz-datepicker-calendar,
.rz-datepicker-popup-container .rz-calendar {
    background: var(--rz-base-background-color) !important;
    color: var(--rz-text-color) !important;
    border: 1px solid var(--rz-base-300) !important;
}

/* Calendar header - DARK BACKGROUND with proper contrast */
.rz-calendar .rz-calendar-header,
.rz-datepicker-calendar .rz-datepicker-calendar-header,
.rz-calendar-header,
.rz-datepicker-popup-container .rz-calendar-header {
    background: #1a1a1a !important; /* Dark background to match theme */
    color: var(--rz-text-color) !important;
    border-bottom: 1px solid var(--rz-base-300) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.5rem !important;
}

/* Calendar header buttons and text */
.rz-calendar-header button,
.rz-calendar-header span,
.rz-calendar-header .rz-button,
.rz-datepicker-popup-container .rz-calendar-header button {
    color: #ffffff !important; /* White text on dark background */
}

/* Calendar header layout - arrows on each side of month/year (Dark Theme) */
.rz-calendar-header .rz-calendar-prev,
.rz-calendar-header button.rz-calendar-prev {
    order: 1 !important;
    margin-right: auto !important;
}

.rz-calendar-header .rz-calendar-title,
.rz-calendar-header span.rz-calendar-title-content,
.rz-calendar-header button.rz-calendar-title {
    order: 2 !important;
    flex-grow: 1 !important;
    text-align: center !important;
}

.rz-calendar-header .rz-calendar-next,
.rz-calendar-header button.rz-calendar-next {
    order: 3 !important;
    margin-left: auto !important;
}

/* All calendar days */
.rz-calendar td,
.rz-calendar .rz-calendar-day,
.rz-datepicker-calendar td,
.rz-calendar-day,
td.rz-calendar-day,
.rz-calendar tbody td,
.rz-calendar td span,
.rz-calendar-day span,
.rz-datepicker-popup-container .rz-calendar td,
.rz-datepicker-popup-container .rz-calendar td span {
    color: var(--rz-text-color) !important;
    background: var(--rz-base-background-color) !important;
}

/* Week day names - MAXIMUM BRIGHTNESS - NUCLEAR OVERRIDE */
body .rz-calendar thead th,
body .rz-calendar .rz-calendar-weekdays th,
body .rz-datepicker-calendar .rz-datepicker-calendar-weekdays th,
body .rz-calendar-weekdays th,
.rz-calendar thead th,
.rz-calendar .rz-calendar-weekdays th,
.rz-datepicker-calendar .rz-datepicker-calendar-weekdays th,
.rz-calendar-weekdays th {
    color: #ffffff !important;
    background: #2a2a2a !important; /* FORCE DARK BACKGROUND */
    font-weight: 400 !important; /* Normal weight, not bold */
    font-size: 0.75rem !important; /* Smaller for 3-letter abbreviations */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    opacity: 1 !important;
}

/* Force any nested spans or text nodes */
body .rz-calendar thead th *,
body .rz-calendar .rz-calendar-weekdays th *,
.rz-calendar thead th span,
.rz-calendar .rz-calendar-weekdays th span {
    color: #ffffff !important;
}

/* Disabled dates */
.rz-calendar .rz-state-disabled,
.rz-calendar .rz-calendar-day.rz-state-disabled,
.rz-datepicker-calendar .rz-state-disabled,
td.rz-state-disabled {
    color: var(--rz-text-disabled-color) !important;
    background: var(--rz-base-200) !important;
    opacity: 0.5 !important;
}

/* Today's date */
.rz-calendar .rz-state-highlight,
.rz-calendar td.rz-state-highlight,
.rz-calendar-day.rz-state-highlight,
td.rz-calendar-day.rz-state-highlight {
    background-color: var(--rz-primary-lighter) !important;
    color: var(--rz-primary) !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
}

/* Selected date */
.rz-calendar .rz-state-active,
.rz-calendar .rz-state-selected,
.rz-calendar td.rz-state-active,
.rz-calendar td.rz-state-selected,
.rz-calendar-day.rz-state-active,
.rz-calendar-day.rz-state-selected,
td.rz-calendar-day.rz-state-active,
td.rz-calendar-day.rz-state-selected {
    background-color: var(--rz-primary) !important;
    color: var(--rz-on-primary-color, white) !important;
    border-radius: 4px !important;
    font-weight: bold !important;
}

/* Hover state */
.rz-calendar td:hover:not(.rz-state-disabled),
.rz-calendar .rz-calendar-day:hover:not(.rz-state-disabled),
td.rz-calendar-day:hover:not(.rz-state-disabled) {
    background-color: var(--rz-base-300) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}

/* Month/Year selector - SMALLER FONT to show full year */
.rz-calendar .rz-calendar-month,
.rz-calendar .rz-calendar-year,
.rz-datepicker-calendar .rz-datepicker-calendar-month,
.rz-datepicker-calendar .rz-datepicker-calendar-year,
.rz-calendar-title span,
.rz-calendar-header span,
.rz-calendar-title,
.rz-datepicker-title,
span.rz-calendar-title-content,
.rz-calendar-header .rz-state-default,
button.rz-calendar-title {
    color: #ffffff !important;
    font-weight: 600 !important; /* Reduced from 700 */
    font-size: 0.95rem !important; /* Reduced from 1.1rem */
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Month/Year dropdown buttons - ensure they fit properly */
.rz-calendar-header .rz-dropdown,
.rz-calendar-header button.rz-dropdown {
    font-size: 0.9rem !important;
    padding: 0.25rem 0.5rem !important;
}

/* Navigation buttons - white color on dark background */
.rz-calendar .rz-calendar-prev,
.rz-calendar .rz-calendar-next,
.rz-datepicker-calendar .rz-datepicker-prev,
.rz-datepicker-calendar .rz-datepicker-next,
button.rz-calendar-prev,
button.rz-calendar-next {
    color: #ffffff !important;
    background: transparent !important;
}

/* Time picker */
.rz-timepicker {
    background: var(--rz-base-background-color) !important;
    color: var(--rz-text-color) !important;
}

.rz-timepicker button {
    color: var(--rz-text-color) !important;
    background: transparent !important;
}

.rz-timepicker button:hover {
    background: var(--rz-base-300) !important;
}

/* ===================================================================
   RADZEN SCHEDULER - MONTH VIEW STYLING
   =================================================================== */

/* Scheduler Month View - Weekday headers smaller for readability */
.rz-scheduler .rz-view-month th.rz-scheduler-table-header,
.rz-scheduler .rz-view-month .rz-scheduler-table-header,
.rz-scheduler-table thead th,
.rz-scheduler .rz-scheduler-table-header {
    font-size: 0.75rem !important; /* Smaller for 3-letter abbreviations */
    font-weight: 400 !important;
    text-transform: uppercase !important;
}

/* Scheduler Month View - Day numbers */
.rz-scheduler .rz-view-month .rz-scheduler-table-cell,
.rz-scheduler .rz-scheduler-table-cell {
    font-size: 1rem !important;
}