.fadeout {
    opacity: 0 !important;
    transform: translateY(-10px);
    transition: all .35s ease;
}

.bg-gradient-mycourses {
background: linear-gradient(135deg, #f7971e, #ffd200);
}
.bg-gradient-cms {
  background: linear-gradient(135deg, #4e54c8, #8f94fb);
}

.bg-gradient-trainingprograms {
  background: linear-gradient(135deg, #1cb5e0, #000851);
}

.bg-gradient-certifications {
  background: linear-gradient(135deg, #a8e063, #14532d);
}

.bg-gradient-ilt {
	background: linear-gradient(135deg, #f7971e, #ffd200);
}

.bg-gradient-gamification {
	background: linear-gradient(135deg, #ff9966, #ff5e62);
}

.bg-gradient-analytics {
  background: linear-gradient(135deg, #232526, #414345);
}

.bg-gradient-aiteacherassistant {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
}

.bg-gradient-aireport {
  background: linear-gradient(135deg, #833ab4, #fd1d1d);
}

.bg-gradient-aitrainer {
  background: linear-gradient(135deg, #1d2b64, #f8cdda);
}

.bg-gradient-vpl {
  background: linear-gradient(135deg, #0f2027, #203a43);
}

.bg-gradient-ecommerce {
  background: linear-gradient(135deg, #00b09b, #96c93d);
}

.module {
	width: 3rem; height: 3rem;
}

/* department manager dashboard */

.department-header {
  background: linear-gradient(135deg, var(--primary, #4e73df), var(--success, #1cc88a));
}

/* Custom width for department select dropdown */
.department-select {
  width: 200px;
}

/* ===== Stats Cards ===== */
.department-stat-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.department-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15) !important;
}
.bg-users {
   background: linear-gradient(
    135deg,
    rgba(var(--bs-primary-rgb, 78, 115, 223), 0.08) 0%,
    rgba(var(--bs-secondary-rgb, 133, 135, 150), 0.05) 100%
  );
}

.bg-courses {
  background: linear-gradient(135deg, rgba(28,200,138,0.08) 0%, rgba(54,185,204,0.05) 100%);
  
  /* ✅ Modern gradient with CSS Color Mix */
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--success, #1cc88a) 8%, transparent) 0%,
    color-mix(in srgb, var(--info, #36b9cc) 5%, transparent) 100%
  );
}
/* ===== Course Icon ===== */
.course-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary, #4e73df) 0%, var(--info, #36b9cc) 100%);
    transition: transform 0.3s ease;
}

.bg-courses .grid-card:hover .course-icon {
    transform: rotate(360deg) scale(1.1);
}
.chart-container {
  width: 100%;
  max-width: 280px;
  height: 280px;
  margin: 0 auto;
}
/* ==========================
   🧱 BORDER UTILITIES
   (All sides separately)
   ========================== */

/* === PRIMARY === */
.border-top-primary    { border-top: .25rem solid var(--primary) !important; }
.border-right-primary  { border-right: .25rem solid var(--primary) !important; }
.border-bottom-primary { border-bottom: .25rem solid var(--primary) !important; }
.border-left-primary   { border-left: .25rem solid var(--primary) !important; }

/* === SECONDARY === */
.border-top-secondary    { border-top: .25rem solid var(--secondary) !important; }
.border-right-secondary  { border-right: .25rem solid var(--secondary) !important; }
.border-bottom-secondary { border-bottom: .25rem solid var(--secondary) !important; }
.border-left-secondary   { border-left: .25rem solid var(--secondary) !important; }

/* === SUCCESS === */
.border-top-success    { border-top: .25rem solid var(--success) !important; }
.border-right-success  { border-right: .25rem solid var(--success) !important; }
.border-bottom-success { border-bottom: .25rem solid var(--success) !important; }
.border-left-success   { border-left: .25rem solid var(--success) !important; }

/* === INFO === */
.border-top-info    { border-top: .25rem solid var(--info) !important; }
.border-right-info  { border-right: .25rem solid var(--info) !important; }
.border-bottom-info { border-bottom: .25rem solid var(--info) !important; }
.border-left-info   { border-left: .25rem solid var(--info) !important; }

/* === WARNING === */
.border-top-warning    { border-top: .25rem solid var(--warning) !important; }
.border-right-warning  { border-right: .25rem solid var(--warning) !important; }
.border-bottom-warning { border-bottom: .25rem solid var(--warning) !important; }
.border-left-warning   { border-left: .25rem solid var(--warning) !important; }

/* === DANGER === */
.border-top-danger    { border-top: .25rem solid var(--danger) !important; }
.border-right-danger  { border-right: .25rem solid var(--danger) !important; }
.border-bottom-danger { border-bottom: .25rem solid var(--danger) !important; }
.border-left-danger   { border-left: .25rem solid var(--danger) !important; }

/* === LIGHT === */
.border-top-light    { border-top: .25rem solid var(--light) !important; }
.border-right-light  { border-right: .25rem solid var(--light) !important; }
.border-bottom-light { border-bottom: .25rem solid var(--light) !important; }
.border-left-light   { border-left: .25rem solid var(--light) !important; }

/* === DARK === */
.border-top-dark    { border-top: .25rem solid var(--dark) !important; }
.border-right-dark  { border-right: .25rem solid var(--dark) !important; }
.border-bottom-dark { border-bottom: .25rem solid var(--dark) !important; }
.border-left-dark   { border-left: .25rem solid var(--dark) !important; }

/* ===== TEXT SIZE UTILITIES ===== */
.text-xxs {
    font-size: 0.6rem !important;
}

.text-xs {
    font-size: 0.7rem !important;
}

.text-sm {
    font-size: 0.8rem !important;
}

.text-base {
    font-size: 1rem !important;
}

.text-md {
    font-size: 1.1rem !important;
}

.text-lg {
    font-size: 1.25rem !important;
}

.text-xl {
    font-size: 1.5rem !important;
}

.text-2xl {
    font-size: 1.75rem !important;
}

.text-3xl {
    font-size: 2rem !important;
}

.text-4xl {
    font-size: 2.5rem !important;
}

.text-5xl {
    font-size: 3rem !important;
}

/* ===== TEXT GRAY UTILITIES ===== */
.text-gray-100 {
    color: #f8f9fc !important;
}

.text-gray-200 {
    color: #eaecf4 !important;
}

.text-gray-300 {
    color: #dddfeb !important;
}

.text-gray-400 {
    color: #d1d3e2 !important;
}

.text-gray-500 {
    color: #b7b9cc !important;
}

.text-gray-600 {
    color: #858796 !important;
}

.text-gray-700 {
    color: #6e707e !important;
}

.text-gray-800 {
    color: #5a5c69 !important;
}

.text-gray-900 {
    color: #3a3b45 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .sidebar-item {
    font-size: 0.95rem;
    padding: 12px 0;
    height: auto;
  }

  .sidebar-submenu {
    min-width: 150px;
    font-size: 14px;
  }
  
  .card-title {
    font-size: 1rem;
  }

}
@media (max-width: 576px) {
	.department-select {
		width: 100%;
	  }
	.course-icon {
		width: 40px;
		height: 40px;
		font-size: 16px;
	}
	.search-bar {
		margin-bottom: 1rem;
	}
}