/* Dark Mode Styles */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --border-color: #dadce0;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --input-border: #dadce0;
  --header-bg: rgba(255, 255, 255, 0.95);
  --shadow: rgba(0, 0, 0, 0.1);
}

body.dark-mode {
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --text-primary: #e8eaed;
  --text-secondary: #9aa0a6;
  --border-color: #3f4043;
  --card-bg: #1e1e1e;
  --input-bg: #2c2c2c;
  --input-border: #3f4043;
  --header-bg: rgba(32, 33, 36, 0.95);
  --shadow: rgba(0, 0, 0, 0.3);
}

/* Global dark mode styles */
body.dark-mode {
  background: var(--bg-primary);
  color: var(--text-primary);
}

body.dark-mode .site-header {
  background: var(--header-bg);
  border-bottom-color: var(--border-color);
}

body.dark-mode .main-content {
  background: var(--bg-primary);
}

body.dark-mode .overview-card,
body.dark-mode .profile-card,
body.dark-mode .settings-wrapper {
  background: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="url"],
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode textarea,
body.dark-mode select {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--input-border);
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="password"]:focus,
body.dark-mode input[type="url"]:focus,
body.dark-mode input[type="date"]:focus,
body.dark-mode input[type="time"]:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  border-color: #8ab4f8;
  box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.1);
}

body.dark-mode .tab-button {
  color: var(--text-secondary);
}

body.dark-mode .tab-button:hover {
  color: var(--text-primary);
}

body.dark-mode .tab-button.active {
  color: #8ab4f8;
  border-bottom-color: #8ab4f8;
}

body.dark-mode .tab-navigation {
  background: var(--bg-secondary);
  border-bottom-color: var(--border-color);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--text-primary);
}

body.dark-mode .form-label {
  color: var(--text-primary);
}

body.dark-mode .help-text {
  color: var(--text-secondary);
}

body.dark-mode .security-section {
  border-bottom-color: var(--border-color);
}

body.dark-mode .form-actions {
  border-top-color: var(--border-color);
}

body.dark-mode .btn-primary {
  background: #8ab4f8;
  color: #121212;
}

body.dark-mode .btn-primary:hover {
  background: #aecbfa;
}

body.dark-mode .form-message.success {
  background: #1e5631;
  color: #81c995;
  border-color: #2d6a4f;
}

body.dark-mode .form-message.error {
  background: #5f1f1a;
  color: #f8bbd0;
  border-color: #c5221f;
}

body.dark-mode .error-message {
  background: #5f1f1a;
  color: #f8bbd0;
  border-color: #c5221f;
}

body.dark-mode .success-message {
  background: #1e5631;
  color: #81c995;
  border-color: #2d6a4f;
}

body.dark-mode .dropdown-menu {
  background: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

body.dark-mode .dropdown-menu a {
  color: var(--text-primary);
}

body.dark-mode .dropdown-menu a:hover {
  background: var(--bg-secondary);
}

body.dark-mode .ai-chat-sidebar {
  background: var(--card-bg);
  border-left-color: var(--border-color);
}

body.dark-mode .ai-chat-messages {
  background: var(--bg-secondary);
}

body.dark-mode .ai-message,
body.dark-mode .user-message {
  background: var(--bg-primary);
}

body.dark-mode .ai-message .message-content,
body.dark-mode .user-message .message-content {
  color: var(--text-primary);
}

body.dark-mode .ai-chat-input {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--input-border);
}

body.dark-mode .ai-chat-input::placeholder {
  color: var(--text-secondary);
}

body.dark-mode table {
  color: var(--text-primary);
}

body.dark-mode th {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

body.dark-mode td {
  border-color: var(--border-color);
}

body.dark-mode tr:hover {
  background: var(--bg-secondary);
}

body.dark-mode .checkbox {
  border-color: var(--input-border);
}

body.dark-mode input[type="checkbox"] {
  background: var(--input-bg);
  border-color: var(--input-border);
}

/* Dark mode dropdown styling */
body.dark-mode .profile-dropdown {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}

body.dark-mode .profile-dropdown a,
body.dark-mode .profile-dropdown button {
  color: var(--text-primary) !important;
}

body.dark-mode .profile-dropdown a:hover,
body.dark-mode .profile-dropdown button:hover {
  background-color: var(--bg-secondary) !important;
}

body.dark-mode .profile-dropdown button {
  border-bottom-color: var(--border-color) !important;
}

/* Dark Mode Info Cards */
body.dark-mode .info-card {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

body.dark-mode .info-card:hover {
  background: #2a2a2a;
  border-color: #505050;
}

body.dark-mode .card-header label {
  color: var(--text-secondary);
}

body.dark-mode .card-value {
  color: var(--text-primary);
}

body.dark-mode .card-input {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--input-border);
}

body.dark-mode .card-input:focus {
  border-color: #8ab4f8;
  box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.1);
}

body.dark-mode .edit-icon {
  color: #8ab4f8;
}

body.dark-mode .edit-icon:hover {
  background: rgba(138, 180, 248, 0.1);
  color: #aecbfa;
}

body.dark-mode .btn-secondary {
  background: #3f4043;
  color: var(--text-primary);
}

body.dark-mode .btn-secondary:hover {
  background: #505050;
}