/* assets/css/dark-mode.css - Dark mode overrides */

/* Dark mode variables - activated when body has data-theme="dark" */
[data-theme="dark"] {
  /* Background colors */
  --color-bg: #1a1a1a;
  --color-bg-secondary: #2a2a2a;
  --color-bg-tertiary: #333333;
  
  /* Text colors */
  --color-text: #e0e0e0;
  --color-text-secondary: #b0b0b0;
  --color-text-muted: #808080;
  
  /* Border colors */
  --color-border: #404040;
  --color-border-strong: #606060;
  
  /* Primary colors - slightly adjusted for dark mode */
  --color-primary: #5cb85c;
  --color-primary-light: #6ec76e;
  --color-primary-lighter: rgba(92, 184, 92, 0.1);
  --color-primary-dark: #4ca74c;
  
  /* Status colors - slightly adjusted for better contrast */
  --color-success: #5cb85c;
  --color-warning: #f0ad4e;
  --color-danger: #d9534f;
  
  /* Shadows - lighter shadows for dark mode */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Specific adjustments for dark mode */
[data-theme="dark"] .login-page {
  background: linear-gradient(180deg, #1a1a1a, #0d0d0d);
}

[data-theme="dark"] .login-card,
[data-theme="dark"] .modal-content {
  background: #2a2a2a;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .nav-rail {
  background: #2a2a2a;
  border-color: #505050;
}

[data-theme="dark"] .rail-item:hover {
  background: rgba(92, 184, 92, 0.2);
}

[data-theme="dark"] .rail-item.active {
  background: rgba(92, 184, 92, 0.15);
  box-shadow: inset 0 0 0 2px rgba(92, 184, 92, 0.3);
}

[data-theme="dark"] .btn-primary {
  background: #5cb85c;
  border-color: #4ca74c;
}

[data-theme="dark"] .btn-primary:hover {
  background: #4ca74c;
}

[data-theme="dark"] .btn {
  background: #333333;
  color: #e0e0e0;
  border-color: #505050;
}

[data-theme="dark"] .btn:hover {
  background: #404040;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #333333;
  border-color: #505050;
  color: #e0e0e0;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: #5cb85c;
  background: #2a2a2a;
}

[data-theme="dark"] .empty-state {
  background: #2a2a2a;
  border-color: #404040;
  color: #808080;
}

[data-theme="dark"] .project-card {
  background: #2a2a2a;
  border-color: #404040;
}

[data-theme="dark"] .project-card:hover {
  border-color: #5cb85c;
  background: #333333;
}

[data-theme="dark"] .dropdown-menu {
  background: #333333;
  border-color: #505050;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .dropdown-menu button:hover {
  background: #404040;
}

[data-theme="dark"] .todo-card {
  background: #2a2a2a;
  border-color: #404040;
}

[data-theme="dark"] .storage-meter {
  background: #333333;
  border-color: #606060;
}

[data-theme="dark"] .storage-meter-dashboard {
  background: #333333;
  border-color: #808080;
}

[data-theme="dark"] .panel {
  background: #2a2a2a;
  border-color: #404040;
}

[data-theme="dark"] .content-box {
  background: #2a2a2a;
  border-color: #404040;
}

[data-theme="dark"] .dashboard-widget {
  background: #2a2a2a;
  border-color: #404040;
}

[data-theme="dark"] .project-summary-card {
  background: #333333;
  border-color: #404040;
}

[data-theme="dark"] .project-summary-card:hover {
  background: #2a2a2a;
  border-color: #5cb85c;
}

[data-theme="dark"] .widget-header {
  border-color: #404040;
}

[data-theme="dark"] .placeholder {
  background: #333333;
  border-color: #404040;
  color: #808080;
}

/* Toast adjustments for dark mode */
[data-theme="dark"] .toast {
  background: #333333;
  color: #e0e0e0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .toast.success {
  background: #2d5a2d;
}

[data-theme="dark"] .toast.error {
  background: #5a2d2d;
}

[data-theme="dark"] .toast.warning {
  background: #5a4d2d;
}

/* Code/pre elements */
[data-theme="dark"] code,
[data-theme="dark"] pre {
  background: #1a1a1a;
  color: #e0e0e0;
}

/* Scrollbar styling for dark mode */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #2a2a2a;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #505050;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #606060;
}