/**
 * Formular-Styling für den App-Bereich (Bricksforge Pro Forms) - und der
 * Boden für <button>, weil er auf denselben Seiten gelten muss.
 *
 * Geladen auf allen Akademie-App-Seiten über
 * Sichtwechsel_App_Core_Assets::enqueue_scripts() (includes/core/class-assets.php)
 * - dieselbe Seitenerkennung wie app.js, keine zusätzliche Logik nötig.
 *
 * ---------------------------------------------------------------------
 * Terminstatus-Radios als Segmented-Buttons (Auftrag Runde 15, Punkt 2)
 * ---------------------------------------------------------------------
 *
 * DOM-Struktur NICHT geraten, sondern gegen den Bricksforge-Quellcode
 * verifiziert (3.1.8.7,
 * includes/elements/pro-forms/elements/RadioWrapper.php, render()):
 *
 *     <div class="brxe-brf-pro-forms-field-radio-wrapper pro-forms-builder-field
 *                 form-group {eigene cssClass}"
 *          data-field-type="radio" data-element-id="...">
 *       <label>Terminstatus</label>
 *       <ul class="options-wrapper">
 *         <li>
 *           <input id="form-field-{id}-{random}" type="radio" value="geplant" checked>
 *           <label for="form-field-{id}-{random}">Geplant</label>
 *         </li>
 *         ...
 *       </ul>
 *     </div>
 *
 * Wichtig für das Scoping: Eine im Bricks-Builder am Radio-Feld
 * gesetzte CSS-Klasse landet auf dem äußeren <div> (RadioWrapper.php:198,
 * `$this->set_attribute( '_root', 'class', $settings['cssClass'] )`) -
 * anders als beim einzelnen Radio-Element (Radio.php), wo cssClass auf
 * dem <input> landet. Deshalb ist `.terminstatus-options` hier als
 * Wrapper-Klasse nutzbar und alle Regeln unten hängen daran, statt
 * global jedes Radio-Feld der App umzustylen.
 *
 * Farbpunkt pro Option: Im Auftrag waren Modifier-Klassen pro Option
 * vorgesehen (.terminstatus-option--geplant o. Ä.). Das ist mit dem
 * Radio-Feld nicht umsetzbar - die Optionen kommen aus einem Repeater
 * (`Helper::parse_options( $settings )`), alle <li> erhalten dieselben
 * Attribute (`$this->render_attributes( 'li' )`), es gibt keinen
 * Ansatzpunkt für eine Klasse pro Option. Stattdessen wird über den
 * `value` des zugehörigen <input> adressiert
 * (`input[value="geplant"] + label`). Ergebnis identisch, zusätzlicher
 * Vorteil: Die Werte sind exakt die ACF-Choice-Keys des Felds
 * termin_status (geplant/verschoben/abgesagt, verifiziert gegen
 * acf-json/group_ausbildungstermin.json) - es kann also keine
 * Abweichung zwischen Klassenname und tatsächlichem Feldwert entstehen.
 *
 * VORAUSSETZUNG im Bricks-Builder: Am Pro-Forms-Formular-Element unter
 * "Fields Styles" → "Radio Buttons" die Option "Custom Style"
 * AUSGESCHALTET lassen. Ist sie aktiv (zusammen mit "Is Card"), legt
 * Bricksforge eigene Regeln mit sehr hoher Spezifität an
 * (`:where(.brxe-brf-pro-forms)[data-radio-custom][data-radio-card]
 * .form-group[data-field-type=radio]:not([data-ignore-custom-styles])
 * .options-wrapper label`, Spezifität 0-6-1), die die Regeln hier
 * teilweise überschreiben würden. Ohne diese Option konkurrieren nur
 * Bricksforges Basisregeln mit Spezifität 0-1-1, die hier sauber
 * überschrieben werden.
 */

