/* ============================================================================
   RPG Szenentracker - User Panel Integration
   Ausgelagert aus header.css (Plugin-Code gehoert nicht ins Theme-Core)

   Ergaenzende Styles fuer den Szenentracker-Link im User Panel.
   Nutzt die bestehenden .up-link, .up-icon, .up-label, .up-badge Klassen
   aus header.css. Badge-Design orientiert sich an alerts.css.
   ============================================================================ */

/* --- Szenen-Link Status-Klassen --- */
/* Werden dynamisch vom Plugin gesetzt */

/* Aktiver Status: User hat Szenen wo er dran ist */
.up-link.scene-active .up-icon {
    color: var(--success, #4ade80);
}

.up-link.scene-active:hover .up-icon {
    color: var(--success, #4ade80);
}

/* Inaktiver Status: Keine Szenen oder nicht dran */
.up-link.scene-inactive .up-icon {
    color: var(--text-dim, #555);
}

.up-link.scene-inactive:hover .up-icon {
    color: var(--text-muted, #888888);
}

/* --- Badge Styling --- */
/* Gleiche Position + Groesse wie Alerts-Badge (header.css .up-badge) */

.up-link.scene-active .up-badge,
.up-link.scene-inactive .up-badge {
    position: absolute;
    top: var(--space-xs, 0.25rem);
    right: var(--space-xs, 0.25rem);
    min-width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--bg, #050505);
    /* Eckig wie alle Badges — kein border-radius */
    border-radius: 2px;
    padding: 0 3px;
}

/* Aktiv: grünes Badge */
.up-link.scene-active .up-badge {
    background: var(--accent, #ff4422);
    animation: scenePulse 2s ease-in-out infinite;
}


/* Inaktiv: Badge verstecken */
.up-link.scene-inactive .up-badge {
    display: none;
}

/* Hover: etwas heller */
.up-link.scene-active:hover .up-badge {
    background: var(--accent, #ff4422);
    filter: brightness(1.15);
}

/* Pulse-Animation — gleicher Stil wie alertPulse in alerts.css */
@keyframes scenePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 4px rgba(74, 222, 128, 0);
    }
}

/* --- Responsive --- */

@media (max-width: 768px) {
    .up-link.scene-active .up-badge,
    .up-link.scene-inactive .up-badge {
        min-width: 12px;
        height: 12px;
        font-size: 0.4rem;
        padding: 0 2px;
    }
}