/* Site-wide dark mode – applied when user toggles Dark mode on the dashboard */

html.dark-mode body {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
  color: #e2e8f0;
}

html.dark-mode .header,
html.dark-mode [class*="header"] {
  background: rgba(30, 41, 59, 0.95) !important;
  color: #e2e8f0;
  border-color: #475569;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

html.dark-mode .container,
html.dark-mode .dashboard-content,
html.dark-mode [class*="content"],
html.dark-mode .form-section,
html.dark-mode .table-section {
  background: rgba(30, 41, 59, 0.95) !important;
  color: #e2e8f0;
  border-color: #475569;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode .welcome,
html.dark-mode .section-title {
  color: #f1f5f9 !important;
  border-color: #64748b;
}

html.dark-mode .nav-card,
html.dark-mode [class*="card"] {
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
  border-color: #475569;
  color: #e2e8f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

html.dark-mode .nav-card:hover,
html.dark-mode [class*="card"]:hover {
  border-color: #64748b;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

html.dark-mode .nav-card p,
html.dark-mode .nav-card h3,
html.dark-mode label,
html.dark-mode .user-info {
  color: #94a3b8 !important;
}

html.dark-mode table {
  background: #1e293b;
  border-color: #475569;
}

html.dark-mode th,
html.dark-mode td {
  border-color: #475569;
  color: #e2e8f0;
}

html.dark-mode tr:hover {
  background: #334155;
}

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
  color: #94a3b8;
}

html.dark-mode .btn-primary,
html.dark-mode .btn-secondary {
  background: linear-gradient(135deg, #475569, #334155) !important;
  border-color: #64748b;
  color: #e2e8f0;
}

html.dark-mode .btn-primary:hover,
html.dark-mode .btn-secondary:hover {
  background: linear-gradient(135deg, #64748b, #475569) !important;
}

html.dark-mode .btn-danger {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #fff;
}

html.dark-mode .search-input {
  background: #334155 !important;
  border-color: #475569;
  color: #e2e8f0;
}

html.dark-mode .form-group label {
  color: #cbd5e1 !important;
}

html.dark-mode small,
html.dark-mode .help-text {
  color: #94a3b8 !important;
}

/* Login and auth pages */
html.dark-mode .login-container,
html.dark-mode [class*="login"] {
  background: rgba(30, 41, 59, 0.98) !important;
  border-color: #475569;
  color: #e2e8f0;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}