/* ============================================================
   com.amp.nativedatepicker — Modernes Redesign des DatePicker-Popups
   (.datePicker aus Date/Picker.js). Nutzt ausschließlich Style-Variablen,
   folgt daher automatisch Farbschema und Dark Mode.
   `html`-Präfix erhöht die Spezifität gegenüber dem Core-CSS.
   ============================================================ */

html .datePicker {
	width: min(296px, calc(100vw - 16px));
	padding: 12px;
	border: 1px solid var(--wcfDropdownBorderInner);
	border-radius: 12px;
	box-shadow:
		0 12px 32px rgba(0, 0, 0, 0.18),
		0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Kopfzeile: Monat/Jahr + Navigations-Buttons */
html .datePicker > header {
	padding-bottom: 8px;
	gap: 4px;
}

html .datePicker > header > a,
html .datePicker > header > button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wcfDropdownText);
	cursor: pointer;
	visibility: visible;
}

html .datePicker > header > a:hover,
html .datePicker > header > button:hover {
	background-color: var(--wcfDropdownBackgroundActive);
	color: var(--wcfDropdownLinkActive);
}

/* Blättern über min/max hinaus: nur dimmen (Picker klemmt intern selbst) */
html .datePicker > header > a:not(.active),
html .datePicker > header > button:not(.active) {
	opacity: 0.4;
}

html .datePicker > header > span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0;
}

html .datePicker > header select {
	border: 0;
	border-radius: 6px;
	background-color: transparent;
	color: var(--wcfDropdownText);
	font-weight: 600;
	padding: 4px 4px;
	cursor: pointer;
}

html .datePicker > header select:hover,
html .datePicker > header select:focus {
	background-color: var(--wcfDropdownBackgroundActive);
	color: var(--wcfDropdownLinkActive);
}

html .datePicker select.year {
	margin-left: 0;
}

/* Tages-Grid: keine Tabellen-Linien, runde Zellen */
html .datePicker > ul > li {
	border-top: 0;
	gap: 2px;
	margin-top: 2px;
}

html .datePicker > ul > li > a,
html .datePicker > ul > li > span,
html .datePicker > ul > li > a:not(:last-child),
html .datePicker > ul > li > span:not(:last-child) {
	border-right: 0;
	flex: 1 0 0;
	padding: 0;
}

html .datePicker > ul > li.weekdays > span {
	height: 26px;
	line-height: 26px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

html .datePicker > ul > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	text-align: center;
}

html .datePicker > ul > li > a:not(.otherMonth):not(.disabled):not(.active):hover {
	background-color: var(--wcfDropdownBackgroundActive);
	color: var(--wcfDropdownLinkActive);
}

html .datePicker > ul > li > a.active {
	background-color: var(--wcfButtonPrimaryBackground);
	color: var(--wcfButtonPrimaryText);
	font-weight: 600;
}

html .datePicker > ul > li > a:focus-visible {
	outline: 2px solid var(--wcfButtonPrimaryBackground);
	outline-offset: -2px;
}

/* Fußzeile: Uhrzeit-Auswahl wie Eingabefelder */
html .datePicker > footer {
	border-top: 1px solid var(--wcfDropdownBorderInner);
	margin-top: 10px;
	padding: 12px 0 0;
}

html .datePicker > footer select {
	background-color: var(--wcfInputBackground);
	border: 1px solid var(--wcfInputBorder);
	border-radius: 6px;
	color: var(--wcfInputText);
	padding: 4px 8px;
	cursor: pointer;
}

html .datePicker > footer select:hover,
html .datePicker > footer select:focus {
	background-color: var(--wcfInputBackgroundActive);
	border-color: var(--wcfInputBorderActive);
	color: var(--wcfInputTextActive);
}

/* ============================================================
   input[type="datetime-local"] fehlt in den Core-Styles (form.scss kennt
   nur date/datetime/time), daher hier das Pendant zum input-Mixin des
   Cores — genutzt vom optionalen NativeDateFormField.
   ============================================================ */
input[type="datetime-local"] {
	margin: 0;
	background-color: var(--wcfInputBackground);
	border: 1px solid var(--wcfInputBorder);
	border-radius: var(--wcfBorderRadius);
	color: var(--wcfInputText);
	font-weight: 400;
	outline: none;
	padding: 4px 8px;
	font-family: var(--wcfFontFamily);
	line-height: var(--wcfFontLineHeight);
}

@media (min-width: 1025px) {
	input[type="datetime-local"] {
		font-size: var(--wcfFontSizeDefault);
	}
}

input[type="datetime-local"]:focus,
input[type="datetime-local"]:hover {
	background-color: var(--wcfInputBackgroundActive);
	border-color: var(--wcfInputBorderActive);
	color: var(--wcfInputTextActive);
}

input[type="datetime-local"][disabled],
input[type="datetime-local"].disabled {
	background-color: var(--wcfInputDisabledBackground) !important;
	border-color: var(--wcfInputDisabledBorder) !important;
	color: var(--wcfInputDisabledText) !important;
}

@media (pointer: coarse) {
	input[type="datetime-local"] {
		font-size: 16px;
		padding: 6px 8px;
	}
}

/* Browser-Popup (Kalender/Uhrzeit) und Kalender-Icon an das Farbschema des
   Styles anpassen — das Popup selbst rendert der Browser, über color-scheme
   folgt es aber dem Hell-/Dunkel-Modus von WoltLab */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
	color-scheme: light;
}

html[data-color-scheme="dark"] input[type="date"],
html[data-color-scheme="dark"] input[type="datetime-local"],
html[data-color-scheme="dark"] input[type="time"] {
	color-scheme: dark;
}

/* Kalender-Icon in der Textfarbe des Eingabefelds statt Browser-Schwarz
   (Chromium/WebKit; Firefox ignoriert die Regel) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.7;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
}

/* Fokussiertes Datums-Segment (Tag/Monat/Jahr/Stunde/Minute) beim Tippen in
   den WoltLab-Primärfarben statt Browser-Blau (Chromium/WebKit) */
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-day-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-month-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-year-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-ampm-field:focus,
input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input[type="time"]::-webkit-datetime-edit-minute-field:focus,
input[type="time"]::-webkit-datetime-edit-ampm-field:focus {
	background-color: var(--wcfButtonPrimaryBackground);
	color: var(--wcfButtonPrimaryText);
	border-radius: 2px;
	outline: none;
}