/* ============================================================
   RSuite DateRangePicker — Brand overrides
   Strategy: override --rs-primary-* at :root so RSuite's
   internal color system uses our blue, then patch specifics.
   ============================================================ */

/* ═══════════════════════════════════════════
   1. RSuite primary colour → brand blue
      (fixes in-range orange, hover tints, etc.)
   ═══════════════════════════════════════════ */
:root {
  --rs-primary-50:  #e8f0f8;
  --rs-primary-100: #d0e4f0;
  --rs-primary-200: #98bedd;
  --rs-primary-300: #6ea3cb;
  --rs-primary-400: #4988bc;
  --rs-primary-500: #25639c;
  --rs-primary-600: #1a4f82;
  --rs-primary-700: #134070;
  --rs-primary-800: #0e325e;
  --rs-primary-900: #082446;
  --rs-color-focus-ring:        rgba(37, 99, 156, 0.25);
  --rs-state-focus-shadow:      0 0 0 3px rgba(37, 99, 156, 0.25);
  --rs-btn-primary-bg:          #25639c;
  --rs-btn-primary-hover-bg:    #1a4f82;
  --rs-btn-primary-active-bg:   #134070;
  --rs-btn-primary-text:        #ffffff;
}

/* ═══════════════════════════════════════════
   2. Popup shell
   ═══════════════════════════════════════════ */
.rs-picker-popup.rs-picker-popup-daterange {
  border-radius: 20px !important;
  box-shadow:
    0 24px 64px rgba(26, 36, 64, 0.22),
    0 6px 18px rgba(0, 0, 0, 0.07) !important;
  border: none !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════════
   3. Calendar header — blue gradient
      Target every inner element to ensure
      the gradient is never covered by a
      white inner div.
   ═══════════════════════════════════════════ */
.rs-calendar-header,
.rs-calendar-header-month-toolbar,
.rs-calendar-header-time-toolbar {
  background: linear-gradient(
    120deg,
    #1a4f82 0%,
    #25639c 55%,
    #2a75b8 100%
  ) !important;
}

/* All text inside the header → white */
.rs-calendar-header *,
.rs-calendar-header-month-toolbar *,
.rs-calendar-header-time-toolbar * {
  color: #ffffff !important;
}

.rs-calendar-header-title,
.rs-calendar-header-title-date,
.rs-calendar-header-title-time,
.rs-calendar-header-meridian {
  font-weight: 700 !important;
  font-size: 14px !important;
}

.rs-calendar-header-title:hover,
.rs-calendar-header-title-date:hover,
.rs-calendar-header-title-time:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-radius: 7px !important;
}

/* Nav arrows */
.rs-calendar-header-backward,
.rs-calendar-header-forward {
  background: rgba(255, 255, 255, 0.14) !important;
  border-radius: 7px !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s !important;
}

.rs-calendar-header-backward:hover,
.rs-calendar-header-forward:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* ═══════════════════════════════════════════
   4. Calendar body
   ═══════════════════════════════════════════ */
.rs-calendar {
  background: #ffffff !important;
}

/* Day-of-week header labels */
.rs-calendar-table-header-row .rs-calendar-table-header-cell-content {
  color: #25639c !important;
  font-weight: 800 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding-bottom: 6px !important;
}

/* Cell base shape */
.rs-calendar-table-cell-content {
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background 0.14s, color 0.14s !important;
}

/* Dates from adjacent months (dimmed) */
.rs-calendar-table-cell-un-same-month .rs-calendar-table-cell-content {
  color: #c8c8c8 !important;
}

/* Hover on non-selected, non-disabled cells */
.rs-calendar-table-cell:not(.rs-calendar-table-cell-disabled):not(.rs-calendar-table-cell-selected):hover
  .rs-calendar-table-cell-content {
  background: rgba(37, 99, 156, 0.11) !important;
  color: #1a4f82 !important;
  font-weight: 700 !important;
}

/* Today */
.rs-calendar-table-cell-is-today .rs-calendar-table-cell-content {
  border: 2px solid #ff6c2c !important;
  color: #ff6c2c !important;
  font-weight: 800 !important;
  background: rgba(255, 108, 44, 0.06) !important;
  box-shadow: 0 0 0 3px rgba(255, 108, 44, 0.1) !important;
}

/* In-range band — the ::before pseudo covers the row strip */
.rs-calendar-table-cell-in-range::before {
  background: rgba(37, 99, 156, 0.09) !important;
}

