:root,
[data-bs-theme="light"] {
    /* === BRAND COLORS === */
    --bs-primary: #4A3971;
    --bs-primary-rgb: 74, 57, 113; /* RGB version of #4A3971 */
    /* === TEXT COLORS === */
    --bs-primary-text: #4A3971; /* text-primary */
    --bs-link-color: #4A3971;
    --bs-link-hover-color: #3c2e5e;
    /* === BUTTONS === */
    --bs-btn-color: #fff;
    --bs-btn-bg: #4A3971;
    --bs-btn-border-color: #4A3971;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3c2e5e; /* darker shade */
    --bs-btn-hover-border-color: #3c2e5e;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2f1d50; /* even darker */
    --bs-btn-active-border-color: #2f1d50;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #9a8cc8; /* lighter muted purple */
    --bs-btn-disabled-border-color: #9a8cc8;
    --bs-btn-focus-shadow-rgb: 74, 57, 113;
    /* === BADGES === */
    --bs-badge-color: #fff;
    --bs-badge-bg: #4A3971;
    /* === ALERTS === */
    --bs-alert-color: #fff;
    --bs-alert-bg: #4A3971;
    --bs-alert-border-color: #3c2e5e;
    /* === PAGINATION === */
    --bs-pagination-color: #4A3971;
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-bg: #4A3971;
    --bs-pagination-hover-border-color: #4A3971;
    --bs-pagination-active-bg: #2f1d50;
    --bs-pagination-active-border-color: #2f1d50;
    /* === FORM CONTROLS === */
    --bs-focus-ring-color: rgba(74, 57, 113, 0.4);
    --bs-form-switch-checked-bg: #4A3971;
}

/* For dark mode, you can optionally tweak */
[data-bs-theme="dark"] {
    --bs-primary: #9a8cc8; /* lighter tint of purple */
    --bs-primary-rgb: 154, 140, 200;
    --bs-btn-focus-shadow-rgb: 154, 140, 200;
}



html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

:root {
    --bs-primary: #4A3971;
}

/* Override Bootstrap primary button styles */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    font-weight: 500;
    border-radius: 0.5rem; /* rounded corners */
    padding: 0.5rem 1.25rem;
    transition: all 0.2s ease-in-out;
}

    /* Hover */
    .btn-primary:hover {
        background-color: #3e2b6a; /* lighter/darker shade of primary */
        border-color: #3e2b6a;
    }

    /* Focus (keyboard accessibility) */
    .btn-primary:focus,
    .btn-primary:focus-visible {
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(47, 31, 80, 0.4);
    }

    /* Active (when pressed) */
    .btn-primary:active,
    .btn-primary.active {
        background-color: #25163f; /* darkest shade */
        border-color: #25163f;
    }

    /* Disabled */
    .btn-primary:disabled {
        background-color: #6c5b89;
        border-color: #6c5b89;
    }


.page-header {
    background: linear-gradient(135deg, #2F1D50, #4A2D7F); /* gradient background */
    padding: 1.5rem 0; /* more breathing room */
    border-bottom: 3px solid #f1c40f; /* accent underline */
    margin-bottom: 1.5rem;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* subtle shadow */
}

    .page-header .container-fluid {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .page-header .page-title {
        font-size: 1.8rem;
        font-weight: 600;
        margin: 0;
        letter-spacing: 0.5px;
    }

    .page-header .page-subtitle {
        font-size: 0.95rem;
        opacity: 0.85;
    }



.sidenav {
    min-width: 220px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    overflow-y: auto;
    background: var(--bs-body-bg); /* adapts to theme */
    border-right: 1px solid var(--bs-border-color);
    z-index: 1030;
}

    /* Sidebar links adopt body text color and get subtle hover */
    .sidenav .nav-link {
        color: var(--bs-body-color);
        border-radius: .5rem;
        padding: .5rem .75rem;
    }

        .sidenav .nav-link:hover,
        .sidenav .nav-link:focus {
            color: var(--bs-emphasis-color);
            background: var(--bs-tertiary-bg); /* light gray in light, deep gray in dark */
            text-decoration: none;
        }

        /* Active item highlight that works in both themes */
        .sidenav .nav-link.active {
            color: var(--bs-emphasis-color);
            background: color-mix(in oklab, var(--bs-primary) 12%, transparent);
            border: 1px solid color-mix(in oklab, var(--bs-primary) 30%, var(--bs-border-color));
        }

    /* Dropdown menu inherits theme automatically; ensure layering */
    .sidenav .dropdown-menu {
        background: var(--bs-body-bg);
        color: var(--bs-body-color);
        border-color: var(--bs-border-color);
        z-index: 2000;
    }

    .sidenav .dropdown-item:hover {
        background: var(--bs-tertiary-bg);
    }



[data-bs-theme="light"] #themeToggle {
    color: #4A3971; /* your brand purple */
    border-color: #4A3971;
    background-color: #fff;
}

    [data-bs-theme="light"] #themeToggle:hover {
        background-color: #4A3971;
        color: #fff;
    }

[data-bs-theme="dark"] #themeToggle {
    color: #fff;
    border-color: #fff;
}


/* Pill sizing */
.status-pill {
    font-weight: 600;
    font-size: .85rem;
    //padding: .35rem .6rem;
    padding: .75rem .10rem;
    display: inline-block;
    border-radius: 9999px;
    line-height: 1.1;
    white-space: nowrap;
}

/* Your palette */
.status-pill--danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.status-pill--warn {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.status-pill--ok {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.status-pill--neutral {
    background: #e0ecff;
    color: #1e3a8a;
    border: 1px solid #bfdbfe;
}
