/* The dd/mm/yyyy date field and its calendar (static/js/date_input.js; round 5, the owner's items 1 and 3).
 *
 * Loaded by templates/base.html after ui.css and by the admin console (admin/dashboard.html) after ui.css, so on
 * every page that has a date field. The field keeps the page's own look (its border, height and focus ring come from
 * the page's input rules); this sheet only makes room for the calendar button inside its right edge. The calendar
 * takes its colours from the --dialog-* variables (ui.css), which the admin console sets in both of its palettes and
 * a deployment theme reaches through the tokens. The selectors carry two classes, so a page's own rules for every
 * button, select or input (the admin console has such rules) never reach inside. Never printed.
 */

/* One column: the field and its button share the first row, so a note a page puts in after the field (the
   customer form's Date of birth has one) drops to the row below and never pulls the button off the field. */
.date-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.date-in:has(> input[hidden]) { display: none; }
.date-in.date-in > input.date-in__input {
  grid-row: 1;
  grid-column: 1;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-right: 40px;
  font-variant-numeric: tabular-nums;
}
.date-in.date-in > button.date-in__btn {
  grid-row: 1;
  grid-column: 1;
  justify-self: end;
  align-self: center;
  position: relative;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--dialog-muted, #475569);
  box-shadow: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.date-in.date-in > button.date-in__btn:hover { background: rgba(100, 116, 139, 0.14); color: var(--dialog-ink, #0F172A); }
.date-in.date-in > button.date-in__btn:focus-visible { outline: 2px solid var(--dialog-focus, #1E3A8A); outline-offset: 1px; }
.date-in.date-in > button.date-in__btn svg { width: 18px; height: 18px; pointer-events: none; }
.date-in.date-in > input:disabled ~ button.date-in__btn,
.date-in.date-in > input[readonly] ~ button.date-in__btn { opacity: 0.45; cursor: default; pointer-events: none; }

/* ---- the calendar (a popover in the top layer when the browser has one; fixed in place otherwise) ---- */
.date-pop.date-pop {
  position: fixed;
  inset: auto;
  z-index: 2147483000;
  box-sizing: border-box;
  width: 300px;
  max-width: calc(100vw - 16px);
  margin: 0;
  padding: 12px;
  overflow: visible;
  border: 1px solid var(--dialog-line, #7B8798);
  border-radius: 12px;
  background: var(--dialog-bg, #FFFFFF);
  color: var(--dialog-ink, #0F172A);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
}
.date-pop.date-pop[hidden] { display: none; }
.date-pop .date-pop__head { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.date-pop .date-pop__nav,
.date-pop .date-pop__day,
.date-pop .date-pop__act {
  box-sizing: border-box;
  margin: 0;
  font: inherit;
  font-weight: 500;
  color: var(--dialog-ink, #0F172A);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: none;
}
.date-pop .date-pop__nav {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--dialog-line, #7B8798);
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
}
.date-pop .date-pop__sel {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 32px;
  min-height: 0;
  margin: 0;
  padding: 0 6px;
  border: 1px solid var(--dialog-line, #7B8798);
  border-radius: 8px;
  background: var(--dialog-field-bg, #FFFFFF);
  color: var(--dialog-ink, #0F172A);
  font: inherit;
  font-size: 14px;
}
.date-pop .date-pop__year { flex: 0 0 5.2em; }
.date-pop .date-pop__grid { display: grid; grid-template-rows: auto; gap: 2px; }
.date-pop .date-pop__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.date-pop .date-pop__dow {
  padding: 2px 0 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--dialog-muted, #475569);
}
.date-pop .date-pop__cell { min-width: 0; }
.date-pop .date-pop__day {
  display: block;
  width: 100%;
  height: 34px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.date-pop .date-pop__day:hover { background: rgba(100, 116, 139, 0.16); }
.date-pop .date-pop__day.is-other { color: var(--dialog-muted, #475569); font-weight: 400; }
.date-pop .date-pop__day[aria-current="date"] { box-shadow: inset 0 0 0 1px var(--dialog-primary, #1E3A8A); font-weight: 700; }
.date-pop .date-pop__day[aria-pressed="true"] { background: var(--dialog-primary, #1E3A8A); color: var(--dialog-on-primary, #FFFFFF); }
.date-pop .date-pop__day[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; background: transparent; }
.date-pop .date-pop__time { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.date-pop .date-pop__time[hidden] { display: none; }
.date-pop .date-pop__tl { flex: 0 0 auto; font-size: 13px; color: var(--dialog-muted, #475569); }
.date-pop .date-pop__hh,
.date-pop .date-pop__mm { flex: 0 0 4.2em; }
.date-pop .date-pop__foot { display: flex; justify-content: space-between; gap: 6px; margin: 10px 0 0; }
.date-pop .date-pop__act {
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  min-height: 0;
  padding: 0 8px;
  border: 1px solid var(--dialog-line, #7B8798);
  border-radius: 8px;
  font-size: 13px;
}
.date-pop .date-pop__act:hover,
.date-pop .date-pop__nav:hover { border-color: var(--dialog-ink, #0F172A); background: transparent; }
.date-pop .date-pop__nav:disabled,
.date-pop .date-pop__act:disabled { opacity: 0.4; cursor: not-allowed; }
.date-pop.date-pop button:focus-visible,
.date-pop.date-pop select:focus-visible { outline: 2px solid var(--dialog-focus, #1E3A8A); outline-offset: 1px; }
.date-pop .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- page fits ---- */
/* The admin console's custom range sits on one line with its arrow and Apply (admin_dashboard.css .range-custom). */
.range-custom .date-in { flex: 0 1 11em; width: 11em; }

@media print {
  .date-in.date-in > button.date-in__btn, .date-pop.date-pop { display: none !important; }
  .date-in.date-in > input.date-in__input { padding-right: 0; }
}