.bg-primary-600,
.btn-primary,
.btn-primary-600,
.sidebar-menu li > a.active-page {
    background-color: rgb(var(--brand));
}

.btn-primary,
.btn-primary-600,
.bg-primary-600.text-white,
.sidebar-menu li > a.active-page,
.sidebar-menu li > a.active-page:hover {
    color: rgb(var(--brand-contrast));
}

.btn-primary:hover,
.btn-primary-600:hover,
.hover\:bg-primary-700:hover {
    background-color: rgb(var(--brand-hover));
}

.text-primary-600,
.hover\:text-primary-600:hover {
    color: rgb(var(--brand));
}

.border-primary-600 { border-color: rgb(var(--brand)); }
.bg-primary-50 { background-color: rgb(var(--brand-soft)); }
.dark .dark\:bg-primary-600\/25 { background-color: rgb(var(--brand) / .25); }

.from-primary-600\/10 {
    --tw-gradient-from: rgb(var(--brand) / .1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--brand) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.status-primary { background: rgb(var(--brand) / .1); color: rgb(var(--brand)); }
.panel-pagination a:hover { border-color: rgb(var(--brand)); color: rgb(var(--brand)); }
.panel-pagination .current { background: rgb(var(--brand)); border-color: rgb(var(--brand)); color: rgb(var(--brand-contrast)); }
code.inline { background: rgb(var(--brand) / .08); color: rgb(var(--brand)); }
.form-control:focus { border-color: rgb(var(--brand)); }
.form-check-input:checked { background-color: rgb(var(--brand)); border-color: rgb(var(--brand)); }

.sidebar-logo img.light-logo, .sidebar-logo img.dark-logo { max-height: 34px; width: auto; }
.sidebar-logo img.logo-icon { max-height: 40px; }

.brand-accent-line { height: 3px; background: linear-gradient(90deg, rgb(var(--accent)), rgb(var(--accent) / 0)); }

.login-split { min-height: 100vh; display: flex; }
.login-brand {
    flex: 1; display: none; flex-direction: column; justify-content: space-between; padding: 3rem;
    background: radial-gradient(120% 90% at 100% 0%, rgb(var(--accent) / .18), transparent 55%), rgb(14 18 59);
    color: #F4EFE4;
}
@media (min-width: 1024px) { .login-brand { display: flex; } }
.login-brand img { max-width: 300px; width: 70%; }
.login-brand .tagline { color: rgb(var(--accent)); letter-spacing: .18em; text-transform: uppercase; font-size: .8125rem; font-weight: 600; }
.login-brand .footnote { color: #F4EFE4; opacity: .55; font-size: .8125rem; }
.login-form-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }

.login-mobile-logo { height: 34px; width: auto; margin-bottom: 1.5rem; }
.login-mobile-logo.dark-only, .dark .login-mobile-logo.light-only { display: none; }
.dark .login-mobile-logo.dark-only { display: block; }
@media (min-width: 1024px) { .login-mobile-logo, .dark .login-mobile-logo.dark-only { display: none; } }
.bg-accent-600 { background-color: rgb(var(--accent)); color: #fff; }
.from-accent-600\/10 {
    --tw-gradient-from: rgb(var(--accent) / .12) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--accent) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark .status-primary { background: rgb(var(--brand) / .2); color: rgb(var(--brand)); }