/**
 * idf-flag-check v1.6.2 - Styles
 *
 * v1.6.2 (#201 L5b): Hover-Alphas rgba(0,0,0,0.15) 2x auf das neue
 * Token var(--shade-15) (render-identisch).
 *
 * v1.6.1 (#201): Phantom-Token --on-primary (nirgends definiert, es
 * renderte immer der Fallback #fff) an 3 Stellen render-identisch auf
 * var(--white) aufgeloest (Audit L5/L-E8). Die uebrigen Phantome der
 * Datei (--surface/--border/--text-muted/--text, ohne Fallback) bleiben
 * unveraendert - eigene Baustelle, nicht Teil des Fallback-Sweeps.
 *
 * v1.6.0 (#174/T9): Listen-Variante als SSOT — `.idf-list-cell-action
 * .idf-flag-check.is-compact` (randlos, transparent, radius 4) ersetzt
 * die vier identischen 4-Klassen-Cell-Overrides in aufgaben/protokolle
 * (Sitzungen + Punkte)/safeguard. Hover/Active werden hier in gleicher
 * Spezifität mitgeliefert, weil ein Background-Override mit höherer
 * Spezifität die 2-Klassen-Shared-Regeln schluckt (v0.6.7-Lektion).
 *
 * Pille mit Icon (+ optional Text-Label). Native Checkbox visuell aus-
 * geblendet, aber im DOM (für data-field-Erfassung). is-active-Klasse
 * zeigt aktiven State (Primary-Background, weiße Schrift + Icon).
 *
 * is-compact-Modus: Pille ohne Text-Label, quadratisch — nur Icon, mit
 * nativem Browser-Tooltip via title-Attribut. Für Listen-Inline.
 *
 * .idf-flag-group als Container für mehrere Flag-Checks nebeneinander.
 *
 * v1.4.0: Hover-State von var(--hover) auf rgba(0,0,0,0.15) gehoben —
 * der Default-Hover war im Modal-Kontext kaum sichtbar (Modal-Surface
 * und --hover liegen visuell zu nah beieinander). Die Liste hat den
 * deutlichen 15-%-Overlay schon lange im Modul-CSS überschrieben;
 * jetzt liegt er an genau einer Stelle und greift überall identisch
 * (Liste, Modal, alle künftigen Mounts).
 *
 * v1.3.0: border-radius von 999px (vollrund) auf 6px (rounded rectangle)
 * — konsistent zu allen anderen Pills/Buttons in der App (Stats-Pillen,
 * Status-Pillen, Reset-/Neu-Buttons, Erledigt-Toggle, Eisenhower-Status).
 */

/* In Form-Grids (.idf-form-row-full ist display:grid) und Flex-Spalten
   stretcht das inline-flex-Label sonst auf volle Breite — Pille soll
   Standard-Breite behalten (Joerg-Smoke storyforge v0.3.x). */
.idf-form > .idf-form-row-full > .idf-flag-check,
.idf-form .idf-flag-check {
  justify-self: start;
  align-self: start;
  width: fit-content;
}

.idf-flag-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 0.875rem;
  position: relative;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.idf-flag-check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

/* Hover (inaktiv): deutlicher Schatten-Overlay statt --hover. v1.4.0 —
   --hover ist in Modal-Surface kaum sichtbar gewesen, weil Modal und
   Surface visuell zu nah beieinander liegen. 15-%-Schwarz-Overlay
   funktioniert auf weißen, getönten Eisenhower- und Modal-Backgrounds
   gleich gut. */
.idf-flag-check:hover {
  background: var(--shade-15);
  color: var(--text);
}

.idf-flag-check.is-active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.idf-flag-check.is-active .idf-flag-check-icon,
.idf-flag-check.is-active .idf-flag-check-label {
  color: var(--white);
}
/* Active-Hover: nicht auf Schwarz wechseln (war v1.3.0), sondern den
   Primary-Background per filter aufhellen. So bleibt das Active-
   Branding (Rot) erhalten und der Hover-Hinweis ist trotzdem da. */
.idf-flag-check.is-active:hover {
  filter: brightness(1.06);
}

.idf-flag-check-icon {
  font-size: 0.875rem;
}

.idf-flag-check-label {
  line-height: 1;
}

/* Compact-Modus: nur Icon, quadratisch 28×28 — Text-Label kommt als
   title-Tooltip. v1.5.0: explizite width/height + padding:0, weil die
   alte `padding: 6px 8px`-Variante NICHT quadratisch war (28×32 statt
   28×28). v1.5.1: `box-sizing: border-box` + `aspect-ratio: 1` als
   Defense-in-Depth, damit die 1px-Border die Außenmaße nicht auf
   30×30 aufbläst und vereinzelte Modul-Overrides (z.B. eigene
   line-height) die Höhe nicht über 28 px ziehen können. */
.idf-flag-check.is-compact {
  width: 28px;
  height: 28px;
  aspect-ratio: 1;
  padding: 0;
  gap: 0;
  box-sizing: border-box;
  justify-content: center;
  line-height: 1;
}
.idf-flag-check.is-compact .idf-flag-check-icon {
  font-size: 0.875rem;
  line-height: 1;
}

/* Listen-Variante (v1.6.0, #174/T9): Compact-Pille in einer Action-Cell
   (.idf-list-cell-action) — randlos, transparent, radius 4, wie Drag-
   Handle/Erledigt-Pille/Trash. Gilt automatisch in allen Listen, die
   Flags per data-flag-mount in .idf-list-cell-action-Cells mounten. */
.idf-list-cell-action .idf-flag-check.is-compact {
  border: 0;
  border-radius: 4px;
  background: transparent;
}
.idf-list-cell-action .idf-flag-check.is-compact:hover {
  background: var(--shade-15);
}
.idf-list-cell-action .idf-flag-check.is-compact.is-active {
  background: var(--primary, #c8134b);
  color: var(--white);
}
.idf-list-cell-action .idf-flag-check.is-compact.is-active:hover {
  background: var(--primary, #c8134b);
  filter: brightness(1.06);
}

/* Container für mehrere Flag-Checks in einer Reihe — Pillen links, optionales
   Status-Element wird per margin-left:auto nach rechts geschoben. */
.idf-flag-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}