/*
 * Shared calendar popup theme
 * --------------------------------------------------------------------------
 * Loaded by header-base.php after the legacy/client styles so every calendar
 * plugin uses the same visual language without changing plugin behaviour.
 */

:root {
  --calendar-primary: var(--ia-primary, #334155);
  --calendar-primary-hover: var(--ia-primary-dark, #1e293b);
  --calendar-primary-soft: color-mix(in srgb, var(--calendar-primary) 11%, #fff);
  --calendar-primary-mid: color-mix(in srgb, var(--calendar-primary) 20%, #fff);
  --calendar-text: var(--ia-text, #1e293b);
  --calendar-muted: var(--ia-text-muted, #64748b);
  --calendar-border: var(--ia-border, #e2e8f0);
  --calendar-surface: var(--ia-card-bg, #fff);
  --calendar-hover: var(--ia-gray-50, #f8fafc);
  --calendar-danger: #dc2626;
  --calendar-radius: 14px;
  --calendar-shadow: 0 20px 48px rgba(15, 23, 42, .18), 0 4px 14px rgba(15, 23, 42, .08);
}

/* Shared popup shells. */
.daterangepicker,
.datepicker.datepicker-dropdown,
.bootstrap-datetimepicker-widget.dropdown-menu,
#ui-datepicker-div.ui-datepicker {
  z-index: 1100 !important;
  border: 1px solid var(--calendar-border) !important;
  border-radius: var(--calendar-radius) !important;
  background: var(--calendar-surface) !important;
  color: var(--calendar-text) !important;
  box-shadow: var(--calendar-shadow) !important;
  font-family: var(--ia-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.daterangepicker {
  position: absolute !important;
  width: auto;
  max-width: none !important;
  margin-top: 9px !important;
  padding: 8px !important;
}
.datepicker.datepicker-dropdown,
.bootstrap-datetimepicker-widget.dropdown-menu,
#ui-datepicker-div.ui-datepicker { padding: 10px !important; }

/* bootstrap-datetimepicker hard-codes width:250px against its own 4px padding.
   This file uses 10px padding and larger cells, so the day grid sat ~26px wider
   than the popup and the Saturday column was clipped on every screen size. Let
   the popup size to its own table instead. The side-by-side time layout keeps
   the width the plugin gives it. */
.bootstrap-datetimepicker-widget.dropdown-menu:not(.timepicker-sbs) {
  width: auto !important;
  min-width: 262px !important;
}

/* Popup pointers. */
.daterangepicker::before,
.datepicker-dropdown::before,
.bootstrap-datetimepicker-widget.dropdown-menu::before {
  border-bottom-color: var(--calendar-border) !important;
}
.daterangepicker::after,
.datepicker-dropdown::after,
.bootstrap-datetimepicker-widget.dropdown-menu::after {
  border-bottom-color: var(--calendar-surface) !important;
}

/* Calendar grids. */
.daterangepicker .calendar-table,
.daterangepicker .calendar-table table,
.datepicker table,
.bootstrap-datetimepicker-widget table,
#ui-datepicker-div .ui-datepicker-calendar {
  width: 100% !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 3px !important;
  background: transparent !important;
}

.daterangepicker .calendar,
.daterangepicker .drp-calendar {
  display: none;
  max-width: 284px;
  padding: 5px !important;
}
.daterangepicker.opensleft .calendar,
.daterangepicker.opensleft .drp-calendar,
.daterangepicker.opensleft .ranges { float: left; }
.daterangepicker.opensright .calendar,
.daterangepicker.opensright .drp-calendar,
.daterangepicker.opensright .ranges { float: right; }
.daterangepicker.single .calendar.left,
.daterangepicker.single .drp-calendar.left { display: block; }
.daterangepicker.show-calendar .calendar,
.daterangepicker.show-calendar .drp-calendar { display: block; }
.daterangepicker .calendar-table { padding: 0 !important; }

.daterangepicker .daterangepicker_input { position: relative; margin-bottom: 7px; }
.daterangepicker .daterangepicker_input .form-control {
  min-height: 36px !important;
  padding: 6px 34px 6px 10px !important;
  border: 1px solid var(--calendar-border) !important;
  border-radius: 8px !important;
  background: var(--calendar-surface) !important;
  color: var(--calendar-text) !important;
  font-size: 12px !important;
}
.daterangepicker .daterangepicker_input > i {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--calendar-muted);
}

.daterangepicker th,
.daterangepicker td,
.datepicker table tr th,
.datepicker table tr td,
.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget table td,
#ui-datepicker-div .ui-datepicker-calendar th,
#ui-datepicker-div .ui-datepicker-calendar td {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent;
  color: var(--calendar-text);
  font-size: 12.5px !important;
  font-weight: 550 !important;
  line-height: 36px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Weekday labels. */
.daterangepicker thead tr:last-child th,
.datepicker table tr th.dow,
.bootstrap-datetimepicker-widget table th.dow,
#ui-datepicker-div .ui-datepicker-calendar thead th {
  color: var(--calendar-muted) !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* Month header and navigation. */
.daterangepicker th.month,
.datepicker .datepicker-switch,
.bootstrap-datetimepicker-widget th.picker-switch,
.bootstrap-datetimepicker-widget th.switch,
#ui-datepicker-div .ui-datepicker-title {
  color: var(--calendar-text) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  letter-spacing: -.01em !important;
}

.daterangepicker th.prev,
.daterangepicker th.next,
.datepicker th.prev,
.datepicker th.next,
.bootstrap-datetimepicker-widget th.prev,
.bootstrap-datetimepicker-widget th.next,
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: var(--calendar-hover) !important;
  color: var(--calendar-text) !important;
  cursor: pointer !important;
}

.daterangepicker th.prev:hover,
.daterangepicker th.next:hover,
.datepicker th.prev:hover,
.datepicker th.next:hover,
.bootstrap-datetimepicker-widget th.prev:hover,
.bootstrap-datetimepicker-widget th.next:hover,
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover {
  background: var(--calendar-primary-soft) !important;
  color: var(--calendar-primary) !important;
}

.daterangepicker .calendar-table .prev span,
.daterangepicker .calendar-table .next span {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  padding: 0 !important;
  border: solid var(--calendar-primary) !important;
  border-width: 0 2px 2px 0 !important;
  border-radius: 0 !important;
  color: var(--calendar-primary) !important;
  vertical-align: middle !important;
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg) !important;
  -webkit-transform: rotate(135deg) !important;
}

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg) !important;
  -webkit-transform: rotate(-45deg) !important;
}

.daterangepicker th.prev:hover span,
.daterangepicker th.next:hover span {
  border-color: var(--calendar-primary-hover) !important;
  color: var(--calendar-primary-hover) !important;
}

#ui-datepicker-div .ui-datepicker-header {
  min-height: 40px;
  padding: 3px 42px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--calendar-text) !important;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next { top: 3px !important; }
#ui-datepicker-div .ui-datepicker-prev { left: 3px !important; }
#ui-datepicker-div .ui-datepicker-next { right: 3px !important; }

/* Selectable days and periods. */
.daterangepicker td.available:hover,
.datepicker table tr td.day:hover,
.datepicker table tr td span:hover,
.bootstrap-datetimepicker-widget td.day:hover,
.bootstrap-datetimepicker-widget td.hour:hover,
.bootstrap-datetimepicker-widget td.minute:hover,
.bootstrap-datetimepicker-widget td span:hover,
#ui-datepicker-div .ui-datepicker-calendar td a:hover {
  background: var(--calendar-primary-soft) !important;
  color: var(--calendar-primary) !important;
}

#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: inherit !important;
  text-decoration: none !important;
}

