/* ══════════════════════════════════════════════════════════════════════════
   tc_controls.css — geteilte Bedien-Bauteile (Chips, Bewertungsknöpfe,
   Regler, Zahlenfelder, Segment-Schalter).

   WARUM ES DIESE DATEI GIBT
   Die Bauteile lagen bisher je Modul einzeln in den Seiten, mit FEST
   EINGETRAGENEN Farben (#10b981 / #f59e0b / #ef4444 im Notenbuch,
   accent-color inline in der Anwesenheit). Das bricht in jedem Farbstil,
   der nicht der Standard ist — und „tanne" ist sogar DUNKEL
   (--text: #E7EDE9, --glass: rgba(34,48,42,.55)). Weiße Flächen mit
   dunkler Schrift sind dort unlesbar.

   REGEL FÜR ALLES HIER: keine feste Farbe. Alles leitet sich aus den
   Farbstil-Variablen aus style.css ab (--mint, --yellow, --alarm, --glass,
   --glass-stroke, --text…). Damit tragen alle sechs Stile — standard, cub,
   graphit, salbei, mono, tanne — ohne eine einzige Sonderregel.

   Eingebunden NACH style.css, damit die Ableitungen die Altlasten
   überschreiben können.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── BEDEUTUNGSFARBEN — bewusst FEST, nicht aus dem Farbstil ──────────────
     Erster Anlauf leitete sie aus --mint/--yellow/--alarm ab. Das war falsch:
     Im Farbstil „cub" wurde „gut" damit braun und „schlecht" terrakotta — zwei
     Töne, die kaum auseinanderzuhalten sind, und „braun = super" liest niemand.
     Grün→Bernstein→Rot ist eine gelernte Skala und muss in JEDEM Stil dieselbe
     bleiben, genau wie die Notenplaketten .g-1…g-6 (die sind auch fest).
     Nur der dunkle Stil bekommt aufgehellte Varianten. */
  --tc-pos: #3FA46A;
  --tc-neu: #D9A441;
  --tc-neg: #D2544A;

  /* Flächen — bewusst aus --glass abgeleitet, damit sie im dunklen
     Farbstil dunkel bleiben statt weiß aufzublitzen. */
  --tc-surface:  var(--glass);
  --tc-stroke:   var(--glass-stroke);
  --tc-ink:      var(--text);
  --tc-ink-soft: var(--text-mid);

  /* Zarte Einfärbungen. Fallback zuerst, damit auch ohne color-mix()
     nichts unsichtbar wird. */
  --tc-pos-tint: rgba(63,164,106,.15);
  --tc-neu-tint: rgba(217,164,65,.17);
  --tc-neg-tint: rgba(210,84,74,.15);

  /* Schrift auf den Einfärbungen. Ohne color-mix() bleibt es bei der
     normalen Textfarbe — lesbar in jedem Stil, nur weniger sprechend.
     ACHTUNG: hier NICHT `var(--tc-pos-ink, …)` schreiben — eine
     Eigenschaft, die sich selbst referenziert, ist ein Zyklus und fällt
     komplett aus. */
  --tc-pos-ink: var(--text);
  --tc-neu-ink: var(--text);
  --tc-neg-ink: var(--text);
}
/* Dunkler Farbstil: dieselbe Skala, nur aufgehellt — sonst versinkt Grün im Tann. */
html[data-theme="tanne"]{
  --tc-pos: #6FCB97;
  --tc-neu: #E2C173;
  --tc-neg: #E8867B;
  --tc-pos-tint: rgba(111,203,151,.18);
  --tc-neu-tint: rgba(226,193,115,.18);
  --tc-neg-tint: rgba(232,134,123,.18);
}

@supports (background: color-mix(in srgb, red 10%, transparent)){
  :root, html[data-theme="tanne"]{
    --tc-pos-tint: color-mix(in srgb, var(--tc-pos) 16%, transparent);
    --tc-neu-tint: color-mix(in srgb, var(--tc-neu) 18%, transparent);
    --tc-neg-tint: color-mix(in srgb, var(--tc-neg) 16%, transparent);
    /* Schrift auf der Einfärbung: die Bedeutungsfarbe gegen die Textfarbe des
       Stils gemischt — hell auf dunkel, dunkel auf hell, ohne Sonderregel. */
    --tc-pos-ink: color-mix(in srgb, var(--tc-pos) 58%, var(--text));
    --tc-neu-ink: color-mix(in srgb, var(--tc-neu) 52%, var(--text));
    --tc-neg-ink: color-mix(in srgb, var(--tc-neg) 58%, var(--text));
  }
}

