/* ===== Daterangepicker Theme ===== */

/* Dark mode support */
[data-theme-mode="dark"] .daterangepicker,
[data-theme-mode="dark"] .daterangepicker .calendar-table {
    border: unset !important;
}

[data-theme-mode="dark"] .daterangepicker,
[data-theme-mode="dark"] .daterangepicker .drp-calendar .calendar-table {
    background-color: rgb(var(--body-bg-rgb)) !important;
}

[data-theme-mode="dark"] .daterangepicker .table-condensed tr td.off {
    background-color: rgb(var(--body-bg-rgb)) !important;
}

[data-theme-mode="dark"] .daterangepicker .table-condensed tr td.off.disabled {
    color: var(--gray-5) !important;
}

[data-theme-mode="dark"] .daterangepicker .table-condensed tr td.active,
[data-theme-mode="dark"] .daterangepicker .table-condensed tr td.active.end-date {
    background-color: var(--primary09) !important;
}

[data-theme-mode="dark"] .daterangepicker .table-condensed tr td.in-range {
    background-color: var(--primary03) !important;
}

[data-theme-mode="dark"] .daterangepicker td.available:hover {
    background-color: var(--primary03) !important;
}

[data-theme-mode="dark"] .daterangepicker select {
    background-color: rgb(var(--body-bg-rgb)) !important;
    color: var(--default-color) !important;
    border-color: var(--default-border) !important;
}

/* Light mode borders */
.daterangepicker {
    border: 1px solid var(--default-border) !important;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    color: var(--default-color) !important;
}

/* Active dates */
.daterangepicker td.active.start-date.available.in-range,
.daterangepicker td.active.end-date.available,
.daterangepicker td.active.start-date.available,
.daterangepicker td.active.end-date.available {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.daterangepicker .table-condensed tr td.off.disabled {
    color: var(--gray-5) !important;
}

.daterangepicker td.in-range {
    background-color: #f1ffe2 !important;
}

/* ===== Styled Native Selects ===== */

/* Month & Year dropdowns */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 4px;
    border: 1px solid var(--default-border, #ced4da);
    border-radius: 4px;
    background-color: #fff;
    color: var(--default-color, #333);
    cursor: pointer;
    outline: none;
    height: 26px;
}

.daterangepicker select.monthselect {
    min-width: 90px;
    margin-right: 4px;
}

.daterangepicker select.yearselect {
    min-width: 65px;
}

.daterangepicker select.monthselect:hover,
.daterangepicker select.yearselect:hover,
.daterangepicker select.monthselect:focus,
.daterangepicker select.yearselect:focus {
    border-color: var(--primary-color, #8fbd56);
    box-shadow: 0 0 0 1px var(--primary-color, #8fbd56);
}

/* Time selects */
.daterangepicker .calendar-time {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
    padding: 8px 0;
}

.daterangepicker .calendar-time select {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 4px;
    border: 1px solid var(--default-border, #ced4da);
    border-radius: 4px;
    background-color: #fff;
    color: var(--default-color, #333);
    cursor: pointer;
    outline: none;
    min-width: 52px;
    height: 26px;
    text-align: center;
}

.daterangepicker .calendar-time select:hover,
.daterangepicker .calendar-time select:focus {
    border-color: var(--primary-color, #8fbd56);
    box-shadow: 0 0 0 1px var(--primary-color, #8fbd56);
}

.calendar-time .select2-container .select2-selection--single, .calendar-time .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 1.7rem !important;
}

.calendar-time .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.7rem !important;
}

/* ===== Buttons area ===== */
.daterangepicker .drp-buttons {
    border-top: 1px solid var(--default-border, #dee2e6);
    padding: 8px;
}

.daterangepicker .drp-buttons .btn {
    font-size: 12px;
    padding: 4px 12px;
}

/* Presets dropdown in buttons area */
.daterangepicker .drp-presets-dropdown {
    font-size: 12px;
    padding: 4px 8px;
    height: 28px;
    border: 1px solid var(--default-border, #ced4da);
    border-radius: 4px;
    margin-right: 8px;
    cursor: pointer;
}

/* ===== Input styling ===== */
.daterange-picker + .input-group-text,
.date-picker + .input-group-text {
    cursor: pointer;
}

/* ===== Picker Buttons ===== */
.daterangepicker .drp-buttons{
    display: flex !important;
    align-items : center !important;
}

/* Hide buttons for single-date auto-apply pickers */
.daterangepicker.auto-apply .drp-buttons {
    display: none !important;
}