
:root {
  --primary-blue: #6492FF;
  --dark-blue: #6663FF;
  --light-blue: #BACFFF;
  --white: #ffffff;
  --light-gray: #f8f9fa;
}

  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
}

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

.btn-primary:focus, .btn-primary.focus {
  background-color: var(--dark-blue);
  border-color: var(--dark-blue);
  box-shadow: 0 0 0 0.2rem rgba(100, 146, 255, 0.25);
}

/* Navigation styling */
.navbar-brand {
  color: var(--primary-blue) !important;
  font-weight: 600;
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--light-blue) !important;
}

/* Progress bar */
.progress-bar {
  background-color: var(--primary-blue) !important;
}

/* Cards */
.card {
  border: 1px solid var(--light-blue);
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(100, 146, 255, 0.15);
}

.card-title {
  color: var(--dark-blue);
}

.carousel-caption h5 {
  background-color: rgba(102, 99, 255, 0.8);
  padding: 8px 16px;
  border-radius: 20px;
  display: inline-block;
}

.carousel-caption p {
  background-color: rgba(186, 207, 255, 0.9);
  color: var(--dark-blue);
  padding: 6px 12px;
  border-radius: 15px;
  display: inline-block;
}

/* Modal */
.modal-header {
  background-color: var(--light-blue);
  border-bottom: 1px solid var(--primary-blue);
}

.modal-title {
  color: var(--dark-blue);
}


.form-control:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 0.2rem rgba(100, 146, 255, 0.25);
}

.form-select:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 0.2rem rgba(100, 146, 255, 0.25);
}

/* Dropdown */
.dropdown-menu {
  border: 1px solid var(--light-blue);
}

.dropdown-item:hover {
  background-color: var(--light-blue);
  color: var(--dark-blue);
}

/* Pagination */
.page-link {
  color: var(--primary-blue);
}

.page-link:hover {
  color: var(--dark-blue);
  background-color: var(--light-blue);
  border-color: var(--primary-blue);
}

.page-item.active .page-link {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
}

/* Alerts */
.alert-success {
  background-color: rgba(186, 207, 255, 0.2);
  border-color: var(--light-blue);
  color: var(--dark-blue);
}

.alert-danger {
  background-color: rgba(255, 100, 100, 0.1);
  border-color: #ffb3b3;
  color: #cc0000;
}

/* Toast */
.toast-header {
  background-color: var(--light-blue);
  color: var(--dark-blue);
}

/* Spinner */
.spinner-border.text-primary {
  color: var(--primary-blue) !important;
}

/* Off-canvas */
.offcanvas-header {
  background-color: var(--light-blue);
}

.offcanvas-title {
  color: var(--dark-blue);
}

.offcanvas .nav-link:hover {
  color: var(--primary-blue) !important;
  background-color: rgba(186, 207, 255, 0.3);
  border-radius: 5px;
}

/* Custom utilities */
.text-primary-custom {
  color: var(--primary-blue) !important;
}

.bg-light-blue {
  background-color: var(--light-blue) !important;
}

/* Loading text */
#loading-spinner p {
  color: var(--primary-blue);
  font-weight: 500;
}
