/* Date range picker dialog (see src/ui/date-range-picker.js). Shares .picker-head / .close-btn with the country picker. */

dialog.date-dialog {
  width: min(660px, calc(100vw - 32px));
  height: fit-content; /* not "auto": a modal dialog is positioned with inset 0, so auto would stretch it */
  max-height: calc(100vh - 32px);
}

/* ---- From / To summary ---- */

.dp-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 14px 12px 18px;
}
.dp-field {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.dp-field span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.dp-field strong {
  font-size: 15px;
  font-weight: 600;
}
/* The end that the next click will set. */
.dp-field.active {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

/* ---- Months ---- */

.dp-body {
  position: relative;
  padding: 4px 14px 16px;
  border-top: 1px solid var(--line);
}
.dp-nav {
  position: absolute;
  top: 10px;
  z-index: 1;
}
.dp-prev {
  inset-inline-start: 14px;
}
.dp-next {
  inset-inline-end: 14px;
}

.dp-months {
  display: grid;
  grid-template-columns: repeat(var(--count, 1), 1fr);
  gap: 24px;
}
.dp-months[data-count='2'] {
  --count: 2;
}
.dp-month-title {
  margin: 0;
  height: 54px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 600;
}

.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
}
.dp-weekday {
  padding: 4px 0 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

/* Each day sits in a cell; the cell paints the range band, the button the circle. */
.dp-cell {
  position: relative;
  display: grid;
  place-items: center;
  height: 40px;
}
.dp-cell.in-range::before {
  content: '';
  position: absolute;
  inset: 3px 0;
  background: var(--soft);
}
.dp-cell.range-start::before {
  inset-inline-start: 50%;
}
.dp-cell.range-end::before {
  inset-inline-end: 50%;
}

.day {
  position: relative;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.day:hover {
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.day.today {
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-weight: 600;
}
.dp-cell.endpoint .day {
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  box-shadow: none;
}

@media (max-width: 600px) {
  dialog.date-dialog {
    width: 100%; /* bottom sheet, like the country picker */
    height: fit-content;
    max-height: 90vh;
    max-height: 90svh;
  }
  .dp-body {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .dp-cell {
    height: 44px;
  }
  .day {
    width: 40px;
    height: 40px;
  }
}