/* benachrichtigungen-matrix.css — Mein-Bereich Benachrichtigungen Matrix-Tabelle

   Quelle: extrahiert aus mein-bereich.css ("Matrix-Tabelle"-Block).
   Inhalt 1:1.

   Konsumenten: web/js/sections/benachrichtigungen.js — die Matrix rendert
   pro Notif-Kategorie eine Tabelle mit Event-Zeilen und Kanal-Spalten
   (Mail/Push/Glocke + Digest-Spacer + 2 Digest-Cells). CSS-Grid mit
   `display:contents` an Header/Row, damit Items direkt im Parent-Grid
   landen.

   Sub-Komponenten:
   - `.benachr-matrix` — CSS-Grid-Container
   - `.benachr-matrix-head` — Spalten-Header (display:contents)
   - `.benachr-matrix-head-icon` — Icon im Header
   - `.benachr-row` + `.benachr-row-label` + `.benachr-row-spacer` — Event-Zeilen
   - `.benachr-cell-check*` — Checkbox-Cells (Digest-Cells)
   - `.benachr-push-global-hint` — Globaler Push-nicht-verfuegbar-Banner
   - `.benachr-empty` — Empty-State

   Push-Unavailable-Hint sitzt zwischen Geraete-Sektion und der ersten
   Kategorie-Card; eigenstaendige Zeile im flex-column-Stack.
   ========================================================================== */

.benachr-matrix {
  display: grid;
  /* Multi-Select: 4 Kanal-Spalten (Mail/Push/Glocke/Teams). Danach 16px-Spacer +
     2 Digest-Spalten (Tag/Woche). Muss zur Spaltenzahl von _BNA_COLS passen. */
  grid-template-columns: minmax(200px, 1fr) repeat(4, 64px) 16px repeat(2, 56px);
  column-gap: 0;
  align-items: stretch;
}
/* Spalten-Gruppen-Zeile (über den Kanal-Labels). display:contents → die vier
   Zellen sind direkte Grid-Items; grid-column-Spannen matchen die feste
   Struktur: Label(1) · 4 Kanäle(2–5) · Trenner(6) · 2 Digest(7–8).
   Sparse-Auto-Placement schiebt Kopf + Zeilen sauber darunter. */
.benachr-matrix-grouprow { display: contents; }
.benachr-matrix-group-corner { grid-column: 1 / 2; }
.benachr-matrix-group-gap { grid-column: 6 / 7; }
.benachr-matrix-group--sofort { grid-column: 2 / 6; }
.benachr-matrix-group--digest { grid-column: 7 / 9; }
.benachr-matrix-group {
  align-self: end;
  padding: 0 var(--space-1) var(--space-1);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Feiner Verbinder unter dem Gruppen-Label zu „seinen" Spalten. */
.benachr-matrix-group::after {
  content: "";
  display: block;
  height: 2px;
  margin: var(--space-1) auto 0;
  width: 60%;
  max-width: 120px;
  border-radius: var(--radius-circular);
  background: var(--color-border);
}

.benachr-matrix-head {
  display: contents;
}
.benachr-matrix-head > div {
  padding: var(--space-2) var(--space-1);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  /* Kein graues Kopf-Band — die weisse Flaeche traegt, die Border trennt. */
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xxs);
}
.benachr-matrix-head > div:first-child {
  grid-column: 1 / 2;
  text-align: left;
  padding-left: var(--space-4);
  align-items: flex-start;
}
.benachr-matrix-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.benachr-matrix-head-icon img { width: 16px; height: 16px; opacity: 0.7; }
.benachr-matrix-head-spacer {
  background: transparent;
  border-bottom: 1px solid var(--color-border);
}

