/* css/_status.css - Styling für Kamera Status-Button und Lightbox */

/* ========================================================= */
/* 1. KAMERA-STATUS BUTTON STYLING (#camStatusButton)        */
/* ========================================================= */

#camStatusButton {
    /* Stellt sicher, dass die Basis-Styles aus _components.css greifen */
    padding: 8px 10px; /* Kompakte Größe */
    gap: 0; /* Kein Abstand zwischen Icon und Text */
    font-family: 'Exo 2', system-ui, sans-serif; 
}

#camStatusButton i {
    font-size: 1.2em; 
    /* NEU: Icon Stacking ist HIER entfernt,
       aber position: relative muss wegen anderer Styling-Abhängigkeiten in diesem Block bleiben */
    position: relative; 
    display: inline-block;
}

/* OK Zustand (Lassen Sie diesen Zustand von den Standard .footer-actions Styles behandeln) */
#camStatusButton.status-ok {
    border-color: var(--divider-color);
    color: var(--text-color);
    background: var(--panel-bg);
}

/* ERROR Zustand (Störung) - Rot */
#camStatusButton.status-error {
    background-color: #ff4757;
    border-color: #ff4757;
    color: white; 
    font-weight: bold;
    animation: pulse-red 1s infinite alternate;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.5);
}

@keyframes pulse-red {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0.9; transform: scale(1.02); }
}

/* WARNUNG Zustand (z.B. Zeitstempel ist etwas älter) - Orange */
#camStatusButton.status-warning {
    background-color: var(--accent-color); 
    border-color: var(--accent-color);
    color: white; 
    font-weight: bold;
}


/* ========================================================= */
/* 2. MODAL LIGHTBOX STYLES (.status-content)                */
/* ========================================================= */

.status-content {
    max-width: 450px;
}

.status-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5em;
    color: var(--accent-color);
    text-align: center;
    font-family: 'Orbitron', system-ui, sans-serif;
}

/* Hauptstatus-Banner im Modal (OK, ERROR, WARNING) */
.status-main {
    font-family: 'Orbitron', system-ui, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    transition: background-color 0.5s, color 0.5s;
}

.status-main.ok {
    background-color: #2ed573; /* Grün */
    color: white;
}

.status-main.error {
    background-color: #ff4757; /* Rot */
    color: white;
    animation: blink-red-modal 1s infinite alternate;
}

.status-main.warning {
    background-color: var(--accent-color); /* Orange */
    color: white;
}

@keyframes blink-red-modal {
    from { opacity: 1; }
    to { opacity: 0.8; }
}

/* Status-Detail-Liste */
.status-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.status-detail-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--divider-color);
    font-size: 0.95em;
}

.status-detail-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Label (z.B. "Letztes Update:") */
.detail-label {
    font-weight: 600;
    color: var(--text-color);
}

/* Wert (z.B. "10:30:15") - HIER WIRD DIE ANIMATION ANGEWENDET */
.detail-value {
    /* 1. Grund- und Startfarbe (normaler Text) */
    color: var(--text-color); 
    font-weight: normal; 
    font-size: 1.1em;
    font-family: 'Orbitron', system-ui, sans-serif;

    /* 2. ANIMATION: 3 Sekunden Dauer, unendlich, fließend */
    animation: accent-pulse 3s infinite alternate;
}

/* KEYFRAMES FÜR DEN GEWÜNSCHTEN EFFEKT (Abwechselnd Orange und Fett) */
@keyframes accent-pulse {
    /* Start und Ende des 3s Zyklus: Normale Farbe und normale Dicke */
    from, 
    to { 
        color: var(--text-color); 
        font-weight: normal; 
    }
    
    /* Hälfte des Zyklus (1.5 Sekunden): Akzentuierter, dicker und leicht leuchtend */
    50% { 
        color: var(--accent-color); 
        font-weight: bold; 
        text-shadow: 0 0 3px rgba(var(--accent-color-rgb), 0.7); 
    }
}