/* ══ BEWERTUNGSKNÖPFE ══════════════════════════════════════════════════════
   Für Mitarbeits-Skalen (+ o −), Statuswahl, alles Dreiwertige.        */
.tc-rate-group{ display:flex; gap:6px; flex-wrap:wrap; }
.tc-rate{
  flex:1; min-width:38px; max-width:64px; min-height:34px;
  border:1.5px solid var(--tc-stroke); background:var(--tc-surface);
  border-radius:9px; font-weight:800; font-size:.84rem; cursor:pointer;
  font-family:'Nunito',sans-serif; color:var(--tc-ink-soft);
  display:flex; align-items:center; justify-content:center;
  transition:background .14s, border-color .14s, transform .1s;
}
.tc-rate:active{ transform:scale(.9); }
.tc-rate.is-pos{ color:var(--tc-pos-ink); border-color:var(--tc-pos); }
.tc-rate.is-neu{ color:var(--tc-neu-ink); border-color:var(--tc-neu); }
.tc-rate.is-neg{ color:var(--tc-neg-ink); border-color:var(--tc-neg); }
.tc-rate.is-pos:hover{ background:var(--tc-pos-tint); }
.tc-rate.is-neu:hover{ background:var(--tc-neu-tint); }
.tc-rate.is-neg:hover{ background:var(--tc-neg-tint); }

/* ══ CHIPS ═════════════════════════════════════════════════════════════════
   Kleine, farbig umrandete Marken (Mitarbeits-Chips, Filter, Kategorien). */
.tc-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:20px; min-height:24px;
  font-size:.72rem; font-weight:800; white-space:nowrap;
  border:1.5px solid var(--tc-stroke); background:var(--tc-surface);
  color:var(--tc-ink-soft); user-select:none; position:relative;
  transition:background .14s, border-color .14s, color .14s;
}
.tc-chip.is-pos{ color:var(--tc-pos-ink); border-color:var(--tc-pos); background:var(--tc-pos-tint); }
.tc-chip.is-neu{ color:var(--tc-neu-ink); border-color:var(--tc-neu); background:var(--tc-neu-tint); }
.tc-chip.is-neg{ color:var(--tc-neg-ink); border-color:var(--tc-neg); background:var(--tc-neg-tint); }
/* Antippen löscht: erst beim Hover/Fokus verrät sich das mit einem ✕ */
.tc-chip--del{ cursor:pointer; }
.tc-chip--del:hover, .tc-chip--del:focus-visible{
  background:var(--tc-neg-tint) !important;
  border-color:var(--tc-neg) !important;
  color:var(--tc-neg-ink) !important;
  padding-right:19px;
}
.tc-chip--del:hover::after, .tc-chip--del:focus-visible::after{
  content:'✕'; position:absolute; right:6px; top:50%;
  transform:translateY(-50%); font-size:.7rem;
}

/* ══ REGLER ════════════════════════════════════════════════════════════════
   Grundlinie für JEDEN Regler der App — auch für die, die hier nicht
   namentlich stehen. Bisher hatten sie weder Fingergröße noch Farbstil. */
input[type=range]{
  accent-color: var(--mint);
  cursor:pointer;
  min-height:26px;                 /* Fingerziel statt 4-px-Faden */
  vertical-align:middle;
}
/* Vollausbau für alles, was ausdrücklich .tc-range trägt.
   --tc-fill (0…100 %) setzt shared/tc_controls.js laufend nach; ohne das
   Skript bleibt es bei 0 % und der Regler ist trotzdem voll bedienbar. */
.tc-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:26px; background:transparent; margin:0;
  cursor:pointer; touch-action:pan-y;   /* Wischen am Regler ≠ Sheet schließen */
}
/* WICHTIG: box-sizing muss hier ausdrücklich stehen. Der globale
   `*,*::before,*::after`-Reset greift bei den Slider-Pseudoelementen NICHT —
   ohne das rechnet der Rand oben drauf und der Griff sitzt sichtbar
   NEBEN der Schiene statt in ihr. */
