/* Benachrichtigungen — Desktop-Widget (wie im ERP: dunkler Kopf, Reiter mit Zählern, Liste). Kopf und Reiterfläche
   tragen DIESELBEN Töne wie das Kalender-Widget (Kopf grey-900, Fläche grey-800) — zwei dunkle Widgets, ein Blau. */

/* Eckenrundung: KEINE eigene — die Kachel trägt die Kern-Rolle .cc-widget (layout.css) mit var(--radius),
   also exakt denselben Radius wie das Navigations-Widget .cc-nw. Hier nichts überschreiben. */
.nfw-widget[data-widget-id]{width:var(--sz-500);max-height:var(--sz-640);display:flex;flex-direction:column;background:var(--surface);color:var(--text)}
.nfw-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);background:var(--grey-900);border-bottom:1px solid var(--shadow-line);color:var(--surface);cursor:move;user-select:none}
.nfw-title{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--surface)}
.nfw-new{color:var(--grey-300);font-weight:var(--fw-med);font-size:var(--fs-sm)}
.nfw-actions{display:inline-flex;gap:var(--sp-1)}
.nfw-actions .ac-btn-action,.nfw-actions .mage-btn-icon{color:var(--grey-300);background:transparent;border-color:transparent}
.nfw-actions .ac-btn-action:hover,.nfw-actions .mage-btn-icon:hover{color:var(--surface);background:color-mix(in srgb,var(--surface) 15%,transparent)}
.nfw-body{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.nfw-widget.nfw-collapsed .nfw-body{display:none}
.nfw-flash{box-shadow:var(--focus)}

/* Reiter mit Zähler (data-count als Badge) */
/* border-radius:0 — die Reiterleiste ist hier KEIN schwebender Umschalter, sondern ein durchgehender Balken
   von Kante zu Kante. Der Radius der Kern-Gruppe .cc-seg (var(--radius)) riss an den Widget-Rändern helle
   Kerben in die dunkle Fläche; der Kopf darüber ist ebenfalls eckig. Nur die Knöpfe behalten ihren Radius. */
.nfw-tabs{display:flex;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);background:var(--grey-800);border-bottom:1px solid var(--grey-700);flex-wrap:wrap;border-radius:0}
.nfw-tabs .cc-seg-btn{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--grey-700);color:var(--surface);border-color:var(--grey-600)}
.nfw-tabs .cc-seg-btn:hover{background:var(--grey-600)}
.nfw-tabs .cc-seg-btn.cc-seg-active{background:var(--surface);color:var(--ink);border-color:var(--surface)}
.nfw-tabs .cc-seg-btn::after{content:attr(data-count);display:inline-block;min-width:var(--sz-18);padding:0 var(--sp-2);border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 20%,transparent);color:var(--surface);font-size:var(--fs-2xs);font-weight:var(--fw-heavy);text-align:center;line-height:var(--sz-18)}
.nfw-tabs .cc-seg-btn.cc-seg-active::after{background:var(--grey-200);color:var(--ink)}
.nfw-tabs .cc-seg-btn .bi{font-size:var(--fs-sm)}
.nfw-tabs [data-nfw-tab="mail"] .bi{color:var(--info)}.nfw-tabs [data-nfw-tab="ticket"] .bi{color:var(--o)}.nfw-tabs [data-nfw-tab="monitoring"] .bi{color:var(--ok)}.nfw-tabs [data-nfw-tab="system"] .bi{color:var(--grey-400)}

/* Liste */
.nfw-list{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);background:var(--grey-50)}
.nfw-item{display:flex;gap:var(--sp-3);padding:var(--sp-4);background:var(--surface);border:1px solid var(--border);border-left:3px solid transparent;border-radius:var(--radius);cursor:pointer}
.nfw-item:hover{border-color:var(--grey-300)}
.nfw-item.nfw-unread{border-left-color:var(--o);background:color-mix(in srgb,var(--warn-bg) 40%,var(--surface))}
.nfw-ava{flex:0 0 auto;width:var(--sz-40);height:var(--sz-40);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--surface);font-weight:var(--fw-heavy);font-size:var(--fs-sm)}
.nfw-main{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0;flex:1}
.nfw-row1{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.nfw-sender{font-weight:var(--fw-bold);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nfw-cat{font-size:var(--fs-2xs);font-weight:var(--fw-heavy);letter-spacing:var(--tracking);padding:var(--sp-0) var(--sp-2);border-radius:var(--radius);background:var(--grey-100);color:var(--grey-700)}
.nfw-cat-mail{background:color-mix(in srgb,var(--info) 15%,var(--surface));color:var(--info)}
.nfw-cat-ticket{background:color-mix(in srgb,var(--o) 15%,var(--surface));color:var(--o)}
.nfw-cat-monitoring{background:color-mix(in srgb,var(--ok) 15%,var(--surface));color:var(--ok)}
.nfw-time{margin-left:auto;color:var(--muted);font-size:var(--fs-xs);white-space:nowrap}
.nfw-subject{font-weight:var(--fw-bold);color:var(--ink);font-size:var(--fs-base)}
.nfw-text{color:var(--text);font-size:var(--fs-sm);white-space:pre-line;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.nfw-empty{color:var(--muted);font-size:var(--fs-md);padding:var(--sp-6);text-align:center}