/* Alarme */
.alert-item { display: flex; gap: .9rem; align-items: flex-start; padding: .85rem 1rem; border-radius: .6rem; border: 1px solid var(--bs-border-color, #e4e6ea); border-left-width: 4px; margin-bottom: .75rem; background: #fff; animation: reveal .5s cubic-bezier(.2, .75, .25, 1) both; }
.alert-item.sev-critical { border-left-color: #c0392b; }
.alert-item.sev-warning { border-left-color: #eb6834; }
.alert-item.sev-info { border-left-color: #2a78d6; }
.alert-item.acked { opacity: .65; }
.alert-item .ai-icon { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.alert-item.sev-critical .ai-icon { background: #fdecea; color: #c0392b; animation: alarm-pulse 1.6s ease-in-out infinite; }
.alert-item.sev-warning .ai-icon { background: #fff1e8; color: #eb6834; }
.alert-item.sev-info .ai-icon { background: #e8f1fc; color: #2a78d6; }
.alert-item.acked .ai-icon { animation: none; }
.alert-item .ai-body { flex: 1; min-width: 0; }
.alert-item .ai-title { font-weight: 600; }
.alert-item .ai-meta { font-size: .78rem; color: #8a8a85; margin-top: .15rem; }
.alert-item .ai-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
@keyframes alarm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .45); } 70% { box-shadow: 0 0 0 10px rgba(192, 57, 43, 0); } }
.ok-pulse { width: 3.2rem; height: 3.2rem; margin: 0 auto .5rem; border-radius: 50%; background: #e7f6ee; color: #198754; display: flex; align-items: center; justify-content: center; animation: ok-pop 2.8s ease-in-out infinite; }
.ok-pulse svg { width: 1.6rem; height: 1.6rem; }
@keyframes ok-pop { 50% { transform: scale(1.08); } }
details.rule-row { border-bottom: 1px solid #e4e6ea; }
details.rule-row > summary { list-style: none; cursor: pointer; padding: .7rem 1rem; display: flex; align-items: center; gap: .5rem; transition: background .15s; }
details.rule-row > summary::-webkit-details-marker { display: none; }
details.rule-row > summary:hover { background: #f5f7fb; }
details.rule-row > summary::after { content: '▸'; margin-left: auto; color: #8a8a85; transition: transform .2s; }
details.rule-row[open] > summary::after { transform: rotate(90deg); }
details.rule-row .rule-name { font-weight: 500; }

/* Glocke in der Navigation */
.nav-bell { position: relative; }
.nav-bell .bell-badge { position: absolute; top: 2px; right: 0; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; border-radius: 1rem; background: #c0392b; color: #fff; font-size: .65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; animation: alarm-pulse 1.8s ease-in-out infinite; }
.nav-bell svg { transform-origin: 50% 0; }
.nav-bell.has-alerts svg { animation: bell-ring 3s ease-in-out infinite; }
@keyframes bell-ring { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(14deg); } 78% { transform: rotate(-12deg); } 82% { transform: rotate(8deg); } 86% { transform: rotate(-5deg); } 90% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .alert-item, .alert-item .ai-icon, .ok-pulse, .nav-bell .bell-badge, .nav-bell.has-alerts svg { animation: none !important; } }