/**
 * idf-eisenhower-theme v1.7.1 - Pastell-Quadrant-Theme
 *
 * v1.7.1 (#201 L5b): Meilenstein-Label-Grund auf color-mix(var(--white)
 *   70%) (render-identisch). Header-Version zugleich auf den Stand der
 *   inline dokumentierten v1.7.0 gehoben (Kopf hing auf v1.6.0 fest).
 *
 * Definiert vier Pastellfarben für die Eisenhower-Quadranten plus eine
 * Meilenstein-Border-Markierung. Anwender (Aufgabe-Modal, Listen-Zeilen)
 * setzen die Klasse `.eh-q1`..`.eh-q4` und optional `.is-meilenstein`
 * selbst auf ihre Wurzel-Elemente — dieses Theme liefert die Visuals.
 *
 * Q1/Q2/Q3-Hintergründe ca. 50 % heller als vorher — bei vielen
 * getaggten Aufgaben war die Liste vorher visuell zu kräftig getönt
 * (siehe Issue #46). Quadrant-Textfarben unverändert (sind Akzent-
 * Töne und brauchen Sättigung).
 */

:root {
  --eh-q1-bg:   #fdeff0;   /* vorher #fde4e4 — heller */
  --eh-q1-text: #c8134b;
  --eh-q2-bg:   #ecf7f4;   /* vorher #e0f2ee — heller */
  --eh-q2-text: #0c998e;
  --eh-q3-bg:   #fffaee;   /* vorher #fff4d6 — heller */
  --eh-q3-text: #b58600;
  --eh-q4-bg:   #f0f1f3;
  --eh-q4-text: #6b7280;
  --eh-meilenstein-border: #111111;
}

/* Generische Quadrant-Klassen (Listen-Zeilen, Karten, Badges, ...) */
.eh-q1 { background: var(--eh-q1-bg); color: inherit; }
.eh-q2 { background: var(--eh-q2-bg); color: inherit; }
.eh-q3 { background: var(--eh-q3-bg); color: inherit; }
.eh-q4 { background: var(--eh-q4-bg); color: inherit; }

/* Standard-Artefakt-Modal: voller Body-Tint — Header, Tab-Bar und Body
   tönen sich in derselben Pastellfarbe. Spezifität (0,2,1) schlägt die
   surface-Defaults (0,1,0) aus idf-standard-artefakt.css ohne !important. */
.idf-sa-wrap.eh-q1,
.idf-sa-wrap.eh-q1 .idf-sa-header,
.idf-sa-wrap.eh-q1 .idf-sa-tabs,
.idf-sa-wrap.eh-q1 .idf-sa-body { background: var(--eh-q1-bg); }

.idf-sa-wrap.eh-q2,
.idf-sa-wrap.eh-q2 .idf-sa-header,
.idf-sa-wrap.eh-q2 .idf-sa-tabs,
.idf-sa-wrap.eh-q2 .idf-sa-body { background: var(--eh-q2-bg); }

.idf-sa-wrap.eh-q3,
.idf-sa-wrap.eh-q3 .idf-sa-header,
.idf-sa-wrap.eh-q3 .idf-sa-tabs,
.idf-sa-wrap.eh-q3 .idf-sa-body { background: var(--eh-q3-bg); }

.idf-sa-wrap.eh-q4,
.idf-sa-wrap.eh-q4 .idf-sa-header,
.idf-sa-wrap.eh-q4 .idf-sa-tabs,
.idf-sa-wrap.eh-q4 .idf-sa-body { background: var(--eh-q4-bg); }

/* Meilenstein: dicker schwarzer Rand ums ganze Modal — kontrastiert
   sowohl gegen Pastell-Body als auch gegen den grauen Modal-Overlay. */
.idf-sa-wrap.is-meilenstein {
  outline: 6px solid var(--eh-meilenstein-border);
  outline-offset: 0;
}

/* Status-Pille rechts in der Flag-Group (Quadrant + Meilenstein-Suffix).
   1px transparente Border + line-height:1 stellen sicher, dass die Pille
   exakt so hoch ist wie eine Flag-Pille (die hat 1px solid Border und
   line-height:1 auf ihrem Label). Kein Layout-Sprung mehr beim Toggle. */