/* ---------------------------------------------------------------------
 * Boden für <button> im App-Bereich
 *
 * 🔴 AN DER BAUFORM, NICHT AN EINZELNEN GRIFFEN (14.09.2026). Jedes Div
 * mit Custom-Tag "button" in Bricks wird ein echtes <button> - und
 * behält ohne eigene Regel den Browser-Standard: grauer Grund
 * (ButtonFace), schwarze Schrift (ButtonText). Aufgefallen an den zwei
 * Hilfe-Griffen, betroffen ist jedes solche Element. Die Resets einzelner
 * Module (dropdown.css, sidebar.css, .app-button, Karussellpunkte)
 * bleiben: Sie räumen mehr als Grund und Farbe.
 *
 * GRENZE: das Attribut data-sw-app am äussersten Bricks-Container der
 * App-Oberfläche (Topbar, Sidebar, Inhalt, Hilfe-Panel). In Bricks
 * ohne Wert setzen, keinen Tag.
 *
 *   Nicht eine Klasse am <html>: Diese Datei lädt ohnehin nur auf
 *   /akademie/-Seiten (class-assets.php). Eine Klasse am <html>
 *   grenzte nichts weiter ein - alles auf derselben Seite läge mit
 *   darin, auch das Amelia-Panel und Bricks' eigene Elemente. Der
 *   Wrapper grenzt auf das Element ein.
 *
 *   Nicht global auf button: Amelia-Panel und Bricks' eigene Elemente
 *   bleiben unangetastet.
 *
 * ⚠️ OHNE ATTRIBUT GREIFT DIE REGEL NIRGENDS - sichtbar daran, dass
 * graue Knöpfe grau bleiben.
 * ⚠️ DAS AMELIA-PANEL DARF NICHT IM WRAPPER LIEGEN. Täte es das, gälte
 * der Boden auch dort.
 *
 * GEWICHTUNG (0,0,1) über :where() - unter JEDER Klasse, schon unter
 * einer einzelnen: Bricks-Klassen (0,2,0), Amelias Klassen,
 * .app-button. Gegen den Browser-Standard gewinnt trotzdem jede
 * Autorenregel. Gleichstand nur mit anderen reinen Element-Selektoren
 * (button { … }) - dort entscheidet die Reihenfolge.
 *
 * Prüfstein vor und nach dem Hochladen: swButtonBoden() listet jeden
 * Button im Wrapper und markiert, wer vom Browser-Standard lebt.
 * ------------------------------------------------------------------- */

:where([data-sw-app]) button {
	color: inherit;
	background: none;
}

/* ---------------------------------------------------------------------
 * Terminstatus-Farben - eine Quelle für alle Stellen
 *
 * Genutzt von den Radio-Punkten im Termin-Modal (unten) UND vom
 * Statuspunkt in den Termine-Listen (assets/css/list-engine.css).
 * Bewusst hier definiert und nicht in list-engine.css: Diese Datei wird
 * auf ALLEN Akademie-App-Seiten geladen, list-engine.css nur auf Seiten
 * mit einem Listen-Shortcode - und ein Listen-Shortcode liegt immer auf
 * einer App-Seite. Die Tokens sind dadurch überall verfügbar, wo sie
 * gebraucht werden.
 *
 * Werte von Sven bestätigt (Auftrag Runde 15, Punkt 2); Runde 18 hat sie
 * ausdrücklich auch für den Listen-Punkt übernommen - deshalb Tokens
 * statt derselben Hex-Werte an zwei Stellen.
 * ------------------------------------------------------------------- */

:root {
	--terminstatus-geplant: #3C4C24;
	--terminstatus-verschoben: #D8B45E;
	--terminstatus-abgesagt: #AC3A31;
}

/* ---------------------------------------------------------------------
 * Hilfsklasse zum Ein-/Ausblenden (Termin-Modal: Moduswechsel und
 * Lösch-Bestätigung, assets/js/modules/admin/termin-modal.js)
 *
 * !important ist hier bewusst gesetzt und ausnahmsweise angemessen:
 * Die Klasse hat als einzige Aufgabe, ein Element zuverlässig
 * auszublenden - unabhängig davon, welchen display-Wert Bricks dem
 * Element über seine eigenen Element-/Klassenregeln mitgibt (die bei
 * gleicher Spezifität je nach Ladereihenfolge gewinnen könnten).
 * ------------------------------------------------------------------- */

.is-hidden {
	display: none !important;
}

/* Optionen nebeneinander. Bricksforges Basisregel setzt auf
   .options-wrapper nur flex-wrap/list-style/margin/padding, aber kein
   display:flex - deshalb hier explizit. */
.terminstatus-options .options-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.terminstatus-options .options-wrapper li {
	display: flex;
	margin: 0;
}

