/* -------------------------------------------------------------------------
   DatePickerRange (dcc) — styled to match pi-search-input look/feel
   Targets your wrapper .shhist-date-control and dcc class .shhist-date-picker
   ------------------------------------------------------------------------- */

:root {
  --pi-control-height: 32px;
  --pi-control-radius: 6px;
  --pi-color-primary: #0066cc;
  --pi-color-border-subtle: #cfd8e3;
  --pi-color-border-strong: #b8c9e6;
  --pi-color-text: #111827;
  --pi-color-placeholder: #6b7280;
  --pi-color-disabled-bg: #f5f5f5;
  --pi-color-disabled-text: #9ca3af;
  --pi-color-hover-bg: #f5f8ff;
  --pi-focus-ring: 0 0 0 3px rgba(0, 102, 204, 0.16);
}

/* Wrapper you created around the picker */
.shhist-date-control {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: fit-content;
  white-space: nowrap;

  height: var(--pi-control-height) !important;
  padding: 0 6px !important;

  border-radius: var(--pi-control-radius) !important;
  border: 1px solid var(--pi-color-border-strong) !important;
  background-color: #ffffff !important;
  color: var(--pi-color-text);

  box-shadow: none;
  outline: none;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

/* Hover affordance like your search input */
.shhist-date-control:hover:not(:focus-within) {
  border-color: var(--pi-color-primary) !important;
  background-color: var(--pi-color-hover-bg) !important;
}

/* Focus ring when either start or end input is focused */
.shhist-date-control:focus-within {
  border-color: var(--pi-color-primary) !important;
  box-shadow: var(--pi-focus-ring) !important;
  background-color: #ffffff !important;
}

/* React-dates outer container (Dash DatePickerRange) */
.shhist-date-control .DateRangePickerInput {
  display: inline-flex;
  align-items: center;
  background: transparent !important;

  /* NEW: make room + anchor the clear button like pi-search-clear */
  position: relative !important;
  padding-right: 28px !important; /* reserve space for the X */
}

/* Remove the default react-dates border (we use the wrapper border) */
.shhist-date-control .DateRangePickerInput__withBorder {
  border: 0 !important;
}

/* If a calendar icon is present in your build, hide it (keeps things one-line clean) */
.shhist-date-control .DateRangePickerInput_calendarIcon,
.shhist-date-control .DateRangePickerInput_calendarIcon_svg {
  display: none !important;
}

/* Make each date input behave like a clean “borderless” field inside the wrapper */
.shhist-date-control .DateInput {
  width: auto;
  background: transparent !important;
}

.shhist-date-control .DateInput_input {
  height: calc(var(--pi-control-height) - 2px) !important; /* wrapper border accounted */
  padding: 0 10px !important;

  font-size: 0.95rem !important;
  line-height: 1.5 !important;

  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;

  background: transparent !important;
  color: var(--pi-color-text) !important;
}

/* Placeholder tone */
.shhist-date-control .DateInput_input::placeholder {
  color: var(--pi-color-placeholder) !important;
  opacity: 1 !important;
}

/* The arrow between start/end */
.shhist-date-control .DateRangePickerInput_arrow {
  padding: 0 6px !important;
  color: var(--pi-color-placeholder) !important;
}

/* Clear “x” button (since you have clearable=True) — NEW aligned style */
.shhist-date-control .DateRangePickerInput_clearDates {
  position: absolute !important;
  right: 4px; /* 4 + wrapper padding(6) ≈ 10px from outer border (matches search input) */
  top: 50% !important;
  transform: translateY(-50%);

  width: 20px;
  height: 20px;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  border-radius: var(--pi-control-radius);
  background: rgba(0, 102, 204, 0.06);

  display: flex !important;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition:
    background-color .15s ease,
    box-shadow .15s ease,
    transform .05s ease;
}

/* SVG sizing + default tone like your search X */
.shhist-date-control .DateRangePickerInput_clearDates_svg {
  width: 12px;
  height: 12px;
  display: block;
  fill: #374151 !important;
}

.shhist-date-control .DateRangePickerInput_clearDates:hover {
  background: rgba(0, 102, 204, 0.12);
}

.shhist-date-control .DateRangePickerInput_clearDates:hover .DateRangePickerInput_clearDates_svg {
  fill: var(--pi-color-primary) !important;
}

.shhist-date-control .DateRangePickerInput_clearDates:focus-visible {
  outline: none;
  box-shadow: var(--pi-focus-ring);
}

.shhist-date-control .DateRangePickerInput_clearDates:active {
  transform: translateY(-50%) scale(0.97);
}

/* Disabled state (react-dates uses these classes) */
.shhist-date-control .DateRangePickerInput__disabled,
.shhist-date-control .DateInput_input__disabled {
  background-color: var(--pi-color-disabled-bg) !important;
  color: var(--pi-color-disabled-text) !important;
  cursor: not-allowed !important;
}

.shhist-date-control .DateInput_input__disabled::placeholder {
  color: var(--pi-color-disabled-text) !important;
}

/* Optional: make the calendar popover feel consistent (border radius + subtle border/shadow) */
.shhist-date-picker .DateRangePicker_picker {
  border-radius: 10px !important;
  overflow: hidden !important;
}

.shhist-date-picker .DayPicker {
  border: 1px solid var(--pi-color-border-subtle) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
}

.shhist-badge{
  background-color:#1557a2 !important;
  color:#fff !important;
  border:1px solid #1557a2 !important;
}
/* --- Compact the two date fields so they don't waste horizontal space --- */
.shhist-date-control .DateInput {
  flex: 0 0 auto !important;

  /* Pick ONE approach: px (predictable) or ch (font-relative) */
  width: 90px !important;     /* good for "3 Dec 2025" / "12/31/2025" */
  /* width: 12ch !important; */ /* alternative */

  background: transparent !important;
}

/* Ensure the input fills the compact DateInput box */
.shhist-date-control .DateInput_input {
  width: 100% !important;
  padding: 0 8px !important;   /* slightly tighter than 0 10px (optional) */
}

/* Optional: tighten the arrow spacing a touch */
.shhist-date-control .DateRangePickerInput_arrow {
  padding: 0 4px !important;
}

/* Optional: reclaim a couple px from the clear-button reserve */
.shhist-date-control .DateRangePickerInput {
  padding-right: 24px !important; /* was 28px */
}