body {
  font-family: "Cairo", "Tahoma", sans-serif;
  background-color: #f8f9fa;
  color: #212529;
  transition: background-color 0.3s ease, color 0.3s ease;
}

main {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode {
  background-color: #0f172a;
  color: #f8fafc;
}

body.dark-mode main {
  background-color: transparent;
  color: #f8fafc;
}

body.dark-mode .bg-light,
body.dark-mode .container,
body.dark-mode .row,
body.dark-mode .col,
body.dark-mode .col-12,
body.dark-mode .col-md-8,
body.dark-mode .col-lg-6,
body.dark-mode .col-lg-5,
body.dark-mode .col-xl-8,
body.dark-mode .col-xl-4 {
  background-color: transparent !important;
  color: #f8fafc !important;
}

.navbar .nav-link.active {
  font-weight: 600;
}

.card {
  border-radius: 0.75rem;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.dark-mode .card {
  background-color: #1f2937;
  color: #f8fafc;
  border-color: #1f2937;
}

body.dark-mode .navbar,
body.dark-mode .bg-white {
  background-color: #0f172a !important;
  border-color: #1f2937 !important;
}

body.dark-mode .navbar-toggler {
  border-color: #334155;
}

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

body.dark-mode .navbar .nav-link,
body.dark-mode .navbar-brand {
  color: #e5e7eb !important;
}

body.dark-mode .navbar .nav-link.active {
  color: #38bdf8 !important;
}

body.dark-mode .text-muted {
  color: #cbd5e1 !important;
}

.theme-toggle {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.theme-toggle span {
  font-size: 1.2rem;
  line-height: 1;
}

body.dark-mode .btn-outline-secondary {
  color: #e5e7eb;
  border-color: #334155;
}

body.dark-mode .btn-outline-secondary:hover {
  background-color: #334155;
  color: #e5e7eb;
}

body.dark-mode .btn-primary {
  background-color: #2563eb;
  border-color: #2563eb;
}

body.dark-mode .btn-primary:hover {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
}

body.dark-mode .badge.bg-warning-subtle {
  background-color: rgba(250, 204, 21, 0.15) !important;
  color: #facc15 !important;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
}

body.dark-mode .table {
  color: #e5e7eb;
}

body.dark-mode .table thead th {
  color: #e5e7eb;
  border-color: #1f2937;
}

body.dark-mode .table tbody td {
  border-color: #1f2937;
}

body.dark-mode .list-group-item {
  background-color: #1f2937;
  color: #f8fafc;
  border-color: #1f2937;
}

body.dark-mode .alert {
  border-width: 1px;
}

body.dark-mode .alert-danger {
  background-color: #7f1d1d;
  color: #fee2e2;
  border-color: #991b1b;
}

body.dark-mode .alert-warning {
  background-color: #854d0e;
  color: #fef3c7;
  border-color: #a16207;
}

body.dark-mode .alert-info {
  background-color: #0f172a;
  color: #e0f2fe;
  border-color: #1d4ed8;
}

body.dark-mode .alert-success {
  background-color: #14532d;
  color: #dcfce7;
  border-color: #15803d;
}

/* Form controls in dark mode */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode textarea,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="time"] {
  background-color: #111827;
  color: #e5e7eb;
  border-color: #334155;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  background-color: #0f172a;
  color: #e5e7eb;
  border-color: #2563eb;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}

body.dark-mode .form-control::placeholder,
body.dark-mode textarea::placeholder {
  color: #94a3b8;
}

body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly],
body.dark-mode .form-select:disabled {
  background-color: #1f2937;
  color: #94a3b8;
}

body.dark-mode .form-check-input {
  background-color: #111827;
  border-color: #334155;
}

body.dark-mode .form-check-input:checked {
  background-color: #2563eb;
  border-color: #2563eb;
}

body.dark-mode .input-group-text {
  background-color: #111827;
  color: #e5e7eb;
  border-color: #334155;
}