/* ---------------------------------------------------------------------------
   Timeframe filter — Orpheus theme overrides for vendored Flatpickr.
   Stock Flatpickr CSS is loaded separately via the :app stylesheet glob from
   app/assets/stylesheets/vendor/flatpickr-4.6.13.min.css. Our overrides target
   `.flatpickr-calendar.orpheus-timeframe` (specificity 0,2,0 vs Flatpickr's
   0,1,0), so source order doesn't matter.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Popover chrome (the box around Flatpickr).
   Defaults are dark; light overrides scoped under [data-theme="light"] below.
   --------------------------------------------------------------------------- */

.orpheus-timeframe-popover {
  background: #1e293b;
  border: 1px solid #334155;
}

.orpheus-timeframe-rail {
  border-right: 1px solid #334155;
}

.orpheus-timeframe-rail-heading {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
  color: #64748b;
  padding: 0.5rem 0.75rem 0.25rem;
}

.orpheus-timeframe-divider {
  height: 1px;
  background: #334155;
  margin: 0.5rem 0.25rem;
}

.orpheus-timeframe-shortcut {
  color: #cbd5e1;
  display: block;
}
.orpheus-timeframe-shortcut:hover {
  background: rgba(51, 65, 85, 0.6);
  color: #ffffff;
}
.orpheus-timeframe-shortcut-active {
  background: rgba(59, 130, 246, 0.3);
  color: #bfdbfe;
  font-weight: 500;
}
.orpheus-timeframe-shortcut-active:hover {
  background: rgba(59, 130, 246, 0.4);
  color: #bfdbfe;
}

.orpheus-timeframe-panel {
  width: 300px;
}

.orpheus-timeframe-panel-heading {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
  color: #64748b;
}

.orpheus-timeframe-panel-subtext {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.125rem;
}

.orpheus-timeframe-fields {
  width: 100%;
}

/* Flatpickr's altInput mode wraps each input; make the wrapper fill its
   flex column so the two fields share width evenly and the static calendar
   anchors to the full-width field. */
.orpheus-timeframe-fields .flatpickr-wrapper {
  display: block;
  width: 100%;
}

.orpheus-timeframe-field-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
  color: #64748b;
}

.orpheus-timeframe-input {
  background: #0f172a;
  border: 1px solid #334155;
  color: #e2e8f0;
}
.orpheus-timeframe-input:focus {
  outline: none;
  border-color: #3b82f6;
}

.orpheus-timeframe-apply {
  background: #3b82f6;
  color: #ffffff;
  font-weight: 500;
}
.orpheus-timeframe-apply:not(:disabled):hover {
  background: #2563eb;
}
.orpheus-timeframe-apply:disabled {
  background: #475569;
  color: #cbd5e1;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   Calendar widget (Flatpickr) — dark theme overrides.
   --------------------------------------------------------------------------- */

.flatpickr-calendar.orpheus-timeframe {
  background: #1e293b;
  border: 1px solid #334155;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  color: #e2e8f0;
}

/* Stock Flatpickr hard-codes a 307.875px width on the calendar, days list and
   day container. In our inline (static) calendar that fixed width spills past
   the right-anchored popover and forces a horizontal scrollbar on the page.
   Make the calendar fluid so it always fits the panel and scales the day grid
   down on narrow viewports. */
.flatpickr-calendar.orpheus-timeframe,
.flatpickr-calendar.orpheus-timeframe .flatpickr-days,
.flatpickr-calendar.orpheus-timeframe .dayContainer {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.flatpickr-calendar.orpheus-timeframe .flatpickr-rContainer,
.flatpickr-calendar.orpheus-timeframe .flatpickr-innerContainer,
.flatpickr-calendar.orpheus-timeframe .flatpickr-weekdaycontainer {
  width: 100%;
}

.flatpickr-calendar.orpheus-timeframe .flatpickr-months,
.flatpickr-calendar.orpheus-timeframe .flatpickr-month,
.flatpickr-calendar.orpheus-timeframe .flatpickr-current-month {
  background: transparent;
  color: #e2e8f0;
}

.flatpickr-calendar.orpheus-timeframe .flatpickr-monthDropdown-months,
.flatpickr-calendar.orpheus-timeframe .cur-year,
.flatpickr-calendar.orpheus-timeframe input.cur-year {
  color: #e2e8f0;
  background: transparent;
}

.flatpickr-calendar.orpheus-timeframe .flatpickr-prev-month svg,
.flatpickr-calendar.orpheus-timeframe .flatpickr-next-month svg {
  fill: #94a3b8;
}
.flatpickr-calendar.orpheus-timeframe .flatpickr-prev-month:hover svg,
.flatpickr-calendar.orpheus-timeframe .flatpickr-next-month:hover svg {
  fill: #e2e8f0;
}

.flatpickr-calendar.orpheus-timeframe .flatpickr-weekday {
  color: #94a3b8;
}

.flatpickr-calendar.orpheus-timeframe .flatpickr-day {
  color: #cbd5e1;
}
.flatpickr-calendar.orpheus-timeframe .flatpickr-day:not(.selected):not(.startRange):not(.endRange):not(.inRange):not(.disabled):not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):hover,
.flatpickr-calendar.orpheus-timeframe .flatpickr-day:not(.selected):not(.startRange):not(.endRange):not(.inRange):not(.disabled):not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):focus {
  background: rgba(51, 65, 85, 0.7);
  border-color: transparent;
}
.flatpickr-calendar.orpheus-timeframe .flatpickr-day.today {
  border-color: #3b82f6;
}
.flatpickr-calendar.orpheus-timeframe .flatpickr-day.selected,
.flatpickr-calendar.orpheus-timeframe .flatpickr-day.startRange,
.flatpickr-calendar.orpheus-timeframe .flatpickr-day.endRange {
  background: rgba(59, 130, 246, 0.3);
  color: #bfdbfe;
  border-color: transparent;
}
.flatpickr-calendar.orpheus-timeframe .flatpickr-day.inRange {
  background: rgba(59, 130, 246, 0.15);
  color: #bfdbfe;
  border-color: transparent;
  box-shadow: none;
}
.flatpickr-calendar.orpheus-timeframe .flatpickr-day.disabled,
.flatpickr-calendar.orpheus-timeframe .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar.orpheus-timeframe .flatpickr-day.prevMonthDay,
.flatpickr-calendar.orpheus-timeframe .flatpickr-day.nextMonthDay {
  color: #475569;
  cursor: not-allowed;
}
.flatpickr-calendar.orpheus-timeframe .flatpickr-day.disabled:hover,
.flatpickr-calendar.orpheus-timeframe .flatpickr-day.disabled:focus,
.flatpickr-calendar.orpheus-timeframe .flatpickr-day.flatpickr-disabled:hover,
.flatpickr-calendar.orpheus-timeframe .flatpickr-day.flatpickr-disabled:focus,
.flatpickr-calendar.orpheus-timeframe .flatpickr-day.prevMonthDay:hover,
.flatpickr-calendar.orpheus-timeframe .flatpickr-day.prevMonthDay:focus,
.flatpickr-calendar.orpheus-timeframe .flatpickr-day.nextMonthDay:hover,
.flatpickr-calendar.orpheus-timeframe .flatpickr-day.nextMonthDay:focus {
  background: transparent;
  color: #64748b;
  border-color: transparent;
}