.tc-range::-webkit-slider-runnable-track{
  box-sizing:border-box; height:8px; border-radius:4px; border:none;
  background:linear-gradient(to right,
    var(--tc-accent, var(--mint)) var(--tc-fill, 0%),
    var(--tc-stroke)              var(--tc-fill, 0%));
}
.tc-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; box-sizing:border-box;
  width:20px; height:20px; border-radius:50%;
  background:var(--tc-accent, var(--mint));
  border:3px solid var(--glass);
  box-shadow:0 2px 7px rgba(0,0,0,.28);
  margin-top:-6px;                       /* (Schiene 8 − Griff 20) / 2 */
}
/* Firefox füllt die Schiene selbst über ::-moz-range-progress */
.tc-range::-moz-range-track{
  box-sizing:border-box; height:8px; border-radius:4px; border:none;
  background:var(--tc-stroke);
}
.tc-range::-moz-range-progress{
  height:8px; border-radius:4px; background:var(--tc-accent, var(--mint));
}
.tc-range::-moz-range-thumb{
  box-sizing:border-box;
  width:20px; height:20px; border-radius:50%;
  background:var(--tc-accent, var(--mint));
  border:3px solid var(--glass);
  box-shadow:0 2px 7px rgba(0,0,0,.28);
}
.tc-range:focus-visible{ outline:none; }
.tc-range:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px var(--tc-pos-tint); }
.tc-range:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 4px var(--tc-pos-tint); }

/* ══ ZAHLENFELD ════════════════════════════════════════════════════════════ */
.tc-num{
  font-family:'Nunito',sans-serif; font-weight:800; font-size:.85rem;
  text-align:center; min-height:36px; padding:6px 8px;
  border-radius:10px; border:1.5px solid var(--tc-stroke);
  background:var(--tc-surface); color:var(--tc-ink);
}
.tc-num:focus{
  outline:none; border-color:var(--mint);
  box-shadow:0 0 0 3px var(--tc-pos-tint);
}
/* Die nativen Pfeiltasten legen sich auf dem Desktop ÜBER den Wert, sobald das
   Feld schmal ist — und getippt wird hier ohnehin. Also weg damit. */
