/* style.css */

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

/* עדכון גובה הווידאו שיהיה דינמי וגבוה יותר ביחס למסך */
#video-container { 
    width: 100%; 
    height: calc(100vh - 240px); 
    min-height: 600px; 
    border-radius: 1rem; 
    overflow: hidden; 
    background: #000; 
    position: relative; 
}

iframe { 
    width: 100% !important; 
    height: 100% !important; 
    border: none; 
}

/* עיצוב לאינדיקטור מצב חיבור */
.status-dot { 
    height: 12px; 
    width: 12px; 
    border-radius: 50%; 
    display: inline-block; 
    margin-left: 5px; 
}

.status-online { 
    background-color: #00f0ff; 
    box-shadow: 0 0 8px #00f0ff; 
}

.status-offline { 
    background-color: #ff003c; 
}

/* אנימציית הבהוב לכפתור עזרה */
@keyframes emergency-blink {
    0%, 100% { background-color: rgba(255, 0, 60, 0.2); box-shadow: 0 0 10px rgba(255, 0, 60, 0.5); border-color: #ff003c; }
    50% { background-color: rgba(255, 0, 60, 0.8); box-shadow: 0 0 25px rgba(255, 0, 60, 1); border-color: #fff; }
}

.help-active { 
    animation: emergency-blink 0.8s infinite; 
    color: white !important; 
}

/* הבהוב מסך חירום למנהל */
@keyframes bg-emergency-blink {
    0%, 100% { background-color: rgba(255, 0, 60, 0); }
    50% { background-color: rgba(255, 0, 60, 0.2); }
}

.global-blink-active { 
    animation: bg-emergency-blink 1.2s infinite ease-in-out; 
}

/* אנימציית נשימה לציר הזמן ניאון */
@keyframes breathing {
    0%, 100% { box-shadow: 0 0 5px rgba(0, 240, 255, 0.4); border-color: #00f0ff; background-color: rgba(0, 240, 255, 0.1); }
    50% { box-shadow: 0 0 15px rgba(0, 240, 255, 0.8); border-color: #fff; background-color: rgba(0, 240, 255, 0.25); }
}

.timeline-active { 
    animation: breathing 2s infinite ease-in-out; 
    color: #00f0ff !important; 
}

/* אנימציית הבהוב מהירה ומהודקת לכינוי חסר (תמיד בכחול) */
@keyframes alert-glow-nick {
    0%, 100% { box-shadow: 0 0 5px rgba(0, 240, 255, 0.2); border-color: rgba(0, 240, 255, 0.3); color: #d1d5db; }
    50% { box-shadow: 0 0 25px rgba(0, 240, 255, 1); border-color: #00f0ff; color: #00f0ff; }
}

.alert-missing-nick { 
    animation: alert-glow-nick 1s infinite ease-in-out !important; 
}

/* אנימציית הבהוב אדום לטיימר ב-30 שניות אחרונות */
@keyframes timer-blink-red {
    0%, 100% { color: #ef4444; text-shadow: 0 0 10px rgba(239, 68, 68, 0.5); border-color: #ef4444; box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); }
    50% { color: #f87171; text-shadow: 0 0 20px rgba(239, 68, 68, 1); border-color: #f87171; box-shadow: 0 0 25px rgba(239, 68, 68, 0.8); }
}

.timer-danger { 
    animation: timer-blink-red 1s infinite ease-in-out !important; 
}

/* אנימציות כפתורי מנהל לסבב והפסקה פעילים */
@keyframes admin-active-round {
    0%, 100% { background-color: #0891b2; border-color: #06b6d4; box-shadow: 0 0 10px rgba(6,182,212,0.5); color: #fff; }
    50% { background-color: #22d3ee; border-color: #fff; box-shadow: 0 0 20px rgba(34,211,238,1); color: #000; }
}

.admin-active-btn { 
    animation: admin-active-round 1.5s infinite !important; 
}

@keyframes admin-active-break {
    0%, 100% { background-color: #7e22ce; border-color: #a855f7; box-shadow: 0 0 10px rgba(168,85,247,0.5); color: #fff; }
    50% { background-color: #c084fc; border-color: #fff; box-shadow: 0 0 20px rgba(192,132,252,1); color: #000; }
}

.admin-active-break-btn { 
    animation: admin-active-break 1.5s infinite !important; 
}

/* אנימציית הבהוב למשיכת תשומת לב להודעה קבועה חדשה */
@keyframes sticky-alert-blink {
    0%, 100% { color: #ffffff; text-shadow: 0 0 8px rgba(255,255,255,0.3); transform: scale(1); }
    50% { color: #facc15; text-shadow: 0 0 20px rgba(250,204,21,1); transform: scale(1.03); }
}

.sticky-blink-active { 
    animation: sticky-alert-blink 1s ease-in-out infinite; 
    color: #facc15 !important; 
}

/* גלילה מוסתרת (אסתטיקה לDark Mode) */
::-webkit-scrollbar { 
    width: 8px; 
    height: 8px; 
}

::-webkit-scrollbar-track { 
    background: #111; 
    border-radius: 4px; 
}

::-webkit-scrollbar-thumb { 
    background: #333; 
    border-radius: 4px; 
}

::-webkit-scrollbar-thumb:hover { 
    background: #00f0ff; 
}