/* css/eit-ticker.css (2.3.110)
 *
 * Header-Ticker fuer ungelesene + offene Tickets.
 * - Sitzt rechts oben im #header, links neben #fullscreen.
 * - Klapptafel-Effekt: Vertikal-Slide alle 5 Sek.
 * - Gruener Balken unten als Hinweis "neue Server-Events da".
 * - Mobile (<=991px) komplett aus -> verdraengt keine Header-Buttons.
 * - Darkmode (body[data-theme="dark"] oder html[data-theme="dark"]): dunkler
 *   Header -> heller Text. Light: heller Header -> dunkler Text.
 *
 * Hoehe = Header-Hoehe (SmartAdmin: 49px). Wir nutzen 100% des Headers, damit
 * sich die Hoehe automatisch anpasst.
 */

#eit-ticker {
    height: 49px;
    line-height: 49px;
    max-width: 50vw;        /* nimmt elastisch Platz, aber max halber Screen */
    min-width: 200px;
    margin-right: 10px;
    padding: 0 14px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    /* Light-Defaults (heller Header) */
    color: #333;
    border-left: 1px solid rgba(0,0,0,.08);
    border-right: 1px solid rgba(0,0,0,.08);
    background: rgba(0,0,0,.02);
    transition: background-color .15s ease;
}

#eit-ticker:hover {
    background: rgba(0,0,0,.05);
}

/* Wenn JS keine Eintraege hat -> komplett unsichtbar (kein leerer Block) */
#eit-ticker.eit-ticker-leer {
    display: none !important;
}

.eit-ticker-stage {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eit-ticker-hash {
    font-weight: 600;
    font-size: 12px;
    color: #888;
    flex: 0 0 auto;
}

.eit-ticker-name {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

/* Klapptafel: neue Zeile rutscht von unten nach oben rein. Reine
   Transform-Animation, GPU-beschleunigt, keine Layout-Reflows. */
@keyframes eit-ticker-flip {
    0%   { transform: translateY(100%); opacity: 0; }
    50%  { opacity: 0.7; }
    100% { transform: translateY(0);    opacity: 1; }
}
.eit-ticker-stage.eit-ticker-flip {
    animation: eit-ticker-flip 380ms ease-out;
}

/* Gruener Balken bei neuen Server-Events. Liegt ueber dem unteren Rand,
   ueberdeckt aber keinen Text (3px). Laeuft einmal in 1.5s durch. */
.eit-ticker-balken {
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 3px;
    background: #4caf50;
    opacity: 0;
    transition: none;
}
@keyframes eit-ticker-balken-anim {
    0%   { right: 100%; opacity: 0; }
    8%   { opacity: 0.85; }
    92%  { opacity: 0.85; }
    100% { right: 0;    opacity: 0; }
}
.eit-ticker-balken.eit-ticker-balken-laeuft {
    animation: eit-ticker-balken-anim 1500ms ease-in-out;
}

/* -------------------- Darkmode -------------------- */
html[data-theme="dark"] #eit-ticker,
body[data-theme="dark"] #eit-ticker {
    color: #d5dfd5;
    border-left: 1px solid rgba(255,255,255,.08);
    border-right: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
}
html[data-theme="dark"] #eit-ticker:hover,
body[data-theme="dark"] #eit-ticker:hover {
    background: rgba(255,255,255,.06);
}
html[data-theme="dark"] .eit-ticker-hash,
body[data-theme="dark"] .eit-ticker-hash {
    color: #9ba39b;
}
/* Gruen leicht ans Darkmode-Greenscheme angeglichen (etwas weicher) */
html[data-theme="dark"] .eit-ticker-balken,
body[data-theme="dark"] .eit-ticker-balken {
    background: #6fa06f;
}

/* -------------------- Mobile aus -------------------- */
@media (max-width: 991px) {
    #eit-ticker {
        display: none !important;
    }
}