.sp-date-input-wrap {
  position: relative;
  width: 100%;
}

.sp-date-input-wrap .form-control,
.sp-date-input-wrap .sp-date-picker-input {
  padding-inline-end: 2.5rem;
}

.sp-date-input-wrap .sp-date-input-icon {
  position: absolute;
  top: 50%;
  inset-inline-end: 0.5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color, #6c757d);
  line-height: 1;
  cursor: pointer;
}

.sp-date-input-wrap .sp-date-input-icon:hover {
  color: var(--bs-primary, #0d6efd);
}

.sp-date-input-wrap .sp-date-picker-input {
  cursor: pointer;
}

.sp-date-input-wrap .sp-date-picker-input[readonly],
.sp-date-input-wrap .sp-date-picker-input:disabled {
  cursor: not-allowed;
}

.daterangepicker {
  z-index: 1080;
  border-radius: 0.5rem;
  border-color: var(--bs-border-color, #dee2e6);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
  font-family: inherit;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  border-radius: 0.35rem;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--bs-primary, #0d6efd);
}

.daterangepicker .drp-buttons .btn {
  border-radius: 0.375rem;
}

[data-bs-theme="dark"] .daterangepicker {
  background-color: var(--bs-body-bg, #0f172a);
  color: var(--bs-body-color, #e2e8f0);
  border-color: var(--bs-border-color, #334155);
}

[data-bs-theme="dark"] .daterangepicker .calendar-table {
  background-color: transparent;
  border-color: var(--bs-border-color, #334155);
}

[data-bs-theme="dark"] .daterangepicker .calendar-table td.off,
[data-bs-theme="dark"] .daterangepicker .calendar-table td.off.in-range,
[data-bs-theme="dark"] .daterangepicker .calendar-table td.off.start-date,
[data-bs-theme="dark"] .daterangepicker .calendar-table td.off.end-date {
  background-color: transparent;
  color: var(--bs-secondary-color, #94a3b8);
}

[data-bs-theme="dark"] .daterangepicker select.monthselect,
[data-bs-theme="dark"] .daterangepicker select.yearselect {
  background-color: var(--bs-body-bg, #0f172a);
  color: var(--bs-body-color, #e2e8f0);
  border-color: var(--bs-border-color, #334155);
}

/* RTL calendar — keep native table layout (no flex on thead rows) */
html[dir="rtl"] .daterangepicker,
.daterangepicker.sp-daterangepicker-rtl {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .daterangepicker.single .drp-calendar,
.daterangepicker.sp-daterangepicker-rtl.single .drp-calendar {
  float: none;
  padding: 8px;
}

html[dir="rtl"] .daterangepicker .drp-calendar.left,
.daterangepicker.sp-daterangepicker-rtl .drp-calendar.left {
  padding: 8px;
}

html[dir="rtl"] .daterangepicker .calendar-table table,
.daterangepicker.sp-daterangepicker-rtl .calendar-table table {
  direction: rtl;
}

/* Mirror navigation chevrons when columns flip in RTL */
html[dir="rtl"] .daterangepicker .calendar-table .prev span,
.daterangepicker.sp-daterangepicker-rtl .calendar-table .prev span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

html[dir="rtl"] .daterangepicker .calendar-table .next span,
.daterangepicker.sp-daterangepicker-rtl .calendar-table .next span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

html[dir="rtl"] .daterangepicker .calendar-table thead tr:first-child th.month,
html[dir="rtl"] .daterangepicker .calendar-table thead tr:first-child th[colspan],
.daterangepicker.sp-daterangepicker-rtl .calendar-table thead tr:first-child th.month,
.daterangepicker.sp-daterangepicker-rtl .calendar-table thead tr:first-child th[colspan] {
  text-align: center;
}

html[dir="rtl"] .daterangepicker select.monthselect,
.daterangepicker.sp-daterangepicker-rtl select.monthselect {
  margin-right: 0;
  margin-left: 2%;
  direction: ltr;
  text-align: center;
}

html[dir="rtl"] .daterangepicker select.yearselect,
.daterangepicker.sp-daterangepicker-rtl select.yearselect {
  direction: ltr;
  text-align: center;
}

html[dir="rtl"] .daterangepicker .calendar-table thead tr:last-child th,
.daterangepicker.sp-daterangepicker-rtl .calendar-table thead tr:last-child th {
  text-align: center;
  font-size: 0.8rem;
}