/*
Calendar

A month grid. Every day is a square cell sized by --calendar-cell-size
(the theme's item height), so the grid is the same size in every state:
selection, today, focus and range fills change color only.

  .calendar                     root; data-mode, data-animate
  .calendar-months              the shown months, side by side, wrapping
  .calendar-month               one month: caption and grid
  .calendar-caption             previous button, label or dropdowns, next button
  .calendar-caption-label       "October 2026", a polite live region
  .calendar-dropdown            a native <select> over its visible label
  .calendar-nav-button          previous and next month (.is-previous-year, .is-next-year with yearButtons)
  .calendar-grid                role=grid
  .calendar-weekday             weekday header
  .calendar-week-number         week number (showWeekNumber)
  .calendar-week-number-button  the number as a button (weekNumberButtons)
  .calendar-day                 role=gridcell; data-selected, data-today, data-outside,
                                data-disabled, data-range-start/-middle/-end, data-<modifier>
  .calendar-day-button          the day's button
  .calendar-day-content         dayContent's second line inside the button
  .calendar-footer              live region below the months

Set --calendar-cell-size on .calendar (or its class) for larger cells.
*/

@layer components {

.calendar {
  --calendar-cell-size: var(--item-height);

  display:        inline-block;
  max-width:      100%;
  padding:        var(--space-3);
  color:          var(--ink);
  font-family:    var(--font-ui);
  font-size:      var(--text-ui);
  letter-spacing: var(--tracking-ui);
  vertical-align: top;
}

.calendar-months {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-4);
}

.calendar-month {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  min-width:      0;
}

/* Caption */

.calendar-caption {
  display:               grid;
  grid-template-columns: var(--calendar-cell-size) minmax(0, 1fr) var(--calendar-cell-size);
  align-items:           center;
  min-height:            var(--calendar-cell-size);
  gap:                   var(--space-1);
}

.calendar-caption > .calendar-caption-label,
.calendar-caption > .calendar-dropdowns {
  grid-column:     2;
  justify-self:    center;
}

.calendar-caption > .is-previous { grid-column: 1; }
.calendar-caption > .is-next     { grid-column: 3; }

/* yearButtons: previous year and month before the caption, next month and
   year after it (APG date picker dialog). */
.calendar[data-year-buttons] .calendar-caption {
  grid-template-columns: repeat(2, var(--calendar-cell-size)) minmax(0, 1fr) repeat(2, var(--calendar-cell-size));
}

.calendar[data-year-buttons] .calendar-caption > .calendar-caption-label,
.calendar[data-year-buttons] .calendar-caption > .calendar-dropdowns { grid-column: 3; }
.calendar[data-year-buttons] .calendar-caption > .is-previous-year  { grid-column: 1; }
.calendar[data-year-buttons] .calendar-caption > .is-previous       { grid-column: 2; }
.calendar[data-year-buttons] .calendar-caption > .is-next           { grid-column: 4; }
.calendar[data-year-buttons] .calendar-caption > .is-next-year      { grid-column: 5; }

.calendar[data-nav-layout="after"] .calendar-caption,
.calendar[data-nav-layout="after"][data-year-buttons] .calendar-caption {
  grid-template-columns: minmax(0, 1fr) auto;
}

.calendar[data-nav-layout="after"] .calendar-caption > .calendar-caption-label,
.calendar[data-nav-layout="after"] .calendar-caption > .calendar-dropdowns,
.calendar[data-nav-layout="after"][data-year-buttons] .calendar-caption > .calendar-caption-label,
.calendar[data-nav-layout="after"][data-year-buttons] .calendar-caption > .calendar-dropdowns {
  grid-column:  1;
  justify-self: start;
  padding-inline-start: var(--space-1);
}

.calendar-nav {
  grid-column: 2;
  display:     flex;
  gap:         var(--space-1);
}

.calendar-caption-label {
  font-family:    var(--font-ui);
  font-weight:    var(--weight-strong);
  font-size:      var(--text-ui);
  text-transform: var(--case-ui);
  white-space:    nowrap;
}

.calendar-caption-year {
  font-weight: var(--weight-strong);
}

.calendar-nav-button {
  display:         inline-grid;
  place-items:     center;
  width:           var(--calendar-cell-size);
  height:          var(--calendar-cell-size);
  padding:         0;
  border:          var(--control-border-width) solid transparent;
  border-radius:   var(--radius-control);
  background:      transparent;
  color:           var(--ink);
  cursor:          pointer;
  transition:      background-color var(--duration-fast) var(--ease-out);
}

.calendar-nav-button svg {
  width:  var(--icon-size);
  height: var(--icon-size);
}

.calendar-nav-button:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--item-highlight);
  color:      var(--item-highlight-ink);
}

/* Pressed: a deeper paint, as on the Button template; nothing moves. */
.calendar-nav-button:active {
  transform: none;
}

