/* ============================================================
   SIKEMITRAAN - Maroon Base Theme (Bootstrap 5.3 override)
   Load this AFTER bootstrap.min.css so the custom properties
   below recolour every primary element app-wide.
   ============================================================ */

:root {
    /* Maroon palette */
    --maroon-50:  #fdf3f4;
    --maroon-100: #fbe3e5;
    --maroon-200: #f5c6cb;
    --maroon-300: #ec9ca4;
    --maroon-400: #df6874;
    --maroon-500: #c93b4b;
    --maroon-600: #a02332;   /* primary */
    --maroon-700: #861d2b;
    --maroon-800: #701b28;
    --maroon-900: #5f1b27;
    --maroon-950: #360a12;

    /* Override Bootstrap primary with maroon */
    --bs-primary: #a02332;
    --bs-primary-rgb: 160, 35, 50;
    --bs-primary-bg-subtle: #fbe3e5;
    --bs-primary-border-subtle: #f5c6cb;
    --bs-primary-text-emphasis: #701b28;

    --bs-link-color: #a02332;
    --bs-link-color-rgb: 160, 35, 50;
    --bs-link-hover-color: #861d2b;
    --bs-link-hover-color-rgb: 134, 29, 43;

    --bs-btn-bg: #a02332;
    --bs-btn-border-color: #a02332;
    --bs-btn-hover-bg: #861d2b;
    --bs-btn-hover-border-color: #861d2b;
    --bs-btn-active-bg: #701b28;
    --bs-btn-active-border-color: #701b28;
    --bs-btn-focus-shadow-rgb: 160, 35, 50;

    --bs-body-font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    background-color: #f8f9fa;
}

/* Slightly rounder, softer cards/inputs for a clean modern feel */
.btn {
    font-weight: 600;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}

.card {
    border-radius: 1rem;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
}

/* Make text/bg utility overrides consistent with rgb primary.
   NOTE: we must NOT add !important here, otherwise it fights with the
   bg-opacity-* utilities (e.g. bg-primary bg-opacity-10) and renders a
   solid dark maroon behind dark maroon text (unreadable). Bootstrap already
   resolves these from --bs-primary-rgb, so we only ensure the fallback. */

/* Pagination recoloured to maroon */
.pagination .page-link {
    color: var(--bs-primary);
}
.pagination .page-link:hover {
    color: var(--bs-primary-text-emphasis);
}
.pagination .active > .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Navbar (Bootstrap default navbar) maroon */
.navbar-maroon {
    background-color: var(--maroon-700) !important;
}

/* Landing welcome hero */
.hero-maroon {
    background: linear-gradient(135deg, var(--maroon-800) 0%, var(--maroon-600) 100%);
}