/* date-picker.css: Date and range picker (component 5). Owner: group A (P2.T4). Tokens only, logical properties only.
   The trigger is the shared .text-input__control box (text-input.css); the calendar is a popover. */

.date-picker__trigger { cursor: pointer; justify-content: space-between; text-align: start; }
.date-picker__trigger[aria-expanded="true"] { border-color: var(--brand); }
.date-picker__value { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-picker__placeholder { color: var(--text-muted); }
.date-picker__trigger > .icon { flex: none; }
[data-disabled="true"] > .date-picker__trigger,
.date-picker__trigger[aria-disabled="true"] { background: var(--surface-sunken); border-color: var(--border); color: var(--text-disabled); cursor: not-allowed; }
[data-disabled="true"] .date-picker__placeholder,
.date-picker__trigger[aria-disabled="true"] .date-picker__placeholder { color: var(--text-disabled); }
[data-readonly="true"] > .date-picker__trigger { background: var(--surface-sunken); border-color: var(--border); cursor: default; }

/* The popover surface. */
.date-picker__popover[data-overlay] {
  box-sizing: border-box;
  padding: var(--space-4);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-overlay);
  box-shadow: var(--shadow-overlay);
  color: var(--text);
}
.date-picker__body { display: flex; align-items: flex-start; gap: var(--space-5); }
.date-picker__presets {
  flex: none;
  display: grid;
  gap: var(--space-1);
  inline-size: var(--size-presets);
  padding-inline-end: var(--space-4);
  border-inline-end: var(--border-width) solid var(--border);
}
.date-picker__presets [data-component="button"] { justify-content: flex-start; inline-size: 100%; }
.date-picker__calendars { display: flex; align-items: flex-start; gap: var(--space-5); }
.date-picker__month { display: grid; gap: var(--space-3); }
.date-picker__month-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.date-picker__month-title { flex: 1 1 auto; text-align: center; font: var(--type-sub); color: var(--text); }
.date-picker__spacer { flex: none; inline-size: var(--size-control-sm); block-size: var(--size-control-sm); }

.date-picker__grid { border-collapse: collapse; table-layout: fixed; }
.date-picker__weekday {
  inline-size: var(--size-calendar-cell);
  min-block-size: var(--size-menu-item);
  text-align: center;
  font: var(--type-label);
  color: var(--text-secondary);
}
.date-picker__cell,
.date-picker__blank { inline-size: var(--size-calendar-cell); block-size: var(--size-calendar-cell); padding: 0; text-align: center; }
.date-picker__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  inline-size: var(--size-calendar-cell);
  block-size: var(--size-calendar-cell);
  padding: 0;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  font: var(--type-body);
  font-variant-numeric: tabular-nums lining-nums;
  cursor: pointer;
}
.date-picker__day[data-today="true"] { border-color: var(--border-control); }
.date-picker__day:hover:not([data-selected], [data-in-range], [aria-disabled="true"]) { background: var(--surface-hover); }
.date-picker__day[data-in-range="true"] { background: var(--brand-subtle); color: var(--text); border-radius: 0; }
.date-picker__day[data-selected="true"],
.date-picker__day[data-selected="true"]:hover { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.date-picker__day[data-range-start="true"] { border-start-end-radius: 0; border-end-end-radius: 0; }
.date-picker__day[data-range-end="true"] { border-start-start-radius: 0; border-end-start-radius: 0; }
.date-picker__day[aria-disabled="true"] { color: var(--text-disabled); cursor: not-allowed; background: transparent; }
.date-picker__day:focus-visible { outline: var(--border-width-thick) solid var(--focus-ring); outline-offset: calc(-1 * var(--border-width-thick)); }
.date-picker__day[data-selected="true"]:focus-visible { outline-color: var(--brand-contrast); }

.date-picker__footer { margin-block-start: var(--space-4); font: var(--type-caption); color: var(--text-secondary); }

/* One month below wide and presets above the calendar below 768 (the second month is only rendered at 1440 and wider). */
@media (width < 768px) {
  .date-picker__body { flex-direction: column; }
  .date-picker__presets { inline-size: 100%; grid-template-columns: repeat(2, 1fr); padding-inline-end: 0; padding-block-end: var(--space-3); border-inline-end: 0; border-block-end: var(--border-width) solid var(--border); }
}