/* Layout for the bundled date picker; controls use Tabler's form and button classes. */
.daterangepicker {
  position: absolute;
  display: none;
  flex-wrap: wrap;
  gap: 12px;
  width: 360px;
  max-width: calc(100vw - 24px);
  padding: 12px;
  margin-top: 8px;
  color: var(--ctkm-text);
  background: var(--ctkm-surface);
  border: 1px solid var(--ctkm-border);
  border-radius: var(--tblr-border-radius-lg, 8px);
  box-shadow: var(--ctkm-shadow);
}
.daterangepicker.dropdown-menu { z-index: 3001; }
.daterangepicker.show-calendar { width: 594px; }
.daterangepicker.single { width: 298px; }
.daterangepicker .calendar { display: none; flex: 1 1 272px; min-width: 0; }
.daterangepicker.show-calendar .calendar { display: block; }
.daterangepicker .calendar-table { padding-top: 8px; }
.daterangepicker table { width: 100%; margin: 0; table-layout: fixed; border-collapse: separate; border-spacing: 2px; }
.daterangepicker th, .daterangepicker td { height: 32px; padding: 0; text-align: center; border: 0; border-radius: 4px; cursor: pointer; color: inherit; }
.daterangepicker th.month { width: auto; }
.daterangepicker th { font-weight: 600; }
.daterangepicker td.available:hover, .daterangepicker th.available:hover { background: var(--ctkm-surface-muted); }
.daterangepicker td.off, .daterangepicker td.disabled, .daterangepicker th.week { color: var(--ctkm-muted); }
.daterangepicker td.off { opacity: .6; }
.daterangepicker td.disabled, .daterangepicker option.disabled { cursor: not-allowed; text-decoration: line-through; }
.daterangepicker td.in-range { background: color-mix(in srgb, var(--ctkm-accent) 12%, var(--ctkm-surface)); border-radius: 0; }
.daterangepicker td.active, .daterangepicker td.active:hover { background: var(--ctkm-accent); color: #fff; }
.daterangepicker .daterangepicker_input { position: relative; }
.daterangepicker .input-mini { padding-left: 30px; }
.daterangepicker .daterangepicker_input > i { position: absolute; top: 12px; left: 10px; color: var(--ctkm-muted); }
.daterangepicker .calendar-time { position: relative; margin-top: 8px; padding-left: 24px; }
.daterangepicker .calendar-time > i { position: absolute; top: 8px; left: 0; color: var(--ctkm-muted); }
.daterangepicker .calendar-time > div { display: flex; align-items: center; gap: 4px; }
.daterangepicker .calendar-time .form-select { min-width: 0; flex: 1; padding-left: 6px; padding-right: 24px; }
.daterangepicker select.monthselect { display: inline-block; width: 55%; }
.daterangepicker select.yearselect { display: inline-block; width: 43%; }
.daterangepicker .ranges { order: 3; width: 100%; }
.daterangepicker .ranges ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; }
.daterangepicker .ranges li { padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.daterangepicker .ranges li.active, .daterangepicker .ranges li.active:hover { background: color-mix(in srgb, var(--ctkm-accent) 10%, var(--ctkm-surface)); color: var(--ctkm-accent); }
html[data-bs-theme="dark"] .daterangepicker .ranges li.active, html[data-bs-theme="dark"] .daterangepicker .ranges li.active:hover { background: var(--ctkm-accent); color: #fff; }
.daterangepicker .range_inputs { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ctkm-border); }
.ctkm-date-filter { width: 300px; max-width: calc(100vw - 24px); }
@media (max-width: 767px) {
  .daterangepicker.dropdown-menu { position: fixed; inset: 12px 12px auto !important; margin: 0; width: auto; max-width: none; max-height: calc(100dvh - 24px); overflow-y: auto; }
  .ctkm-date-filter { position: fixed !important; inset: auto 12px 12px !important; width: auto; transform: none !important; }
  .daterangepicker .calendar { flex-basis: 100%; }
  .daterangepicker .ranges ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}