/* ---------------------------------------------------------------------------
   Light theme overrides (Orpheus convention: [data-theme="light"]).
   Declared at both :root[data-theme="light"] and [data-theme="light"] so the
   rule matches whether the calendar is appended inside the Orpheus tree (the
   normal case via appendTo) or, if appendTo ever fails, at document body level.
   --------------------------------------------------------------------------- */

[data-theme="light"] .orpheus-timeframe-popover {
  background: #ffffff;
  border-color: #e2e8f0;
}
[data-theme="light"] .orpheus-timeframe-rail {
  border-right-color: #e2e8f0;
}
[data-theme="light"] .orpheus-timeframe-rail-heading {
  color: #94a3b8;
}
[data-theme="light"] .orpheus-timeframe-divider {
  background: #e2e8f0;
}
[data-theme="light"] .orpheus-timeframe-shortcut {
  color: #334155;
}
[data-theme="light"] .orpheus-timeframe-shortcut:hover {
  background: #f1f5f9;
  color: #0f172a;
}
[data-theme="light"] .orpheus-timeframe-shortcut-active {
  background: #dbeafe;
  color: #1d4ed8;
}
[data-theme="light"] .orpheus-timeframe-shortcut-active:hover {
  background: #bfdbfe;
  color: #1d4ed8;
}
[data-theme="light"] .orpheus-timeframe-panel-heading {
  color: #94a3b8;
}
[data-theme="light"] .orpheus-timeframe-panel-subtext {
  color: #64748b;
}
[data-theme="light"] .orpheus-timeframe-field-label {
  color: #94a3b8;
}
[data-theme="light"] .orpheus-timeframe-input {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .orpheus-timeframe-apply {
  background: #3b82f6;
  color: #ffffff;
}
[data-theme="light"] .orpheus-timeframe-apply:not(:disabled):hover {
  background: #2563eb;
}
[data-theme="light"] .orpheus-timeframe-apply:disabled {
  background: #cbd5e1;
  color: #ffffff;
}

:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
}
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-monthDropdown-months,
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .cur-year,
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe input.cur-year,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-monthDropdown-months,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .cur-year,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe input.cur-year {
  color: #0f172a;
}
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-prev-month svg,
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-next-month svg,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-prev-month svg,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-next-month svg {
  fill: #64748b;
}
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-prev-month:hover svg,
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-next-month:hover svg,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-prev-month:hover svg,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-next-month:hover svg {
  fill: #0f172a;
}
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-weekday,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-weekday {
  color: #64748b;
}
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day {
  color: #0f172a;
}
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day:hover,
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day:focus,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day:hover,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day:focus {
  background: #f1f5f9;
}
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day.today,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day.today {
  border-color: #2563eb;
}
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day.selected,
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day.startRange,
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day.endRange,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day.selected,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day.startRange,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day.endRange {
  background: #dbeafe;
  color: #1d4ed8;
}
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day.inRange,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day.inRange {
  background: #eff6ff;
  color: #1d4ed8;
}
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day.disabled,
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day.prevMonthDay,
:root[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day.nextMonthDay,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day.disabled,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day.prevMonthDay,
[data-theme="light"] .flatpickr-calendar.orpheus-timeframe .flatpickr-day.nextMonthDay {
  color: #cbd5e1;
}