/*
 * Radzen Calendar & DatePicker Dark Theme CSS
 * Tùy chỉnh theme cho Radzen Calendar và DatePicker để hỗ trợ dark mode
 * Áp dụng cho tất cả các calendar và datepicker components của Radzen
 */

/* ===== RADZEN CALENDAR DARK THEME ===== */

/* Calendar container - nền chính của calendar */
html.dark-style .rz-calendar,
.dark-style .rz-calendar,
body.dark-style .rz-calendar,
[data-theme="theme-dark"] .rz-calendar {
    background-color: #2f3349 !important; /* Màu chính xác từ FlatPicker */
    color: #cfcde4 !important; /* Text color từ FlatPicker */
    border: 1px solid #44485e !important; /* Border color từ FlatPicker */
    box-shadow: 0 0.1875rem 0.75rem 0 rgba(19, 17, 32, 0.2) !important; /* Box shadow từ FlatPicker */
    border-radius: 0.5rem !important;
    z-index: auto !important; /* Đảm bảo hiển thị trên các component khác */
}

/* Calendar header - thanh tiêu đề với tháng/năm */
html.dark-style .rz-calendar-header,
.dark-style .rz-calendar-header,
body.dark-style .rz-calendar-header,
[data-theme="theme-dark"] .rz-calendar-header {
    background-color: #2f3349 !important;
    color: #cfcde4 !important;
    border-bottom: 1px solid #44485e !important;
}

/* Calendar title (tháng/năm) */
html.dark-style .rz-calendar-title,
.dark-style .rz-calendar-title,
body.dark-style .rz-calendar-title,
[data-theme="theme-dark"] .rz-calendar-title {
    color: #cfcde4 !important;
    font-weight: 600 !important;
}

/* Navigation buttons (prev/next) */
html.dark-style .rz-calendar-nav,
html.dark-style .rz-calendar-prev,
html.dark-style .rz-calendar-next,
.dark-style .rz-calendar-nav,
.dark-style .rz-calendar-prev,
.dark-style .rz-calendar-next,
body.dark-style .rz-calendar-nav,
body.dark-style .rz-calendar-prev,
body.dark-style .rz-calendar-next,
[data-theme="theme-dark"] .rz-calendar-nav,
[data-theme="theme-dark"] .rz-calendar-prev,
[data-theme="theme-dark"] .rz-calendar-next {
    color: #acabc1 !important; /* Màu icon từ FlatPicker */
    background-color: #3d4157 !important; /* Background từ FlatPicker */
    border: none !important;
    border-radius: 50rem !important; /* Border radius tròn như FlatPicker */
    transition: background-color 0.2s ease !important;
}

/* Navigation buttons hover */
html.dark-style .rz-calendar-nav:hover,
html.dark-style .rz-calendar-prev:hover,
html.dark-style .rz-calendar-next:hover,
.dark-style .rz-calendar-nav:hover,
.dark-style .rz-calendar-prev:hover,
.dark-style .rz-calendar-next:hover,
body.dark-style .rz-calendar-nav:hover,
body.dark-style .rz-calendar-prev:hover,
body.dark-style .rz-calendar-next:hover,
[data-theme="theme-dark"] .rz-calendar-nav:hover,
[data-theme="theme-dark"] .rz-calendar-prev:hover,
[data-theme="theme-dark"] .rz-calendar-next:hover {
    background-color: #3d4157 !important; /* Hover giống như FlatPicker */
    color: #acabc1 !important;
}

/* Calendar table */
html.dark-style .rz-calendar-table,
.dark-style .rz-calendar-table,
body.dark-style .rz-calendar-table,
[data-theme="theme-dark"] .rz-calendar-table {
    background-color: #2f3349 !important;
    color: #cfcde4 !important;
}

/* Day headers (Mon, Tue, Wed...) */
html.dark-style .rz-calendar-weekday,
.dark-style .rz-calendar-weekday,
body.dark-style .rz-calendar-weekday,
[data-theme="theme-dark"] .rz-calendar-weekday {
    color: #cfcde4 !important; /* Màu chính xác từ FlatPicker */
    background-color: #2f3349 !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important; /* Font size từ FlatPicker */
}