.calendar-nav-button:active:not(:disabled, [aria-disabled="true"]) {
  background:          color-mix(in oklab, var(--item-highlight) 85%, var(--ink));
  color:               var(--item-highlight-ink);
  transition-duration: 0s;
}

.calendar-nav-button:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

.calendar-nav-button:disabled,
.calendar-nav-button[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor:  default;
}

.calendar-nav-button:dir(rtl) svg {
  transform: scaleX(-1);
}

/* DROPDOWNS: a transparent native <select> over its label (react-day-picker DropdownRoot). */

.calendar-dropdowns {
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
}

.calendar-dropdown {
  position:      relative;
  display:       inline-grid;
  align-items:   center;
  border:        var(--control-border-width) solid var(--control-border);
  border-radius: var(--radius-control);
  background:    var(--control-bg);
  box-shadow:    var(--control-shadow);
}

.calendar-dropdown:has(.calendar-select:focus-visible) {
  border-color: var(--focus);
  box-shadow:   var(--focus-ring);
}

.calendar-dropdown:hover:has(.calendar-select:not(:disabled)) {
  border-color: var(--rule-strong);
}

.calendar-select {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  margin:     0;
  opacity:    0;
  cursor:     pointer;
  font:       inherit;
  appearance: none;
}

.calendar-select:disabled {
  cursor: default;
}

/* The select is transparent over its label, so the dropdown dims from the
   select's effective state: disableNavigation, a disabled Field or a native
   <fieldset disabled> around the calendar. */
.calendar-dropdown:has(.calendar-select:disabled) {
  opacity: var(--opacity-disabled);
}

.calendar-select option {
  background: var(--bg-elevated);
  color:      var(--ink);
}

.calendar-dropdown-label {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-1);
  height:         calc(var(--calendar-cell-size) - 2 * var(--control-border-width));
  padding-inline: var(--space-2) var(--space-1);
  font-weight:    var(--weight-ui);
  text-transform: var(--case-ui);
  white-space:    nowrap;
  pointer-events: none;
}

.calendar-dropdown-label svg {
  width:  var(--icon-size-sm);
  height: var(--icon-size-sm);
  color:  var(--ink-dim);
}

/* Grid */

