/* ─── Layout ───────────────────────────────────────────────────────────────── */
html, body {
    height: 100%;
    background-color: #0f1117;
    color: #c9d1d9;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wrapper {
    min-height: 100vh;
}

/* ─── Sidebar ──────────────────────────────────────────────────────────────── */
#sidebar {
    width: 220px;
    min-width: 220px;
    background-color: #161b22;
    border-right: 1px solid #30363d;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

#sidebar .nav-link {
    border-radius: 6px;
    font-size: .875rem;
    padding: .4rem .75rem;
    transition: background-color .15s, color .15s;
}

#sidebar .nav-link:hover {
    background-color: #21262d;
    color: #f0f6fc !important;
}

#sidebar .nav-link.active {
    background-color: #1f6feb;
    color: #ffffff !important;
}

/* ─── Cards ────────────────────────────────────────────────────────────────── */
.card {
    background-color: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
}

.card-header {
    background-color: #1c2128;
    border-bottom: 1px solid #30363d;
    font-size: .875rem;
    font-weight: 600;
}

/* ─── Metric Display ───────────────────────────────────────────────────────── */
.metric-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.metric-label {
    font-size: .7rem;
    text-transform: uppercase;
    color: #8b949e;
    letter-spacing: .04em;
    margin-top: 2px;
}

/* ─── Tables ───────────────────────────────────────────────────────────────── */
.table-dark {
    --bs-table-bg: #161b22;
    --bs-table-striped-bg: #1c2128;
    --bs-table-hover-bg: #21262d;
    --bs-table-border-color: #30363d;
    font-size: .85rem;
}

/* ─── Status badges / borders ──────────────────────────────────────────────── */
.border-ok     { border-color: #238636 !important; }
.border-success { border-color: #238636 !important; }
.border-warning { border-color: #9e6a03 !important; }
.border-danger  { border-color: #b91c1c !important; }

/* ─── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #161b22; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }

/* ─── Progress bars ────────────────────────────────────────────────────────── */
.progress {
    background-color: #21262d;
}

/* ─── Connection pulse animation ───────────────────────────────────────────── */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

.pulse {
    animation: pulse 1.5s ease-in-out infinite;
}