.rs-calendar-table-cell-in-range .rs-calendar-table-cell-content {
  color: #1a4f82 !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* Selected start / end dates */
.rs-calendar-table-cell-selected .rs-calendar-table-cell-content {
  background: linear-gradient(135deg, #25639c 0%, #1a4f82 100%) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(37, 99, 156, 0.38) !important;
  border: none !important;
}

/* Today is also the selected date */
.rs-calendar-table-cell-selected.rs-calendar-table-cell-is-today
  .rs-calendar-table-cell-content {
  border: 2px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    0 4px 14px rgba(37, 99, 156, 0.38),
    0 0 0 3px rgba(255, 108, 44, 0.18) !important;
}

/* Disabled dates */
.rs-calendar-table-cell-disabled .rs-calendar-table-cell-content,
.rs-calendar-table-cell-disabled:hover .rs-calendar-table-cell-content {
  color: #d4d4d4 !important;
  background: none !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════
   5. Toolbar / footer
   ═══════════════════════════════════════════ */
.rs-picker-toolbar {
  border-top: 1px solid rgba(37, 99, 156, 0.1) !important;
  padding: 12px 18px !important;
  background: #f5f8fd !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Preset buttons — blue outline pills */
.rs-picker-toolbar-ranges .rs-btn,
.rs-picker-toolbar-ranges .rs-btn-link,
.rs-picker-toolbar-ranges .rs-btn-subtle {
  color: #25639c !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  background: rgba(37, 99, 156, 0.08) !important;
  border: 1px solid rgba(37, 99, 156, 0.18) !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
  margin: 0 3px 0 0 !important;
}

.rs-picker-toolbar-ranges .rs-btn:hover,
.rs-picker-toolbar-ranges .rs-btn-link:hover,
.rs-picker-toolbar-ranges .rs-btn-subtle:hover {
  background: #25639c !important;
  color: #ffffff !important;
  border-color: #25639c !important;
  text-decoration: none !important;
}

/* OK button — orange gradient */
.rs-picker-toolbar-right .rs-btn-primary {
  background: linear-gradient(135deg, #ff6c2c, #ee3824) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  padding: 9px 26px !important;
  color: #ffffff !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 4px 14px rgba(255, 108, 44, 0.36) !important;
  transition: box-shadow 0.18s, transform 0.15s !important;
}

.rs-picker-toolbar-right .rs-btn-primary:hover {
  background: linear-gradient(135deg, #ff6c2c, #ee3824) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 20px rgba(255, 108, 44, 0.52) !important;
  transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════
   6. Time column dropdown
   ═══════════════════════════════════════════ */
.rs-calendar-time-dropdown {
  background: #ffffff !important;
}

.rs-calendar-time-dropdown-column-title {
  color: #25639c !important;
  font-weight: 800 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  background: rgba(37, 99, 156, 0.05) !important;
  border-bottom: 1px solid rgba(37, 99, 156, 0.1) !important;
}

.rs-calendar-time-dropdown-cell {
  border-radius: 6px !important;
  font-size: 13px !important;
  transition: background 0.12s, color 0.12s !important;
}

.rs-calendar-time-dropdown-cell.rs-calendar-time-dropdown-cell-active,
.rs-calendar-time-dropdown-cell.rs-calendar-time-dropdown-cell-active:hover {
  background: linear-gradient(135deg, #25639c, #1a4f82) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 156, 0.3) !important;
}

.rs-calendar-time-dropdown-cell:not(.rs-calendar-time-dropdown-cell-active):hover {
  background: rgba(37, 99, 156, 0.1) !important;
  color: #1a4f82 !important;
  font-weight: 600 !important;
}

/* Time column scrollbar */
.rs-calendar-time-dropdown-column > ul::-webkit-scrollbar {
  width: 4px;
}
.rs-calendar-time-dropdown-column > ul::-webkit-scrollbar-track {
  background: transparent;
}
.rs-calendar-time-dropdown-column > ul::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 156, 0.22);
  border-radius: 4px;
}
.rs-calendar-time-dropdown-column > ul::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 99, 156, 0.4);
}

/* ═══════════════════════════════════════════
   7. Month / Year dropdown
   ═══════════════════════════════════════════ */
.rs-calendar-month-dropdown {
  background: #ffffff !important;
  border-top: 1px solid rgba(37, 99, 156, 0.08) !important;
}

.rs-calendar-month-dropdown-year-active {
  color: #25639c !important;
  font-weight: 800 !important;
}

.rs-calendar-month-dropdown-cell-content {
  border-radius: 8px !important;
  font-size: 12.5px !important;
  transition: background 0.13s, color 0.13s !important;
}

.rs-calendar-month-dropdown-cell-content:hover {
  background: rgba(37, 99, 156, 0.1) !important;
  color: #1a4f82 !important;
  font-weight: 700 !important;
}

.rs-calendar-month-dropdown-cell-active .rs-calendar-month-dropdown-cell-content {
  background: linear-gradient(135deg, #25639c, #1a4f82) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 10px rgba(37, 99, 156, 0.3) !important;
}

/* ═══════════════════════════════════════════
   8. Two-calendar panel divider
   ═══════════════════════════════════════════ */
.rs-picker-daterange-panel > div + div {
  border-inline-start: 1px solid rgba(37, 99, 156, 0.09) !important;
}