/* ============================================================================
   sammelglocke.css — Ergänzung zu /shared/osp-glocke.v1.css (Klassen og-*) für die Sammelglocke im Intranet (AP-15)
   Nur das, was der Baustein nicht kennt: Sitz im Intranet-Kopf, Gruppen je App (aufklappbar), Hinweiszeile.
   Farben kommen aus den --og-*-Werten des Bausteins (hell und dunkel dort berechnet, Text mindestens 4,5 : 1):
     Gruppenkopf  Text --og-panel-text auf --og-panel-bg:  hell #1F2937 auf #FFFFFF 14,68 · dunkel #E5E7EB auf #1E293B 11,82
     Zahl „neu“   weiß #FFFFFF auf --og-zahl-bg #B53F0B 5,71 : 1 · dunkel #FB923C auf #3A1503 7,20 : 1
     Zahl sonst   --og-panel-text2 auf --og-panel-bg:      hell #4B5563 auf #FFFFFF 7,56 · dunkel #CBD5E1 auf #1E293B 10,28
   Ziele: Glocke 36 px, Gruppenkopf mindestens 36 px hoch, Knöpfe im Panel mindestens 28 px.
   ============================================================================ */

/* Das Attribut hidden muss gegen display:inline-flex von .og gewinnen (Glocke bleibt weg, bis eine App antwortet) */
.sg[hidden] { display: none; }
.sg { margin-right: 2px; }

/* Glocken-Knopf im Intranet-Kopf: gleiche Lage und Rundung wie die übrigen Symbolknöpfe (.hdr-icon-btn, 34 px) */
.sg-knopf { width: 36px; height: 36px; border-radius: var(--as-radius-sm, 8px); }
.sg-knopf:hover { background: rgba(255, 255, 255, .14); }

/* Panel: etwas breiter als die Einzel-Glocke, weil Gruppenköpfe mit Zahl dazukommen */
.sg-panel { width: 400px; }

.sg-gruppe { border-top: 1px solid var(--og-panel-rand); }
.sg-kopf {
    display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px;
    cursor: pointer; list-style: none; user-select: none; color: var(--og-panel-text);
}
.sg-kopf::-webkit-details-marker { display: none; }
.sg-kopf:hover { background: var(--og-neu-bg); }
.sg-kopf:focus-visible { outline: 3px solid var(--og-fokus); outline-offset: -2px; }
.sg-pfeil { display: inline-flex; flex: 0 0 auto; transition: transform .15s ease; transform: rotate(-90deg); color: var(--og-panel-text2); }
.sg-pfeil svg { width: 16px; height: 16px; }
.sg-gruppe[open] > .sg-kopf > .sg-pfeil { transform: rotate(0deg); }
.sg-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.sg-zahl {
    flex: 0 0 auto; min-width: 20px; padding: 0 8px; border-radius: 10px; line-height: 20px; text-align: center;
    font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--og-panel-text2);
}
.sg-zahl.sg-neu { background: var(--og-zahl-bg); color: var(--og-zahl-text); font-weight: 700; }

/* Die Einträge einer Gruppe tragen die Trennlinie der Gruppe, nicht eine zweite */
.sg-gruppe .og-liste .og-eintrag:first-child { border-top: 0; }
.sg-hinweis { margin: 0; padding: 4px 12px 6px 36px; color: var(--og-stand-text); background: var(--og-stand-bg); font-size: 13px; }
.sg-gruppe .og-laeuft li { padding-left: 36px; }
.sg-gruppe .og-mehr { border-top: 0; padding-left: 36px; }
.sg-gruppe .og-mehr a { display: inline-block; min-height: 24px; line-height: 24px; }

/* Badge (Schweregrad aus dem Textkatalog): Wort und Farbe kommen aus der Antwort; Kontrast Text auf Fläche mindestens 4,5 : 1
   hell: grün #166534 auf #E6F4EA 6,28 · gelb #7A3E00 auf #FFF4E5 7,68 · rot #9B1C1C auf #FDE8E8 6,94 · grau #475569 auf #EEF2F6 6,74 · blau #0070B0 auf #EAF3FA 4,74
   dunkel: grün #86EFAC auf #0F3A22 9,07 · gelb #FDE68A auf #422006 11,70 · rot #FCA5A5 auf #4A1414 7,90 · grau #CBD5E1 auf #334155 6,97 · blau #7CC4F2 auf #17324A 6,93 */
:root {
    --sg-b-gruen-bg: #E6F4EA; --sg-b-gruen-tx: var(--og-art-fertig);
    --sg-b-gelb-bg: var(--og-stand-bg); --sg-b-gelb-tx: var(--og-stand-text);
    --sg-b-rot-bg: #FDE8E8; --sg-b-rot-tx: #9B1C1C;
    --sg-b-grau-bg: #EEF2F6; --sg-b-grau-tx: var(--og-art-hinweis);
    --sg-b-blau-bg: var(--og-neu-bg); --sg-b-blau-tx: var(--og-link);
}
:root[data-theme="dark"], html.dark {
    --sg-b-gruen-bg: #0F3A22;
    --sg-b-rot-bg: #4A1414; --sg-b-rot-tx: #FCA5A5;
    --sg-b-grau-bg: #334155;
}
.sg-badge { display: inline-block; padding: 0 8px; border-radius: 10px; line-height: 18px; font-size: 12px; font-weight: 600; }
.sg-gruppe .og-eintrag .sg-badge.sg-b-gruen { background: var(--sg-b-gruen-bg); color: var(--sg-b-gruen-tx); }
.sg-gruppe .og-eintrag .sg-badge.sg-b-gelb  { background: var(--sg-b-gelb-bg);  color: var(--sg-b-gelb-tx); }
.sg-gruppe .og-eintrag .sg-badge.sg-b-rot   { background: var(--sg-b-rot-bg);   color: var(--sg-b-rot-tx); }
.sg-gruppe .og-eintrag .sg-badge.sg-b-grau  { background: var(--sg-b-grau-bg);  color: var(--sg-b-grau-tx); }
.sg-gruppe .og-eintrag .sg-badge.sg-b-blau  { background: var(--sg-b-blau-bg);  color: var(--sg-b-blau-tx); }
.sg-gruppe .og-zeile1 { flex-wrap: wrap; }
.sg-artgruppe { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }

/* Herkunft „von Team <name>“ bei Einträgen, die ein Team über das Tor geschrieben hat (Panel-Text2 auf Panel: hell 7,56 · dunkel 10,28) */
.sg-von { font-size: 12px; color: var(--og-panel-text2); }

/* Handlung im Text (Quelle ohneAktion): Linkoptik wie .og-aktion des Bausteins, damit erkennbar ist, dass die Zeile anklickbar ist */
.sg-gruppe .sg-handlung { color: var(--og-link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sg-gruppe .sg-handlung .sg-code { text-decoration: none; }

/* Befehl im Text (`root_team_abo.sh --setzen`): als Code, ohne Haken, nie an „--“ umbrechen */
.sg-code { white-space: nowrap; font-family: 'Fira Code', ui-monospace, Consolas, monospace; font-size: 12px; padding: 0 4px; border-radius: 4px; display: inline-block;
           background: var(--og-neu-bg); color: var(--og-panel-text); max-width: 100%; }

@media (prefers-reduced-motion: reduce) { .sg-pfeil { transition: none; } }
@media (max-width: 480px) { .sg-panel { width: calc(100vw - 16px); } }