/* Calendar cells (days) */
html.dark-style .rz-calendar-cell,
.dark-style .rz-calendar-cell,
body.dark-style .rz-calendar-cell,
[data-theme="theme-dark"] .rz-calendar-cell {
    color: #cfcde4 !important; /* Màu text từ FlatPicker */
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 50rem !important; /* Border radius tròn như FlatPicker */
    font-weight: 500 !important; /* Font weight từ FlatPicker */
    transition: all 0.2s ease !important;
}

/* Calendar cell hover */
html.dark-style .rz-calendar-cell:hover,
.dark-style .rz-calendar-cell:hover,
body.dark-style .rz-calendar-cell:hover,
[data-theme="theme-dark"] .rz-calendar-cell:hover {
    background-color: #3d4157 !important; /* Hover background từ FlatPicker */
    color: #cfcde4 !important;
    border-color: transparent !important;
}

/* Selected day */
html.dark-style .rz-calendar-cell.rz-state-active,
html.dark-style .rz-calendar-cell.rz-selected,
.dark-style .rz-calendar-cell.rz-state-active,
.dark-style .rz-calendar-cell.rz-selected,
body.dark-style .rz-calendar-cell.rz-state-active,
body.dark-style .rz-calendar-cell.rz-selected,
[data-theme="theme-dark"] .rz-calendar-cell.rz-state-active,
[data-theme="theme-dark"] .rz-calendar-cell.rz-selected {
    background-color: #696cff !important;
    color: #ffffff !important;
    border-color: #696cff !important;
    font-weight: 600 !important;
}

/* Today's date */
html.dark-style .rz-calendar-cell.rz-state-today,
.dark-style .rz-calendar-cell.rz-state-today,
body.dark-style .rz-calendar-cell.rz-state-today,
[data-theme="theme-dark"] .rz-calendar-cell.rz-state-today {
    background-color: #3d4157 !important; /* Today background từ FlatPicker */
    color: #cfcde4 !important;
    border-color: transparent !important;
    font-weight: 500 !important;
}

/* Disabled days */
html.dark-style .rz-calendar-cell.rz-state-disabled,
.dark-style .rz-calendar-cell.rz-state-disabled,
body.dark-style .rz-calendar-cell.rz-state-disabled,
[data-theme="theme-dark"] .rz-calendar-cell.rz-state-disabled {
    color: #76778e !important; /* Disabled color từ FlatPicker */
    background-color: transparent !important;
    cursor: not-allowed !important;
}

/* Other month days */
html.dark-style .rz-calendar-cell.rz-state-other-month,
.dark-style .rz-calendar-cell.rz-state-other-month,
body.dark-style .rz-calendar-cell.rz-state-other-month,
[data-theme="theme-dark"] .rz-calendar-cell.rz-state-other-month {
    color: #76778e !important; /* Other month color từ FlatPicker */
    opacity: 1 !important; /* Không dùng opacity, dùng màu trực tiếp */
}

/* ===== RADZEN DATEPICKER DARK THEME ===== */

/* DatePicker popup container */
html.dark-style .rz-datepicker-popup,
html.dark-style .rz-datepicker,
.dark-style .rz-datepicker-popup,
.dark-style .rz-datepicker,
body.dark-style .rz-datepicker-popup,
body.dark-style .rz-datepicker,
[data-theme="theme-dark"] .rz-datepicker-popup,
[data-theme="theme-dark"] .rz-datepicker {
    background-color: #2f3349 !important;
    border: 1px solid #44485e !important;
    box-shadow: 0 0.1875rem 0.75rem 0 rgba(19, 17, 32, 0.2) !important;
    border-radius: 0.5rem !important;
    z-index: auto !important; /* Đảm bảo hiển thị trên dropdown */
}

/* DatePicker header */
html.dark-style .rz-datepicker-header,
.dark-style .rz-datepicker-header,
body.dark-style .rz-datepicker-header,
[data-theme="theme-dark"] .rz-datepicker-header {
    background-color: #2f3349 !important;
    color: #cfcde4 !important;
    border-bottom: 1px solid #44485e !important;
}

/* DatePicker title area */
html.dark-style .rz-datepicker-title,
.dark-style .rz-datepicker-title,
body.dark-style .rz-datepicker-title,
[data-theme="theme-dark"] .rz-datepicker-title {
    background-color: #2f3349 !important;
    color: #cfcde4 !important;
}

