/* =====================================================================
   PulseBook standard datepicker
   ---------------------------------------------------------------------
   App-wide, theme-matched calendar for every date field. Built on the
   already-loaded daterangepicker plugin (single-date mode), styled to the
   PBA brand blue. Lifted from the proven Sale Invoice filter (.si-filter-drp)
   and generalised to .pb-drp so it applies everywhere.

   Pairs with pb-datepicker.js, which converts each `input[type=date]` /
   `.pb-datepicker` into a readonly text input wrapped in `.pb-date-wrap`
   and attaches the `.pb-drp`-classed popup. Submitted/read value stays
   `YYYY-MM-DD`, identical to the native control it replaces.
   ===================================================================== */

/* ---- Input shell: calendar icon + readonly field -------------------
   The wrapper is layout-transparent: it stretches to the input's slot
   (grid cell, flex child or block) and imposes no box of its own, so a
   date field lines up pixel-for-pixel with sibling selects / inputs. The
   only thing the wrapper does is anchor the calendar icon. */
.pb-date-wrap {
  position: relative;
  display: block;
  width: 100%;
}

/* When the wrapper sits inside a flex row (toolbars, inline filters),
   let it behave like the input it replaced rather than forcing 100%. */
.d-flex > .pb-date-wrap,
.input-group > .pb-date-wrap,
.row > .pb-date-wrap {
  flex: 1 1 auto;
  width: auto;
}

.pb-date-wrap > .pb-date-icon {
  position: absolute;
  top: 50%;
  left: 0.95rem;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
  font-size: 0.9rem;
  line-height: 1;
  z-index: 2;
}

.pb-date-wrap .form-control {
  /* Icon clearance, tuned so the text baseline matches a plain field. */
  padding-left: 2.6rem;
  cursor: pointer;
  background-color: #fff;
  /* Inherit the slot's full width so it matches neighbouring controls. */
  width: 100%;
}

.pb-date-wrap .form-control[disabled],
.pb-date-wrap .form-control[readonly][disabled] {
  cursor: not-allowed;
  background-color: #f1f4f8;
}

.pb-date-wrap .form-control[disabled] ~ .pb-date-icon,
.pb-date-wrap.pb-date-wrap--disabled > .pb-date-icon {
  opacity: 0.5;
}

/* Dim the icon to the brand blue while the field is focused/open, so the
   field reads as "active" consistently with the focus ring.
   NB: state classes are namespaced (pb-date-wrap--open, not the generic
   `.is-open`) — the HexaDash theme styles `.is-open::after` as a full-screen
   dark scrim for its drawer/menu, which otherwise dimmed the whole page. */
.pb-date-wrap .form-control:focus ~ .pb-date-icon,
.pb-date-wrap.pb-date-wrap--open > .pb-date-icon {
  color: #1f9ded;
}

/* ---- Popup: recolour theme purple -> PBA brand blue, shrink-wrap ---- */
.daterangepicker.pb-drp {
  --color-primary: #1f9ded;
  width: auto !important;
  min-width: 0 !important;
  border: 1px solid #e9eef5;
  border-radius: 48px;
  box-shadow: 0 24px 56px rgba(31, 70, 120, 0.18);
  padding: 10px;
}

/* No ranges configured — hide the empty panel that reserves the left gap */
.daterangepicker.pb-drp .ranges {
  display: none !important;
}

.daterangepicker.pb-drp .drp-calendar,
.daterangepicker.pb-drp .drp-calendar.left,
.daterangepicker.pb-drp .drp-calendar.single {
  float: none !important;
  max-width: none !important;
  width: auto !important;
  padding: 10px 12px 6px !important;
}

.daterangepicker.pb-drp .calendar-table {
  padding: 0;
}

.daterangepicker.pb-drp .calendar-table table {
  border-spacing: 3px 3px !important;
  border-collapse: separate !important;
}