.daterangepicker td.in-range,
.datepicker table tr td.range,
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-current-day:not(.ui-datepicker-today) {
  background: var(--calendar-primary-soft) !important;
  color: var(--calendar-primary) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active,
.bootstrap-datetimepicker-widget td.active,
.bootstrap-datetimepicker-widget td.active:hover,
.bootstrap-datetimepicker-widget td span.active,
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active {
  background: var(--calendar-primary) !important;
  color: #fff !important;
  font-weight: 750 !important;
  box-shadow: 0 5px 12px color-mix(in srgb, var(--calendar-primary) 26%, transparent) !important;
}

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

/* Today remains visible without competing with selection. */
.datepicker table tr td.today:not(.active),
.bootstrap-datetimepicker-widget td.today:not(.active),
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today:not(.ui-datepicker-current-day) a {
  background: #fff7ed !important;
  color: #c2410c !important;
  font-weight: 750 !important;
  box-shadow: inset 0 0 0 1px #fed7aa !important;
}

/* Muted and disabled dates. */
.daterangepicker td.off,
.daterangepicker td.disabled,
.datepicker table tr td.old,
.datepicker table tr td.new,
.datepicker table tr td.disabled,
.bootstrap-datetimepicker-widget td.old,
.bootstrap-datetimepicker-widget td.new,
.bootstrap-datetimepicker-widget td.disabled,
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-other-month,
#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled {
  background: transparent !important;
  color: #a8b1bd !important;
  opacity: .68;
  text-decoration: none !important;
}