/* DatePicker navigation buttons (prev/next) */
html.dark-style .rz-datepicker-prev,
html.dark-style .rz-datepicker-next,
.dark-style .rz-datepicker-prev,
.dark-style .rz-datepicker-next,
body.dark-style .rz-datepicker-prev,
body.dark-style .rz-datepicker-next,
[data-theme="theme-dark"] .rz-datepicker-prev,
[data-theme="theme-dark"] .rz-datepicker-next {
    color: #acabc1 !important;
    background-color: transparent !important; /* Bỏ background */
    border: none !important;
    border-radius: 50rem !important;
    transition: background-color 0.2s ease !important;
}

/* DatePicker navigation buttons hover */
html.dark-style .rz-datepicker-prev:hover,
html.dark-style .rz-datepicker-next:hover,
.dark-style .rz-datepicker-prev:hover,
.dark-style .rz-datepicker-next:hover,
body.dark-style .rz-datepicker-prev:hover,
body.dark-style .rz-datepicker-next:hover,
[data-theme="theme-dark"] .rz-datepicker-prev:hover,
[data-theme="theme-dark"] .rz-datepicker-next:hover {
    background-color: #4a4f6a !important;
    color: #cfcde4 !important;
}

/* DatePicker navigation icons */
html.dark-style .rz-datepicker-prev-icon,
html.dark-style .rz-datepicker-next-icon,
.dark-style .rz-datepicker-prev-icon,
.dark-style .rz-datepicker-next-icon,
body.dark-style .rz-datepicker-prev-icon,
body.dark-style .rz-datepicker-next-icon,
[data-theme="theme-dark"] .rz-datepicker-prev-icon,
[data-theme="theme-dark"] .rz-datepicker-next-icon {
    color: #acabc1 !important;
}

/* DatePicker input field - từ HTML structure bạn cung cấp */
html.dark-style .rz-calendar .rz-inputtext,
html.dark-style .rz-datepicker input,
.dark-style .rz-calendar .rz-inputtext,
.dark-style .rz-datepicker input,
body.dark-style .rz-calendar .rz-inputtext,
body.dark-style .rz-datepicker input,
[data-theme="theme-dark"] .rz-calendar .rz-inputtext,
[data-theme="theme-dark"] .rz-datepicker input {
    background-color: #444564 !important; /* Input background tối */
    color: #cfcde4 !important; /* Text sáng */
    border: 1px solid #44485e !important;
    border-radius: 0.375rem !important;
}

/* DatePicker input focus */
html.dark-style .rz-calendar .rz-inputtext:focus,
html.dark-style .rz-datepicker input:focus,
.dark-style .rz-calendar .rz-inputtext:focus,
.dark-style .rz-datepicker input:focus,
body.dark-style .rz-calendar .rz-inputtext:focus,
body.dark-style .rz-datepicker input:focus,
[data-theme="theme-dark"] .rz-calendar .rz-inputtext:focus,
[data-theme="theme-dark"] .rz-datepicker input:focus {
    border-color: #696cff !important;
    box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.25) !important;
    outline: none !important;
}

/* DatePicker button/icon */
html.dark-style .rz-datepicker-button,
html.dark-style .rz-datepicker-icon,
.dark-style .rz-datepicker-button,
.dark-style .rz-datepicker-icon,
body.dark-style .rz-datepicker-button,
body.dark-style .rz-datepicker-icon,
[data-theme="theme-dark"] .rz-datepicker-button,
[data-theme="theme-dark"] .rz-datepicker-icon {
    color: #cfcde4 !important;
    background-color: #3d4157 !important;
    border: 1px solid #44485e !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s ease !important;
}



/* ===== RADZEN DATEPICKER CALENDAR TABLE ===== */

/* Calendar table container */
html.dark-style .rz-datepicker .rz-datepicker-group,
.dark-style .rz-datepicker .rz-datepicker-group,
body.dark-style .rz-datepicker .rz-datepicker-group,
[data-theme="theme-dark"] .rz-datepicker .rz-datepicker-group {
    background-color: #2f3349 !important;
    color: #cfcde4 !important;
}

/* Calendar table */
html.dark-style .rz-datepicker table,
.dark-style .rz-datepicker table,
body.dark-style .rz-datepicker table,
[data-theme="theme-dark"] .rz-datepicker table {
    background-color: #2f3349 !important;
    color: #cfcde4 !important;
}

