/* Status Badges */
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:9999px; font-size:.75rem; font-weight:600; }
.badge-up      { background:#d1fae5; color:#065f46; }
.badge-down    { background:#fee2e2; color:#991b1b; }
.badge-pending { background:#fef3c7; color:#92400e; }
.badge-paused  { background:#f3f4f6; color:#6b7280; }

.badge-up::before    { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:#10b981; }
.badge-down::before  { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:#ef4444; animation:pulse 1.5s infinite; }
.badge-pending::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:#f59e0b; }

@keyframes pulse {
    0%,100% { opacity:1; }
    50%      { opacity:.3; }
}

/* Uptime bars */
.uptime-bar { display:flex; gap:2px; align-items:flex-end; height:32px; }
.uptime-bar .bar { flex:1; min-width:3px; border-radius:2px; cursor:pointer; }
.uptime-bar .bar[data-status="up"]   { background:#10b981; height:100%; }
.uptime-bar .bar[data-status="down"] { background:#ef4444; height:100%; }
.uptime-bar .bar[data-status="null"] { background:#e5e7eb; height:40%; }

/* Sidebar layout */
.sidebar { width:240px; min-height:100vh; background:#1e1b4b; }
.sidebar-link { display:flex; align-items:center; gap:.75rem; padding:.625rem 1rem; border-radius:.5rem; color:#a5b4fc; font-size:.875rem; transition:all .15s; }
.sidebar-link:hover, .sidebar-link.active { background:#312e81; color:#fff; }
.sidebar-link svg { width:1.1rem; height:1.1rem; }