/* Header row: month/year dropdowns + nav arrows — vertically centred.
   Keep the normal table layout (flex here blows out the day-grid columns).
   Middle-align every header cell so the 38px selects and the 38px arrow
   circles share one centred axis. */
.daterangepicker.pb-drp .calendar-table thead tr:first-child th {
  padding-bottom: 6px;
  vertical-align: middle;
}

.daterangepicker.pb-drp .calendar-table thead th.month {
  font-size: 14px;
  font-weight: 700;
  color: #2a3b54;
}

.daterangepicker.pb-drp select.monthselect,
.daterangepicker.pb-drp select.yearselect {
  height: 38px;
  line-height: 1.2;
  border: 1px solid #e1e8f1;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: #2a3b54;
  background-color: #f8fafd;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.daterangepicker.pb-drp select.monthselect {
  min-width: 92px;
}

.daterangepicker.pb-drp select.yearselect {
  min-width: 78px;
}

.daterangepicker.pb-drp select.monthselect:hover,
.daterangepicker.pb-drp select.yearselect:hover {
  border-color: #bcd9f4;
  background-color: #eef6fe;
}

.daterangepicker.pb-drp select.monthselect:focus,
.daterangepicker.pb-drp select.yearselect:focus {
  border-color: #1f9ded;
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 157, 237, 0.14);
}

/* Prev / next navigation: circular buttons with a soft border.
   Force flex centring so the chevron sits dead-centre in the 38px circle and
   the buttons line up on the same baseline as the 38px month/year selects. */
.daterangepicker.pb-drp .calendar-table thead th.prev,
.daterangepicker.pb-drp .calendar-table thead th.next {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px;
  padding: 0 !important;
  /* No circle — bare chevron only. */
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  /* Stay a real table-cell (NOT inline-flex — that baseline-aligns the glyph
     above the selects). text-align + vertical-align centre it. */
  display: table-cell !important;
  text-align: center !important;
  line-height: 0 !important;
  vertical-align: middle !important;
  transition: transform 0.1s ease;
}

/* The chevron glyph itself (theme draws it with rotated borders).
   Kill the theme's asymmetric margin-left/right:3px (tuned for the old 30px
   circle) — left unset it shoves the caret off-centre in the larger button. */
.daterangepicker.pb-drp .calendar-table thead th.prev span,
.daterangepicker.pb-drp .calendar-table thead th.next span {
  margin: 0 !important;
  vertical-align: middle !important;
  border-color: #52627a !important;
  border-width: 0 2px 2px 0 !important;
  padding: 3.5px !important;
  transition: border-color 0.15s ease;
}

.daterangepicker.pb-drp .calendar-table thead th.prev:hover,
.daterangepicker.pb-drp .calendar-table thead th.next:hover {
  background: transparent !important;
}

/* On hover, just brighten the chevron to the brand blue. */
.daterangepicker.pb-drp .calendar-table thead th.prev:hover span,
.daterangepicker.pb-drp .calendar-table thead th.next:hover span {
  border-color: #1f9ded !important;
}

.daterangepicker.pb-drp .calendar-table thead th.prev:active,
.daterangepicker.pb-drp .calendar-table thead th.next:active {
  transform: scale(0.92);
}

/* Disabled nav (no further month available) */
.daterangepicker.pb-drp .calendar-table thead th.prev:not(.available),
.daterangepicker.pb-drp .calendar-table thead th.next:not(.available) {
  opacity: 0.4;
  box-shadow: none !important;
}

/* Weekday header labels */
.daterangepicker.pb-drp .calendar-table thead tr:last-child th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #94a3b8;
  text-transform: uppercase;
}

/* Day cells: flat, no per-cell shadow, consistent round-square. */
.daterangepicker.pb-drp.show-calendar .calendar-table tbody td,
.daterangepicker.pb-drp.single .calendar-table tbody td {
  box-shadow: none !important;
  border-radius: 10px !important;
  height: 36px !important;
  width: 36px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #2a3b54;
  background-color: transparent !important;
  transition: background-color 0.12s ease, color 0.12s ease;
}

