/**
 * Date Range Picker Theme Styles
 * Styles for Bootstrap Date Range Picker by Dan Grossman v3.1
 * Based on theme-default.css styling
 */

/* ==========================================================================
   Light Theme Styles (Default)
   ========================================================================== */

.daterangepicker {
  font-family: inherit !important;
  z-index: 9999 !important;
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
}

.daterangepicker .drp-buttons .btn {
  padding: 6px 12px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
}

.daterangepicker .drp-buttons .btn.applyBtn {
  background-color: #666cff !important;
  border-color: #666cff !important;
  color: #fff !important;
}

.daterangepicker .drp-buttons .btn.applyBtn:hover {
  background-color: #5c61e6 !important;
  border-color: #5c61e6 !important;
}

.daterangepicker .drp-buttons .btn.cancelBtn {
  background-color: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

.daterangepicker td.start-date,
.daterangepicker td.end-date {
  border-radius: 6px !important;
}

.daterangepicker td.start-date.end-date {
  border-radius: 6px !important;
}

/* Input styling */
.daterangepicker-input {
  cursor: pointer;
}

/* Active date selection */
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #666cff !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Start and end date styling */
.daterangepicker td.start-date:not(.off),
.daterangepicker td.end-date:not(.off) {
  background-color: #666cff !important;
  color: #fff !important;
  border: 0 !important;
}

.daterangepicker td.start-date:not(.off):hover,
.daterangepicker td.end-date:not(.off):hover {
  background-color: #666cff !important;
}

/* Active input highlight */
.daterangepicker .input-mini.active {
  border-color: #666cff !important;
}

/* In-range date styling */
.daterangepicker td.in-range {
  color: #666cff !important;
  background-color: #ededff !important;
}

/* Today highlight */
.daterangepicker td.today {
  font-weight: bold;
}

/* Hover state */
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background-color: #f3f4f6 !important;
}

/* Month/Year dropdowns */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  border-radius: 4px !important;
  border: 1px solid #d1d5db !important;
  padding: 2px 4px !important;
}

/* Ranges list styling */
.daterangepicker .ranges li {
  color: #374151 !important;
  border-radius: 4px !important;
}

.daterangepicker .ranges li:hover {
  background-color: #f3f4f6 !important;
}

.daterangepicker .ranges li.active {
  color: #666cff !important;
  background-color: #e7e7ff !important;
}

/* ==========================================================================
   Dark Theme Styles
   ========================================================================== */

.dark .daterangepicker,
[data-kt-theme-mode="dark"] .daterangepicker {
  background-color: #1f2937;
  border-color: #374151;
  color: #f9fafb;
}

.dark .daterangepicker::before,
[data-kt-theme-mode="dark"] .daterangepicker::before {
  border-bottom-color: #374151;
}

.dark .daterangepicker::after,
[data-kt-theme-mode="dark"] .daterangepicker::after {
  border-bottom-color: #1f2937;
}

.dark .daterangepicker .calendar-table,
[data-kt-theme-mode="dark"] .daterangepicker .calendar-table {
  background-color: #1f2937;
  border-color: #374151;
}

.dark .daterangepicker .calendar-table th,
.dark .daterangepicker .calendar-table td,
[data-kt-theme-mode="dark"] .daterangepicker .calendar-table th,
[data-kt-theme-mode="dark"] .daterangepicker .calendar-table td {
  color: #f9fafb;
}

.dark .daterangepicker td.available:hover,
.dark .daterangepicker th.available:hover,
[data-kt-theme-mode="dark"] .daterangepicker td.available:hover,
[data-kt-theme-mode="dark"] .daterangepicker th.available:hover {
  background-color: #374151;
  color: #f9fafb;
}

.dark .daterangepicker td.off,
.dark .daterangepicker td.off.in-range,
.dark .daterangepicker td.off.start-date,
.dark .daterangepicker td.off.end-date,
[data-kt-theme-mode="dark"] .daterangepicker td.off,
[data-kt-theme-mode="dark"] .daterangepicker td.off.in-range,
[data-kt-theme-mode="dark"] .daterangepicker td.off.start-date,
[data-kt-theme-mode="dark"] .daterangepicker td.off.end-date {
  background-color: transparent;
  color: #6b7280;
}

