:root {
    --brand-primary: #0b64e6;
    --brand-dark: #0f1724;
    --sidebar-bg: #0b2340;
    --muted: #6b7280;
    --surface: #ffffff;
    --accent: #2563eb;
    --radius: 8px;
}


/* Header / Navbar */

.nav-primary {
    background: var(--surface);
    border-bottom: 1px solid rgba(11, 100, 230, 0.06)
}

.brand-logo {
    height: 36px;
    width: 36px;
    border-radius: 6px;
    object-fit: cover
}

.btn-accent {
    background: var(--brand-primary);
    color: #fff;
    border: none
}


/* Sidebar */

.main-sidebar {
    background: var(--sidebar-bg)!important;
    color: #fff
}

.main-sidebar .brand-link {
    padding: .7rem 1rem
}

.main-sidebar .brand-text {
    font-weight: 700
}

.main-sidebar .user-panel .info a {
    color: #fff;
    font-weight: 600
}

.main-sidebar .nav-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.9)
}

.main-sidebar .nav-sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.12), rgba(11, 100, 230, 0.06));
    color: var(--brand-primary)
}

.main-sidebar .nav-header {
    color: rgba(255, 255, 255, 0.7)
}


/* Footer */

.site-footer {
    background: linear-gradient(180deg, var(--sidebar-bg), #071428);
    color: rgba(255, 255, 255, 0.9);
    padding: 1rem 0
}


/* Accessibility */

a:focus,
button:focus {
    outline: 3px solid rgba(11, 100, 230, 0.18);
    outline-offset: 2px
}


/* Small helpers */

.text-muted {
    color: var(--muted)
}

.rounded-md {
    border-radius: var(--radius)
}


/* Responsive tweaks */

@media (max-width:768px) {
    .brand-logo {
        height: 30px;
        width: 30px
    }
}