@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600;800&family=Geist+Mono:wght@400;500&display=swap');


:root {
  --brand-cyan-700: #1e8bc3;
  --brand-cyan-650: #228abf;
  --brand-cyan-600: #2c5165;
  --brand-blue-300: #94c4f1;
  --brand-gray-950: #141d27;
  --brand-gray-900: #1f2d3a;
  --brand-gray-850: #22313f;
  --brand-gray-800: #2b3e50;
  --brand-gray-700: #334a5e;
  --brand-gray-650: #3e5a74;
  --brand-gray-600: #4b5563;
}

:root[data-bs-theme="light"] {
  --bs-body-bg: #edf3f8;
  --bs-body-color: #1f2d3a;
  --bs-primary: #1e8bc3;
  --bs-primary-rgb: 30, 139, 195;
  --bs-secondary: #4b5563;
  --bs-secondary-rgb: 75, 85, 99;
  --bs-border-color: #c8d7e4;
  --bs-card-bg: #f8fbfe;
  --bs-card-border-color: #d3e0eb;
  --bs-link-color: #1e8bc3;
  --bs-link-hover-color: #1472a1;
  --bs-heading-color: #22313f;
  --bs-emphasis-color: #22313f;
  --bs-tertiary-bg: #e3edf5;
}

:root[data-bs-theme="dark"] {
  --bs-body-bg: var(--brand-gray-900);
  --bs-body-color: #e5eef7;
  --bs-primary: #1e8bc3;
  --bs-primary-rgb: 30, 139, 195;
  --bs-secondary: var(--brand-gray-600);
  --bs-secondary-rgb: 75, 85, 99;
  --bs-border-color: #334a5e;
  --bs-card-bg: var(--brand-gray-850);
  --bs-card-border-color: var(--brand-gray-700);
  --bs-link-color: var(--brand-blue-300);
  --bs-link-hover-color: #b7d8f7;
  --bs-heading-color: #ffffff;
  --bs-emphasis-color: #ffffff;
  --bs-tertiary-bg: #1b2733;
}

body {
  background: radial-gradient(circle at 14% 10%, rgba(30, 139, 195, 0.18), transparent 36%),
              radial-gradient(circle at 85% -5%, rgba(52, 95, 130, 0.24), transparent 36%),
              linear-gradient(180deg, #1f2d3a 0%, #1b2733 38%, #192532 100%),
              var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

code,
pre,
.font-monospace {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

a {
  color: var(--bs-link-color);
}

a:hover {
  color: var(--bs-link-hover-color);
}

.navbar {
  background-color: var(--bs-primary) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.navbar .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  border-bottom: 3px solid transparent;
}

.navbar .nav-link.active,
.navbar .nav-link:focus,
.navbar .nav-link:hover {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.7);
}

.navbar .dropdown-menu {
  background-color: var(--bs-card-bg);
  border-color: var(--bs-card-border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.navbar .dropdown-item {
  color: var(--bs-body-color);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

.card {
  background-color: var(--bs-card-bg);
  border-color: var(--bs-card-border-color);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
}

.card .card-header {
  background-color: rgba(255, 255, 255, 0.02);
  border-bottom-color: var(--bs-card-border-color);
  color: var(--bs-heading-color);
}

.card .card-footer {
  background-color: rgba(255, 255, 255, 0.02);
  border-top-color: var(--bs-card-border-color);
}

.course-card {
  transition: transform 0.3s, box-shadow 0.3s;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.btn-primary {
  --bs-btn-bg: #1e8bc3;
  --bs-btn-border-color: #1e8bc3;
  --bs-btn-hover-bg: #228abf;
  --bs-btn-hover-border-color: #228abf;
  --bs-btn-active-bg: #1472a1;
  --bs-btn-active-border-color: #1472a1;
  --bs-btn-color: #fff;
}

.btn-outline-primary {
  --bs-btn-color: #94c4f1;
  --bs-btn-border-color: #3e5a74;
  --bs-btn-hover-bg: #22313f;
  --bs-btn-hover-border-color: #1e8bc3;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: #1e8bc3;
  --bs-btn-active-border-color: #1e8bc3;
}

#content {
  min-height: 500px;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.loading {
  display: none;
  text-align: center;
  padding: 40px;
}

.loading.active {
  display: block;
}

[data-bs-theme="dark"] .bg-white {
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .text-muted {
  color: #94a3b8 !important;
}

[data-bs-theme="dark"] .table {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.table thead.table-dark {
  background-color: var(--brand-gray-700);
}

.alert {
  border: none;
}

[data-bs-theme="dark"] .alert-info {
  background-color: rgba(14, 116, 144, 0.12);
  color: #e0f2fe;
  border: 1px solid rgba(14, 116, 144, 0.35);
}

[data-bs-theme="dark"] .alert-danger {
  background-color: rgba(248, 113, 113, 0.12);
  color: #fecdd3;
  border: 1px solid rgba(248, 113, 113, 0.35);
}

[data-bs-theme="dark"] .alert-success {
  background-color: rgba(52, 211, 153, 0.12);
  color: #bbf7d0;
  border: 1px solid rgba(52, 211, 153, 0.35);
}

[data-bs-theme="dark"] .progress {
  background-color: var(--brand-gray-700);
}

[data-bs-theme="dark"] .accordion-item {
  background-color: var(--bs-card-bg);
  border-color: var(--bs-card-border-color);
}

[data-bs-theme="dark"] .accordion-button {
  background-color: var(--bs-card-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--brand-gray-700);
  color: var(--bs-body-color);
  box-shadow: inset 0 -1px 0 var(--bs-card-border-color);
}

[data-bs-theme="dark"] .accordion-button::after {
  filter: invert(0.8);
}

.theme-toggle {
  --toggle-bg: rgba(255, 255, 255, 0.12);
  --toggle-border: rgba(255, 255, 255, 0.28);
  color: #fff;
  background-color: var(--toggle-bg);
  border: 1px solid var(--toggle-border);
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.theme-toggle:hover,
.theme-toggle:focus {
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

[data-bs-theme="light"] .theme-toggle {
  --toggle-bg: rgba(14, 116, 144, 0.1);
  --toggle-border: rgba(14, 116, 144, 0.35);
  color: var(--bs-primary);
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 12px;
}

.auth-card {
  width: 100%;
  max-width: 460px;
}

.auth-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.auth-subtle {
  color: var(--bs-secondary);
}

.brand-title {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.brand-logo {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

nav .navbar-toggler {
  color: var(--bs-body-color);
  background-color: rgba(148, 196, 241, 0.16);
  border: 1px solid var(--bs-primary) !important;
  border-radius: 10px;
}

nav .navbar-toggler:focus {
  box-shadow: 0 0 0 0.22rem rgba(30, 139, 195, 0.35);
}

nav .navbar-toggler-icon {
  width: 1.4rem;
  height: 1.4rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.98%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.8' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="light"] nav .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%2831,45,58,0.98%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.8' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 767.98px) {
  .nav-button-group .btn {
    width: 100%;
  }
}