/* Calendar weekday headers */
html.dark-style .rz-datepicker th,
.dark-style .rz-datepicker th,
body.dark-style .rz-datepicker th,
[data-theme="theme-dark"] .rz-datepicker th {
    background-color: #2f3349 !important;
    color: #cfcde4 !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    border: none !important;
}

/* Calendar day cells */
html.dark-style .rz-datepicker td,
.dark-style .rz-datepicker td,
body.dark-style .rz-datepicker td,
[data-theme="theme-dark"] .rz-datepicker td {
    background-color: transparent !important;
    color: #cfcde4 !important;
    border: none !important;
    font-weight: 500 !important;
}

/* Calendar day buttons - giống .flatpickr-day */
html.dark-style .rz-datepicker .rz-state-default,
.dark-style .rz-datepicker .rz-state-default,
body.dark-style .rz-datepicker .rz-state-default,
[data-theme="theme-dark"] .rz-datepicker .rz-state-default {
    background-color: transparent !important;
    color: #cfcde4 !important; /* Giống FlatPicker */
    border: 1px solid transparent !important;
    border-radius: 50rem !important; /* Giống FlatPicker */
    font-weight: 500 !important; /* Giống FlatPicker */
    transition: all 0.2s ease !important;
    display: flex !important; /* Flex để center text */
    align-items: center !important; /* Center vertical */
    justify-content: center !important; /* Center horizontal */
    text-align: center !important; /* Center text */
}

/* Calendar day buttons hover - giống .flatpickr-day:hover */
html.dark-style .rz-datepicker .rz-state-default:hover,
.dark-style .rz-datepicker .rz-state-default:hover,
body.dark-style .rz-datepicker .rz-state-default:hover,
[data-theme="theme-dark"] .rz-datepicker .rz-state-default:hover {
    background-color: #3d4157 !important; /* Giống FlatPicker */
    color: #cfcde4 !important;
    border-color: transparent !important;
}

/* Calendar today - giống .flatpickr-day.today (KHÔNG có styling đặc biệt) */
html.dark-style .rz-datepicker .rz-datepicker-today:not(.rz-state-active),
.dark-style .rz-datepicker .rz-datepicker-today:not(.rz-state-active),
body.dark-style .rz-datepicker .rz-datepicker-today:not(.rz-state-active),
[data-theme="theme-dark"] .rz-datepicker .rz-datepicker-today:not(.rz-state-active) {
    /* Trong FlatPicker, .today KHÔNG có styling đặc biệt, chỉ là ngày bình thường */
    background-color: transparent !important;
    color: #cfcde4 !important; /* Màu text giống ngày bình thường */
    border-color: transparent !important;
    font-weight: 500 !important; /* Giống ngày bình thường */
    /* Không có border, không có background khác biệt */
}

/* Calendar selected date - giống .flatpickr-day.selected */
html.dark-style .rz-datepicker .rz-state-active,
html.dark-style .rz-datepicker .rz-state-highlight,
.dark-style .rz-datepicker .rz-state-active,
.dark-style .rz-datepicker .rz-state-highlight,
body.dark-style .rz-datepicker .rz-state-active,
body.dark-style .rz-datepicker .rz-state-highlight,
[data-theme="theme-dark"] .rz-datepicker .rz-state-active,
[data-theme="theme-dark"] .rz-datepicker .rz-state-highlight {
    background-color: #696cff !important; /* Màu primary như FlatPicker */
    color: #ffffff !important; /* Text trắng */
    border: none !important; /* Không có border */
    border-radius: 50rem !important; /* Tròn như FlatPicker */
    font-weight: 500 !important;
    box-shadow: 0 0.125rem 0.5rem 0 rgba(19, 17, 32, 0.18) !important; /* Shadow như FlatPicker */
    display: flex !important; /* Flex để center text */
    align-items: center !important; /* Center vertical */
    justify-content: center !important; /* Center horizontal */
    text-align: center !important; /* Center text */
}

/* Calendar other month days - giống .flatpickr-day.prevMonthDay */
html.dark-style .rz-datepicker .rz-datepicker-other-month,
.dark-style .rz-datepicker .rz-datepicker-other-month,
body.dark-style .rz-datepicker .rz-datepicker-other-month,
[data-theme="theme-dark"] .rz-datepicker .rz-datepicker-other-month {
    color: #76778e !important; /* Giống FlatPicker */
    background-color: transparent !important;
}

