/* Dynamic Branding Colors */
:root {
    --primary-color: #009efb;
    --secondary-color: #ff007b;
}

/* Base structural elements */
.header {
    background: var(--primary-color) !important;
    background: linear-gradient(to right, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
}

/* Sidebar styling (if dark theme, we can leave it or just tint active links) */
.sidebar-menu li.active a {
    color: var(--primary-color) !important;
    background-color: rgba(0,0,0,0.05);
}

.sidebar-menu li a:hover {
    color: var(--primary-color) !important;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.btn-info {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.dash-widget-bg1,
.dash-widget-info > span.widget-title1,
.chart-title span {
    background: var(--primary-color) !important;
}
.dash-widget-bg2,
.dash-widget-info > span.widget-title2 {
    background: var(--secondary-color) !important;
}
.dash-widget-bg3,
.dash-widget-info > span.widget-title3,
.dash-widget-bg4,
.dash-widget-info > span.widget-title4 {
    background: var(--primary-color) !important;
}

.branding-student-login {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
}
.branding-student-login .btn-login {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
}
.branding-student-login .btn-secondary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%) !important;
}
.branding-student-login .school-logo {
    border-color: var(--primary-color) !important;
    animation: none !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18) !important;
}
.branding-student-login .form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
}

.branding-staff-login .bg-success {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
}
.branding-staff-login .login-avatar {
    border: 4px solid var(--primary-color) !important;
}

/* Login/Portal Wrappers */
.account-page .account-wrapper .account-logo {
    color: var(--primary-color) !important;
}

.account-box .btn-primary {
    background: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

/* Text Colors */
.text-primary {
    color: var(--primary-color) !important;
}

/* Borders and Highlights */
.page-title {
    border-left-color: var(--primary-color) !important;
}

/* Tabs */
.nav-tabs.nav-tabs-solid > li > a.active, 
.nav-tabs.nav-tabs-solid > li > a.active:hover, 
.nav-tabs.nav-tabs-solid > li > a.active:focus {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Panels */
.panel-primary > .panel-heading {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.panel-primary {
    border-color: var(--primary-color) !important;
}

/* Pagination */
.pagination > .active > a, 
.pagination > .active > a:focus, 
.pagination > .active > a:hover, 
.pagination > .active > span, 
.pagination > .active > span:focus, 
.pagination > .active > span:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}