/*
 * Redaktion des Physiotherapie Zentrums Günzburg: Feinschliff für das Admin-Design „Konkat default“ von ProcessWire.
 *
 * Eingebunden über die Einstellungen von AdminThemeUikit (redaktion/scripts/einrichten.php, Abschnitt 8); dort stehen
 * auch Logo und Hauptfarbe (Ink, im Dunkelmodus Logo-Grün). Die Farben kommen von der Website (src/styles/global.css,
 * docs/DESIGN.md):
 *   Ink #1c2024 · Logo-Grün #b0cb1f nur als Fläche, Unterstrich oder Ring, nie als Schrift auf Hell (1,84:1)
 *   Feldrand #8a8d90 (3,3:1 auf Weiß) · Hinweistext #54595f (7,1:1) · Fehler #b42318 (6,6:1)
 * Jede Farbe steht in light-dark(): ProcessWire schaltet color-scheme um, wenn jemand im Benutzermenü „Dunkel“ wählt.
 * Die Datei ändert nur das Aussehen; Aufbau und Verhalten der Redaktion bleiben die von ProcessWire.
 */

:root {
	--physio-gruen: #b0cb1f;
	--physio-gruen-flaeche: light-dark(#f2f6dc, #2a3010);
	--physio-ring: light-dark(rgb(176 203 31 / 0.55), rgb(176 203 31 / 0.45));
	--physio-feld: light-dark(#ffffff, #161616);
	--physio-feld-gesperrt: light-dark(#f1f1ef, #222222);
	--physio-rand: light-dark(#8a8d90, #6e7276);
	--physio-rand-hover: light-dark(#54595f, #a4a8ab);
	--physio-fokus: light-dark(#1c2024, #b0cb1f);
	--physio-hinweis: light-dark(#54595f, #b4b8bb);
	--physio-fehler: light-dark(#b42318, #ff8a7a);
	--physio-radius: 10px;

	/* Variablen des Designs (admin-custom.css) */
	--pw-text-color: light-dark(#1c2024, #ffffff);
	--pw-button-color: light-dark(#ffffff, #1c2024); /* dunkel: Knopf in Logo-Grün, Schrift Ink */
	--pw-button-hover-background: light-dark(#b0cb1f, #ffffff);
	--pw-button-hover-color: #1c2024;
}

/* Reiter: aktiver Reiter mit Unterstrich in Logo-Grün */
.pw .WireTabs.uk-tab > li.uk-active > a {
	border-bottom-color: var(--physio-gruen);
}

/* Eingabefelder: weiß mit sichtbarem Rand und runden Ecken, wie die Formularfelder der Website --------------------- */

.pw .Inputfields input:not([type="submit"]):not([type="button"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.uk-form-blank),
.pw .Inputfields textarea:not(.uk-form-blank),
.pw .Inputfields select.uk-select:not(.uk-form-blank),
.pw .Inputfields .selectize-control .selectize-input {
	background-color: var(--physio-feld);
	color: var(--pw-text-color);
	border: 1.5px solid var(--physio-rand);
	border-radius: var(--physio-radius);
	box-shadow: var(--physio-feld-schatten, none);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pw .Inputfields input.uk-input:not(.uk-form-small):not(.uk-form-blank) {
	height: 44px;
	padding-inline: 12px;
}

.pw .Inputfields select.uk-select:not([multiple]):not([size]):not(.uk-form-small):not(.uk-form-blank) {
	height: 44px;
	padding-inline: 12px 36px;
	background-position: right 10px center;
}

.pw .Inputfields textarea:not(.uk-form-blank) {
	padding: 10px 12px;
	line-height: 1.6;
}

.pw .Inputfields input:not([type="submit"]):not([type="button"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.uk-form-blank):hover,
.pw .Inputfields textarea:not(.uk-form-blank):hover,
.pw .Inputfields select.uk-select:not(.uk-form-blank):hover,
.pw .Inputfields .selectize-control .selectize-input:hover {
	border-color: var(--physio-rand-hover);
}

/* Fokus: Rand in Ink (dunkel: Logo-Grün) und ein Ring in Logo-Grün */
.pw .Inputfields input:not([type="submit"]):not([type="button"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.uk-form-blank):focus,
.pw .Inputfields textarea:not(.uk-form-blank):focus,
.pw .Inputfields select.uk-select:not(.uk-form-blank):focus,
.pw .Inputfields .selectize-control .selectize-input.focus {
	border-color: var(--physio-fokus);
	box-shadow: 0 0 0 1px var(--physio-fokus), 0 0 0 5px var(--physio-ring);
	outline: none;
}

.pw .Inputfields input::placeholder,
.pw .Inputfields textarea::placeholder {
	color: var(--physio-hinweis);
	opacity: 1;
}

.pw .Inputfields input:not([type="checkbox"]):not([type="radio"]):disabled,
.pw .Inputfields textarea:disabled,
.pw .Inputfields select.uk-select:disabled {
	background-color: var(--physio-feld-gesperrt);
	color: var(--physio-hinweis);
	border-style: dashed;
}

/* Feld mit Fehler (z. B. Pflichtfeld leer): roter Rand wie auf der Website, auch beim Überfahren und im Fokus */
.pw .InputfieldStateError:not(.InputfieldRepeater):not(.InputfieldFieldset) {
	--physio-rand: var(--physio-fehler);
	--physio-rand-hover: var(--physio-fehler);
	--physio-fokus: var(--physio-fehler);
	--physio-feld-schatten: 0 0 0 1px var(--physio-fehler);
}

/* Beschriftungen und Hinweise ------------------------------------------------------------------------------------- */

.pw .InputfieldStateRequired > .InputfieldHeader:first-child::after {
	color: var(--physio-fehler);
}

/* Hinweise unter dem Feld: ruhiger grauer Text statt gelber Fläche */
.pw #main .Inputfields .notes {
	background-color: transparent;
	color: var(--physio-hinweis) !important;
	font-size: 0.875rem;
	line-height: 1.5;
	padding-inline: 0;
}

.pw #main .Inputfields .description {
	color: var(--physio-hinweis) !important;
	line-height: 1.5;
}

/* Auf- und Zuklappen: Pfeil nur zeigen, wenn die Maus über dem Feld ist (Touch: immer sichtbar) */
@media (hover: hover) {
	.pw .Inputfields .Inputfield:not(.InputfieldStateCollapsed) > .InputfieldHeader > i.toggle-icon {
		opacity: 0;
		transition: opacity 0.15s ease;
	}

	.pw .Inputfields .Inputfield:hover > .InputfieldHeader > i.toggle-icon,
	.pw .Inputfields .Inputfield:focus-within > .InputfieldHeader > i.toggle-icon {
		opacity: 1;
	}
}

/* Häkchen und Auswahlpunkte ---------------------------------------------------------------------------------------- */

.pw .Inputfields .uk-checkbox,
.pw .Inputfields .uk-radio {
	width: 20px;
	height: 20px;
	flex: none;
	margin: 0;
	border: 1.5px solid var(--physio-rand);
	background-color: var(--physio-feld);
}

.pw .Inputfields .uk-checkbox {
	border-radius: 5px;
}

.pw .Inputfields .uk-checkbox:checked,
.pw .Inputfields .uk-radio:checked {
	border-color: var(--pw-main-color);
	background-color: var(--pw-main-color);
}

.pw .Inputfields .uk-checkbox:focus-visible,
.pw .Inputfields .uk-radio:focus-visible {
	outline: none;
	border-color: var(--physio-fokus) !important;
	box-shadow: 0 0 0 4px var(--physio-ring);
}

/* Dunkelmodus: Häkchen und Punkt in Ink auf Logo-Grün (Weiß auf Grün wäre kaum lesbar) */
.pw .dark-theme .Inputfields .uk-checkbox:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%231c2024' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 100%;
}

.pw .dark-theme .Inputfields .uk-radio:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3' fill='%231c2024'/%3E%3C/svg%3E") !important;
}

/* Listen ohne Aufzählungspunkte (in Wiederholungen lädt ProcessWire die eigene Listen-CSS nicht immer) */
.pw .Inputfields .InputfieldCheckboxes ul,
.pw .Inputfields .InputfieldRadios ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pw .Inputfields .InputfieldCheckboxes ul > li,
.pw .Inputfields .InputfieldRadios ul > li {
	list-style: none !important;
}

.pw .Inputfields .InputfieldCheckboxes li > label,
.pw .Inputfields .InputfieldRadios li > label,
.pw .Inputfields .InputfieldCheckbox .InputfieldContent > label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	cursor: pointer;
}

/* Mehrfachauswahl nebeneinander (z. B. Abrechnung) und Wochentage der Öffnungszeiten: als Schaltflächen */
.pw .Inputfields .InputfieldCheckboxesFloated,
.pw .Inputfields .Inputfield_tage .InputfieldContent > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pw .Inputfields .InputfieldCheckboxesFloated::before,
.pw .Inputfields .InputfieldCheckboxesFloated::after {
	display: none;
}

.pw .Inputfields .InputfieldCheckboxesFloated > li,
.pw .Inputfields .Inputfield_tage .InputfieldContent > ul > li {
	float: none;
	margin: 0 !important;
	padding: 0;
}

.pw .Inputfields .InputfieldCheckboxesFloated > li > label,
.pw .Inputfields .Inputfield_tage .InputfieldContent > ul > li > label {
	min-height: 40px;
	padding: 6px 16px 6px 10px;
	border: 1.5px solid var(--physio-rand);
	border-radius: 999px;
	background-color: var(--physio-feld);
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.pw .Inputfields .InputfieldCheckboxesFloated > li > label:hover,
.pw .Inputfields .Inputfield_tage .InputfieldContent > ul > li > label:hover {
	border-color: var(--physio-rand-hover);
}

.pw .Inputfields .InputfieldCheckboxesFloated > li > label:has(input:checked),
.pw .Inputfields .Inputfield_tage .InputfieldContent > ul > li > label:has(input:checked) {
	border-color: var(--physio-fokus);
	background-color: var(--physio-gruen-flaeche);
}

.pw .Inputfields .InputfieldCheckboxesFloated > li > label:has(input:focus-visible),
.pw .Inputfields .Inputfield_tage .InputfieldContent > ul > li > label:has(input:focus-visible) {
	box-shadow: 0 0 0 4px var(--physio-ring);
}

.pw .Inputfields .InputfieldCheckboxesFloated > li > label .uk-checkbox:focus-visible,
.pw .Inputfields .Inputfield_tage .InputfieldContent > ul > li > label .uk-checkbox:focus-visible {
	box-shadow: none;
}

/* Einträge in Listen (Wiederholungen, verknüpfte Seiten): runde Ecken ---------------------------------------------- */

.pw .Inputfields .InputfieldAsmSelect .asmListItem,
.pw .Inputfields .InputfieldPageAutocomplete ol li {
	border-radius: var(--physio-radius);
	background-color: var(--physio-feld);
}

.pw .Inputfields .InputfieldRepeater .InputfieldRepeaterItem.InputfieldStateCollapsed > .InputfieldHeader {
	border-radius: var(--physio-radius);
}

.pw .Inputfields .InputfieldRepeater .InputfieldRepeaterItem:not(.InputfieldStateCollapsed) > .InputfieldHeader {
	border-radius: var(--physio-radius) var(--physio-radius) 0 0;
}

/* Bildablage in Einzelbild-Feldern (site/physio/bildablage.php): nur das oberste Bild ist auf der Website ------------ */

.pw .physio-bildablage .gridImages > li.gridImage .gridImage__overflow {
	position: relative;
}

.pw .physio-bildablage .gridImages > li.gridImage .gridImage__overflow::after {
	content: "Nicht auf der Website";
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	padding: 2px 10px;
	border-radius: 999px;
	background-color: light-dark(rgb(255 255 255 / 0.92), rgb(0 0 0 / 0.78));
	color: var(--physio-hinweis);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	pointer-events: none;
}

.pw .physio-bildablage .gridImages > li.gridImage:nth-child(1 of .gridImage) .gridImage__overflow::after {
	content: "Auf der Website";
	background-color: var(--physio-gruen);
	color: #1c2024;
}

.pw .physio-bildablage .gridImages > li.gridImage:not(:nth-child(1 of .gridImage)) .gridImage__overflow img {
	opacity: 0.55;
}