/* Calendar disabled days - giống .flatpickr-day.flatpickr-disabled */
html.dark-style .rz-datepicker .rz-state-disabled,
.dark-style .rz-datepicker .rz-state-disabled,
body.dark-style .rz-datepicker .rz-state-disabled,
[data-theme="theme-dark"] .rz-datepicker .rz-state-disabled {
    color: #76778e !important; /* Giống FlatPicker */
    background-color: transparent !important;
    cursor: not-allowed !important;
}



/* DatePicker button hover */
html.dark-style .rz-datepicker-button:hover,
html.dark-style .rz-datepicker-icon:hover,
.dark-style .rz-datepicker-button:hover,
.dark-style .rz-datepicker-icon:hover,
body.dark-style .rz-datepicker-button:hover,
body.dark-style .rz-datepicker-icon:hover,
[data-theme="theme-dark"] .rz-datepicker-button:hover,
[data-theme="theme-dark"] .rz-datepicker-icon:hover {
    background-color: #696cff !important;
    border-color: #696cff !important;
    color: #ffffff !important;
}

/* ===== TIME PICKER TRONG DATEPICKER ===== */

/* Time picker container */
html.dark-style .rz-timepicker,
.dark-style .rz-timepicker,
body.dark-style .rz-timepicker,
[data-theme="theme-dark"] .rz-timepicker {
    background-color: #2f3349 !important;
    color: #b6bee3 !important;
    border-top: 1px solid #444564 !important;
}

/* Time picker inputs */
html.dark-style .rz-timepicker input,
.dark-style .rz-timepicker input,
body.dark-style .rz-timepicker input,
[data-theme="theme-dark"] .rz-timepicker input {
    background-color: #444564 !important;
    color: #b6bee3 !important;
    border: 1px solid #5a5f7a !important;
    border-radius: 0.25rem !important;
}

/* Time picker buttons */
html.dark-style .rz-timepicker button,
.dark-style .rz-timepicker button,
body.dark-style .rz-timepicker button,
[data-theme="theme-dark"] .rz-timepicker button {
    background-color: #5a5f7a !important;
    color: #b6bee3 !important;
    border: 1px solid #5a5f7a !important;
    border-radius: 0.25rem !important;
}

/* Time picker button hover */
html.dark-style .rz-timepicker button:hover,
.dark-style .rz-timepicker button:hover,
body.dark-style .rz-timepicker button:hover,
[data-theme="theme-dark"] .rz-timepicker button:hover {
    background-color: #696cff !important;
    border-color: #696cff !important;
    color: #ffffff !important;
}

/* ===== MONTH/YEAR PICKER ===== */

/* Month picker */
html.dark-style .rz-monthpicker,
.dark-style .rz-monthpicker,
body.dark-style .rz-monthpicker,
[data-theme="theme-dark"] .rz-monthpicker {
    background-color: #2f3349 !important;
    color: #b6bee3 !important;
}

/* Month cells */
html.dark-style .rz-monthpicker-month,
.dark-style .rz-monthpicker-month,
body.dark-style .rz-monthpicker-month,
[data-theme="theme-dark"] .rz-monthpicker-month {
    color: #b6bee3 !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0.25rem !important;
    transition: all 0.2s ease !important;
}

/* Month cell hover */
html.dark-style .rz-monthpicker-month:hover,
.dark-style .rz-monthpicker-month:hover,
body.dark-style .rz-monthpicker-month:hover,
[data-theme="theme-dark"] .rz-monthpicker-month:hover {
    background-color: #444564 !important;
    color: #ffffff !important;
    border-color: #5a5f7a !important;
}

/* Selected month */
html.dark-style .rz-monthpicker-month.rz-state-active,
.dark-style .rz-monthpicker-month.rz-state-active,
body.dark-style .rz-monthpicker-month.rz-state-active,
[data-theme="theme-dark"] .rz-monthpicker-month.rz-state-active {
    background-color: #696cff !important;
    color: #ffffff !important;
    border-color: #696cff !important;
    font-weight: 600 !important;
}

/* Year picker - tương tự month picker */
html.dark-style .rz-yearpicker,
.dark-style .rz-yearpicker,
body.dark-style .rz-yearpicker,
[data-theme="theme-dark"] .rz-yearpicker {
    background-color: #2f3349 !important;
    color: #b6bee3 !important;
}

