/* geraete.css — Mein-Bereich Geraete-Sektion (Push-Notification-Endpunkte)

 Quelle: extrahiert aus mein-bereich.css ("Geraete-Sektion"-Block, ).
 Inhalt 1:1.

 Konsumenten: web/js/sections/benachrichtigungen.js — rendert die
 Push-Endpunkte-Liste oberhalb der Notif-Kategorien. Gleiche Card-Optik
 wie .kat-card; Akzent ueber Neutral-Grau (kein kategorie-spezifischer
 Akzent).

 Sub-Komponenten:
 - `.benachr-devices` — Card-Container
 - `.benachr-devices-head` — Icon + Titel + Test-Push-Button
 - `.benachr-devices-empty` + `.benachr-devices-storelink` — Empty-State
 mit Store-Verlinkung
 - `.benachr-devices-list` + `.benachr-devices-row` — Geraete-Liste
 - `.benachr-devices-platform` + `.benachr-devices-dot` — Plattform-Badge
 - `.benachr-devices-remove` — Loeschen-Button
 - `.benachr-devices-silencebtn` + `.is-silenced` — Stumm-Toggle
 - `.benachr-devices-silenced-badge` / `.benachr-devices-expired-badge` —
 Status-Badges
 - `.benachr-devices-enablebtn` / `.benachr-devices-helpbtn` —
 Click-Through-Buttons im Empty-State
 ========================================================================== */

/* Card-Container: gleiche Optik wie .kat-card. */
.benachr-devices {
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  transition: box-shadow var(--duration-fast);
  overflow: hidden;
}
.benachr-devices:hover { box-shadow: var(--shadow-4); }

.benachr-devices-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
}
.benachr-devices-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  flex-shrink: 0;
}
.benachr-devices-icon img { width: 20px; height: 20px; opacity: 0.7; }
.benachr-devices-titles { flex: 1; min-width: 0; }
.benachr-devices-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: 1.2;
}
.benachr-devices-sub {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-xxs);
}

/* Paket PUSH-ANDROID-GO: Test-Push-Button im Devices-Header */
.benachr-devices-testbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-subtle);
  color: var(--color-text);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-soft), border-color var(--duration-fast) var(--ease-soft);
}
.benachr-devices-testbtn:hover { background: var(--color-bg-hover); border-color: var(--color-border); }
.benachr-devices-testbtn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.benachr-devices-testbtn:disabled { opacity: 0.6; cursor: wait; }
.benachr-devices-testbtn .ui-ico img { opacity: 0.8; }

.benachr-devices-empty {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.45;
  background: var(--color-bg-muted);
}
.benachr-devices-storelink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-1);
  color: var(--brand-default);
  font-weight: var(--fw-medium);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast);
}
.benachr-devices-storelink:hover {
  border-bottom-color: var(--brand-default);
}

.benachr-devices-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.benachr-devices-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 11px var(--space-4);
  border-top: 1px solid var(--color-border-light);
}
.benachr-devices-row:first-child { border-top: 0; }

.benachr-devices-row-main { flex: 1; min-width: 0; }
.benachr-devices-row-name {
  font-weight: var(--fw-medium);
  color: var(--color-text);
  line-height: 1.2;
}
.benachr-devices-row-meta {
  margin-top: var(--space-xxs);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.benachr-devices-platform {
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg-subtle);
  padding: var(--space-px) var(--space-1-5);
  border-radius: var(--radius-xs);
}
.benachr-devices-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
}
.benachr-devices-remove {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-1-5);
  cursor: pointer;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.benachr-devices-remove:hover {
  background: var(--status-danger-bg);
  border-color: var(--status-danger-fg);
  color: var(--status-danger-fg);
}
.benachr-devices-remove:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 1px;
}

/* Stumm-Toggle + Silenced-State */
.benachr-devices-silencebtn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-2-5);
  margin-right: var(--space-1-5);
  cursor: pointer;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: 12px;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.benachr-devices-silencebtn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
}
.benachr-devices-silencebtn.is-silenced {
  background: var(--status-warning-bg);
  border-color: var(--status-warning-fg);
  color: var(--status-warning-fg);
}
.benachr-devices-silencebtn:disabled { opacity: 0.6; cursor: wait; }
.benachr-devices-silencebtn .ui-ico img { opacity: 0.85; }

.benachr-devices-row.is-silenced .benachr-devices-row-name {
  opacity: 0.6;
}
.benachr-devices-silenced-badge {
  background: var(--status-warning-fg);
  color: var(--brand-text-on);
  border-radius: var(--radius-pill-sm);
  padding: var(--space-px) var(--space-2);
  font-size: var(--fs-badge);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.3px;
}

/* Paket GLOCKE-POLISH-2: Subscription-Expired sichtbar machen */
.benachr-devices-row.is-expired .benachr-devices-row-name { opacity: 0.6; }
.benachr-devices-expired-badge {
  background: var(--status-danger-fg);
  color: var(--brand-text-on);
  border-radius: var(--radius-pill-sm);
  padding: var(--space-px) var(--space-2);
  font-size: var(--fs-badge);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.3px;
  cursor: help;
}

/* Paket GLOCKE-POLISH-2: Empty-State Click-Through-Buttons */
.benachr-devices-enablebtn,
.benachr-devices-helpbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3-5);
  background: var(--brand-primary);
  color: var(--brand-text-on);
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.benachr-devices-enablebtn:hover,
.benachr-devices-helpbtn:hover { filter: brightness(1.08); }
.benachr-devices-enablebtn:active,
.benachr-devices-helpbtn:active { filter: brightness(0.95); }

/* ──────────────────────────────────────────────────────────────────────
 Responsive (extrahiert aus mein-bereich.css "Responsive"-Block,
 ).
 ────────────────────────────────────────────────────────────────────── */

/* Mobile (<600px): Touch-Targets vergroessern (iOS-HIG 44pt min),
 Geraete-Row darf umbrechen damit Buttons vertikal stapeln koennen.
 */
@media (max-width: 599px) {
  .benachr-devices-silencebtn,
  .benachr-devices-remove,
  .benachr-devices-testbtn,
  .benachr-devices-enablebtn,
  .benachr-devices-helpbtn { min-height: 44px; }
  .benachr-devices-row {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .benachr-devices-row-main { flex-basis: 100%; }
}

/* Debug-Panel (Client-Selbstbefund + Push-Trace) — eingeklapptes <details>. */
.benachr-devices-debug {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.benachr-devices-debug summary {
  cursor: pointer;
  user-select: none;
}
.benachr-devices-debug-body {
  margin-top: var(--space-2);
  font-family: monospace;
}
.benachr-devices-debug-trace {
  margin-top: var(--space-2-5);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
  font-family: monospace;
}