/* The staff date fields' calendar (date-picker.js). Loaded late on its pages (only mobile-enhancements.css follows): the
   shared button rules would otherwise give every day the 44px padded look of an action button. */

/* The browser's own picker button is replaced by a calendar icon that opens ours. The form themes set the field's
   colour with the background shorthand, from selectors of every strength, so the icon's four properties are marked
   important; the colour underneath is still theirs. */
input[type="datetime-local"][data-date-picker] {
  padding-inline-end: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230057ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2.5'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 18px 18px !important;
  background-position: calc(100% - 12px) center !important;
  cursor: pointer;
}
input[type="datetime-local"][data-date-picker]::-webkit-calendar-picker-indicator { display: none; }

.date-picker {
  position: fixed; inset: auto; margin: 0; z-index: 2000;
  box-sizing: border-box; width: min(300px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto;
  padding: 12px; border: 1px solid var(--line, #d5d7dc); border-radius: 16px;
  background: #fff; color: var(--ink, #1c2426);
  box-shadow: 0 18px 44px rgba(15, 33, 61, .18);
  font: inherit; font-size: 14px;
}
.date-picker * { box-sizing: border-box; }
.date-picker button {
  min-height: 0; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; box-shadow: none;
  background: transparent; color: inherit; font: inherit; font-weight: 500; line-height: 1; cursor: pointer;
}
.date-picker button::before, .date-picker button::after { content: none; }
.date-picker button:focus-visible { outline: 2px solid var(--blue, #0057ff); outline-offset: 2px; }

.date-picker-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; margin-bottom: 8px; }
.date-picker-head strong { text-align: center; font-size: 15px; font-weight: 700; }
.date-picker .date-picker-nav { width: 36px; height: 36px; font-size: 22px; color: var(--blue, #0057ff); }
.date-picker .date-picker-nav:hover { background: var(--blue-soft, #dce9ff); }

.date-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; justify-items: center; }
.date-picker-weekday { font-size: 12px; font-weight: 700; color: var(--muted, #5e686b); padding: 4px 0; }
.date-picker .date-picker-day {
  width: 36px; height: 36px; display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.date-picker .date-picker-day:hover { background: var(--cloud, #f0f2f5); }
/* Today: a filled blue circle. */
.date-picker .date-picker-day.is-today { background: var(--blue, #0057ff); color: #fff; font-weight: 700; }
.date-picker .date-picker-day.is-today:hover { background: var(--blue-dark, #073fc4); }
/* The chosen day: a blue ring (with a white gap when it is today, so both read). */
.date-picker .date-picker-day.is-selected { box-shadow: inset 0 0 0 2px var(--blue, #0057ff); color: var(--blue, #0057ff); font-weight: 700; }
.date-picker .date-picker-day.is-today.is-selected { color: #fff; box-shadow: inset 0 0 0 2px var(--blue, #0057ff), inset 0 0 0 4px #fff; }

.date-picker-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line, #d5d7dc); }
.date-picker .date-picker-today { padding: 8px 12px; border-radius: 10px; background: var(--blue-soft, #dce9ff); color: var(--blue, #0057ff); font-weight: 700; }
.date-picker .date-picker-done { padding: 8px 14px; border-radius: 10px; background: var(--blue, #0057ff); color: #fff; font-weight: 700; margin-inline-start: auto; }
.date-picker .date-picker-time {
  flex: 1 1 auto; min-width: 0; width: auto; height: 36px; min-height: 0; margin: 0; padding: 0 8px;
  border: 1px solid var(--control-border, #868d97); border-radius: 10px; background: #fff; font: inherit; font-size: 14px;
}

/* Phones: every button is at least 44px tall there (mobile-enhancements.css), so the days grow to 44px circles and the
   calendar widens to hold seven of them. */
@media screen and (max-width: 760px) {
  .date-picker { width: min(340px, calc(100vw - 16px)); padding: 10px 8px; }
  .date-picker-grid { gap: 0; }
  .date-picker .date-picker-day { width: min(44px, 100%); height: 44px; border-radius: 50%; font-size: 15px; }
  .date-picker .date-picker-nav { width: 44px; height: 44px; }
  .date-picker-head { grid-template-columns: 44px 1fr 44px; }
  .date-picker .date-picker-time { height: 44px; }
}