html.dark-style .rz-yearpicker-year,
.dark-style .rz-yearpicker-year,
body.dark-style .rz-yearpicker-year,
[data-theme="theme-dark"] .rz-yearpicker-year {
    color: #b6bee3 !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0.25rem !important;
    transition: all 0.2s ease !important;
}

html.dark-style .rz-yearpicker-year:hover,
.dark-style .rz-yearpicker-year:hover,
body.dark-style .rz-yearpicker-year:hover,
[data-theme="theme-dark"] .rz-yearpicker-year:hover {
    background-color: #444564 !important;
    color: #ffffff !important;
    border-color: #5a5f7a !important;
}

html.dark-style .rz-yearpicker-year.rz-state-active,
.dark-style .rz-yearpicker-year.rz-state-active,
body.dark-style .rz-yearpicker-year.rz-state-active,
[data-theme="theme-dark"] .rz-yearpicker-year.rz-state-active {
    background-color: #696cff !important;
    color: #ffffff !important;
    border-color: #696cff !important;
    font-weight: 600 !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Mobile adjustments */
@media (max-width: 768px) {
    html.dark-style .rz-calendar,
    html.dark-style .rz-datepicker-popup,
    .dark-style .rz-calendar,
    .dark-style .rz-datepicker-popup,
    body.dark-style .rz-calendar,
    body.dark-style .rz-datepicker-popup,
    [data-theme="theme-dark"] .rz-calendar,
    [data-theme="theme-dark"] .rz-datepicker-popup {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
        border-radius: 0.375rem !important;
    }
    
    /* Smaller calendar cells on mobile */
    html.dark-style .rz-calendar-cell,
    .dark-style .rz-calendar-cell,
    body.dark-style .rz-calendar-cell,
    [data-theme="theme-dark"] .rz-calendar-cell {
        padding: 0.25rem !important;
        font-size: 0.875rem !important;
    }
}

/* ===== Z-INDEX FIXES ===== */

/* Đảm bảo calendar luôn hiển thị trên dropdown và các component khác */
html.dark-style .rz-calendar,
html.dark-style .rz-datepicker-popup,
.dark-style .rz-calendar,
.dark-style .rz-datepicker-popup,
body.dark-style .rz-calendar,
body.dark-style .rz-datepicker-popup,
[data-theme="theme-dark"] .rz-calendar,
[data-theme="theme-dark"] .rz-datepicker-popup {
    z-index: auto !important;
}

/* Trong dialog, calendar cần z-index cao hơn */
html.dark-style .rz-dialog .rz-calendar,
html.dark-style .rz-dialog .rz-datepicker-popup,
.dark-style .rz-dialog .rz-calendar,
.dark-style .rz-dialog .rz-datepicker-popup,
body.dark-style .rz-dialog .rz-calendar,
body.dark-style .rz-dialog .rz-datepicker-popup,
[data-theme="theme-dark"] .rz-dialog .rz-calendar,
[data-theme="theme-dark"] .rz-dialog .rz-datepicker-popup {
    z-index: auto !important;
}

/* ===== ANIMATION & TRANSITIONS ===== */

/* Smooth transitions cho calendar */
html.dark-style .rz-calendar,
html.dark-style .rz-datepicker-popup,
.dark-style .rz-calendar,
.dark-style .rz-datepicker-popup,
body.dark-style .rz-calendar,
body.dark-style .rz-datepicker-popup,
[data-theme="theme-dark"] .rz-calendar,
[data-theme="theme-dark"] .rz-datepicker-popup {
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

/* Fade in animation */
html.dark-style .rz-calendar.rz-calendar-show,
html.dark-style .rz-datepicker-popup.rz-show,
.dark-style .rz-calendar.rz-calendar-show,
.dark-style .rz-datepicker-popup.rz-show,
body.dark-style .rz-calendar.rz-calendar-show,
body.dark-style .rz-datepicker-popup.rz-show,
[data-theme="theme-dark"] .rz-calendar.rz-calendar-show,
[data-theme="theme-dark"] .rz-datepicker-popup.rz-show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Fix z-index issues */
.rz-dropdown-panel {
    z-index: 2100 !important;
}

.rz-datepicker-popup {
    z-index: 2050 !important;
}