/*
 * 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;
  }

  /*
     ON A PHONE A CALENDAR IS A SHEET, NOT A DROPDOWN.

     Every one of these plugins positions itself by measuring the field and writing inline
     top/left — which is the right answer beside a form on a desktop and the wrong one on a
     phone, where the field is near the right edge, the popup is 340px wide and two months
     tall, and what you get is a panel shoved against one side with its lower half past the
     bottom of the screen. Capping the width above stopped it overflowing sideways; it did
     nothing about where the thing opens.

     Centred in the viewport instead, which is where a phone puts anything this size. The
     inline positions the plugins write are overridden rather than prevented, because they
     are written on every open and there is no option in any of the four to turn them off.

     The dimmed surround is the second shadow rather than an element: none of these plugins
     has a backdrop to style, and a shadow does not take pointer events — so a tap outside
     still reaches the page underneath, which is what every one of them listens for to
     close itself. An added overlay would have swallowed exactly that tap.
  */
  .daterangepicker,
  .datepicker.datepicker-dropdown,
  .bootstrap-datetimepicker-widget.dropdown-menu,
  #ui-datepicker-div.ui-datepicker {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    /* Two stacked months are taller than a phone. The sheet scrolls rather than growing
       past the screen, and --oe-floor is not read here because a centred sheet is not
       pinned to the floor the app's bar sits on. */
    max-height: min(84vh, 620px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--calendar-shadow), 0 0 0 100vmax rgba(15, 23, 42, .45) !important;
  }

  /* The little arrow pointed at the field it hung from. A centred sheet hangs from
     nothing, and the arrow then points at the middle of the page. */
  .daterangepicker::before,
  .daterangepicker::after,
  .datepicker-dropdown::before,
  .datepicker-dropdown::after,
  .bootstrap-datetimepicker-widget.dropdown-menu::before,
  .bootstrap-datetimepicker-widget.dropdown-menu::after { display: none !important; }

  /* Apply is the point of the sheet, and it is under the second month. It stays on screen
     while the months scroll past it. */
  .daterangepicker .drp-buttons {
    position: sticky;
    bottom: calc(-1 * var(--calendar-sheet-pad, 8px));
    z-index: 1;
    background: var(--calendar-surface) !important;
    margin-bottom: calc(-1 * var(--calendar-sheet-pad, 8px)) !important;
    padding-bottom: var(--calendar-sheet-pad, 8px) !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; }
}