@layer components {

/* ── ds-date — MUI X DatePicker (outlined input) ──────────────────────
 * Visual: MUI Outlined TextField with a floating label that sits in a
 * gap in the top border. Calendar selection uses the browser's native
 * <input type="date"> popover — vanilla JS, no bundler, so a full custom
 * calendar would be an outsized lift; the input field style is what the
 * MODEC guideline asks for (Image #149) and the native popover handles
 * keyboard nav + a11y out of the box.
 *
 * Reference: https://mui.com/x/react-date-pickers/date-picker/#basic-usage
 *
 * Usage:
 *   <label class="ds-date">
 *     <input type="date" id="…" class="ds-date__input" aria-label="…" />
 *     <span class="ds-date__label">Start date</span>
 *   </label>
 *
 * Hidden state: when the <input> carries the `hidden` class (the existing
 * "show only in Custom date-range mode" toggle), the wrapper hides too —
 * handled in CSS via :has() so existing JS that toggles `hidden` on the
 * input stays unchanged.
 *
 * Note on date format: native <input type="date"> renders the date in the
 * browser's locale. Forcing MM/DD/YYYY or DD/MM/YYYY in a native input
 * isn't possible without going custom. The DOM value is always ISO
 * (YYYY-MM-DD), which is what backend code already expects. */

.ds-date {
  position: relative;
  display: inline-flex;
  min-width: 168px;
  /* Wrapper bounding box must include the label's vertical space so flex
   * `align-items: center` aligns the whole visual area, not just the
   * input. 4px label gap + 36px input = 40px total — matches the
   * multiselect / button row baseline and gives the date value text
   * room to render without being clipped at descenders. */
  padding-top: 4px;
  font-family: var(--font-family-sans);
}
/* Hide via the global `.hidden { display: none }` utility on the wrapper
 * itself (not the inner input). JS that wants to show/hide a date picker
 * should `el.classList.toggle("hidden", …)` on the `<label class="ds-date">`
 * — see qc-monitoring/page.js for the period-selector wiring. */

.ds-date__input {
  width: 100%;
  /* Locked 36px input height with explicit `line-height: 34px` (height
   * minus the 1px top + 1px bottom border) — forces the value text to
   * vertically center in a line box that exactly fills the content area.
   * The previous `line-height: 1.2` + flex-on-pseudo combo left webkit
   * positioning the value text at its natural bottom baseline (Image
   * #174), so the digits sat low and clipped against the top edge. */
  box-sizing: border-box;
  height: 36px;
  padding: 0 12px;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 34px;
  letter-spacing: 0;
  color: rgba(0, 0, 0, 0.87);
  background: var(--color-bg-surface);
  border: 1px solid rgba(0, 0, 0, 0.23);       /* MUI outline-default */
  border-radius: 4px;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;                    /* drop Safari date pill chrome */
  appearance: none;
  cursor: pointer;
  transition:
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-date__input:hover {
  border-color: rgba(0, 0, 0, 0.87);
}
.ds-date__input:focus {
  border-color: var(--color-accent);
  /* Inset box-shadow simulates MUI's 2px focus border without resizing
   * the layout (a real 2px border would shift the floating label). */
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.ds-date__input:disabled {
  background: var(--color-bg-surface-alt);
  color: rgba(0, 0, 0, 0.38);
  cursor: not-allowed;
}

/* Floating label — centered vertically ON the input's top border so its
 * background-color "notch" only covers the 1px border line, not the
 * input's interior. Was rendering with line-height ~1.5 = 18px tall
 * label, whose background sliced down 14px into the input and covered
 * the top half of the date digits (Image #175). `line-height: 1` plus
 * `top: 4px; transform: translateY(-50%)` parks the label centered on
 * the border at y=4 (where the wrapper's padding-top meets the input
 * top) with a tight 12px-tall background that doesn't intrude on the
 * value text region. */
.ds-date__label {
  position: absolute;
  top: 4px;
  left: 9px;
  transform: translateY(-50%);
  padding: 0 5px;
  background: var(--color-bg-surface);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: 0.00938em;
  color: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.ds-date__input:focus ~ .ds-date__label {
  color: var(--color-accent);
}
.ds-date__input:disabled ~ .ds-date__label {
  color: rgba(0, 0, 0, 0.38);
}

/* Native calendar icon (Chromium / Edge / WebKit) — kept visible as the
 * affordance, but the native popover itself is suppressed by the
 * `readonly` attribute that ds-date-picker.js sets, and our custom
 * popover opens on click instead (see ds-date-popover styles below). */
/* Reset webkit's internal datetime-edit padding so it doesn't add an
 * extra ~4px top + bottom band of its own. With `line-height: 34px`
 * on the input above, the value text already centers in the box —
 * the pseudo just needs to stop padding outside that line box. */
.ds-date__input::-webkit-datetime-edit { padding: 0; }
.ds-date__input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.ds-date__input::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  cursor: pointer;
  filter: invert(0);
  transition: opacity 150ms;
}
.ds-date__input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.ds-date__input:focus::-webkit-calendar-picker-indicator { opacity: 1; }

/* ── ds-date-popover — MUI X DateCalendar (Image #149) ──────────────────
 * Custom calendar popover that replaces the native browser picker.
 * Rendered into document.body by ds-date-picker.js and absolutely
 * positioned below the trigger input. */
.ds-date-popover {
  z-index: 10004;                              /* above sticky chrome (900) + modals; below toast (10003) */
  width: 320px;
  padding: 10px 12px 14px;
  background: var(--color-bg-surface);
  border-radius: 8px;
  box-shadow:
    0 5px 5px -3px rgba(0, 0, 0, 0.20),
    0 8px 10px 1px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12);
  font-family: var(--font-family-sans);
  color: rgba(0, 0, 0, 0.87);
  animation: ds-date-popover-in 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes ds-date-popover-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ds-date-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 8px;
}
.ds-date-popover__month-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(0, 0, 0, 0.87);
}
.ds-date-popover__nav {
  display: inline-flex;
  gap: 4px;
}
.ds-date-popover__nav-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.54);
  cursor: pointer;
  box-shadow: none;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-date-popover__nav-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.87);
}
.ds-date-popover__nav-btn:focus-visible {
  outline: 2px solid rgba(63, 91, 255, 0.5);
  outline-offset: 1px;
}

.ds-date-popover__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.ds-date-popover__weekday {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: rgba(0, 0, 0, 0.6);
}

.ds-date-popover__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.ds-date-popover__day {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;                          /* MUI X day circles */
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: rgba(0, 0, 0, 0.87);
  cursor: pointer;
  box-shadow: none;
  transition: background 100ms cubic-bezier(0.4, 0, 0.2, 1),
              color 100ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-date-popover__day:hover {
  background: rgba(0, 0, 0, 0.06);
}
.ds-date-popover__day:focus-visible {
  outline: none;
  background: rgba(0, 0, 0, 0.08);
}
.ds-date-popover__day--empty {
  cursor: default;
  pointer-events: none;
}
/* "Today" — outlined ring in the input's text color (MUI X spec). */
.ds-date-popover__day.is-today {
  border: 1px solid rgba(0, 0, 0, 0.6);
}
/* Selected day — solid brand-blue circle with white text. Wins over
 * `is-today` if both apply (the same day is selected and is today). */
.ds-date-popover__day.is-selected {
  background: var(--color-accent);
  color: #fff;
  border: none;
}
.ds-date-popover__day.is-selected:hover {
  background: var(--color-accent);
  filter: brightness(1.08);
}

} /* end @layer components */