/* Theme variables */
:root {
  --bs-primary: #9484FF;
  --bs-primary-rgb: 148,132,255;

  /* light mode defaults */
  --background-color: #ffffff;
  --text-color: #212529;
  --navbar-bg: #ffffff;
  --navbar-text: #212529;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --input-text: #212529;
  --border-color: #e0e0e0;
}

/* dark mode overrides */
.dark-mode {
  --background-color: #121212;
  --text-color: #f8f9fa;
  --navbar-bg: #1f1f1f;
  --navbar-text: #f8f9fa;
  --card-bg: #1e1e1e;
  --input-bg: #2c2c2c;
  --input-text: #f8f9fa;
  --border-color: #444444;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #9484FF;
}

body {
  margin-bottom: 80px;
  padding-top: 70px;
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Ensure the navbar logo has a consistent size */
.navbar-brand img {
  height: 30px;
  width: auto;
}

/* Custom styles for the front page */
.feature-box {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.feature-icon {
  font-size: 2rem;
  color: #9484FF;
}

/* Override bootstrap primary button color */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #9484FF;
  border-color: #9484FF;
}

.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(148,132,255,0.5);
}

/* Ensure navbar items remain visible when Tailwind's `collapse` class is present */
.navbar-collapse {
  visibility: visible !important;
}

/* Theme helpers */
.navbar {
  background-color: var(--navbar-bg) !important;
}

.navbar .nav-link,
.navbar .navbar-brand,
.navbar .navbar-text,
.navbar .btn-link {
  color: var(--navbar-text) !important;
}

.bg-white {
  background-color: var(--card-bg) !important;
}

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

.prose,
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6,
.prose p,
.prose strong,
.prose a,
.prose li {
  color: var(--text-color) !important;
}

input,
textarea,
select {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--border-color) !important;
}

.language-dropdown .dropdown-toggle {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--border-color) !important;
}

.language-dropdown .dropdown-menu {
  background-color: var(--input-bg) !important;
  border-color: var(--border-color) !important;
}

.language-dropdown .dropdown-item {
  color: var(--input-text) !important;
}

.language-dropdown .dropdown-item:hover,
.language-dropdown .dropdown-item:focus,
.language-dropdown .dropdown-item.active {
  background-color: var(--border-color) !important;
  color: var(--input-text) !important;
}

@media (max-width: 991.98px) {
  .mobile-nav-actions .language-dropdown .dropdown-toggle {
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
  }

  .mobile-nav-actions #theme-toggle {
    font-size: 1.25rem;
  }
}

.border-top,
.border-bottom,
.border-gray-300,
.border-gray-200 {
  border-color: var(--border-color) !important;
}

.dark-mode .text-gray-600 {
  color: #d1d5db !important;
}

.dark-mode .text-gray-700 {
  color: #e5e7eb !important;
}

.dark-mode .text-gray-500 {
  color: #9ca3af !important;
}

.dark-mode .bg-gray-100 {
  background-color: #1f1f1f !important;
}

.dark-mode .bg-gray-300 {
  background-color: #4b5563 !important;
}

.dark-mode .navbar-toggler-icon {
  filter: invert(1);
}