/* ══════════════════════════════════════════════════════════════════════
   FORMULAR-BEDIENELEMENTE  (Portal, Admin-Panel und Tools)
   ----------------------------------------------------------------------
   Zahlenfeld-Pfeile, Auswahl-Dreieck, Kalendersymbol, Checkbox, Regler,
   Farbwaehler und Datei-Knopf zeichnet sonst das Betriebssystem. Windows
   liefert dafuer graue Kaestchen im Stil alter Systemsteuerungen, die in
   keinem unserer Designs passen. Hier werden sie abgeschaltet und aus den
   vorhandenen Farbtokens neu aufgebaut.

   Einbindung als <link> VOR dem seiteneigenen <style>. So kann eine Seite
   einzelne Regeln weiterhin ueberschreiben, ohne dass hier !important
   noetig wird. Was sich per CSS nicht zuverlaessig setzen laesst, weil
   Seitenregeln mit hoeherer Gewichtung gewinnen (Zahlenfeld-Pfeile und
   Auswahl-Dreieck), baut form-controls.js direkt am Element auf.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Faerbt die Flaechen, die der Browser selbst zeichnet und an die CSS
     nicht herankommt: aufgeklappte Auswahlliste, Kalenderblatt,
     Bildlaufleisten. Ohne diese Zeile bleiben sie hellgrau.
     Das Admin-Panel setzt fuer sein helles Design "light". */
  color-scheme: dark;

  /* Fallback-Kette: das Portal nutzt --color-*, das Admin-Panel --accent
     und --border, die Tools --green. Der letzte Wert greift, wenn eine
     Seite gar keine Tokens mitbringt. */
  --fc-bg:      var(--color-bg-panel, var(--surface, #0f150f));
  --fc-bg-deep: var(--color-bg, var(--bg, #0a0f0a));
  --fc-border:  var(--color-border, var(--border, #1c2b1c));
  --fc-border2: var(--color-border-strong, var(--border2, #2a4a2a));
  --fc-accent:  var(--color-primary, var(--accent, var(--green, #00ff41)));
  --fc-on-accent: var(--color-bg, var(--bg, #0a0f0a));
  --fc-text:    var(--color-text-primary, var(--text, #eaf5ea));
  --fc-dim:     var(--color-text-secondary, var(--text-dim, #7a8f7a));
  --fc-radius:  var(--r4, var(--radius-sm, 4px));

  /* Symbole als Datenadresse, weil eine Datenadresse keine CSS-Variable
     enthalten darf. Das Dreieck am Auswahlfeld faellt nicht hierunter,
     das baut form-controls.js aus --fc-dim zusammen. */
  --fc-calendar: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237a8f7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  --fc-clock: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237a8f7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E");
  --fc-close: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237a8f7a' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* ── Zahlenfelder ──────────────────────────────────────────────────────
   Die Systempfeile werden entfernt. form-controls.js legt danach eine
   eigene Bedieneinheit an den rechten Rand; laeuft das Skript nicht,
   bleibt ein sauberes Feld ohne Pfeile zurueck. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.gm-num { position: relative; display: block; }
.gm-num > input[type="number"] { box-sizing: border-box; }
.gm-num-btns {
  position: absolute;
  top: 1px; right: 1px; bottom: 1px;
  width: 24px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--fc-border);
  border-radius: 0 var(--fc-radius) var(--fc-radius) 0;
  overflow: hidden;
  pointer-events: none;   /* nur die Knoepfe selbst reagieren */
}
.gm-num-btns button {
  flex: 1;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0; padding: 0;
  background: transparent;
  border: 0;
  color: var(--fc-dim);
  cursor: pointer;
  transition: color .12s, background .12s;
}
.gm-num-btns button + button { border-top: 1px solid var(--fc-border); }
.gm-num-btns button:hover,
.gm-num-btns button:active { color: var(--fc-accent); background: var(--fc-bg-deep); }
.gm-num-btns svg {
  width: 9px; height: 9px;
  fill: none; stroke: currentColor;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.gm-num > input:disabled ~ .gm-num-btns,
.gm-num > input[readonly] ~ .gm-num-btns { opacity: .35; pointer-events: none; }

/* ── Auswahlfelder ──────────────────────────────────────────────────────
   Das Dreieck setzt form-controls.js am Element, weil Seitenregeln mit
   der Kurzform "background:" ein hier gesetztes Symbol wieder loeschen
   wuerden. Hier bleibt nur, was gefahrlos vererbt werden kann. */
select { font-family: inherit; }
select option { background: var(--fc-bg); color: var(--fc-text); }

/* ── Datum, Zeit und Suche ─────────────────────────────────────────── */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
  appearance: none;
  width: 15px; height: 15px;
  margin: 0; padding: 0;
  background: var(--fc-calendar) no-repeat center / 15px 15px;
  opacity: .75;
  cursor: pointer;
  filter: none;
}
input[type="time"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
  appearance: none;
  width: 15px; height: 15px;
  margin: 0; padding: 0;
  background: var(--fc-clock) no-repeat center / 15px 15px;
  opacity: .75;
  cursor: pointer;
  filter: none;
}
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; }
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 11px; height: 11px;
  background: var(--fc-close) no-repeat center / 11px 11px;
  opacity: .7;
  cursor: pointer;
}

/* ── Checkbox und Optionsfeld ─────────────────────────────────────────
   Das Systemkaestchen ist auf Windows weiss mit grauem Rahmen. Ersetzt
   durch eine Flaeche aus dem Tokensatz, Haken als gedrehtes Winkelstueck.
   Schalter, die eine Checkbox nur als unsichtbaren Zustandstraeger
   nutzen (.toggle input), bleiben unberuehrt, weil ihre Seitenregel
   spaeter im Stylesheet steht und damit gewinnt. */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin: 0;
  display: inline-grid;
  place-content: center;
  vertical-align: -3px;
  color: inherit;   /* sonst bleibt die Systemfarbe "buttontext" stehen */
  background: var(--fc-bg-deep);
  border: 1px solid var(--fc-border2);
  border-radius: var(--fc-radius);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover,
input[type="radio"]:hover { border-color: var(--fc-accent); }
input[type="checkbox"]:checked {
  background: var(--fc-accent);
  border-color: var(--fc-accent);
}
input[type="checkbox"]:checked::after {
  content: "";
  width: 8px; height: 4px;
  border-left: 2px solid var(--fc-on-accent);
  border-bottom: 2px solid var(--fc-on-accent);
  transform: rotate(-45deg) translate(1px, -1px);
}
input[type="checkbox"]:indeterminate {
  background: var(--fc-accent);
  border-color: var(--fc-accent);
}
input[type="checkbox"]:indeterminate::after {
  content: "";
  width: 8px; height: 2px;
  background: var(--fc-on-accent);
}
input[type="radio"]:checked { border-color: var(--fc-accent); }
input[type="radio"]:checked::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fc-accent);
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled { opacity: .4; cursor: not-allowed; }
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--fc-accent);
  outline-offset: 2px;
}

/* ── Schieberegler ─────────────────────────────────────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: var(--fc-border2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--fc-accent);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--fc-accent);
  cursor: pointer;
}
input[type="range"]::-moz-range-track {
  height: 3px;
  background: var(--fc-border2);
  border-radius: 2px;
}

/* ── Farbwaehler ──────────────────────────────────────────────────────
   Standardmaessig ein grauer Systemknopf mit Rahmen. */
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  background: var(--fc-bg-deep);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  padding: 3px;
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch {
  border: 1px solid var(--fc-border);
  border-radius: 2px;
}
input[type="color"]::-moz-color-swatch {
  border: 1px solid var(--fc-border);
  border-radius: 2px;
}

/* ── Dateiauswahl ─────────────────────────────────────────────────────
   "Durchsuchen ..." ist der auffaelligste Systemknopf ueberhaupt. */
input[type="file"] {
  color: var(--fc-dim);
  font-family: inherit;
  font-size: 12px;
}
input[type="file"]::file-selector-button {
  -webkit-appearance: none;
  appearance: none;
  margin-right: 10px;
  padding: 7px 13px;
  background: transparent;
  border: 1px solid var(--fc-border2);
  border-radius: var(--fc-radius);
  color: var(--fc-text);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--fc-accent);
  color: var(--fc-accent);
}

/* ── Ausgefuellte Felder ──────────────────────────────────────────────
   Der Browser malt gespeicherte Zugangsdaten sonst auf hellem Grund ins
   dunkle Formular. Seiten mit eigener Regel (Portal) behalten ihre. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--fc-bg-deep) inset;
  -webkit-text-fill-color: var(--fc-text);
  caret-color: var(--fc-text);
  transition: background-color 9999s ease-out 0s;
}

/* ── Sonstige Systemreste ─────────────────────────────────────────── */
button { font-family: inherit; }
textarea { font-family: inherit; resize: vertical; }
:where(fieldset) { border: 1px solid var(--fc-border); border-radius: var(--fc-radius); }
:where(legend) { color: var(--fc-dim); }