:root {

    --primary_brand: #ca1c23;
    --primary_brand_light: #ca555a;
    --secondary_brand: #353535;
    --secondary_brand_light: #7e7d7d;



    --primary_back: #ffffff;
    --secondary_back: rgba(222, 226, 230, 0.75);

    --loader-back: rgba(255, 255, 255, 0.8);

    --primary_light_text: #dee2e6;
    --secondary_light_text: rgba(222, 226, 230, 0.75);

    --primary_dark_text: #212529;
    --secondary_dark_text: rgba(33, 37, 41, 0.75);

    --filter-select-bg: #F5F6F7;
    --filter-select-text: #68717D;

}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif !important;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    height: 100%;
    margin: 0;
}

html, body{
    height: 100%;
}

body{
    min-height: 100vh;   /* ensures full viewport height */
    display: flex;
    flex-direction: column;
}

/* Push footer down by letting the main wrapper grow */
body > .container-fluid{
    flex: 1 1 auto;
}

[data-bs-theme="dark"],
[data-bs-theme="auto"][data-bs-os-theme="dark"] {
    --primary_back: #212529;
    --secondary_back: #2c3034;
    --filter-select-bg: #68717D;
    --filter-select-text: #F5F6F7;
    --loader-back: rgba(33, 37, 41, 0.8);
}

/* Loader Overlay Style */
.page-loader {
    position: fixed;          /* stay in place */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--primary_back); /* semi-transparent backdrop */
    z-index: 9999;           /* on top of everything */
    display: none;           /* center the spinner */
    align-items: center;
    justify-content: center;
}

.navbar-header {
    background-color: var(--primary_back);
    border-bottom: var(--primary_brand) 1px solid;
}

.footer {
    background-color: var(--primary_back);
    border-top: var(--secondary_brand_light) 1px solid;
}

/* Button Color Styles */
.primary-button {
    color: var(--primary_light_text);
    background-color: var(--primary_brand);
    border-color: var(--primary_brand_light);
}

.primary-button:hover {
    color: var(--primary_light_text);
    background-color: var(--primary_brand_light);
    border-color: var(--primary_brand);
}

.primary-button:focus {
    color: var(--primary_light_text);
    background-color: var(--primary_brand_light);
    border-color: var(--primary_light_text);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--primary_light_text);
    background-color: var(--primary_brand_light);
    border-color: var(--primary_brand);
}

.nav-pills .nav-link {
    color: var(--primary_light_text);
}

.nav-pills .nav-link:hover {
    color: var(--primary_light_text);
    background-color: var(--primary_brand_light);
    border-color: var(--primary_brand);
}

.red_badge {
    background-color: var(--primary_brand_light);
}