/* Nativen Radio-Button ausblenden, ohne ihn aus dem Accessibility-Tree
   zu nehmen: Nicht display:none/visibility:hidden (beides würde ihn für
   Screenreader und Tastaturbedienung unerreichbar machen), sondern
   unsichtbar an Ort und Stelle. Der Fokus-Zustand wird unten über
   :focus-visible am zugehörigen Label sichtbar gemacht. */
.terminstatus-options .options-wrapper input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/* Label als klickbare Fläche - unselektierter Zustand:
   heller Hintergrund, dünner grauer Rand. */
.terminstatus-options .options-wrapper input[type="radio"] + label {
	display: inline-flex;
	align-items: center;
	column-gap: 8px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--brand-app-3);
	border-radius: 10px;
	background-color: #fff;
	color: #3C4C24;
	font-size: var(--text-s);
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s linear, border-color .15s linear;
}

.terminstatus-options .options-wrapper input[type="radio"]:hover + label {
	border-color: var(--brand-green-60);
}

/* Selektierter Zustand: gefüllter Hintergrund + sichtbarer Rand -
   dieselben Tokens wie beim aktiven Filter-Button der Listen-Engine
   (assets/css/list-engine.css), damit "aktiv" in der App überall
   gleich aussieht. */
.terminstatus-options .options-wrapper input[type="radio"]:checked + label {
	background-color: var(--brand-green-60);
	border-color: var(--brand-green-60);
}

/* Tastaturfokus sichtbar machen - ersetzt den Fokusring, der durch das
   Ausblenden des nativen Inputs verloren geht. :focus-visible statt
   :focus, damit ein reiner Mausklick keinen Ring erzeugt. */
.terminstatus-options .options-wrapper input[type="radio"]:focus-visible + label {
	outline: 2px solid #3C4C24;
	outline-offset: 2px;
}

/* Farbpunkt pro Statusoption. Grundform hier, Farbe je Option unten
   über den value des zugehörigen Inputs (siehe Dateikopf). */
.terminstatus-options .options-wrapper input[type="radio"] + label::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: currentColor;
}

.terminstatus-options .options-wrapper input[type="radio"][value="geplant"] + label::before {
	background-color: var(--terminstatus-geplant);
}

.terminstatus-options .options-wrapper input[type="radio"][value="verschoben"] + label::before {
	background-color: var(--terminstatus-verschoben);
}

.terminstatus-options .options-wrapper input[type="radio"][value="abgesagt"] + label::before {
	background-color: var(--terminstatus-abgesagt);
}

/* ---------------------------------------------------------------------
 * Überarbeitungs-Workflow auf der Seite "Öffentliche Seite"
 * (assets/js/modules/public-page/profil-status.js)
 *
 * Die Elemente selbst baut Sven in Bricks und gestaltet sie dort. Hier
 * steht nur, was Bricks nicht leisten kann: die statusabhängige
 * Sichtbarkeit und die Statusfarbe.
 * ------------------------------------------------------------------- */

/* Hinweis-Box bleibt verborgen, bis das Skript entschieden hat.

   Ohne diese Vorblendung blitzte der im Builder hinterlegte
   Platzhaltertext bei jedem Seitenaufbau kurz auf - bei einer Box, die
   "hier stimmt etwas nicht" bedeutet, wäre das eine echte
   Fehlinformation.

   Bewusster Preis: Läuft das JS nicht, bleibt die Box dauerhaft
   verborgen. Das ist die richtige Richtung für den Fehlerfall - eine
   fälschlich angezeigte Überarbeitungsaufforderung ist schlimmer als
   eine fehlende. Der Status steht zusätzlich in der Pille. */
[data-profil-hinweis="box"]:not([data-profil-hinweis-bereit]) {
	display: none;
}

/* Zeilenumbrüche der Rückmeldung erhalten. Das Skript setzt den Text
   per textContent (nicht innerHTML, da Freitext) - ohne pre-line
   stünde eine mehrzeilige Rückmeldung als ein Absatz da. */
[data-profil-hinweis="text"] {
	white-space: pre-line;
}