.idf-eh-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.idf-eh-status.eh-q1 { background: var(--eh-q1-bg); color: var(--eh-q1-text); }
.idf-eh-status.eh-q2 { background: var(--eh-q2-bg); color: var(--eh-q2-text); }
.idf-eh-status.eh-q3 { background: var(--eh-q3-bg); color: var(--eh-q3-text); }
.idf-eh-status.eh-q4 { background: var(--eh-q4-bg); color: var(--eh-q4-text); }

/* Inaktive Pillen im getönten Modal: heller Background, damit sie absetzen.
   Aktive Pillen behalten ihren Primary-Background — :not(.is-active) verhindert
   das Überschreiben. v1.6.0 (Joerg-Smoke 2026-05-06): zusätzlich
   :not(:hover), damit der dunkle Hover-Overlay aus dem Shared-Baustein
   (idf-flag-check v1.4.0) seinen Platz behält. Vorher hat diese Regel
   den Hover komplett geschluckt. */
.idf-sa-wrap[class*="eh-q"] .idf-flag-check:not(.is-active):not(:hover) {
  background: color-mix(in srgb, var(--white) 70%, transparent);
}

/* Indikator-Punkt für Listen-Spalten (Aufgaben-Liste, Protokoll-Liste, ...).
   Anwender hängen `.idf-eh-dot` plus die Quadrant-Klasse `.eh-qX` an ein
   Inline-Element (z.B. <span>). Default ist Q4 (grau). Spezifität
   .idf-eh-dot.eh-qX (0,2,0) > .eh-qX (0,1,0) — kein !important nötig. */
.idf-eh-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--eh-q4-text);
  vertical-align: middle;
  flex-shrink: 0;
}
.idf-eh-dot.eh-q1 { background: var(--eh-q1-text); }
.idf-eh-dot.eh-q2 { background: var(--eh-q2-text); }
.idf-eh-dot.eh-q3 { background: var(--eh-q3-text); }
.idf-eh-dot.eh-q4 { background: var(--eh-q4-text); }

/* Listen-Zeilen-Tönung (Aufgaben-Liste, Protokoll-Liste, ...).
   Anwender hängen `.idf-eh-row` plus die Quadrant-Klasse `.eh-qX` an die
   Wurzel der Listenzeile. Spezifität .idf-eh-row.eh-qX (0,2,0) reicht aus,
   um die generische .eh-qX-Regel und einen modul-eigenen Listen-Hover
   (bei 0,2,0) zu schlagen. Q4 = nahezu neutral, damit „leere" Aufgaben
   die Liste nicht überladen.

   Hover: leichter Brightness-Filter erhält den Tint und macht Hover
   trotzdem sichtbar. Kein Background-Override, sonst würde der Tint
   beim Hover verschwinden. */
.idf-eh-row.eh-q1 { background: var(--eh-q1-bg); }
.idf-eh-row.eh-q2 { background: var(--eh-q2-bg); }
.idf-eh-row.eh-q3 { background: var(--eh-q3-bg); }
/* Q4 = neutrale Aufgaben (weder wichtig noch dringend) — bewusst weiß
   statt grau, damit „leere" Aufgaben die Liste nicht eintönen. */
.idf-eh-row.eh-q4 { background: #ffffff; }
/* v1.7.0 (Joerg-Review 2026-05-06): brightness von 0.96 → 0.92 gezogen,
   damit der Listen-Hover sich an den Hierarchy-Item-Hover im
   Standard-Artefakt-Modal angleicht (rgba 0,0,0,0.08 ≈ 8 % dunkler
   wirkt deutlicher). 0.96 war zu subtil — die Zeile reagierte beim
   Drüberfahren kaum sichtbar, gerade auf Q4 (weiß). */
.idf-eh-row.eh-q1:hover,
.idf-eh-row.eh-q2:hover,
.idf-eh-row.eh-q3:hover,
.idf-eh-row.eh-q4:hover { filter: brightness(0.92); }

/* Listen-Meilenstein: 4px schwarzer Streifen links — als inset-box-shadow
   gerendert, damit kein Layout-Platz weggenommen wird. */
.idf-eh-row.is-meilenstein {
  box-shadow: inset 4px 0 0 var(--eh-meilenstein-border);
}