/* SPDX-License-Identifier: AGPL-3.0-only */
/* Copyright (c) 2026 sol pbc */

.date-nav-content {
  --facet-color: var(--orange);
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: flex-end;   /* the control lives in the upper-right of the workspace */
  color: var(--ink);
  font-family: var(--font-body);
}

.date-nav-content__bar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
}

.date-nav-content__arrow,
.date-nav-content__trigger,
.date-nav-content__panel-arrow,
.date-nav-content__panel-title,
.date-nav-content__cell {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.date-nav-content__arrow,
.date-nav-content__panel-arrow {
  width: var(--touch-min);
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.date-nav-content__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 132px;
  padding: 0 var(--space-3);
  font-weight: var(--weight-medium);
}

.date-nav-content--dayless .date-nav-content__trigger {
  min-width: 156px;
}

.date-nav-content__warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--warn-wash);
  color: var(--warn-ink);
  font-size: var(--text-min);
  font-weight: var(--weight-display);
}

/* the hidden attribute must win over display: inline-flex above — otherwise the
   stale-data warning shows on every load regardless of whether data failed */
.date-nav-content__warning[hidden] {
  display: none;
}

/* the calendar glyph on the trigger face */
.date-nav-content__icon {
  width: 15px;
  height: 15px;
  color: var(--ink-faint);
}

.date-nav-content__arrow:hover:not(:disabled),
.date-nav-content__trigger:hover,
.date-nav-content__panel-arrow:hover:not(:disabled),
.date-nav-content__panel-title:hover,
.date-nav-content__cell:hover:not(:disabled) {
  border-color: var(--orange-ink);
}

.date-nav-content__arrow:disabled,
.date-nav-content__panel-arrow:disabled,
.date-nav-content__cell:disabled {
  cursor: default;
  color: var(--ink-faint);
  opacity: 0.56;
}

.date-nav-content__arrow:focus-visible,
.date-nav-content__trigger:focus-visible,
.date-nav-content__panel-arrow:focus-visible,
.date-nav-content__panel-title:focus-visible,
.date-nav-content__cell:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.date-nav-content__popover {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: auto;
  right: 0;   /* right-aligned control opens inward, never off the right edge */
  width: min(336px, calc(100vw - (2 * var(--space-4))));
  padding: var(--space-3);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius);
  background: var(--cream-bright);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--ink) 18%, transparent);
}

.date-nav-content__panelbar {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr) auto var(--touch-min);
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
}

.date-nav-content__panel-title {
  padding: 0 var(--space-2);
  font-weight: var(--weight-medium);
}

/* today — between the arrows in the panel header (never white-on-orange) */
.date-nav-content__today {
  min-height: 30px;
  padding: 0 var(--space-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--orange-ink);
  font: inherit;
  font-size: var(--text-min);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.date-nav-content__today:hover { border-color: var(--orange-ink); }
.date-nav-content__today:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.date-nav-content__today-short { display: none; }

/* constrained view: today collapses to [T] */
@media (max-width: 560px) {
  .date-nav-content__today-full { display: none; }
  .date-nav-content__today-short { display: inline; }
}

.date-nav-content__grid {
  display: grid;
  gap: var(--space-2);
}

.date-nav-content__grid--3 .date-nav-content__row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.date-nav-content__grid--1 .date-nav-content__row {
  grid-template-columns: minmax(0, 1fr);
}

.date-nav-content__grid--7 .date-nav-content__row {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.date-nav-content__row {
  display: grid;
  gap: var(--space-2);
}

.date-nav-content__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-1);
  background: color-mix(in srgb, var(--facet-color) calc(var(--intensity) * 55%), transparent);
}

.date-nav-content__grid--1 .date-nav-content__cell {
  min-height: var(--touch-min);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-3);
  text-align: left;
}

.date-nav-content__cell--selected {
  background: var(--orange);
  color: var(--ink);
  border-color: var(--orange);
}

.date-nav-content__cell-count {
  min-height: var(--text-min);
  color: var(--ink-faint);
  font-size: var(--text-min);
  line-height: 1;
}

.date-nav-content__cell--selected .date-nav-content__cell-count {
  color: var(--ink);
}

.date-nav-content__cell--empty .date-nav-content__cell-count {
  color: var(--ink-faint);
}
