/**
 * idf-anwesenheit-header - Stempel im App-Header (#631)
 *
 * Logik: `_shared/domain/anwesenheit/idf-anwesenheit-header.js`
 * Voraussetzungen: Tokens, `blocks/app-header` (Knopf-Geometrie),
 * `primitives/progress-ring` (der Ring), `blocks/popover` (die Huelle).
 *
 * Hier steht nur, was der Header-Stempel zusaetzlich braucht: das Icon in der
 * Ringmitte und der Inhalt des Popovers. Knopf-Groesse, Hover und Fokus
 * kommen unveraendert aus `.idf-app-header-tool`.
 */

/* === Der Knopf ============================================================
   Ring und Icon liegen uebereinander. Der Ring bringt seine eigene Groesse
   mit (34 px), das Icon sitzt absolut in seiner Mitte. */

.idf-anw-header-btn {
  position: relative;
}

.idf-anw-header-btn .idf-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Der Ring ist bereits um -90 Grad gedreht (er soll oben anfangen), die
     Zentrierung muss deshalb VOR der Drehung stehen - sonst schiebt sie ihn
     entlang der gedrehten Achsen aus dem Knopf. */
  transform: translate(-50%, -50%) rotate(-90deg);
}

.idf-anw-header-icon {
  position: relative;   /* ueber dem Ring, ohne eigenen z-index */
  font-size: 13px;
  line-height: 1;
  color: var(--mid, #555);
  transition: color 0.12s ease;
}

/* Angemeldet: das Icon nimmt den Ton der Ringfuellung an, damit Ring und
   Mitte dasselbe sagen. */
.idf-anw-header-btn.is-an .idf-anw-header-icon {
  color: var(--confirm, #0c998e);
}

/* Fehlende Abmeldung: das ist der eine Zustand, der wirklich eine Handlung
   verlangt. Brand-Rot wie die Warnung im Anwesenheits-Reiter (.ak-anw-warn). */
.idf-anw-header-btn.is-luecke .idf-anw-header-icon {
  color: var(--primary, #c8134b);
}

/* === Das Popover ==========================================================
   Etwas breiter als das Benutzer-Menue: hier stehen zwei Knoepfe
   nebeneinander und eine Zeile mit zwei Zeitangaben. */

.idf-anw-header-popover {
  min-width: 260px;
}

.idf-anw-header-pop {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px);
}

.idf-anw-header-kopf {
  font-size: var(--font-md, 0.875rem);
  color: var(--mid, #555);
  line-height: var(--leading-base, 1.4);
}
.idf-anw-header-kopf strong {
  color: var(--ink, #111);
  font-weight: var(--weight-semi, 600);
}

.idf-anw-header-warn {
  color: var(--primary, #c8134b);
  font-weight: var(--weight-medium, 500);
}

.idf-anw-header-zahlen {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-md, 0.875rem);
  color: var(--mid, #555);
}
.idf-anw-header-zahlen strong {
  color: var(--ink, #111);
  font-weight: var(--weight-semi, 600);
  font-variant-numeric: tabular-nums;
}

/* Die Konto-Zeile tritt zurueck: der Ring zeigt die Anwesenheit, das hier
   ist die Fussnote dazu. Gleich gross gesetzt laesen sich zwei
   widerspruechliche Zahlen nebeneinander. */
.idf-anw-header-netto {
  font-size: var(--font-xs2, 0.75rem);
  color: var(--soft, #999);
}
.idf-anw-header-netto strong {
  color: var(--mid, #555);
  font-weight: var(--weight-medium, 500);
}

.idf-anw-header-aktionen {
  display: flex;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;   /* im schmalen Fenster untereinander statt abgeschnitten */
}
.idf-anw-header-aktionen .idf-btn {
  flex: 1 1 auto;
}

/* „Alle Zeiten im Profil": ein Weg weiter, kein Knopf. Deshalb als Textlink
   unter einer Trennlinie und nicht als dritter Button in der Reihe darueber. */
.idf-anw-header-mehr {
  margin: 0 calc(var(--space-4, 16px) * -1) calc(var(--space-4, 16px) * -1);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border: 0;
  border-top: 1px solid var(--line, #e5e5e5);
  background: transparent;
  color: var(--mid, #555);
  font-family: inherit;
  font-size: var(--font-md, 0.875rem);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.idf-anw-header-mehr:hover {
  background: var(--neutral-bg, #f0f1f3);
  color: var(--ink, #111);
}

html[data-input-mode="touch"] .idf-anw-header-mehr {
  min-height: 44px;
}