/* Date picker of the design system (/design-system#date_picker): the one calendar for every date the app asks for
   (a task's due date, the agenda, the conversation's Criar tarefa). Cells of 34 by 32 px in the body text, today in
   bold with a dot, the chosen day filled with the account's colour. */
.air-datepicker.air-datepicker {
  --adp-background-color: transparent;
  --adp-background-color-hover: var(--ds-hover);
  --adp-background-color-active: var(--ds-pressed);
  --adp-background-color-in-range: var(--ds-cta-soft);
  --adp-background-color-in-range-focused: var(--ds-cta-soft-hover);
  --adp-background-color-selected-other-month: var(--ds-cta);
  --adp-background-color-selected-other-month-focused: var(--ds-cta-hover);
  --adp-color: var(--ds-text);
  --adp-color-secondary: var(--ds-text-muted);
  --adp-accent-color: var(--ds-cta);
  --adp-color-current-date: var(--ds-text);
  --adp-color-other-month: var(--ds-text-muted);
  --adp-color-other-month-hover: var(--ds-text-secondary);
  --adp-color-disabled: var(--ds-text-muted);
  --adp-color-disabled-in-range: var(--ds-text-muted);
  --adp-border-color: transparent;
  --adp-border-color-inner: transparent;
  --adp-border-color-inline: transparent;
  --adp-border-radius: var(--ds-radius-full);
  --adp-nav-height: 28px;
  --adp-nav-action-size: 28px;
  --adp-nav-arrow-color: var(--ds-text-secondary);
  --adp-nav-color-secondary: var(--ds-text);
  --adp-day-name-color: var(--ds-text-muted);
  --adp-day-name-color-hover: var(--ds-text);
  --adp-day-cell-width: 34px;
  --adp-day-cell-height: 32px;
  --adp-month-cell-height: 36px;
  --adp-year-cell-height: 36px;
  --adp-cell-border-radius: var(--ds-radius-full);
  --adp-cell-background-color-hover: var(--ds-hover);
  --adp-cell-background-color-selected: var(--ds-cta);
  --adp-cell-background-color-selected-hover: var(--ds-cta-hover);
  --adp-padding: 0;
  inline-size: auto;
  border: 0;
  background: transparent;
  color: var(--ds-text);
  font-family: inherit;
  font-size: var(--ds-font-size-compact);
}

.air-datepicker--content { padding: 0; }

.air-datepicker-nav {
  align-items: center;
  min-block-size: 28px;
  padding: 0 0 var(--ds-space-1);
}

.air-datepicker-nav--title {
  flex: 1;
  color: var(--ds-text);
  font-size: var(--ds-font-size-compact);
  font-weight: var(--ds-weight-semibold);
  text-transform: capitalize;

  & i { margin-inline-start: 0.3em; color: var(--ds-text); font-style: normal; }
}

.air-datepicker-nav--title:hover,
.air-datepicker-nav--title:active { background: transparent; }

.air-datepicker-nav--action {
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--ds-radius-full);

  & svg { inline-size: 24px; block-size: 24px; }
  & path { stroke-width: 1.5px; }
}

.air-datepicker-body--day-names { margin: 0 0 2px; }

.air-datepicker-body--day-name {
  block-size: 24px;
  font-size: var(--ds-status-font-xs);
  font-weight: var(--ds-weight-medium);
  text-transform: none;
}

.air-datepicker-body--cells:is(.-months-, .-years-) { min-block-size: calc(var(--adp-day-cell-height) * 6); align-content: center; }

.air-datepicker-cell.-current- { font-weight: var(--ds-weight-bold); }

/* The day the keyboard is on wears the hover only while the keyboard drives; opened by the mouse, today stays a dot. */
.ds-datepicker__calendar:not(:focus-visible) .air-datepicker-cell.-focus-:not(:hover, .-selected-) { background: transparent; }

.air-datepicker-cell.-day-.-current-::after {
  content: "";
  position: absolute;
  inset-block-end: 4px;
  inset-inline-start: calc(50% - 2px);
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--ds-cta);
}

.air-datepicker-cell.-selected-,
.air-datepicker-cell.-selected-.-current- { color: var(--ds-on-cta); font-weight: var(--ds-weight-semibold); }
.air-datepicker-cell.-selected-::after { background: var(--ds-on-cta); }

.ds-datepicker { color: var(--ds-menu-text); }

/* The panel the calendar rides in: the time below it, then Cancelar and Concluir. */
.ds-datepicker__panel {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  inline-size: max-content;
  max-inline-size: 100%;
  padding: var(--ds-space-3);
  border: 1px solid var(--ds-menu-border);
  border-radius: var(--ds-menu-radius);
  background: var(--ds-menu-bg);
  color: var(--ds-menu-text);
}

.ds-datepicker__calendar { inline-size: calc(var(--adp-day-cell-width, 34px) * 7); }
.ds-datepicker__calendar:focus { outline: none; }

.ds-datepicker__time {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  padding-block-start: var(--ds-space-2);
  border-block-start: 1px solid var(--ds-menu-separator);
}

.ds-datepicker__presets { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); }

.ds-datepicker__time-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  color: var(--ds-text-muted);

  > svg { flex-shrink: 0; }
}