/* Event-Zeile */
.benachr-row {
  display: contents;
}
.benachr-row > div {
  padding: var(--space-2-5) var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--color-border-light);
  transition: background var(--duration-fast);
}
.benachr-row:last-child > div { border-bottom: 0; }
.benachr-row.is-dirty > div { background: color-mix(in srgb, var(--brand-default) 4%, transparent); }
/* Hover als Brand-Hauch statt Grauflaeche */
.benachr-row:hover > div { background: color-mix(in srgb, var(--brand-default) 3%, transparent); }
.benachr-row.is-dirty:hover > div { background: color-mix(in srgb, var(--brand-default) 7%, transparent); }

.benachr-row-label {
  /* Explizite Grid-Verdrahtung auf Spalte 1, damit die Row-Items nie in
     falsche Spalten rutschen. Sonst kann das Label durch display:contents-
     Propagierung anders landen. Zweizeilig: Titel + Erklaer-Hint. */
  grid-column: 1 / 2;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: var(--space-px);
  padding-left: var(--space-4) !important;
  padding-right: var(--space-3) !important;
  padding-top: var(--space-2-5) !important;
  padding-bottom: var(--space-2-5) !important;
  overflow: hidden;
}
.benachr-row-title {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.benachr-row-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.35;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Kein explizites grid-column: der Spacer fliesst automatisch hinter die
   Kanal-Cells — genau wie .benachr-matrix-head-spacer im Header. Nicht an die
   Kanalzahl koppeln (frueher hart auf 5/6 gepinnt → beim Hinzufuegen des Teams-
   Kanals kollidierte er mit der Teams-Cell und schob Tag/Woche in eine zweite Zeile). */
.benachr-row-spacer { background: transparent; }

/* .benachr-cell-check-wrap (Compound mit -radio-wrap) */
.benachr-cell-check-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Checkbox-Cells (Digest) */
.benachr-cell-check {
  cursor: pointer;
}
.benachr-cell-check input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}
.benachr-cell-check.is-disabled input[type="checkbox"] { cursor: not-allowed; }
.benachr-cell-check-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition: all var(--duration-fast);
}
.benachr-cell-check-box:hover {
  border-color: var(--brand-default);
}
.benachr-cell-check input[type="checkbox"]:checked + .benachr-cell-check-box {
  border-color: var(--brand-default);
  background: var(--brand-default);
}
.benachr-cell-check input[type="checkbox"]:checked + .benachr-cell-check-box::after {
  content: "";
  width: 5px;
  height: 10px;
  border: solid var(--brand-text-on);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.benachr-cell-check input[type="checkbox"]:focus-visible + .benachr-cell-check-box {
  outline: 2px solid var(--brand-default);
  outline-offset: 2px;
}

/* Tri-State-Spalten-Toggle im Matrix-Kopf: schaltet die ganze Kategorie fuer
   einen Kanal um (ersetzt das fruehere "Alle Ereignisse…"-Bulk-Menue).
   Box kompakter als Zellen-Checkboxen, Hit-Area via Wrapper-Padding >= 28px
   (der unsichtbare Input deckt den ganzen Wrapper ab). */
.benachr-col-toggle {
  padding: var(--space-1-5);
  min-width: 28px;
  min-height: 28px;
}
.benachr-col-toggle input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.benachr-cell-check-box--sm {
  width: 18px;
  height: 18px;
}
/* Checked-Zustand explizit fuer den Kopf-Toggle: die generischen Checked-
   Regeln sind auf .benachr-cell-check gescoped, der Toggle liegt ausserhalb.
   Glyph-Masse identisch zur Standard-Zellen-Checkbox. */
.benachr-col-toggle input[type="checkbox"]:checked + .benachr-cell-check-box {
  border-color: var(--brand-default);
  background: var(--brand-default);
}
.benachr-col-toggle input[type="checkbox"]:checked + .benachr-cell-check-box::after {
  content: "";
  width: 5px;
  height: 10px;
  border: solid var(--brand-text-on);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
/* Indeterminate ("teils an"): waagerechter Strich statt Haken. */
.benachr-col-toggle input[type="checkbox"]:indeterminate + .benachr-cell-check-box {
  border-color: var(--brand-default);
  background: var(--brand-default);
}
.benachr-col-toggle input[type="checkbox"]:indeterminate + .benachr-cell-check-box::after {
  content: "";
  width: 8px;
  height: 0;
  border: 0;
  border-top: 2px solid var(--brand-text-on);
  transform: none;
}
.benachr-col-toggle input[type="checkbox"]:focus-visible + .benachr-cell-check-box {
  outline: 2px solid var(--brand-default);
  outline-offset: 2px;
}
.benachr-cell-check.is-disabled { cursor: not-allowed; }
.benachr-cell-check.is-disabled .benachr-cell-check-box {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--color-bg-subtle);
}

/* Push-Unavailable-Hint */
/* E6-Finish: Globaler Push-nicht-verfuegbar-Banner, sitzt zwischen Geraete-
   Sektion und erster Kategorie-Card. Gleiche Warnfarben wie der alte pro-Kategorie-
   Banner, aber als eigenstaendige Zeile im flex-column-Stack. */
.benachr-push-global-hint {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
  font-size: var(--font-size-sm);
  border: 1px solid var(--status-warning-fg);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  line-height: 1.4;
}
.benachr-push-global-hint .ui-ico img { width: 16px; height: 16px; opacity: 0.9; }

/* Empty-State */
.benachr-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

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

/* Notebook (≤1399px): schmalere Cells */
@media (max-width: 1399px) {
  .benachr-matrix { grid-template-columns: minmax(180px, 1fr) repeat(4, 56px) 12px repeat(2, 52px); }
}

/* Tablet (≤999px): Matrix bleibt, kompakter */
@media (max-width: 999px) {
  .benachr-matrix { grid-template-columns: minmax(140px, 1fr) repeat(4, 48px) 8px repeat(2, 44px); }
  .benachr-row-label { padding-left: var(--space-3) !important; padding-right: var(--space-2) !important; }
  .benachr-matrix-head > div:first-child { padding-left: var(--space-3); }
}

/* Mobile (<600px): Fallback auf Listen-Layout — Matrix wird flex-column,
   Header versteckt, Cells zu Items mit attr(data-label)-Praefix. */
@media (max-width: 599px) {
  .benachr-matrix {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .benachr-matrix-head,
  .benachr-matrix-grouprow { display: none; }
  .benachr-row { display: flex !important; flex-direction: column; padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border-light); gap: var(--space-2); }
  .benachr-row:last-child { border-bottom: 0; }
  .benachr-row > div {
    border-bottom: 0;
    padding: 0;
    justify-content: flex-start;
  }
  .benachr-row.is-dirty { background: color-mix(in srgb, var(--brand-default) 4%, transparent); }
  .benachr-row.is-dirty > div { background: transparent; }
  /* Paket Row-Hover auf Mobile aus.
 Auf Desktop ist eine Row ein Grid-Row mit Cells nebeneinander — Hover
 leuchtet die Zeile als zusammenhaengende Einheit auf. Auf Mobile ist
 die Row flex-column, Cells stapeln vertikal. Der Hover-Effekt wuerde
 sich dadurch ueber den kompletten Eintrag-Block legen und sieht aus
 als waeren alle Cells gleichzeitig aktiv. Hover hier raus — die
 Inputs/Labels haben eigene :hover-States, das reicht. */
  .benachr-row:hover > div { background: transparent; }
  .benachr-row.is-dirty:hover > div { background: transparent; }
  .benachr-row-label {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Auf Mobile duerfen Titel + Hint umbrechen (kein Ellipsis-Zwang). */
  .benachr-row-title { font-weight: var(--fw-semibold); white-space: normal; }
  .benachr-row-hint { white-space: normal; }
  .benachr-row-spacer { display: none; }
  .benachr-cell-check {
    width: 100%;
    justify-content: space-between !important;
    padding: var(--space-2-5) 0;
    min-height: 44px;
  }
  .benachr-cell-check::before {
    content: attr(data-label);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    flex: 1;
    text-align: left;
  }
}