/* ═══════════════════════════════════════════════
   GLOBAL
═══════════════════════════════════════════════ */
:root {
    --sidebar-w: 220px;
}

body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background: #f1f5f9;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }

/* ═══════════════════════════════════════════════
   AUTH PAGE
═══════════════════════════════════════════════ */
.auth-page {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #0f172a 100%);
}

.auth-logo-circle {
    width: 72px; height: 72px;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; color: white;
    backdrop-filter: blur(10px);
}

/* ═══════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════ */
.sidebar {
    width: var(--sidebar-w);
    min-height: calc(100vh - 56px);
    position: sticky;
    top: 56px;
    flex-shrink: 0;
}

.sidebar .nav-link {
    color: rgba(255,255,255,.6);
    padding: 10px 20px;
    font-size: 14px;
    border-left: 3px solid transparent;
    transition: all .15s;
}

.sidebar .nav-link:hover {
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.05);
}

.sidebar .nav-link.active {
    color: #fff;
    background: rgba(99,102,241,.25);
    border-left-color: #6366f1;
}

/* ═══════════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════════ */
.main-area {
    min-height: calc(100vh - 56px);
}

/* ═══════════════════════════════════════════════
   STAT ICON
═══════════════════════════════════════════════ */
.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.stat-icon.bg-green  { background: #d1fae5; color: #065f46; }
.stat-icon.bg-blue   { background: #dbeafe; color: #1e40af; }
.stat-icon.bg-purple { background: #e0e7ff; color: #3730a3; }
.stat-icon.bg-orange { background: #fef3c7; color: #92400e; }

/* ═══════════════════════════════════════════════
   VIDEO
═══════════════════════════════════════════════ */
img.video-thumb-sm {
    width: 56px; height: 42px;
    object-fit: cover;
    border-radius: 4px;
    background: #1e1b4b;
}

/* ═══════════════════════════════════════════════
   STREAM CARDS
═══════════════════════════════════════════════ */
.stream-card {
    border-left: 4px solid #e2e8f0 !important;
    transition: box-shadow .2s;
}

.stream-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,.1) !important; }

.sc-running { border-left-color: #10b981 !important; }
.sc-stopped { border-left-color: #cbd5e1 !important; }
.sc-error   { border-left-color: #ef4444 !important; }
.sc-pending { border-left-color: #f59e0b !important; }

/* ═══════════════════════════════════════════════
   LIVE DOT
═══════════════════════════════════════════════ */
.live-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(.7); }
}

/* ═══════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════ */
.toast-wrap {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    animation: slideIn .3s, fadeOut .4s 2.6s forwards;
    pointer-events: all;
    min-width: 240px;
    max-width: 360px;
}

.toast-success { background: #ecfdf5; border-left: 4px solid #10b981; color: #065f46; }
.toast-error   { background: #fff1f2; border-left: 4px solid #ef4444; color: #881337; }
.toast-info    { background: #eff6ff; border-left: 4px solid #3b82f6; color: #1e40af; }

@keyframes slideIn  { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOut  { from { opacity: 1; } to { opacity: 0; } }

/* ═══════════════════════════════════════════════
   SERVER MONITOR
═══════════════════════════════════════════════ */
.server-metric {
    background: #f8fafc;
    border-radius: 8px;
    padding: 14px;
    height: 100%;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        min-height: auto;
        position: relative;
        top: 0;
    }
    .sidebar .nav { flex-direction: row !important; overflow-x: auto; }
    .sidebar .nav-link { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
    .sidebar .nav-link.active { border-bottom-color: #6366f1; border-left-color: transparent; }
}