:root {
    /* Your new primary */
    --primary: #2b5b65;
    /* Bootstrap / Tabler commonly-used vars */
    --bs-primary: #2b5b65;
    --tblr-primary: #2b5b65;
    /* Optional: derived helpers (good for hover/focus effects) */
    --primary-rgb: 43, 91, 101;
    --bs-primary-rgb: 43, 91, 101;
    --tblr-primary-rgb: 43, 91, 101;
}

/* Bootstrap-style components (covers a lot even if vars aren’t wired everywhere) */
a {
    color: var(--bs-primary);
}

    a:hover {
        opacity: .9;
    }

.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

    .btn-primary:hover,
    .btn-primary:focus {
        opacity: .92;
    }

.text-primary {
    color: var(--bs-primary) !important;
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.border-primary {
    border-color: var(--bs-primary) !important;
}

/* Focus ring */
.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25) !important;
}

/* Tabler-ish helpers (if you use them) */
.page-link:focus,
.page-link:hover {
    color: var(--bs-primary) !important;
}

/* Fade in class */
.fade-in {
    animation: fadeIn .35s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}


.overlay-loader {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(2px);
}