/* Dark theme - in-range styling */
.dark .daterangepicker td.in-range:not(.start-date):not(.end-date):not(.off),
[data-kt-theme-mode="dark"] .daterangepicker td.in-range:not(.start-date):not(.end-date):not(.off) {
  color: #a5a8ff !important;
  background-color: rgba(102, 108, 255, 0.2) !important;
}

/* Dark theme - active/selected dates */
.dark .daterangepicker td.active,
.dark .daterangepicker td.active:hover,
[data-kt-theme-mode="dark"] .daterangepicker td.active,
[data-kt-theme-mode="dark"] .daterangepicker td.active:hover {
  background-color: #666cff !important;
  color: #ffffff;
}

.dark .daterangepicker .start-date:not(.end-date):not(.off),
.dark .daterangepicker .end-date:not(.start-date):not(.off),
[data-kt-theme-mode="dark"] .daterangepicker .start-date:not(.end-date):not(.off),
[data-kt-theme-mode="dark"] .daterangepicker .end-date:not(.start-date):not(.off) {
  background-color: #666cff;
  color: #fff;
}

.dark .daterangepicker .drp-buttons,
[data-kt-theme-mode="dark"] .daterangepicker .drp-buttons {
  border-top-color: #374151;
}

.dark .daterangepicker .drp-selected,
[data-kt-theme-mode="dark"] .daterangepicker .drp-selected {
  color: #9ca3af;
}

/* Dark theme - dropdowns */
.dark .daterangepicker select.monthselect,
.dark .daterangepicker select.yearselect,
[data-kt-theme-mode="dark"] .daterangepicker select.monthselect,
[data-kt-theme-mode="dark"] .daterangepicker select.yearselect {
  background-color: #374151;
  color: #f9fafb;
  border-color: #4b5563;
}

/* Dark theme - ranges list */
.dark .daterangepicker .ranges li,
[data-kt-theme-mode="dark"] .daterangepicker .ranges li {
  color: #f9fafb;
}

.dark .daterangepicker .ranges li:hover,
[data-kt-theme-mode="dark"] .daterangepicker .ranges li:hover {
  background-color: #374151;
}

.dark .daterangepicker .ranges li.active,
[data-kt-theme-mode="dark"] .daterangepicker .ranges li.active {
  color: #666cff !important;
  background-color: rgba(102, 108, 255, 0.15) !important;
}

/* Dark theme - time picker inputs */
.dark .daterangepicker select.hourselect,
.dark .daterangepicker select.minuteselect,
.dark .daterangepicker select.secondselect,
.dark .daterangepicker select.ampmselect,
[data-kt-theme-mode="dark"] .daterangepicker select.hourselect,
[data-kt-theme-mode="dark"] .daterangepicker select.minuteselect,
[data-kt-theme-mode="dark"] .daterangepicker select.secondselect,
[data-kt-theme-mode="dark"] .daterangepicker select.ampmselect {
  background-color: #374151;
  color: #f9fafb;
  border-color: #4b5563;
}

/* Dark theme - input highlight */
.dark .daterangepicker .input-mini.active,
[data-kt-theme-mode="dark"] .daterangepicker .input-mini.active {
  border-color: #666cff !important;
}

/* Dark theme - buttons */
.dark .daterangepicker .btn-primary,
[data-kt-theme-mode="dark"] .daterangepicker .btn-primary {
  background-color: #666cff;
  border-color: #666cff;
  color: #ffffff;
}

.dark .daterangepicker .btn-primary:hover,
[data-kt-theme-mode="dark"] .daterangepicker .btn-primary:hover {
  background-color: #5c61e6;
  border-color: #5c61e6;
}

.dark .daterangepicker .btn-default,
[data-kt-theme-mode="dark"] .daterangepicker .btn-default {
  background-color: #374151;
  border-color: #4b5563;
  color: #f9fafb;
}

.dark .daterangepicker .btn-default:hover,
[data-kt-theme-mode="dark"] .daterangepicker .btn-default:hover {
  background-color: #4b5563;
}