/* ---------------------------------------------------------------------
 * CSV-Import: Vorschau-Dialog mit fester Höhe
 *
 * BEFUND 01.09.2026, live beim Import von Runde 01: Die Vorschau
 * rendert alle Zeilen ohne Höhenbegrenzung. Bei rund fünfzig Terminen
 * wuchs der Dialog über den Bildschirm hinaus, "Import durchführen" und
 * "Abbrechen" lagen unterhalb des sichtbaren Bereichs, und die Seite
 * dahinter war durch das Modal gesperrt - der Import ließ sich nicht
 * abschließen und nicht abbrechen.
 *
 * DIE ZEILENLISTE WIRD NICHT GEKÜRZT. Die Vorschau ist genau dafür da,
 * dass man ALLES prüfen kann, bevor geschrieben wird. Sie wird nur
 * scrollbar.
 *
 * ⚠️ min-height: 0 AN DEN SCROLLBEREICHEN - das ist die Stelle, an der
 * dieser Fix üblicherweise scheitert: Ein Flex-Kind hat als Vorgabe
 * min-height: auto und schrumpft deshalb NICHT unter seine
 * Inhaltshöhe. overflow-y: auto allein bewirkt dann gar nichts, das
 * Kind wächst weiter und schiebt den Fußbereich hinaus. Erst
 * min-height: 0 erlaubt das Schrumpfen und damit den Bildlauf.
 *
 * ZWEI SCHICHTEN, weil der innere Aufbau des Dialogs aus Bricks kommt
 * und hier nicht bekannt ist:
 *
 *   (a) Die Karte bekommt die Höhengrenze und wird zur Flex-Spalte. Wo
 *       die Sektionen direkte Kinder sind, tragen sie den Bildlauf,
 *       und Kopf- wie Fußbereich bleiben stehen.
 *   (b) Die Listen selbst bekommen zusätzlich eine eigene Obergrenze.
 *       Die wirkt UNABHÄNGIG von der Verschachtelung - selbst wenn (a)
 *       wegen eines zwischengeschalteten Wrappers nicht greift, kann
 *       die Karte dadurch nicht mehr über den Bildschirm wachsen.
 *
 * Die Karte selbst trägt overflow-y: auto und ausdrücklich NICHT
 * overflow: hidden: Sollte der Aufbau von beiden Annahmen abweichen,
 * ist der Fußbereich dann immer noch scrollbar erreichbar. Lieber ein
 * zweiter Bildlauf als ein abgeschnittener Knopf.
 * ------------------------------------------------------------------- */