.ds-datepicker__time-input {
  --hover-size: 0;
  inline-size: 6.5rem;
  block-size: 28px;
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-full);
  background: transparent;
  color: var(--ds-text);
  font: inherit;
  font-size: var(--ds-font-size-compact);
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}

.ds-datepicker__time-input:focus { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }

/* The half hours open upward, over the calendar, never past the panel; no display here, the hidden utility owns it. */
.ds-datepicker__time-options {
  position: absolute;
  inset-block-end: calc(100% + var(--ds-space-1));
  inset-inline-start: calc(14px + var(--ds-space-2));
  z-index: 1;
  inline-size: 6.5rem;
  max-block-size: min(12rem, 40vh);
  padding: var(--ds-menu-inset);
  border: 1px solid var(--ds-menu-border);
  border-radius: var(--ds-menu-item-radius);
  background: var(--ds-menu-bg);
}

.ds-datepicker__time-option {
  --hover-size: 0;
  display: block;
  inline-size: 100%;
  padding: var(--ds-space-1) var(--ds-space-2);
  border: 0;
  border-radius: var(--ds-radius-md);
  background: transparent;
  color: var(--ds-text);
  font: inherit;
  font-size: var(--ds-font-size-compact);
  font-variant-numeric: tabular-nums;
  text-align: start;
  cursor: pointer;
}

.ds-datepicker__time-option:hover { background: var(--ds-menu-hover); }

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

/* Over a page: centred on a quiet backdrop, never past the window. */
.ds-datepicker--modal:not(.hidden) {
  position: fixed;
  inset: 0;
  z-index: var(--ds-z-overlay);
  display: grid;
  place-items: center;
  padding: var(--ds-space-4);
  background: oklch(0 0 0 / 0.4);
}

/* Inside a form that is already a popover (Criar tarefa): it opens in the flow, under what opened it, as one layer. */
.ds-datepicker--inline:not(.hidden) { display: block; }

.ds-datepicker--inline .ds-datepicker__panel {
  inline-size: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.ds-datepicker--inline .ds-datepicker__calendar { margin-inline: auto; }
.ds-datepicker--inline .ds-datepicker__time-options { position: static; inline-size: auto; max-block-size: 9rem; overflow-y: auto; }
.ds-datepicker--inline .ds-datepicker__time-field { flex-wrap: wrap; }
.ds-datepicker--inline .ds-datepicker__time-options:not(.hidden) { flex-basis: 100%; }

/* On a phone the modal is a sheet from the bottom, the width of the screen. */
@media (max-width: 40rem) {
  .ds-datepicker--modal:not(.hidden) { place-items: end stretch; padding: 0; }

  .ds-datepicker--modal .ds-datepicker__panel {
    inline-size: auto;
    padding: var(--ds-space-4) var(--ds-space-4) calc(var(--ds-space-4) + env(safe-area-inset-bottom));
    border-radius: var(--ds-menu-radius) var(--ds-menu-radius) 0 0;
    border-block-end: 0;
  }

  .ds-datepicker--modal .ds-datepicker__calendar { margin-inline: auto; }
}

/* Anchored to the chip that opens it (Criar tarefa's due date): a popover in the top layer, so the form under it keeps
   its height and its button in sight; the controller places it under the chip, or over it when there is no room. */
.ds-datepicker--anchored {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

/* Date only: no time, the typed date on top, and the month's title a pill that climbs to months and years. */
.ds-datepicker__typed {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding-block-end: var(--ds-space-2);
  border-block-end: 1px solid var(--ds-menu-separator);
  color: var(--ds-text-muted);

  > svg { flex-shrink: 0; }
}

.ds-datepicker__date-input { inline-size: 7.5rem; }

.ds-datepicker--date-only .air-datepicker-nav--title {
  flex: 0 1 auto;
  margin-inline: auto;
  padding-inline: var(--ds-space-3);
  border-radius: var(--ds-radius-full);
  cursor: pointer;
}

.ds-datepicker--date-only .air-datepicker-nav--title:hover { background: var(--ds-menu-hover); }
.ds-datepicker--date-only .air-datepicker-nav--title.-disabled- { cursor: default; background: transparent; }

/* The form's box that opens it (shared/_date_field): the compact field, the date or a muted prompt, and an x. */
.ds-date-field { position: relative; display: flex; align-items: center; }

.ds-date-field__trigger {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  inline-size: 100%;
  text-align: start;
  cursor: pointer;
  font-variant-numeric: tabular-nums;

  > svg { flex-shrink: 0; color: var(--ds-text-muted); }
}

/* One line, the date or the prompt: a prompt that wrapped made the box taller than the date that replaced it. */
.ds-date-field__value { min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ds-date-field__placeholder { color: var(--ds-text-muted); }
/* The x sits inside the box: the text always keeps its room, so it never runs under the x nor moves when the x comes. */
.ds-date-field .ds-date-field__trigger { padding-inline-end: calc(24px + var(--ds-space-2) * 2); }

.ds-date-field__clear {
  --hover-size: 0;
  position: absolute;
  inset-inline-end: var(--ds-space-2);
  display: inline-grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border: 0;
  border-radius: var(--ds-radius-full);
  background: transparent;
  color: var(--ds-text-muted);
  cursor: pointer;

  &[hidden] { display: none; }
  &:hover { background: var(--ds-fill-hover); color: var(--ds-text); }
  &:focus-visible { outline: 2px solid var(--ds-focus-ring); }
}