/* ===============================
   Base Layout
   =============================== */

body {
  background-color: #f8f9fa;
}

.card {
  border-radius: 0.75rem;
}

.list-group-item {
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.list-group-item:hover {
  background-color: #f8f9fa;
  transform: translateY(-1px);
}

/* Search label */
.search-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #6c757d;
}

/* ===============================
   Toast Styling
   =============================== */

.toast {
  border-radius: 0.5rem;
  font-size: 0.9rem;
}

/* ===============================
   Animations (fade + slide)
   =============================== */

.fade-slide-in {
  animation: fadeSlideIn 0.25s ease-out;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===============================
   Dark Mode
   =============================== */

body.dark-mode {
  background-color: #121212 !important;
  color: #f8f9fa !important;
}

body.dark-mode .card {
  background-color: #1e1e1e !important;
  color: #f8f9fa !important;
}

body.dark-mode .list-group-item {
  background-color: #1f1f1f !important;
  color: #f8f9fa !important;
  border-color: #333 !important;
}

body.dark-mode input.form-control {
  background-color: #222 !important;
  color: #f8f9fa !important;
  border-color: #444 !important;
}

body.dark-mode input.form-control:focus {
  background-color: #222 !important;
  color: #ffffff !important;
  border-color: #0d6efd !important;
  box-shadow: none !important;
}

body.dark-mode hr {
  border-color: #333 !important;
}

body.dark-mode .btn-outline-secondary {
  border-color: #bbb !important;
  color: #bbb !important;
}

body.dark-mode .btn-outline-secondary:hover {
  background-color: #bbb !important;
  color: #121212 !important;
}

body.dark-mode .btn-outline-danger:hover {
  background-color: #ff6b6b !important;
  color: #121212 !important;
}

body.dark-mode .btn-primary {
  background-color: #0d6efd;
}

body.dark-mode .btn-danger {
  background-color: #c0392b;
}

/* Toggle cursor */
.form-check-input,
.form-check-label {
  cursor: pointer;
}