.calendar-grid {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.calendar-weekdays,
.calendar-week {
  display:               grid;
  grid-template-columns: repeat(7, var(--calendar-cell-size));
}

.calendar[data-week-numbers] .calendar-weekdays,
.calendar[data-week-numbers] .calendar-week {
  grid-template-columns: var(--calendar-cell-size) repeat(7, var(--calendar-cell-size));
}

.calendar-weeks {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.calendar-weekday,
.calendar-week-number-header {
  display:        grid;
  place-items:    center;
  height:         var(--calendar-cell-size);
  color:          var(--ink-dim);
  font-size:      var(--text-ui-sm);
  font-weight:    var(--weight-body);
  text-transform: var(--case-ui);
  user-select:    none;
}

.calendar-week-number {
  display:     grid;
  place-items: center;
  height:      var(--calendar-cell-size);
  color:       var(--ink-dim);
  font-size:   var(--text-ui-sm);
  font-variant-numeric: tabular-nums;
}

/* weekNumberButtons: the number is a button that fills its cell. */
.calendar-week-number-button {
  display:         grid;
  place-items:     center;
  width:           100%;
  height:          100%;
  padding:         0;
  border:          0;
  border-radius:   var(--radius-item);
  background:      transparent;
  color:           inherit;
  font:            inherit;
  font-variant-numeric: tabular-nums;
  cursor:          pointer;
  transition:      background-color var(--duration-fast) var(--ease-out),
                   color var(--duration-fast) var(--ease-out);
}

.calendar-week-number-button:hover {
  background: var(--item-highlight);
  color:      var(--item-highlight-ink);
}

.calendar-week-number-button:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

.calendar-week-number:has(> .calendar-week-number-button) {
  width: var(--calendar-cell-size);
}

.calendar-day {
  position:    relative;
  display:     grid;
  width:       var(--calendar-cell-size);
  height:      var(--calendar-cell-size);
  padding:     0;
}

/* The range fill sits on the cell, so a range reads as one band. */
.calendar-day[data-range-middle],
.calendar-day[data-range-start]:not([data-range-end]),
.calendar-day[data-range-end]:not([data-range-start]) {
  background: var(--item-selected);
}

.calendar-day[data-range-start]:not([data-range-end]) {
  border-start-start-radius: var(--radius-item);
  border-end-start-radius:   var(--radius-item);
}

.calendar-day[data-range-end]:not([data-range-start]) {
  border-start-end-radius: var(--radius-item);
  border-end-end-radius:   var(--radius-item);
}

.calendar-day-button {
  position:        relative;
  display:         grid;
  place-items:     center;
  width:           100%;
  height:          100%;
  min-width:       0;
  padding:         0;
  border:          0;
  border-radius:   var(--radius-item);
  background:      transparent;
  color:           inherit;
  font-family:     var(--font-ui);
  font-size:       var(--text-ui);
  font-weight:     var(--weight-body);
  font-variant-numeric: tabular-nums;
  line-height:     1;
  cursor:          pointer;
  transition:      background-color var(--duration-fast) var(--ease-out),
                   color var(--duration-fast) var(--ease-out);
}

/* dayContent: a second line under the day number (a price, a count). */
.calendar-day-button:has(> .calendar-day-content) {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  line-height:     var(--leading-tight);
}

.calendar-day-content {
  font-size:   var(--text-xs);
  color:       var(--ink-dim);
  white-space: nowrap;
}

.calendar-day[data-selected] .calendar-day-content,
.calendar-day-button:hover:not(:disabled) .calendar-day-content {
  color: inherit;
}

.calendar-day-button:hover:not(:disabled) {
  background: var(--item-highlight);
  color:      var(--item-highlight-ink);
}

.calendar-day-button:focus-visible {
  z-index:    1;
  outline:    none;
  box-shadow: var(--focus-ring);
}

/* Today is a soft accent fill: --bg-muted is the overlay color in some dark
   themes, so it would vanish inside a DatePicker popover. */
.calendar-day[data-today] > .calendar-day-button {
  background: var(--accent-soft);
  color:      var(--ink);
  font-weight: var(--weight-body);
}

.calendar-day[data-outside] > .calendar-day-button {
  color: var(--ink-dim);
}

.calendar-day[data-selected] > .calendar-day-button,
.calendar-day[data-selected] > .calendar-day-button:hover {
  background: var(--accent);
  color:      var(--accent-ink);
}

.calendar-day[data-range-middle] > .calendar-day-button {
  background:    transparent;
  color:         var(--item-selected-ink);
  border-radius: 0;
}

.calendar-day[data-range-middle] > .calendar-day-button:hover {
  background: var(--item-highlight);
}

/* A selected day of the next or previous month keeps the selected fill,
   muted, as react-day-picker dims outside days (--rdp-outside-opacity). */
.calendar-day[data-outside][data-selected]:not([data-range-middle]) > .calendar-day-button {
  opacity: var(--opacity-muted);
}

.calendar-day[data-disabled] > .calendar-day-button {
  color:   var(--ink-dim);
  opacity: var(--opacity-disabled);
  cursor:  default;
}


.calendar-day[data-hidden] {
  visibility: hidden;
}

/* FORCED COLORS -------------------------------------------------------------
   High contrast drops box-shadow and paints every background Canvas, so the
   ring, the selected fill and the range band would all vanish. Focus becomes
   an outline (no layout effect), a selected day keeps a system Highlight
   fill, and a range middle day is framed in Highlight. */

@media (forced-colors: active) {
  .calendar-day-button:focus-visible,
  .calendar-nav-button:focus-visible,
  .calendar-week-number-button:focus-visible {
    outline:        var(--focus-ring-width) solid Highlight;
    outline-offset: var(--focus-ring-offset);
  }

  .calendar-dropdown:has(.calendar-select:focus-visible) {
    outline:        var(--focus-ring-width) solid Highlight;
    outline-offset: var(--focus-ring-offset);
  }

  .calendar-day[data-selected]:not([data-range-middle]) > .calendar-day-button,
  .calendar-day[data-selected]:not([data-range-middle]) > .calendar-day-button:hover {
    forced-color-adjust: none;
    background:          Highlight;
    color:               HighlightText;
  }

  .calendar-day[data-range-middle] > .calendar-day-button {
    outline:        var(--control-border-width) solid Highlight;
    outline-offset: calc(-1 * var(--control-border-width));
  }

  /* After the range frame, and as specific, so focus wins on a middle day. */
  .calendar-day > .calendar-day-button:focus-visible {
    outline:        var(--focus-ring-width) solid Highlight;
    outline-offset: var(--focus-ring-offset);
  }

  .calendar-day[data-disabled] > .calendar-day-button {
    color: GrayText;
  }
}

/* Footer */

.calendar-footer {
  /* Text never widens the calendar: a longer message wraps instead. */
  contain:    inline-size;
  margin-top: var(--space-3);
  color:      var(--ink-dim);
  font-size:  var(--text-caption);
}

.calendar-footer:empty {
  display: none;
}

/* Month Change Animation (animate) */

.calendar[data-animate="after"] .calendar-weeks,
.calendar[data-animate="after"] .calendar-caption-label {
  animation: calendar-in-after var(--duration-enter) var(--ease-enter);
}

.calendar[data-animate="before"] .calendar-weeks,
.calendar[data-animate="before"] .calendar-caption-label {
  animation: calendar-in-before var(--duration-enter) var(--ease-enter);
}

@keyframes calendar-in-after {
  from {
    opacity:   0;
    transform: translateX(var(--enter-distance));
  }
}

@keyframes calendar-in-before {
  from {
    opacity:   0;
    transform: translateX(calc(-1 * var(--enter-distance)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .calendar[data-animate] .calendar-weeks,
  .calendar[data-animate] .calendar-caption-label {
    animation: none;
  }
}

}