[data-termine-csv-summary] [data-toggle-content] {
	/* dvh zuerst als vh-Rückfall für ältere Browser, dann dvh - die
	   letzte gültige Regel gewinnt. dvh rechnet die eingeblendete
	   Adressleiste in Safari mit; mit vh allein läge der Fußbereich
	   auf dem Handy genau dahinter. */
	max-height: min(85vh, 900px);
	max-height: min(85dvh, 900px);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

/* Kopf- und Fußbereich behalten ihre Höhe. flex-shrink: 0 gilt für
   ALLE direkten Kinder - was scrollen soll, hebt es unten selbst
   wieder auf. So bleibt jeder Baustein sichtbar, den Sven im Builder
   ergänzt, ohne dass hier eine Zeile nachgetragen werden muss. */
[data-termine-csv-summary] [data-toggle-content] > * {
	flex-shrink: 0;
}

/* Der Zeilenbereich dazwischen scrollt. */
[data-termine-csv-summary] [data-toggle-content] > [data-termine-csv-section] {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

/* Schicht (b): verschachtelungsunabhängige Obergrenze der Listen. */
[data-termine-csv-summary] [data-termine-csv-list],
[data-termine-csv-summary] [data-termine-csv-errors],
[data-termine-csv-summary] [data-termine-csv-karteileichen] {
	max-height: min(45vh, 380px);
	min-height: 0;
	overflow-y: auto;
}

/* Die eingefügte Kopfzeile mit den Zahlen (siehe
   assets/js/modules/admin/termine-csv-import.js). Sie steht dort, wo
   sonst gescrollt werden müsste, um dieselbe Auskunft zu bekommen. */
.csv-summary__zahlen {
	margin: 0 0 12px;
	font-weight: 600;
}

@media (max-width: 767px) {
	[data-termine-csv-summary] [data-toggle-content] {
		max-height: 90vh;
		max-height: 90dvh;
	}

	[data-termine-csv-summary] [data-termine-csv-list],
	[data-termine-csv-summary] [data-termine-csv-errors],
	[data-termine-csv-summary] [data-termine-csv-karteileichen] {
		max-height: 50vh;
		max-height: 50dvh;
	}
}

/* ---------------------------------------------------------------------
 * Passwort-Checkliste (/akademie/einstellungen/)
 *
 * Markup baut assets/js/modules/app/passwort-checkliste.js; in Bricks
 * steht nur ein leeres Element mit [data-passwort-checkliste].
 *
 * DREI ZUSTÄNDE, nicht zwei: neutral (noch nichts getippt), erfüllt,
 * offen. Eine rote Liste, bevor jemand das erste Zeichen eingegeben
 * hat, liest sich wie ein Vorwurf - deshalb bleibt sie zunächst grau.
 *
 * FARBEN AUS DEN STATUS-TOKENS, keine neuen Werte. Fallbacks tragen
 * jeweils den Wert, der in diesem Stylesheet ohnehin schon steht.
 * ------------------------------------------------------------------- */

.passwort-checkliste {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.passwort-checkliste__punkt {
	display: flex;
	align-items: flex-start;
	column-gap: 8px;
	margin-bottom: 4px;
	font-size: var(--text-s);
	line-height: 1.45;

	/* Neutral: dieselbe gedämpfte Farbe wie sonstige Nebentexte im
	   App-Bereich. */
	color: var(--status-neutral-dark, #B7B7B2);
}

/* Das Zeichen ist ein Pseudo-Element, kein Buchstabe im Markup: So
   ändert sich mit dem Zustand nur CSS, und Vorlesesoftware bekommt es
   gar nicht erst zu hören (das Element trägt aria-hidden). */
.passwort-checkliste__zeichen::before {
	content: '◦';
	display: inline-block;
	width: 1em;
	text-align: center;
}

.passwort-checkliste__punkt.is-erfuellt {
	color: var(--status-green-dark, #3C4C24);
}

.passwort-checkliste__punkt.is-erfuellt .passwort-checkliste__zeichen::before {
	content: '✓';
}

.passwort-checkliste__punkt.is-offen {
	color: var(--status-red-dark);
}

.passwort-checkliste__punkt.is-offen .passwort-checkliste__zeichen::before {
	content: '×';
}

/* ---------------------------------------------------------------------
 * Meldungen und E-Mail-Zustand (/akademie/einstellungen/)
 *
 * Das Markup kommt aus den Bricks-Tags in includes/einstellungen.php,
 * nicht aus JavaScript: Es hängt an einem Zustand, den der Server
 * kennt, und soll ohne Flackern schon im ersten Bild stehen.
 *
 * ⚠️ AUSBLENDEN ÜBER DECKKRAFT, NICHT ÜBER display ODER height: Die
 * Meldung steht unter dem Knopf. Verschwände ihr Platz, ruckte auf
 * schmalen Bildschirmen alles darunter nach oben - fünf Sekunden nach
 * dem Speichern, ohne dass jemand etwas angefasst hat.
 * visibility:hidden nimmt sie zusätzlich aus der Vorlesereihenfolge,
 * behält aber die Höhe.
 *
 * ⚠️ NUR --erfolg BLENDET AUS. Eine Fehlermeldung, die von selbst
 * verschwindet, ist eine Fehlermeldung, die niemand gelesen hat.
 * ------------------------------------------------------------------- */

.sw-hinweis {
	display: flex;
	align-items: flex-start;
	column-gap: 8px;
	margin: 8px 0 0;
	font-size: var(--text-s);
	line-height: 1.45;
}

.sw-hinweis--erfolg {
	color: var(--status-green-dark, #2C451C);
	opacity: 1;
	visibility: visible;
	transition: opacity 400ms ease, visibility 0s linear 400ms;
}

.sw-hinweis--erfolg.is-verblasst {
	opacity: 0;
	visibility: hidden;
}

.sw-hinweis--fehler {
	color: var(--status-red-dark);
}

/* Das Zeichen ist ein Pseudo-Element, kein Buchstabe im Text - wie in
   der Passwort-Checkliste. Vorlesesoftware liest damit den Satz und
   nicht "Häkchen". */
.sw-hinweis--erfolg::before {
	content: '✓';
	flex: 0 0 auto;
	width: 1em;
	text-align: center;
}

/* Wer Bewegung abbestellt hat, bekommt den Wechsel ohne Überblendung. */
@media (prefers-reduced-motion: reduce) {
	.sw-hinweis--erfolg {
		transition: none;
	}
}

/* Der graue Erklärsatz unter dem E-Mail-Feld, solange nichts offen
   ist. */
.sw-email-erklaerung {
	margin: 6px 0 0;
	font-size: var(--text-s);
	line-height: 1.45;
	color: var(--status-neutral-dark, #B7B7B2);
}

/* Die auffällige Box, solange eine Adressänderung auf ihre Bestätigung
   wartet. Sie hängt an einem Zustand, nicht an einem Ereignis, und
   blendet deshalb NICHT aus. */
.sw-email-offen {
	margin: 8px 0 0;
	padding: 12px 14px;

	/* Die Fläche ist fast weiss. Ohne diese Kante stünde die Box auf
	   der weissen Karte praktisch unsichtbar da - und sie soll
	   auffallen: Sie trägt den einzigen Hinweis darauf, dass die neue
	   Adresse noch nicht gilt. Links statt ringsum, damit es eine
	   Markierung bleibt und kein Kasten.

	   Die beiden Zeilen gehören zusammen und dürfen nicht getrennt
	   werden: Erst setzt die Kurzschreibweise alles zurück, dann
	   kommt die eine Kante dazu. */
	border: none;
	border-left: 3px solid var(--brand-green-800);

	/* ⚠️ NUR EINDEUTIG DEFINIERTE TOKENS (04.09.2026): --brand-red-100
	   ist im Core Framework doppelt vergeben (#EDEADF und #FCF0D2,
	   siehe 15_Design_Tokens_Core_Framework.md, Abschnitt 7c) - welcher
	   Wert gewinnt, hängt an der Ausgabereihenfolge. Der Ton dieser Box
	   hinge damit an einer Zufälligkeit. */
	background-color: var(--brand-yellow-100);
	border-radius: 8px;
	font-size: var(--text-s);
	line-height: 1.45;
}

.sw-email-offen__titel {
	margin: 0 0 4px;
	font-weight: 600;
}

.sw-email-offen__text {
	margin: 0;
}

/* ⚠️ KEINE GEDÄMPFTE FARBE MEHR: Auf weissem Grund mit Rahmen war das
   helle Grau lesbar, auf dem Beige der Fläche steht Hell auf Hell.
   Die Zeile erbt jetzt die Textfarbe der Box. */
.sw-email-offen__aktionen {
	margin: 8px 0 0;
}

.sw-email-offen__aktion {
	text-decoration: underline;
}

/* =====================================================================
 * Ungespeicherte Änderungen (assets/js/modules/forms/form-unsaved.js)
 *
 * 🔴 DER ANLASS (09.09.2026): Nach einem Bild-Upload zeigte die
 * Fortschrittsanzeige den Punkt als erledigt, gespeichert war er aber
 * nicht. Zwei Begleiterinnen liefen in eine Absage des
 * Einreichen-Knopfs, die den Grund nicht nannte.
 *
 * Der Zustand liegt als Klasse am <html> - dieselbe Bauform wie bei
 * Sidebar und Hilfe-Panel. Die Statuspille sitzt oberhalb des
 * Formulars und käme an einen Zustand am Formular nicht heran.
 *
 * Das JS schaltet die Klasse und tauscht Texte. Alles Sichtbare hängt
 * hier daran - und ist über Custom Properties einstellbar, ohne dass
 * jemand diese Datei anfassen muss.
 *
 * ⚠️ SPEZIFITÄT: Eine Bricks-Klasse ist zwei Klassen (0,2,0) und steht
 * inline im <head>. Die Regeln hier stehen deshalb bei mindestens
 * (0,3,0) - dreifach geschriebenes Attribut, dasselbe Mittel wie beim
 * Drawer und beim Hilfe-Panel.
 * ================================================================== */

:root {
	/* Der warme Ton, den die App schon für "verschoben" benutzt
	   (assets/css/list-engine.css). Kein neu erfundener Wert - und
	   überschreibbar, ohne diese Datei anzufassen. */
	--sw-form-unsaved-bg: #F0E4C8;
	--sw-form-unsaved-color: inherit;
	--sw-form-submit-disabled-opacity: .5;
}

/* ---------------------------------------------------------------------
 * Die Statuspille - eine von sechs
 *
 * 🔴 NICHT EINE PILLE, SONDERN FÜNF (Nachtrag 09.09.2026). Im Formular
 * liegen fünf gleich gebaute Pillen (Neutral, Yellow, Yellow 2, Green,
 * Red), von denen Bricks je nach Profilstatus eine einblendet -
 * serverseitig über Bedingungen auf {acf_profile_status}, siehe
 * modules/public-page/profil-status.js. Sven baut eine sechste mit
 * festem Text "Nicht gespeichert" und dem Griff [data-sw-form-status].
 *
 * Das JS tauscht deshalb KEINEN Text mehr aus. Es schaltet nur die
 * Zustandsklasse; welche Pille zu sehen ist, entscheiden diese zwei
 * Regeln. Damit entfällt auch das Merken des alten Textes - und ein
 * Fehler dazu: Nach dem Einreichen wechselt der echte Status, ein
 * zurückgeschriebener alter Text wäre falsch.
 *
 * ⚠️ BEDINGUNG AN DAS MARKUP: Die sechste Pille muss im SELBEN
 * Container liegen wie die fünf, und in diesem Container darf sonst
 * nichts stehen. Die zweite Regel spricht die fünf über die
 * Geschwisterbeziehung an, nicht über ein Attribut - die fünf tragen
 * keines, das sich verlässlich adressieren liesse (data-profil-status
 * ist laut profil-status.js ungenutzt und steht möglicherweise gar
 * nicht dort). Käme in den Container später etwas anderes, würde es
 * mit ausgeblendet.
 *
 * :has(~ …) für die Geschwister DAVOR, ~ für die dahinter - die
 * Reihenfolge im Builder soll keine Rolle spielen.
 * ------------------------------------------------------------------- */

/* Nichts zu melden: Die neue Pille ist weg, die fünf gelten. */
html:not(.sw-form-unsaved)
	[data-sw-form-status][data-sw-form-status][data-sw-form-status] {
	display: none;
}

/* Merker gesetzt: nur die neue Pille, ihre Geschwister nicht. */
html.sw-form-unsaved
	[data-sw-form-status][data-sw-form-status] ~ *,
html.sw-form-unsaved
	[data-sw-form-status][data-sw-form-status]:has(~ [data-sw-form-status]),
html.sw-form-unsaved
	:has(~ [data-sw-form-status][data-sw-form-status]) {
	display: none;
}

/* Die neue Pille trägt denselben warmen Ton wie die übrigen
   Warnhinweise der App. Sie ist ein eigenes Bricks-Element und könnte
   auch dort gestaltet werden - die Regel steht hier, damit sie beim
   Duplizieren einer Pille nicht vergessen wird. */
html.sw-form-unsaved
	[data-sw-form-status][data-sw-form-status][data-sw-form-status] {
	background-color: var(--sw-form-unsaved-bg);
	color: var(--sw-form-unsaved-color);
}

/* Der Einreichen-Knopf ist gedämpft und nicht klickbar.

   Seit 21.09.2026 ist das der Knopf "Seite einreichen" im Topbar-Panel
   (der auf der Bearbeiten-Seite ist entfernt). Die Regel wirkt nur mit
   html.sw-form-unsaved, und das setzt ausschliesslich form-unsaved.js -
   auf einer Seite ohne Formular also nie.

   pointer-events hält die Maus auf; für die Tastatur sperrt das JS
   zusätzlich (disabled am <button>, sonst ein Klick-Riegel). Beides
   wird gebraucht: pointer-events allein liesse sich mit der
   Eingabetaste umgehen. */
html.sw-form-unsaved
	[data-sw-form-submit][data-sw-form-submit][data-sw-form-submit] {
	opacity: var(--sw-form-submit-disabled-opacity);
	pointer-events: none;
}

/* Die Hinweiszeile steht nur, solange etwas ungespeichert ist.

   🔴 EINE EINZIGE, NEGATIV FORMULIERTE REGEL - dasselbe Muster wie
   beim Dropdown-Panel: Es gibt in CSS keinen Weg, einen
   überschriebenen Autorenwert zurückzugeben ("revert" führt zum
   Browser-Standard, nicht zu Bricks' Wert). Eine Gegenregel müsste
   Bricks' display erraten und zweitschreiben. So trifft die Regel im
   geänderten Zustand einfach nicht mehr zu, und Bricks' eigener Wert
   gilt unverändert. */
html:not(.sw-form-unsaved)
	[data-sw-form-hint][data-sw-form-hint][data-sw-form-hint] {
	display: none;
}