.login-page {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #e9ecef, #f8f9fa);
}

.login-box {
  width: 100%;
  max-width: 420px;
  padding: 2rem;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}

.btn-primary {
  background-color: #0056b3;
  border-color: #0056b3;
}

.btn-primary:hover {
  background-color: #004494;
  border-color: #004494;
}

.form-label {
  font-weight: 500;
}

/* Dark mode styles */
body.dark-mode {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

body.dark-mode .card,
body.dark-mode .login-box {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border-color: #333;
}

body.dark-mode .btn-primary {
  background-color: #4a90e2;
  border-color: #4a90e2;
}

body.dark-mode .form-control {
  background-color: #3b3b3b;
  border-color: #555;
  color: #f5f5f5;
}
body.dark-mode {
  background-color: #1e1e1e;
  color: #ffffff;
}

body.dark-mode .card {
  background-color: #2c2c2c;
  color: #ffffff;
}

body.dark-mode .badge.status-up {
  background-color: #198754;
}

body.dark-mode .badge.status-down {
  background-color: #dc3545;
}

body.dark-mode .badge.status-slow {
  background-color: #ffc107;
  color: #000;
}

body.dark-mode a {
  color: #C9FFE1;
}

body.dark-mode small,
body.dark-mode .text-muted {
  color: #cccccc !important;
}

.logo-dark {
  display: none;
}

.dark-mode .logo-light {
  display: none;
}

.dark-mode .logo-dark {
  display: inline;
}

body.dark-mode .btn-outline-primary {
  --bs-btn-color: #C9FFE1;
  --bs-btn-border-color: #C9FFE1;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #C9FFE1;
  --bs-btn-hover-border-color: #C9FFE1;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #C9FFE1;
  --bs-btn-active-border-color: #C9FFE1;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #C9FFE1;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #C9FFE1;
  --bs-gradient: none;
}

body.dark-mode .btn-outline-secondary {
    --bs-btn-color: #C9FFE1;
    --bs-btn-border-color: #C9FFE1;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #C9FFE1;
    --bs-btn-hover-border-color: #C9FFE1;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #C9FFE1;
    --bs-btn-active-border-color: #C9FFE1;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #C9FFE1;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #C9FFE1;
    --bs-gradient: none;
}

body.dark-mode .btn-outline-danger {
    --bs-btn-color: #C9FFE1;
    --bs-btn-border-color: #C9FFE1;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #C9FFE1;
    --bs-btn-hover-border-color: #C9FFE1;
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #C9FFE1;
    --bs-btn-active-border-color: #C9FFE1;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #C9FFE1;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #C9FFE1;
    --bs-gradient: none;
}