/* Month/year and time controls. */
.daterangepicker select,
.datepicker select,
.bootstrap-datetimepicker-widget select,
#ui-datepicker-div select.ui-datepicker-month,
#ui-datepicker-div select.ui-datepicker-year {
  min-height: 34px !important;
  padding: 5px 27px 5px 9px !important;
  border: 1px solid var(--calendar-border) !important;
  border-radius: 8px !important;
  background-color: var(--calendar-surface) !important;
  color: var(--calendar-text) !important;
  font: inherit !important;
}

.daterangepicker .calendar-time,
.bootstrap-datetimepicker-widget .timepicker { color: var(--calendar-text) !important; }
.bootstrap-datetimepicker-widget .timepicker-picker a,
.bootstrap-datetimepicker-widget [data-action] { color: var(--calendar-primary) !important; }

/* Range shortcuts and actions. */
.daterangepicker .ranges { width: 168px; padding: 5px !important; text-align: left; }
.daterangepicker .ranges ul { padding: 0 !important; }
.daterangepicker .ranges li {
  margin: 2px 0 !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--calendar-muted) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}
.daterangepicker .ranges li:hover,
.daterangepicker .ranges li.active {
  background: var(--calendar-primary-soft) !important;
  color: var(--calendar-primary) !important;
}

.daterangepicker .range_inputs,
.daterangepicker .drp-buttons,
#ui-datepicker-div .ui-datepicker-buttonpane {
  margin: 8px -8px -8px !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-top: 1px solid var(--calendar-border) !important;
  background: var(--calendar-hover) !important;
}

.daterangepicker .btn,
#ui-datepicker-div .ui-datepicker-buttonpane button {
  min-height: 34px !important;
  padding: 6px 12px !important;
  border: 1px solid var(--calendar-border) !important;
  border-radius: 8px !important;
  background: var(--calendar-surface) !important;
  color: var(--calendar-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.daterangepicker .applyBtn,
#ui-datepicker-div .ui-datepicker-buttonpane .ui-datepicker-current {
  border-color: var(--calendar-primary) !important;
  background: var(--calendar-primary) !important;
  color: #fff !important;
}

/* Responsive: calendars never overflow narrow screens. */
@media (max-width: 767.98px) {
  .daterangepicker,
  .datepicker.datepicker-dropdown,
  .bootstrap-datetimepicker-widget.dropdown-menu,
  #ui-datepicker-div.ui-datepicker {
    max-width: calc(100vw - 20px) !important;
  }
  .daterangepicker { width: min(340px, calc(100vw - 20px)) !important; }
  .daterangepicker .calendar,
  .daterangepicker .drp-calendar { float: none !important; width: 100% !important; max-width: none !important; }
  .daterangepicker .calendar.right,
  .daterangepicker .drp-calendar.right { margin-top: 8px !important; }
  .daterangepicker th,
  .daterangepicker td,
  .datepicker table tr th,
  .datepicker table tr td,
  .bootstrap-datetimepicker-widget table th,
  .bootstrap-datetimepicker-widget table td {
    min-width: 34px !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .daterangepicker *,
  .datepicker *,
  .bootstrap-datetimepicker-widget *,
  #ui-datepicker-div * { transition: none !important; }
}