/* ==========================================================================
   SCHSBM DATE PICKER
   ==========================================================================
   Shared by the public theme and wp-admin, which is why every custom property
   carries a fallback — the theme's presets do not exist on an admin screen.

   The stock control was the one part of a form that announced which browser
   you were in. date-picker.js replaces the native input on pointer devices —
   replaces, not covers: a fake calendar painted over a live native control
   gives a field two pickers and two answers to "what is focused".

   A coarse pointer keeps the native control, so a phone still gets its own
   date wheel, which is better than anything rebuilt here and already
   localised. Everything below therefore only ever paints on desktop. */

.schsbm-datepicker { position: relative; }
.schsbm-datepicker__control { position: relative; display: block; }
.schsbm-datepicker__input { width: 100%; padding-right: 44px; }

.schsbm-datepicker__button {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--schsbm-radius-sm, 4px);
	background: transparent;
	color: var(--schsbm-text-muted, #6b7280);
	cursor: pointer;
}
.schsbm-datepicker__button:hover { color: var(--wp--preset--color--blue-core, #000066); background: var(--wp--preset--color--ink-100, #f6f7fb); }
.schsbm-datepicker__button svg { width: 18px; height: 18px; }

.schsbm-datepicker__panel {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	min-width: 292px;
	padding: 14px;
	background: var(--wp--preset--color--white, #ffffff);
	border: 1px solid var(--wp--preset--color--ink-200, #e9eaf2);
	border-radius: var(--schsbm-radius, 8px);
	box-shadow: var(--schsbm-shadow-md, 0 12px 32px rgba(11, 13, 26, .12));
}

.schsbm-datepicker__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}
.schsbm-datepicker__caption {
	font-weight: 700;
	font-size: .875rem;
	color: var(--wp--preset--color--blue-core, #000066);
}
.schsbm-datepicker__nav {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--ink-200, #e9eaf2);
	border-radius: var(--schsbm-radius-sm, 4px);
	background: var(--wp--preset--color--white, #ffffff);
	color: var(--wp--preset--color--blue-core, #000066);
	cursor: pointer;
}
.schsbm-datepicker__nav:hover { border-color: var(--wp--preset--color--blue-core, #000066); }
.schsbm-datepicker__nav svg { width: 15px; height: 15px; }

.schsbm-datepicker__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.schsbm-datepicker__dayname {
	display: grid;
	place-items: center;
	height: 28px;
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--schsbm-text-muted, #6b7280);
}

.schsbm-datepicker__day {
	display: grid;
	place-items: center;
	height: 34px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--schsbm-radius-sm, 4px);
	background: transparent;
	font: inherit;
	font-size: .8125rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink-900, #0b0d1a);
	cursor: pointer;
}
.schsbm-datepicker__day:hover:not(:disabled) { background: var(--wp--preset--color--ink-100, #f6f7fb); }
.schsbm-datepicker__day.is-outside { color: var(--schsbm-text-muted, #6b7280); }
.schsbm-datepicker__day.is-today { border-color: var(--wp--preset--color--ink-300, #d8dae5); font-weight: 700; }
.schsbm-datepicker__day.is-in-range { background: var(--wp--preset--color--blue-tint, #e9e9f1); }
.schsbm-datepicker__day.is-selected {
	background: var(--wp--preset--color--blue-core, #000066);
	border-color: var(--wp--preset--color--blue-core, #000066);
	color: var(--wp--preset--color--white, #ffffff);
	font-weight: 700;
}
.schsbm-datepicker__day:disabled { opacity: .35; cursor: default; }

.schsbm-datepicker__foot {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--wp--preset--color--ink-200, #e9eaf2);
}
.schsbm-datepicker__action {
	padding: 4px 2px;
	border: 0;
	background: none;
	font: inherit;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--blue-core, #000066);
	cursor: pointer;
}
.schsbm-datepicker__action:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The panel would otherwise run off the right edge of a narrow column. */
@media (max-width: 480px) {
	.schsbm-datepicker__panel { left: auto; right: 0; min-width: 0; width: min(292px, calc(100vw - 48px)); }
}