/* Dark mode styles for daterangepicker */
.daterangepicker.dark-mode {
  background-color: #1f2937;
  border: 1px solid #374151;
  color: #f3f4f6;
  box-shadow: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgba(255, 255, 255, 0.04), 0 8px 10px -6px rgba(255, 255, 255, 0.03);
}

.daterangepicker.dark-mode:before {
  border-bottom-color: #374151;
}

.daterangepicker.dark-mode:after {
  border-bottom-color: #1f2937;
}

.daterangepicker.dark-mode .calendar-table {
  background-color: #1f2937;
  border: transparent;
}

.daterangepicker.dark-mode .calendar-table th,
.daterangepicker.dark-mode .calendar-table td {
  color: #f3f4f6;
}

.daterangepicker.dark-mode td.available:hover,
.daterangepicker.dark-mode th.available:hover {
  background-color: #374151;
  color: #f3f4f6;
}

.daterangepicker.dark-mode td.week,
.daterangepicker.dark-mode th.week {
  color: #9ca3af;
}

/* Hide days from other months - both light and dark mode */
.daterangepicker td.off {
  visibility: hidden;
  pointer-events: none;
}

.daterangepicker td.off.in-range {
  visibility: hidden;
  pointer-events: none;
  background-color: transparent !important;
}

.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  visibility: hidden;
  pointer-events: none;
}

/* Dark mode specific */
.daterangepicker.dark-mode td.off,
.daterangepicker.dark-mode td.off.in-range,
.daterangepicker.dark-mode td.off.start-date,
.daterangepicker.dark-mode td.off.end-date {
  background-color: transparent;
  color: transparent;
  visibility: hidden;
  pointer-events: none;
}

.daterangepicker.dark-mode td.in-range {
  background-color: #374151;
  color: #f3f4f6;
}

.daterangepicker.dark-mode td.active,
.daterangepicker.dark-mode td.active:hover {
  background-color: #5C3FA8;
  color: #ffffff;
}

.daterangepicker.dark-mode td.disabled {
  color: #4b5563;
}

/* Previous and Next navigation arrows in dark mode */
.daterangepicker.dark-mode .calendar-table .next span,
.daterangepicker.dark-mode .calendar-table .prev span {
  border-color: #e5e7eb;
}

.daterangepicker.dark-mode .calendar-table .next:hover span,
.daterangepicker.dark-mode .calendar-table .prev:hover span {
  border-color: #e5e7eb;
}

.daterangepicker.dark-mode select.monthselect,
.daterangepicker.dark-mode select.yearselect,
.daterangepicker.dark-mode select.hourselect,
.daterangepicker.dark-mode select.minuteselect,
.daterangepicker.dark-mode select.secondselect,
.daterangepicker.dark-mode select.ampmselect {
  background-color: #374151;
  color: #f3f4f6;
  border: 1px solid #4b5563;
}

.daterangepicker.dark-mode .calendar-time select.disabled {
  color: #6b7280;
}

.daterangepicker.dark-mode .drp-buttons {
  border-top: 1px solid #374151;
}

.daterangepicker.dark-mode .drp-selected {
  color: #d1d5db;
}

.daterangepicker.dark-mode .drp-buttons .btn {
  background-color: #374151;
  color: #f3f4f6;
  border: 1px solid #4b5563;
}

.daterangepicker.dark-mode .drp-buttons .btn:hover {
  background-color: #4b5563;
}

.daterangepicker.dark-mode .drp-buttons .btn.btn-primary {
  background-color: #5C3FA8;
  border-color: #5C3FA8;
  color: #ffffff;
}

.daterangepicker.dark-mode .drp-buttons .btn.btn-primary:hover {
  background-color: #4a2c94;
  border-color: #4a2c94;
}

.daterangepicker.dark-mode .ranges {
  border-bottom: none;
}

.daterangepicker.dark-mode .ranges li {
  color: #f3f4f6;
}

.daterangepicker.dark-mode .ranges li:hover {
  background-color: #374151;
}

.daterangepicker.dark-mode .ranges li.active {
  background-color: #5C3FA8;
  color: #ffffff;
}

.daterangepicker.dark-mode.show-ranges.ltr .drp-calendar.left {
  border-left: none; /* Default: no border on small/mobile */
}

/* @media (min-width: 1024px) {
  .daterangepicker.dark-mode.show-ranges.ltr .drp-calendar.left {
    border-left: 1px solid #374151;
  }
} */

/* Dark mode for input field */
.dark .pc-text-input {
  background-color: #1f2937;
  border-color: #374151;
  color: #f3f4f6;
}

.dark .pc-text-input:focus {
  border-color: #5C3FA8;
  background-color: #111827;
}

.dark .pc-text-input::placeholder {
  color: #6b7280;
}

/* Dark mode for label */
.dark .pc-label {
  color: #f3f4f6;
}

/* Dark mode for help text */
.dark .pc-form-help-text {
  color: #9ca3af;
}

/* Dark mode for error messages */
.dark .pc-form-field-error {
  color: #ef4444;
}