:root {
    /* Primary brand colour (slate-500) */
    --bs-primary: #64748b;
    --bs-primary-rgb: 100, 116, 139;
    /* Tailwind Slate scale */
    --bs-gray-50: #f8fafc;
    --bs-gray-100: #f1f5f9;
    --bs-gray-200: #e2e8f0;
    --bs-gray-300: #cbd5e1;
    --bs-gray-400: #94a3b8;
    --bs-gray-500: #64748b;
    --bs-gray-600: #475569;
    --bs-gray-700: #334155;
    --bs-gray-800: #1e293b;
    --bs-gray-900: #0f172a;
    /* Light theme body */
    --bs-body-bg: #ffffff;
    --bs-body-color: #334155; /* slate-700 for readable text */
    /* Semantic colours (unchanged) */
    --bs-secondary: #475569;
    --bs-secondary-rgb: 71, 85, 105;
    --bs-success: #22c55e;
    --bs-info: #0ea5e9;
    --bs-warning: #f59e0b;
    --bs-danger: #ef4444;
    /* Light theme surfaces */
    --bs-border-color: #e2e8f0; /* slate-200 */
    --bs-card-bg: #ffffff;
    --bs-card-border-color: #e2e8f0;
    /* NAVBAR stays dark */
    --navbar-bg: var(--bs-gray-800); /* slate-800 */
    --navbar-color: var(--bs-gray-100); /* slate-100 */
}

html, .page {
    background-color: #F4F6F8;
}

.cursor-pointer {
    cursor: pointer;
}

.tab-body {
    background-color: white;
}

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main {
    flex: 1;
}

.link {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: underline;
    cursor: pointer;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mr-5 {
    margin-right: 3rem;
}

/* Button Styling */ 
.btn-primary {
    background-color: #3A7AFE;
    border-color: #3A7AFE;
    color: #fff;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Hover */
.btn-primary:hover {
    background-color: #2f6ae0;
    border-color: #2f6ae0;
    color: #fff;
}

/* Active / pressed */
.btn-primary:active,
.btn-primary.active {
    background-color: #2558ba;
    border-color: #2558ba;
    color: #fff;
}

/* Focus ring */
.btn-primary-custom:focus {
    box-shadow: 0 0 0 0.25rem rgba(58, 122, 254, 0.35);
}

/* Disabled */
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: #9bbdff;
    border-color: #9bbdff;
    color: #fff;
    opacity: 0.65;
}

.btn-danger {
    background-color: #D6455D !important;
    border-color: #D6455D !important;
    color: #fff !important;
}

/* Hover */
.btn-danger:hover {
    background-color: #b93b50 !important;
    border-color: #b93b50 !important;
    color: #fff !important;
}

/* Active / pressed */
.btn-danger:active,
.btn-danger.active,
.show > .btn-danger.dropdown-toggle {
    background-color: #9e3244 !important;
    border-color: #9e3244 !important;
    color: #fff !important;
}

/* Focus ring */
.btn-danger:focus {
    box-shadow: 0 0 0 0.25rem rgba(214, 69, 93, 0.35) !important;
}

/* Disabled */
.btn-danger:disabled,
.btn-danger.disabled {
    background-color: #e8a4ae !important;
    border-color: #e8a4ae !important;
    color: #fff !important;
    opacity: 0.65;
}


.dropdown-toggle {
    background-color: var(--bs-gray-700);
    color: var(--navbar-color);
}

/* Navbar styling */
.navbar-dark {
    background-color: var(--navbar-bg);
    color: var(--navbar-color);
}

.custom-tabs {
    display: flex;
    gap: 1rem;
    border-bottom: none;
}

.custom-tabs .tab-link {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    color: var(--bs-gray-700);
    text-decoration: none;
}

.custom-tabs .tab-link:hover {
    background-color: var(--bs-gray-100);
    color: #000;
}

.custom-tabs .tab-link.active {
    background-color: var(--bs-gray-700);
    color: white !important;
    font-weight: 600;
}

/* Pagination Styling */
.btn.btn-pagination-control {
    border-radius: 3px;
    border: 1px solid var(--bs-gray-300);
}

.btn.btn-pagination-control:hover {
    background-color: var(--bs-gray-100);
}

.btn.btn-pagination-control.active {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-alert-color);
    border: 0px;
}

.btn.btn-pagination-control disabled {
    background-color: red;
    color: var(--bs-alert-color);
    border: 0px;
}

.pagination-bar {
    background: rgba(58, 122, 254, 0.06); /* #3A7AFE at 6% opacity */
    border-top: 1px solid rgba(58, 122, 254, 0.15);
    padding: 0.75rem 1rem;
}

/* Table Styling */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--bs-gray-50);
}

.table-striped > tbody > tr:hover > * {
    background-color: var(--bs-primary-bg-subtle);
    cursor: pointer;
}


.login-background {
    background-image: url(Images/Login-background.png);
    background-repeat: no-repeat;
    background-size: cover;
}