/* ===========================
   Filters Card — Date control
   Scoped so it only affects the filters card
   =========================== */

.filters-card .date-controls{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:nowrap;   /* keep Apply on the right */
  min-width:0;
}

/* Keep the date field compact and inline */
.filters-card .date-field{
  display:inline-block;
  width:auto !important;
}

/* React-dates outer wrapper should not stretch */
.filters-card .date-field .DateRangePicker{
  width:auto !important;
}

/* Visible input shell: exact 32px */
.filters-card .date-field .DateRangePickerInput,
.filters-card .date-field .DateRangePickerInput__withBorder{
  display:inline-flex;
  align-items:center;
  height:35px;
  padding:0 8px;
  border:1px solid var(--bs-border-color);
  border-radius:.5rem;
  background:var(--bs-body-bg);
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}

/* Make the text slightly bigger and bold */
.filters-card .date-field .DateRangePickerInput,
.filters-card .date-field .DateRangePickerInput__withBorder,
.filters-card .date-field .DateRangePickerInput .DateInput_input {
  font-size: 16px;     /* or 0.875rem */
  font-weight: 600;    /* semi-bold */
  line-height: 1.2;    /* keeps it tidy inside 35px height */
    color: #00509e;
}

.filters-card .date-field .DateRangePickerInput:focus-within{
  border-color:rgba(var(--bs-primary-rgb,13,110,253),.45);
  box-shadow:0 0 0 3px rgba(var(--bs-primary-rgb,13,110,253),.18);
}

/* Inner inputs: borderless, 30px line box so the shell sums to 32px incl. 1px borders */
.filters-card .date-field .DateInput{ height:30px; }
.filters-card .date-field .DateInput_input,
.filters-card .date-field .DateInput_input__focused{
  height:30px;
  line-height:30px;
  padding:0 6px;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  font-size:.92rem;
  color:var(--bs-body-color);
}

.filters-card .date-field .DateInput_input::placeholder{
  color:var(--bs-secondary-color);
}

/* Arrow + clear affordance tuned for a 32px row */
.filters-card .date-field .DateRangePickerInput_arrow{
  padding:0 .25rem;
  line-height:30px;
  color:var(--bs-secondary-color);
  font-weight:600;
}

.filters-card .date-field .DateRangePickerInput_clearDates{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  margin-left:4px;
  border-radius:50%;
  background:var(--bs-tertiary-bg);
  transition:background .15s;
}

.filters-card .date-field .DateRangePickerInput_clearDates:hover{
  background:var(--bs-secondary-bg);
}

.filters-card .date-field .DateRangePickerInput_clearDates_svg{
  margin-top:0;
}

/* Popover polish + stacking */
.filters-card .DateRangePicker_picker{ z-index:1060; }

.filters-card .DayPicker__withBorder{
  box-shadow:0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  border-radius:.75rem;
  border:1px solid var(--bs-border-color);
  overflow:hidden;
}

.filters-card .CalendarMonth_caption{ font-weight:600; color:var(--bs-body-color); }
.filters-card .CalendarDay__default{ border:0; background:transparent; }
.filters-card .CalendarDay__hovered_span,
.filters-card .CalendarDay__selected_span{
  background:rgba(var(--bs-primary-rgb,13,110,253),.12);
  color:var(--bs-body-color);
}

.filters-card .CalendarDay__selected,
.filters-card .CalendarDay__selected_start,
.filters-card .CalendarDay__selected_end{
  background:rgb(var(--bs-primary-rgb,13,110,253));
  color:#fff;
}

.filters-card .CalendarDay__blocked_out_of_range{ color:var(--bs-secondary-color); }

/* Optional: make header buttons also 32px to match if you like */
.filters-card .export-button{ height:32px; }
/* Month titles (e.g., "October 2024") */
.filters-card .date-field .DateRangePicker .CalendarMonth_caption {
  color: #00509e;
  font-weight: 700;
  font-size: 16px;
}

/* Weekday headers (Su, Mo, …) */
.filters-card .date-field .DateRangePicker .DayPicker_weekHeader_ul li {
  color: #00509e;
  font-weight: 600;
  font-size: 13px;
}

/* Default day numbers */
.filters-card .date-field .DateRangePicker .CalendarDay__default {
  color: #0b2e5b;              /* normal days */
  font-weight: 600;
}

/* Selected day & selected range */
.filters-card .date-field .DateRangePicker
  .CalendarDay__selected,
.filters-card .date-field .DateRangePicker
  .CalendarDay__selected_span {
  background: #00509e;
  border: 1px solid #00509e;
  color: #fff;
}

/* Range hover preview */
.filters-card .date-field .DateRangePicker
  .CalendarDay__hovered_span,
.filters-card .date-field .DateRangePicker
  .CalendarDay__hovered_span:hover {
  background: #e6f0fa;
  border: 1px solid #c9dcf3;
  color: #0b2e5b;
}

/* Days outside the selectable range / blocked days */
.filters-card .date-field .DateRangePicker
  .CalendarDay__blocked_out_of_range,
.filters-card .date-field .DateRangePicker
  .CalendarDay__blocked_calendar {
  color: #9aa7b2;
}

/* Navigation arrows */
.filters-card .date-field .DateRangePicker .DayPickerNavigation_button__default {
  background: #f2f6fb;
  border: 1px solid #c9dcf3;
  color: #00509e;
}
.filters-card .date-field .DateRangePicker .DayPickerNavigation_button__default:hover {
  background: #e6f0fa;
}
/* Hide chips/graph while the hidden fetch signal is loading */
#sh_hist-fetch-signal[data-dash-is-loading="true"] ~ .graph--hide-while-loading {
  visibility: hidden;           /* preserves layout; use display:none if you want a collapse */
}

/* Optional: add a gentle fade-in after load */
.graph--hide-while-loading {
  transition: visibility 0s linear 200ms, opacity 200ms ease-in;
  opacity: 1;
}
#sh_hist-fetch-signal[data-dash-is-loading="true"] ~ .graph--hide-while-loading {
  opacity: 0;
  transition-delay: 0s;
}