.tc-num::-webkit-outer-spin-button,
.tc-num::-webkit-inner-spin-button{ -webkit-appearance:none; appearance:none; margin:0; }
.tc-num[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.tc-num.is-bad{ border-color:var(--tc-neg); background:var(--tc-neg-tint); }

/* ══ SEGMENT-SCHALTER ══════════════════════════════════════════════════════ */
.tc-seg{
  display:inline-flex; padding:3px; gap:3px; border-radius:12px;
  background:var(--tc-surface); border:1.5px solid var(--tc-stroke);
}
.tc-seg > button{
  border:none; background:transparent; cursor:pointer;
  font-family:'Nunito',sans-serif; font-weight:800; font-size:.8rem;
  color:var(--tc-ink-soft); padding:6px 13px; border-radius:9px;
  min-height:32px; transition:.16s;
}
.tc-seg > button:hover{ color:var(--tc-ink); }
.tc-seg > button.on{
  background:var(--mint); color:#fff;
  box-shadow:0 2px 8px var(--mint-mid);
}

/* ══ UMSCHALT-PILLE ════════════════════════════════════════════════════════ */
.tc-pill{
  display:inline-flex; align-items:center; gap:6px;
  border:1.5px solid var(--tc-stroke); background:var(--tc-surface);
  border-radius:20px; padding:6px 14px; min-height:34px;
  font-family:'Nunito',sans-serif; font-weight:800; font-size:.8rem;
  color:var(--tc-ink-soft); cursor:pointer; transition:.16s;
}
.tc-pill:hover{ color:var(--tc-ink); border-color:var(--mint-mid); }
.tc-pill.on{ background:var(--mint); border-color:var(--mint); color:#fff; }

/* ══════════════════════════════════════════════════════════════════════════
   ALTLASTEN-ÜBERNAHME
   Die folgenden Klassen gibt es in den Modulen schon und sie werden vom
   JavaScript gesetzt. Statt überall die Namen zu tauschen (und dabei etwas
   zu übersehen), bekommen sie hier ihre Farben aus dem Farbstil. Die
   Struktur-Regeln bleiben in der jeweiligen Modulseite stehen.
   ══════════════════════════════════════════════════════════════════════════ */

/* Notenbuch — Mitarbeits-Bewertungsknöpfe (waren #10b981/#f59e0b/#ef4444) */
.rate-btn{ background:var(--tc-surface); border-color:var(--tc-stroke); color:var(--tc-ink-soft); }
.rate-pos{ color:var(--tc-pos-ink); border-color:var(--tc-pos); }
.rate-neu{ color:var(--tc-neu-ink); border-color:var(--tc-neu); }
.rate-neg{ color:var(--tc-neg-ink); border-color:var(--tc-neg); }
.rate-pos:hover{ background:var(--tc-pos-tint); border-color:var(--tc-pos); }
.rate-neu:hover{ background:var(--tc-neu-tint); border-color:var(--tc-neu); }
.rate-neg:hover{ background:var(--tc-neg-tint); border-color:var(--tc-neg); }

/* Notenbuch — Mitarbeits-Chips (Löschhinweis war fest rot auf hellrot) */
.chip{ background:var(--tc-surface); }
.chip:hover{
  background:var(--tc-neg-tint) !important;
  border-color:var(--tc-neg) !important;
  color:var(--tc-neg-ink) !important;
}

/* Notenbuch — Zeilenfärbung nach Leistung */
.row-high{ background:var(--tc-pos-tint); }
.row-mid { background:var(--tc-neu-tint); }
.row-low { background:var(--tc-neg-tint); }

/* ══════════════════════════════════════════════════════════════════════════
   CHIP-FORM — eine Form über alle Modulgrenzen (seit v0.2.159)
   ══════════════════════════════════════════════════════════════════════════
   Ausgangslage: 21 Chip-Klassen, jede mit eigener Form. Radien von 4px bis
   999px, Polsterung von `1px 4px` bis `9px 14px`, Schrift von 8px bis .88rem.
   Nebeneinander (Teambuilder ↔ Unterrichtsplaner) fiel das sofort auf.

   ZWEI Größen, nicht eine: Ein Etikett, das nur etwas benennt, darf klein
   sein; ein Chip, den man ANTIPPT, braucht ein Fingerziel. Alles auf eine
   Größe zu zwingen macht entweder die Etiketten zu fett oder die Knöpfe zu
   klein.

   `html ` davor ist Absicht und kein Versehen: Die Modulseiten laden ihr
   eigenes <style> NACH dieser Datei, gleiche Spezifität würde also verlieren.
   `html .x` (0,1,1) schlägt `.x` (0,1,0) — ohne !important, das sonst jede
   spätere Anpassung im Modul blockieren würde.

   Bewusst NICHT dabei:
     .gv-chip*          Visitenkarte — die darf als einzige anders aussehen
     .up-lchip*         Stundenplan-Raster, auf 8px ausgelegt; größer sprengt die Zelle
     .kb-schip          asymmetrische Polsterung wegen eingesetztem Avatar
     .*-chip-add/-del   Icon-Knöpfe, keine Chips
     .*-chips           Container, keine Chips
   Farben bleiben unangetastet — die kommen seit v0.2.158 aus dem Farbstil. */

/* ── klein: Etikett, benennt nur ── */
html .tc-chip,
html .tb-fach-chip, html .tb-rnd-chip,
html .kb-fehl-chip,
html .sa-lead-chip, html .sa-zo-statuschip,
html .sj-chip, html .kv-oral-chip, html .kv-imp-gchip,
html .ob-stud-chip {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  min-height: 24px;
}

/* ── Standard: klickbar, Fingerziel ── */
html .anw-chip,
html .fach-chip, html .nb-onb-fach-chip,
html .kv-fach-chip, html .kv-chip-tag, html .kv-filter-chip,
html .sa-fach-chip, html .sa-bel-chip, html .sb-fach-chip,
html .sd-chip,
html .ob-chip, html .ob-plan-chip {
  padding: 6px 11px;
  border-radius: 999px;
  font-size: .78rem;
  min-height: 30px;
}

/* Beide Größen teilen Ausrichtung und Rahmenstärke — sonst sitzt der Text
   in dem einen Chip mittig und im nächsten oben, sobald ein Icon dazukommt. */
html .tc-chip,
html .tb-fach-chip, html .tb-rnd-chip, html .kb-fehl-chip,
html .sa-lead-chip, html .sa-zo-statuschip, html .sj-chip,
html .kv-oral-chip, html .kv-imp-gchip, html .ob-stud-chip,
html .anw-chip, html .fach-chip, html .nb-onb-fach-chip,
html .kv-fach-chip, html .kv-chip-tag, html .kv-filter-chip,
html .sa-fach-chip, html .sa-bel-chip, html .sb-fach-chip,
html .sd-chip, html .ob-chip, html .ob-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-width: 1.5px;
  white-space: nowrap;
  box-sizing: border-box;
}