/********** White + Maroon Theme for Bootstrap **********/

:root {
    /* Color palette */
    --bs-primary: #7C1D3A; /* Maroon */
    --bs-primary-hover: #6D1933;
    --bs-light: #ffffff; /* Pure white */
    --bs-body-color: #4E0F21; /* Deep maroon text */
    --bs-border-color: #EED7DE; /* Pale maroon border */
    --bs-secondary: #AB868E; /* Optional accent rose */
    /* Optional background tints */
    --bs-body-bg: #ffffff;
    --bs-secondary-bg: #F9F2F4;
}

/*** Global body ***/
body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/*** Links ***/
a {
    color: var(--bs-primary);
    text-decoration: none;
}

    a:hover {
        color: var(--bs-primary-hover);
        text-decoration: underline;
    }

/*** Buttons ***/
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--bs-primary-hover);
        border-color: var(--bs-primary-hover);
        color: #fff;
    }

.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-color: transparent;
}

    .btn-outline-primary:hover {
        color: #fff;
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

/*** Navbar ***/
/*.navbar {
    background-color: var(--bs-light);
    box-shadow: 0 2px 10px rgba(124,29,58,0.1);
}*/

    .navbar .nav-link {
        color: var(--bs-body-color);
    }

        .navbar .nav-link:hover,
        .navbar .nav-link.active {
            color: var(--bs-primary);
        }

/*** Cards ***/
.card {
    background-color: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 4px 10px rgba(124,29,58,0.08);
}

/*** Forms ***/
.form-control,
.form-select {
    background-color: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 .2rem rgba(124,29,58,0.15);
    }

/*** Tables ***/
.table {
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

    .table thead th {
        color: var(--bs-primary);
        border-bottom: 2px solid var(--bs-border-color);
    }

/*** Progress bars ***/
.progress {
    background-color: #F1E6E9;
}

.progress-bar {
    background-color: var(--bs-primary);
}

/*** Badges ***/
.badge.bg-primary {
    background-color: var(--bs-primary) !important;
}

.badge.bg-light {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-primary);
}

/*** Alerts ***/
.alert-primary {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/*** Misc ***/
.text-primary {
    color: var(--bs-primary) !important;
}

.bg-primary {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

.border-primary {
    border-color: var(--bs-primary) !important;
}

/*** Optional logo recolor for <img> logos ***/
.logo-img {
    filter: brightness(0) saturate(100%) invert(16%) sepia(38%) saturate(1213%) hue-rotate(310deg) brightness(88%) contrast(97%);
}

/*** Pagination (Maroon) ***/
/* Base pagination palette leaning into maroon brand */
.pagination {
    --bs-pagination-color: var(--bs-primary);
    --bs-pagination-bg: #faf4f6; /* subtle maroon tint */
    --bs-pagination-border-color: rgba(124,29,58,0.35);
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-bg: var(--bs-primary);
    --bs-pagination-hover-border-color: var(--bs-primary);
    --bs-pagination-focus-color: #fff;
    --bs-pagination-focus-bg: var(--bs-primary-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(124,29,58,0.18);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #5b142a; /* darker maroon for active */
    --bs-pagination-active-border-color: #5b142a;
    --bs-pagination-disabled-color: #bfa6ad;
    --bs-pagination-disabled-bg: #f6eef1;
    --bs-pagination-disabled-border-color: rgba(124,29,58,0.25);
}

.pagination .page-link {
    color: var(--bs-pagination-color);
    background-color: var(--bs-pagination-bg);
    border-color: var(--bs-pagination-border-color);
    border-radius: .6rem;
    padding: .4rem .8rem;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(124,29,58,0.08);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.pagination .page-link:hover {
    color: var(--bs-pagination-hover-color);
    background-color: var(--bs-pagination-hover-bg);
    border-color: var(--bs-pagination-hover-border-color);
}

.pagination .page-item.active .page-link {
    color: var(--bs-pagination-active-color);
    background-color: var(--bs-pagination-active-bg);
    border-color: var(--bs-pagination-active-border-color);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), 0 2px 4px rgba(91,20,42,0.25);
}

.pagination .page-item.disabled .page-link {
    color: var(--bs-pagination-disabled-color);
    background-color: var(--bs-pagination-disabled-bg);
    border-color: var(--bs-pagination-disabled-border-color);
}

/* spacing between items for segmented look */
/* Segmented spacing */
.pagination .page-item + .page-item .page-link { margin-left: .35rem; }

/* Make middle numeric items filled maroon by default, previous/next outlined */
.pagination .page-item:not(:first-child):not(:last-child) .page-link {
    background-color: rgba(124,29,58,0.95);
    color: #fff;
    border-color: rgba(124,29,58,0.95);
}
.pagination .page-item:not(:first-child):not(:last-child) .page-link:hover {
    background-color: var(--bs-primary-hover);
    border-color: var(--bs-primary-hover);
}

/* First (Previous) and Last (Next) outlined look */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    background-color: #fff;
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.pagination .page-item:first-child .page-link:hover,
.pagination .page-item:last-child .page-link:hover {
    background-color: var(--bs-primary);
    color: #fff;
}
