/* A single picker is shared by native-value and Django admin inputs. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { opacity: .65; }
.vDateField ~ .datetimeshortcuts, .vTimeField ~ .datetimeshortcuts { display: none !important; }
input[type="text"][data-xgz-date-kind], input.vDateField, input.vTimeField {
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a6b9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M7 3v4M17 3v4M3 10h18'/%3E%3C/svg%3E");
  background-position: right 10px center; background-repeat: no-repeat; background-size: 16px;
}
input[type="text"][data-xgz-date-kind="time"], input.vTimeField {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a6b9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.xgz-date-picker {
  position: fixed; z-index: 10000; width: min(320px, calc(100vw - 16px));
  padding: 12px; overflow: auto; background: #fff; color: var(--xgz-admin-ink, #17243b);
  border: 1px solid var(--xgz-admin-border, #d2dbe7); border-radius: 8px; box-shadow: 0 10px 28px #10182826;
  font-size: 14px; line-height: 1.4;
}
.xgz-date-picker__header { display: grid; grid-template-columns: var(--xgz-admin-control-height, 36px) minmax(0, 1fr) var(--xgz-admin-control-height, 36px); align-items: center; gap: 6px; }
.xgz-date-picker__month-controls { display: flex; justify-content: center; gap: 6px; min-width: 0; }
.xgz-date-picker__month-controls > div:first-child { flex: 0 1 96px; }
.xgz-date-picker__month-controls > div:last-child { flex: 0 1 76px; }
.xgz-date-picker .xgz-date-picker__month-controls select { appearance: none; padding-left: 8px; padding-right: 32px; }
.xgz-date-picker__header label, .xgz-date-picker__time label { display: grid; gap: 3px; font-size: 12px; color: var(--xgz-admin-muted, #596579); }
.xgz-date-picker input, .xgz-date-picker select { width: 100%; min-width: 0; height: 34px; padding: 4px 6px; border: 1px solid var(--xgz-admin-border, #d2dbe7); border-radius: 6px; background: #fff; color: var(--xgz-admin-ink, #17243b); }
.xgz-date-picker button.xgz-admin-button { border-color: transparent; background: transparent; color: var(--xgz-admin-ink, #17243b); }
.xgz-date-picker button:hover { background: #eef4ff; }
.xgz-date-picker button:focus-visible, .xgz-date-picker input:focus-visible, .xgz-date-picker select:focus-visible { outline: 2px solid #1d63da; outline-offset: 1px; }
.xgz-date-picker__week, .xgz-date-picker__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.xgz-date-picker__week { margin-top: 10px; color: var(--xgz-admin-muted, #596579); font-size: 12px; }
.xgz-date-picker__grid button[aria-pressed="true"] { background: var(--xgz-admin-blue, #1d63da); color: #fff; }
.xgz-date-picker__shortcuts { display: flex; align-items: center; gap: 12px; }
.xgz-date-picker__shortcuts button.xgz-admin-button { color: var(--xgz-admin-muted, #596579); }
.xgz-date-picker__shortcuts button.xgz-date-picker__today { color: var(--xgz-admin-blue, #1d63da); }
.xgz-date-picker__time { display: flex; gap: 8px; margin-top: 12px; }
.xgz-date-picker__time label { flex: 1 1 0; }
.xgz-date-picker__actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.xgz-date-picker__actions--date { justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--xgz-admin-border, #d2dbe7); }
.xgz-date-picker__actions > button.xgz-admin-button--text { color: var(--xgz-admin-blue, #1d63da); }
.xgz-date-picker__error { margin: 8px 0 0; color: #b42318; }
@media (max-width: 300px) {
  .xgz-date-picker__header > button:first-child { grid-column: 1; grid-row: 1; }
  .xgz-date-picker__header > button:last-child { grid-column: 3; grid-row: 1; }
  .xgz-date-picker__month-controls { grid-column: 1 / -1; grid-row: 2; }
}