/* Neutralise the theme's range-mode pseudo "connector" blobs in single mode */
.daterangepicker.pb-drp .calendar-table tbody td:before,
.daterangepicker.pb-drp .calendar-table tbody td:after {
  display: none !important;
  content: none !important;
}

.daterangepicker.pb-drp .calendar-table tbody td.off {
  color: #c4cdda !important;
  font-weight: 500;
}

.daterangepicker.pb-drp .calendar-table tbody td.available:hover {
  background: #eef6fe !important;
  color: #1f9ded !important;
}

/* Today (when NOT selected): subtle outlined ring */
.daterangepicker.pb-drp.show-calendar .calendar-table tbody td.today:not(.active),
.daterangepicker.pb-drp.single .calendar-table tbody td.today:not(.active) {
  background-color: #fff !important;
  color: #1f9ded !important;
  box-shadow: inset 0 0 0 1.5px #bcd9f4 !important;
}

/* Selected day: solid brand-blue pill */
.daterangepicker.pb-drp.show-calendar .calendar-table tbody td.active,
.daterangepicker.pb-drp.show-calendar .calendar-table tbody td.available.active.start-date,
.daterangepicker.pb-drp.show-calendar .calendar-table tbody td.available.active.end-date,
.daterangepicker.pb-drp.single .calendar-table tbody td.active {
  background: linear-gradient(135deg, #46b7f1 0%, #1f9ded 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(31, 157, 237, 0.30) !important;
}

/* Footer buttons */
.daterangepicker.pb-drp .drp-buttons {
  padding: 12px 14px;
  border-top: 1px solid #eef2f7;
}

.daterangepicker.pb-drp .drp-buttons .btn {
  border-radius: 10px;
  padding: 7px 16px !important;
  font-weight: 600;
}

.daterangepicker.pb-drp .drp-buttons .cancelBtn {
  color: #52627a;
  border: 1px solid #e1e8f1;
  background: #fff;
}

.daterangepicker.pb-drp .drp-buttons .cancelBtn:hover {
  background: #f7fbff;
  border-color: #bcd1e7;
  color: #1f9ded;
}

.daterangepicker.pb-drp .drp-buttons .applyBtn {
  background: linear-gradient(135deg, #46b7f1 0%, #1f9ded 100%);
  border: 0;
  color: #fff;
  box-shadow: 0 8px 18px rgba(31, 157, 237, 0.28);
}

/* ---- Final alignment polish --------------------------------------- */
/* Centre the whole calendar block within the (auto-width) popup, and give
   the month/year dropdowns a small, even gap so they read as one cluster. */
.daterangepicker.pb-drp .drp-calendar.single {
  margin: 0 auto;
}

.daterangepicker.pb-drp .calendar-table thead th.month select + select {
  margin-left: 6px;
}

/* Keep the footer buttons right-aligned with a consistent gap, regardless of
   the theme's default float/margins. */
.daterangepicker.pb-drp .drp-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.daterangepicker.pb-drp .drp-buttons .btn {
  margin: 0 !important;       /* gap handles spacing; kill theme margins */
  float: none !important;
}

/* The plugin hides the active-range echo in single mode; ensure it never
   reserves space and nudges the buttons off-centre. */
.daterangepicker.pb-drp .drp-buttons .drp-selected {
  display: none !important;
}

/* Hairline arrow caret pointing at the field, recoloured to the popup border
   so the popup reads as anchored to the input rather than floating. */
.daterangepicker.pb-drp:before,
.daterangepicker.pb-drp:after {
  display: none; /* the theme's default caret clashes with our rounded card */
}

/* ---- Preloader-veil backstop -------------------------------------------
   CSS belt to the JS braces (see pb-datepicker.js ensureLoaded). The theme's
   `body::after` page-load veil (z 99998, white, full-viewport) is only hidden
   by `body.loaded`. A datepicker popup is appended to <body> above that veil,
   so any moment the veil is up the page reads as greyed-out behind the bright
   popup. While ANY daterangepicker is open, force the veil down so the page is
   never dimmed beneath it — independent of JS timing.

   daterangepicker keeps its container in the DOM and sets inline
   `display: block` only while open, so this matches exactly the open state. */
body:has(.daterangepicker[style*="display: block"])::after {
  visibility: hidden !important;
  opacity: 0 !important;
}


/* =====================================================================
   pb-drp-range — range picker for the calendar-icon button on customer
   tabs. Self-contained (does NOT extend the single-mode .pb-drp theme,
   whose shrink-wrap rules collapse a two-calendar layout). Side-by-side
   months + a presets rail, themed to the PBA brand blue.
   ===================================================================== */
.daterangepicker.pb-drp-range {
  --pb-blue: #1f9ded;
  --pb-blue-2: #46b7f1;
  font-family: inherit;
  border: 1px solid #e9eef5;
  border-radius: 20px;
  box-shadow: 0 24px 56px rgba(31, 70, 120, 0.18);
  padding: 14px;
  width: auto !important;
  min-width: 0 !important;
}
.daterangepicker.pb-drp-range:before,
.daterangepicker.pb-drp-range:after { display: none; }

/* ---- Presets rail ------------------------------------------------- */
.daterangepicker.pb-drp-range .ranges {
  display: block !important;
  float: left;
  margin: 2px 14px 0 2px;
  padding-right: 14px;
  border-right: 1px solid #eef2f7;
}
.daterangepicker.pb-drp-range .ranges ul {
  width: 150px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.daterangepicker.pb-drp-range .ranges li {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #46566e;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.daterangepicker.pb-drp-range .ranges li:last-child { margin-bottom: 0; }
.daterangepicker.pb-drp-range .ranges li:hover {
  background: #f0f7ff;
  border-color: #d8ecfb;
  color: var(--pb-blue);
}
.daterangepicker.pb-drp-range .ranges li.active {
  background: linear-gradient(135deg, var(--pb-blue-2) 0%, var(--pb-blue) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px rgba(31, 157, 237, 0.28);
}

/* ---- Calendars (two-up) ------------------------------------------- */
.daterangepicker.pb-drp-range .drp-calendar {
  float: left;
  max-width: 268px !important;
  padding: 2px 10px !important;
}
.daterangepicker.pb-drp-range .drp-calendar.left  { border-right: 1px solid #f1f4f9; }
.daterangepicker.pb-drp-range .calendar-table { padding: 0; border: 0; }
.daterangepicker.pb-drp-range .calendar-table table {
  border-spacing: 2px;
  border-collapse: separate;
}

/* Header: month/year selects + nav arrows */
.daterangepicker.pb-drp-range th.month {
  font-size: 14px;
  font-weight: 700;
  color: #2a3b54;
  padding-bottom: 8px;
}
.daterangepicker.pb-drp-range select.monthselect,
.daterangepicker.pb-drp-range select.yearselect {
  height: 34px;
  border: 1px solid #e1e8f1;
  border-radius: 9px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: #2a3b54;
  background-color: #f8fafd;
  cursor: pointer;
}
.daterangepicker.pb-drp-range select.monthselect { margin-right: 6px; }
.daterangepicker.pb-drp-range th.prev,
.daterangepicker.pb-drp-range th.next { cursor: pointer; }
.daterangepicker.pb-drp-range th.prev span,
.daterangepicker.pb-drp-range th.next span {
  border-color: #64748b;
  border-width: 0 2px 2px 0;
}
.daterangepicker.pb-drp-range th.prev:hover,
.daterangepicker.pb-drp-range th.next:hover { background: #f0f7ff; border-radius: 9px; }

/* Weekday header row */
.daterangepicker.pb-drp-range thead th {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}

/* Day cells */
.daterangepicker.pb-drp-range td {
  width: 34px;
  height: 34px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 9px;
  color: #2a3b54;
}
/* Kill the theme's purple connector/disc pseudo-elements (drawn behind the
   active caps with the theme's --color-primary). Without this, the start/end
   day shows a purple ring layered under our blue cap. */
.daterangepicker.pb-drp-range td:before,
.daterangepicker.pb-drp-range td:after {
  display: none !important;
  content: none !important;
}
.daterangepicker.pb-drp-range td.available:hover {
  background: #eef6ff;
  color: var(--pb-blue);
}
.daterangepicker.pb-drp-range td.off,
.daterangepicker.pb-drp-range td.disabled {
  color: #cbd5e1;
  background: transparent;
}
.daterangepicker.pb-drp-range td.today:not(.active) {
  box-shadow: inset 0 0 0 1px #bcd9f2;
}

/* In-range span */
.daterangepicker.pb-drp-range td.in-range {
  background: #e6f4ff !important;
  color: #1f6fa8 !important;
  border-radius: 0 !important;
}
/* Start / end caps — full circle on top of the in-range band.
   Painted with a background-image disc rather than the cell's own background so
   the circle is never clipped by the adjacent square in-range cell: the cell
   keeps the light-blue band edge-to-edge, and the gradient disc is centred and
   sized to a full 34px circle that overlaps the band cleanly. */
.daterangepicker.pb-drp-range td.active,
.daterangepicker.pb-drp-range td.active:hover {
  color: #fff !important;
  border-radius: 0 !important;
  /* light-blue band underneath + centred gradient disc on top */
  background:
    radial-gradient(circle at center, var(--pb-blue) 0 50%, transparent 51%) no-repeat center / 34px 34px,
    #e6f4ff !important;
}
/* Start cap: no band to the LEFT (range opens here) */
.daterangepicker.pb-drp-range td.active.start-date {
  background:
    radial-gradient(circle at center, var(--pb-blue) 0 50%, transparent 51%) no-repeat center / 34px 34px,
    linear-gradient(to right, transparent 0 50%, #e6f4ff 50% 100%) !important;
}
/* End cap: no band to the RIGHT (range closes here) */
.daterangepicker.pb-drp-range td.active.end-date {
  background:
    radial-gradient(circle at center, var(--pb-blue) 0 50%, transparent 51%) no-repeat center / 34px 34px,
    linear-gradient(to right, #e6f4ff 0 50%, transparent 50% 100%) !important;
}
/* Single-day selection: just the disc, no band either side */
.daterangepicker.pb-drp-range td.active.start-date.end-date {
  background:
    radial-gradient(circle at center, var(--pb-blue) 0 50%, transparent 51%) no-repeat center / 34px 34px,
    transparent !important;
}

/* ---- Footer ------------------------------------------------------- */
.daterangepicker.pb-drp-range .drp-buttons {
  clear: both;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 4px 2px;
  margin-top: 8px;
  border-top: 1px solid #eef2f7;
}
.daterangepicker.pb-drp-range .drp-selected {
  margin-right: auto;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}
.daterangepicker.pb-drp-range .drp-buttons .btn {
  border-radius: 10px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  float: none;
}
.daterangepicker.pb-drp-range .drp-buttons .cancelBtn {
  background: #fff;
  border: 1px solid #e1e8f1;
  color: #52627a;
}
.daterangepicker.pb-drp-range .drp-buttons .cancelBtn:hover {
  background: #f7fbff;
  border-color: #bcd1e7;
  color: var(--pb-blue);
}
.daterangepicker.pb-drp-range .drp-buttons .applyBtn {
  background: linear-gradient(135deg, var(--pb-blue-2) 0%, var(--pb-blue) 100%);
  border: 0;
  color: #fff;
  box-shadow: 0 8px 18px rgba(31, 157, 237, 0.28);
}

/* On narrow screens, drop to a single month so it never overflows. */
@media (max-width: 720px) {
  .daterangepicker.pb-drp-range .drp-calendar.right { display: none; }
  .daterangepicker.pb-drp-range .drp-calendar.left { border-right: 0; }
}