/*
 * FM-09 Date range picker — app/components/ui/date_range_picker_component.rb
 *
 * Trigger reuses .fm-control (the shared 44px shell owned by forms.css) —
 * this file only adds the flex layout for its icon + label. Positioning/
 * flip, open/close, Esc/outside-click and focus-return are owned by the
 * popover controller composed on the root element (`data-controller=
 * "popover daterange"`) — this file's `.ui-daterange__panel` position stays
 * `absolute` as the default only because the styleguide's forced-open
 * (`.is-open`, no JS) demos never run through popover#open and so never get
 * its inline `position: fixed` + measured top/left; a real interactive open
 * always overrides these with fixed positioning, flipping above the trigger
 * when there isn't room below (popover_controller.js#position).
 *
 * Month grids are rendered server-side for all 12 months from the current
 * one; the panel pages through them two at a time by toggling a `hidden`
 * class client-side rather than fetching anything (see the component doc
 * for the "generate 12, show/hide" rationale). `.ui-daterange__month--
 * secondary` marks whichever of the two visible months is the second one,
 * so the sub-768px media query below can drop it without needing to know
 * which physical position it's in.
 *
 * Token vars only — enforced by test/lint/css_token_lint_test.rb. The
 * 767/768px breakpoint below is a literal for the same reason
 * tailwind/application.css duplicates the --bp-md pixel value: CSS media
 * queries cannot reference a custom property.
 */

.ui-daterange {
  position: relative;
  display: inline-block;
  width: 100%;
}

.ui-daterange__trigger.fm-control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  text-align: left;
}

.ui-daterange__trigger-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--color-ink-muted);
}

.ui-daterange__trigger-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-daterange__trigger-label--placeholder {
  font-size: var(--text-sm-light);
  font-weight: 300;
  color: var(--color-ink-muted);
}

.ui-daterange__panel {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: var(--z-popover);
  flex-wrap: wrap;
  gap: var(--space-4);
  width: max-content;
  max-width: calc(100vw - var(--space-8));
  padding: var(--space-4);
  background: var(--color-surface-solid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/*
 * Styleguide forced-open statics render the panel IN FLOW — several open
 * examples sit one above another on the page, and absolutely-positioned
 * panels would stack on top of each other (same reasoning as .ui-modal.is-static).
 * A real open panel is positioned by the popover controller.
 */
.ui-daterange.is-open .ui-daterange__panel {
  display: flex;
  position: static;
  margin-top: var(--space-2);
}

.ui-daterange__presets {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 160px;
}

.ui-daterange__preset {
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.ui-daterange__preset:hover {
  background: var(--color-surface-inset);
}

.ui-daterange__preset:focus-visible {
  box-shadow: var(--focus-halo);
}

.ui-daterange__preset.is-selected {
  background: var(--color-accent-100);
  color: var(--color-accent-pressed);
  font-weight: 500;
}

.ui-daterange__calendar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.ui-daterange__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
}

.ui-daterange__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.ui-daterange__nav-btn:hover {
  background: var(--color-surface-inset);
}

.ui-daterange__nav-btn:focus-visible {
  box-shadow: var(--focus-halo);
}

.ui-daterange__nav-btn:disabled {
  color: var(--color-ink-disabled);
  cursor: not-allowed;
  background: transparent;
}

.ui-daterange__months {
  display: flex;
  gap: var(--space-6);
}

.ui-daterange__month.hidden {
  display: none;
}

/* role="row" wrapper per week for the grid/gridcell ARIA structure — kept
   out of layout via `display: contents` so its day-cell children remain
   direct participants in the parent's 7-column grid below. */
.ui-daterange__week {
  display: contents;
}

.ui-daterange__month-label {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  text-align: center;
}

.ui-daterange__weekdays,
.ui-daterange__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
}

.ui-daterange__weekdays span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xs);
  color: var(--color-ink-muted);
}

.ui-daterange__day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-round);
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.ui-daterange__day:hover {
  background: var(--color-surface-hover);
}

.ui-daterange__day:focus-visible {
  box-shadow: var(--focus-halo);
}

.ui-daterange__day--muted {
  color: var(--color-ink-disabled);
  pointer-events: none;
}

/* Range fill stays --radius-round on every cell (this product has no 0px
   radius, spec §1.6) rather than the flat bar a square fill would give. */
.ui-daterange__day--in-range {
  background: var(--color-accent-50);
}

.ui-daterange__day--start,
.ui-daterange__day--end {
  background: var(--color-accent-strong);
  color: var(--color-on-accent);
}

.ui-daterange__error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-danger-ink);
}

@media (max-width: 767px) {
  .ui-daterange__panel {
    flex-direction: column;
  }

  .ui-daterange__presets {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }

  .ui-daterange__month--secondary {
    display: none;
  }
}