body {
    background: var(--primary-dark);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Navbar styling */
.navbar-school {
    background-color: var(--school-bg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border-bottom: 1px solid var(--school-gray-300);
}
.navbar-brand {
    color: var(--school-primary) !important;
    font-weight: bold;
}
.navbar-nav .nav-link {
    color: var(--school-gray-800) !important;
    font-weight: 500;
    transition: color 0.2s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--school-secondary) !important;
}
.navbar-toggler {
    border-color: var(--school-gray-400);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(10, 74, 143, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- BACKGROUND CLASSES ---------- */
.bg-primary {
    background-color: var(--school-primary);
}

.bg-primary-light {
    background-color: var(--school-primary-light);
}

.bg-primary-dark {
    background-color: var(--school-primary-dark);
}

.bg-secondary {
    background-color: var(--school-secondary);
}

.bg-secondary-light {
    background-color: var(--school-secondary-light);
}

.bg-secondary-dark {
    background-color: var(--school-secondary-dark);
}

.bg-gray-100 {
    background-color: var(--school-gray-100);
}

.bg-gray-200 {
    background-color: var(--school-gray-200);
}

.bg-gray-300 {
    background-color: var(--school-gray-300);
}

.bg-gray-400 {
    background-color: var(--school-gray-400);
}

.bg-gray-500 {
    background-color: var(--school-gray-500);
}

.bg-gray-600 {
    background-color: var(--school-gray-600);
}

.bg-gray-700 {
    background-color: var(--school-gray-700);
}

.bg-gray-800 {
    background-color: var(--school-gray-800);
}

.bg-gray-900 {
    background-color: var(--school-gray-900);
}

.bg-white {
    background-color: var(--school-bg);
}

.bg-success {
    background-color: var(--school-success);
}

.bg-warning {
    background-color: var(--school-warning);
}

.bg-danger {
    background-color: var(--school-danger);
}

.bg-info {
    background-color: var(--school-info);
}

/* ---------- TEXT COLOR CLASSES ---------- */
.text-primary {
    color: var(--school-primary);
}

.text-primary-light {
    color: var(--school-primary-light);
}

.text-primary-dark {
    color: var(--school-primary-dark);
}

.text-secondary {
    color: var(--school-secondary);
}

.text-secondary-light {
    color: var(--school-secondary-light);
}

.text-secondary-dark {
    color: var(--school-secondary-dark);
}

.text-white {
    color: var(--school-text-light);
}

.text-dark {
    color: var(--school-text-dark);
}

.text-gray-500 {
    color: var(--school-gray-500);
}

.text-gray-600 {
    color: var(--school-gray-600);
}

.text-gray-700 {
    color: var(--school-gray-700);
}

.text-gray-800 {
    color: var(--school-gray-800);
}

.text-gray-900 {
    color: var(--school-gray-900);
}

.text-success {
    color: var(--school-success);
}

.text-warning {
    color: var(--school-warning);
}

.text-danger {
    color: var(--school-danger);
}

.text-info {
    color: var(--school-info);
}

/* ---------- BORDER COLOR CLASSES ---------- */
.border-primary {
    border-color: var(--school-primary);
}

.border-secondary {
    border-color: var(--school-secondary);
}

.border-gray-300 {
    border-color: var(--school-gray-300);
}

.border-gray-400 {
    border-color: var(--school-gray-400);
}

.border-white {
    border-color: var(--school-bg);
}

/* ---------- HOVER EFFECTS (optional) ---------- */
.hover-bg-primary:hover {
    background-color: var(--school-primary);
    transition: background-color 0.2s ease;
}

.hover-bg-secondary:hover {
    background-color: var(--school-secondary);
    transition: background-color 0.2s ease;
}

.hover-text-primary:hover {
    color: var(--school-primary);
    transition: color 0.2s ease;
}

.hover-text-secondary:hover {
    color: var(--school-secondary);
    transition: color 0.2s ease;
}

/* ---------- BUTTON STYLES (common use-case) ---------- */
.btn-primary {
    background-color: var(--school-primary);
    color: var(--school-text-light);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: var(--school-primary-dark);
}

.btn-secondary {
    background-color: var(--school-secondary);
    color: var(--school-text-dark);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: var(--school-secondary-dark);
}

/* ---------- GRADIENTS (if needed) ---------- */
.bg-primary-gradient {
    background: linear-gradient(135deg, var(--school-primary), var(--school-primary-dark));
}

.bg-secondary-gradient {
    background: linear-gradient(135deg, var(--school-secondary), var(--school-secondary-dark));
}

/* Footer styling */
.footer-school {
    background-color: var(--school-primary-dark);
    color: var(--school-gray-300);
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}
.footer-school a {
    color: var(--school-gray-300);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-school a:hover {
    color: var(--school-secondary);
}
.footer-school .text-secondary-footer {
    color: var(--school-secondary);
}
.footer-school hr {
    border-color: var(--school-gray-700);
}

.no-underline {
    text-decoration-line: none;
    -moz-text-decoration-line: none;
}
/* Select2 CSS fixes */
.select2-selection__rendered {
    line-height: 2.6em !important;
}

.select2-container .select2-selection--single {
    height: 2.6em !important;
}

.select2-selection__arrow {
    height: 2.6em !important;
}

/* Default border to match Bootstrap form controls */
.select2-container .select2-selection--single {
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem; /* Rounded corners to match Bootstrap */
    padding: 0rem 0rem; /* Bootstrap form control padding */
}

/* Outline and shadow on focus to match Bootstrap */
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single .select2-selection__rendered:focus {
    border-color: #80bdff !important;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Bootstrap primary shadow */
}

/* Adjust arrow position */
.select2-selection__arrow {
    height: 100% !important;
    top: 0;
    right: 0; /* Align arrow with padding */
}
/* /Select2 CSS fixes */

/* Hint tooltip */
.hint-tooltip { 
    right: 10px; 
    cursor: pointer;
}
/* Hint tooltip */


/* global overlay  */
.global-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

body>.global-overlay {
    position: fixed;
}

.global-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.global-overlay .loading-message {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    color: #333;
    font-weight: 500;
}

/* /global overlay */

/* Avatars */
.avatar-sm {
    width: 28px;
    height: 28px;
    font-size: 12px;
    font-weight: 600;
}