/**
 * idf-benachrichtigungen - Glocke im App-Header (#632)
 *
 * Logik: `idf-benachrichtigungen.js` (Fach) + `idf-benachrichtigungen-header.js` (Anzeige)
 * Voraussetzungen: Tokens, `blocks/app-header` (Knopf-Geometrie),
 * `blocks/popover` (die Huelle).
 */

/* === Der Knopf ============================================================ */

.idf-glocke-btn {
  position: relative;
}

/* Zaehler. Sitzt auf der Glocke statt daneben: eine Zahl neben dem Icon
   machte den Knopf breiter als seine Nachbarn, und die Werkzeug-Reihe soll
   ein Raster bleiben. */
.idf-glocke-zahl {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--primary, #c8134b);
  color: var(--white, #fff);
  font-size: var(--font-xs, 0.6875rem);
  font-weight: var(--weight-bold, 700);
  line-height: 16px;
  text-align: center;
  /* Der Knopf faerbt sich beim Hover; ohne diesen Rand verschwimmt die
     Zahl-Pille mit der Flaeche darunter. */
  box-shadow: 0 0 0 2px var(--white, #fff);
}
.idf-glocke-zahl[hidden] { display: none; }

/* Die Glocke selbst wird dunkler, sobald etwas anliegt. Nur das Icon, nicht
   die Flaeche: ein dauerhaft eingefaerbter Knopf in der Werkzeug-Reihe zieht
   den Blick auch dann, wenn die Zahl schon gelesen wurde. */
.idf-glocke-btn.is-neu {
  color: var(--ink, #111);
}

/* === Das Popover ========================================================== */

.idf-glocke-popover {
  min-width: 320px;
  max-width: min(380px, calc(100vw - 16px));
}

.idf-glocke-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--line, #e5e5e5);
  font-size: var(--font-md, 0.875rem);
  font-weight: var(--weight-semi, 600);
  color: var(--ink, #111);
}

.idf-glocke-alle {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--mid, #555);
  font-family: inherit;
  font-size: var(--font-xs2, 0.75rem);
  font-weight: var(--weight-regular, 400);
  cursor: pointer;
}
.idf-glocke-alle:hover { color: var(--ink, #111); text-decoration: underline; }
.idf-glocke-alle[hidden] { display: none; }

/* Gedeckelte Hoehe: bei 30 Eintraegen waere das Popover sonst laenger als
   der Bildschirm, und der Baustein klappt es dann nach oben, wo es genauso
   wenig Platz hat. */
.idf-glocke-body {
  max-height: 420px;
  overflow-y: auto;
}

.idf-glocke-laedt,
.idf-glocke-leer {
  margin: 0;
  padding: var(--space-6, 24px) var(--space-4, 16px);
  text-align: center;
  font-size: var(--font-md, 0.875rem);
  color: var(--soft, #999);
}

.idf-glocke-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.idf-glocke-zeile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--line, #e5e5e5);
  cursor: pointer;
  transition: background 0.12s ease;
}
.idf-glocke-zeile:last-child { border-bottom: 0; }
.idf-glocke-zeile:hover { background: var(--bg-hover, #f8f8f8); }

/* Zeile ohne bekanntes Ziel (#642): kein Zeigefinger, kein Hover. Sie laesst
   sich weiter als gelesen markieren und wegraeumen - sie fuehrt nur nirgends
   hin, und das soll man sehen, bevor man klickt. Das X bleibt bedienbar. */
.idf-glocke-zeile.is-ohne-ziel { cursor: default; }
.idf-glocke-zeile.is-ohne-ziel:hover { background: transparent; }
.idf-glocke-zeile.is-ohne-ziel .idf-glocke-weg:hover { background: var(--shade-08, rgba(0,0,0,0.08)); }

.idf-glocke-zeile-icon {
  flex: none;
  width: 16px;
  margin-top: 2px;
  text-align: center;
  color: var(--soft, #999);
}

.idf-glocke-zeile-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.idf-glocke-zeile-titel {
  font-size: var(--font-md, 0.875rem);
  color: var(--ink, #111);
  line-height: var(--leading-base, 1.4);
}

.idf-glocke-zeile-sub {
  font-size: var(--font-xs2, 0.75rem);
  color: var(--mid, #555);
  line-height: var(--leading-base, 1.4);
  /* Zwei Zeilen, dann Schluss: der Zusatz ist ein Hinweis, kein Fliesstext. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.idf-glocke-zeile-wann {
  font-size: var(--font-xs, 0.6875rem);
  color: var(--soft, #999);
}

/* Ungelesen: fetter Titel und ein Punkt am linken Rand. Nicht die ganze
   Zeile einfaerben - bei zehn ungelesenen waere das Popover eine Flaeche. */
.idf-glocke-zeile.is-ungelesen .idf-glocke-zeile-titel {
  font-weight: var(--weight-semi, 600);
}
.idf-glocke-zeile.is-ungelesen::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--primary, #c8134b);
}

/* Dringlichkeit faerbt nur, wenn es ein Problem gibt (Ampel-Regel): `info`
   bleibt neutral, damit die beiden anderen ueberhaupt auffallen. */
.idf-glocke-zeile[data-dringlichkeit="wichtig"] .idf-glocke-zeile-icon { color: var(--orange, #e8710a); }
.idf-glocke-zeile[data-dringlichkeit="kritisch"] .idf-glocke-zeile-icon { color: var(--red, #e11d21); }

/* Ausblenden-X: erscheint beim Hover ueber der Zeile, auf Touch immer -
   dort gibt es keinen Hover, und ohne das waere die Zeile nicht raeumbar. */
.idf-glocke-weg {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--soft, #999);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.idf-glocke-zeile:hover .idf-glocke-weg,
.idf-glocke-weg:focus-visible { opacity: 1; }
.idf-glocke-weg:hover { background: var(--shade-08, rgba(0,0,0,0.08)); color: var(--ink, #111); }

html[data-input-mode="touch"] .idf-glocke-weg {
  opacity: 1;
  width: 32px;
  height: 32px;
}
html[data-input-mode="touch"] .idf-glocke-zeile {
  padding-top: var(--space-4, 16px);
  padding-bottom: var(--space-4, 16px);
}