/* --- 1. Backgrounds (Login Page & Sidebar) --- */
.bg-gradient-primary {
    background-color: var(--color-primary);
    background-image: linear-gradient(180deg, var(--color-primary) 10%, var(--color-primary-dark) 100%);
    background-size: cover;
}

/* --- 2. Buttons (Login Button, Save Buttons) --- */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn-primary:focus, .btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.5);
}

/* --- 3. Text & Icons (Headings, Dashboard Icons) --- */
.text-primary {
    color: var(--color-primary) !important;
}

/* --- 4. Borders (The colored strip on Dashboard Cards) --- */
.border-left-primary {
    border-left: 0.25rem solid var(--color-primary) !important;
}