/**
 * Dark Theme
 * 
 * Dark theme implementation for the Budget Planner Design System.
 * Activated by adding ds-theme="dark" attribute to the body element.
 */

/* Dark Theme Variables */
[ds-theme="dark"] {
  /* Color overrides for dark theme */
  --color-white: #ffffff;
  --color-black: #000000;
  
  /* Background colors */
  --color-background: #334155;
  --color-background-secondary: #475569;
  --color-surface: #475569;
  --color-surface-secondary: #64748b;
  --color-bg-primary: #334155;
  --color-bg-white: #475569;
  --color-bg-section: #475569;
  --color-bg-item: #64748b;
  
  /* Text colors */
  --color-text-primary: #ffffff;
  --color-text-secondary: #e2e8f0;
  --color-text-tertiary: #cbd5e1;
  --color-text-disabled: #94a3b8;
  
  /* Gray scale for dark theme */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;
  
  /* Border colors */
  --color-border: #475569;
  --color-border-secondary: #64748b;
  --color-border-light: #94a3b8;
  
  /* Primary colors - adjusted for dark theme visibility */
  --color-primary-light: #818cf8;
  --color-primary-dark: #6366f1;
  --color-primary-gradient: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
  
  /* Success colors - muted for better readability */
  --color-success-light: #22c55e;
  --color-success-dark: #16a34a;
  --color-success-bg: rgba(34, 197, 94, 0.12);
  --color-success-border: rgba(34, 197, 94, 0.25);
  
  /* Warning colors - softer yellow for dark theme */
  --color-warning: #eab308;
  --color-warning-light: #facc15;
  --color-warning-dark: #ca8a04;
  
  /* Danger colors - softer red for dark theme */
  --color-danger: #e11d48;
  --color-danger-light: #f43f5e;
  --color-danger-dark: #be123c;
  --color-danger-bg: rgba(225, 29, 72, 0.12);
  --color-danger-border: rgba(225, 29, 72, 0.25);
  
  /* Info colors - softer blue for dark theme */
  --color-info: #0ea5e9;
  --color-info-light: #38bdf8;
  --color-info-dark: #0284c7;
  --color-info-bg: rgba(14, 165, 233, 0.12);
  --color-info-border: rgba(14, 165, 233, 0.25);
  
  /* Shadows for dark theme */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  
  /* Focus rings */
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* Card Components Dark Theme Support */
[ds-theme="dark"] .card-summary {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .card-summary-label {
  color: var(--color-text-secondary) !important;
}

[ds-theme="dark"] .card-summary-title {
  color: var(--color-text-secondary) !important;
}

[ds-theme="dark"] .card-summary-value {
  color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .card-summary-content {
  color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .card-section {
  background: var(--color-background) !important;
  color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .card-section h2 {
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

[ds-theme="dark"] .card-section h3 {
  color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .card {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .card-header {
  background: var(--color-primary-gradient) !important;
  color: var(--color-white) !important;
}

[ds-theme="dark"] .card-item {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

/* Base body styling for dark theme */
[ds-theme="dark"] body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

/* Button styles for dark theme */
[ds-theme="dark"] .btn {
  border-color: var(--color-border);
}

[ds-theme="dark"] .btn-primary {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: var(--color-white);
}

[ds-theme="dark"] .btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

[ds-theme="dark"] .btn-secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[ds-theme="dark"] .btn-secondary:hover {
  background: var(--color-surface-secondary);
  border-color: var(--color-border-secondary);
}

[ds-theme="dark"] .btn-outline {
  background: transparent;
  border-color: var(--color-border-secondary);
  color: var(--color-text-secondary);
}

[ds-theme="dark"] .btn-outline:hover {
  background: var(--color-surface);
  border-color: var(--color-border-light);
  color: var(--color-text-primary);
}

[ds-theme="dark"] .btn-success {
  background: var(--color-success-light);
  border-color: var(--color-success-light);
}

[ds-theme="dark"] .btn-success:hover {
  background: var(--color-success-dark);
  border-color: var(--color-success-dark);
}

[ds-theme="dark"] .btn-warning {
  background: var(--color-warning-light);
  border-color: var(--color-warning-light);
}

[ds-theme="dark"] .btn-warning:hover {
  background: var(--color-warning-dark);
  border-color: var(--color-warning-dark);
}

[ds-theme="dark"] .btn-danger {
  background: var(--color-danger-light);
  border-color: var(--color-danger-light);
}

[ds-theme="dark"] .btn-danger:hover {
  background: var(--color-danger-dark);
  border-color: var(--color-danger-dark);
}

/* Form controls for dark theme */
[ds-theme="dark"] .form-control {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[ds-theme="dark"] .form-control:focus {
  border-color: var(--color-primary-light);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

[ds-theme="dark"] .form-control::placeholder {
  color: var(--color-text-tertiary);
}

[ds-theme="dark"] .form-label {
  color: var(--color-text-secondary);
}

[ds-theme="dark"] .form-select {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[ds-theme="dark"] .form-select:focus {
  border-color: var(--color-primary-light);
  background-color: var(--color-surface);
}

/* Card styles for dark theme */
[ds-theme="dark"] .card {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[ds-theme="dark"] .card-header {
  background-color: var(--color-surface-secondary);
  border-bottom-color: var(--color-border);
  color: var(--color-text-primary);
}

[ds-theme="dark"] .card-footer {
  background-color: var(--color-surface-secondary);
  border-top-color: var(--color-border);
}

/* Modal styles for dark theme */
[ds-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, 0.85);
}

[ds-theme="dark"] .modal-content {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

[ds-theme="dark"] .modal-header {
  border-bottom-color: var(--color-border);
  background-color: var(--color-surface);
}

[ds-theme="dark"] .modal-footer {
  border-top-color: var(--color-border);
  background-color: var(--color-surface);
}

[ds-theme="dark"] .modal-close {
  color: var(--color-text-secondary);
}

[ds-theme="dark"] .modal-close:hover {
  color: var(--color-text-primary);
  background-color: var(--color-surface);
}

/* Modal privacy notice for dark theme */
[ds-theme="dark"] .modal-privacy-notice {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: var(--color-success-dark);
  border-left-color: var(--color-success-dark);
}

[ds-theme="dark"] .modal-privacy-notice p {
  color: var(--color-success-dark);
}

/* Modal buttons for dark theme */
[ds-theme="dark"] .modal-btn.secondary {
  background: var(--color-success-dark);
  color: var(--color-white);
}

[ds-theme="dark"] .modal-btn.secondary:hover {
  background: #16a34a;
  box-shadow: 0 4px 8px rgba(34, 197, 94, 0.4);
}

/* Navigation styles for dark theme */
[ds-theme="dark"] .nav {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

[ds-theme="dark"] .nav-link {
  color: var(--color-text-secondary);
}

[ds-theme="dark"] .nav-link:hover,
[ds-theme="dark"] .nav-link.active {
  color: var(--color-text-primary);
  background-color: var(--color-surface-secondary);
}

[ds-theme="dark"] .nav-tab {
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

[ds-theme="dark"] .nav-tab:hover,
[ds-theme="dark"] .nav-tab.active {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border-bottom-color: var(--color-primary-light);
}

/* Tooltip styles for dark theme */
[ds-theme="dark"] .tooltip-content {
  background: var(--color-gray-800);
  color: var(--color-white);
}

[ds-theme="dark"] .tooltip-content::before {
  border-top-color: var(--color-gray-800);
}

[ds-theme="dark"] .tooltip-content.bottom::before {
  border-bottom-color: var(--color-gray-800);
}

[ds-theme="dark"] .tooltip-content.left::before {
  border-left-color: var(--color-gray-800);
}

[ds-theme="dark"] .tooltip-content.right::before {
  border-right-color: var(--color-gray-800);
}

/* Tooltip variant colors for dark theme - using darker variants for better readability */
[ds-theme="dark"] .tooltip-content.success {
  background: var(--color-success-dark);
  color: var(--color-white);
}

[ds-theme="dark"] .tooltip-content.success::before {
  border-top-color: var(--color-success-dark);
}

[ds-theme="dark"] .tooltip-content.success.bottom::before {
  border-bottom-color: var(--color-success-dark);
}

[ds-theme="dark"] .tooltip-content.success.left::before {
  border-left-color: var(--color-success-dark);
}

[ds-theme="dark"] .tooltip-content.success.right::before {
  border-right-color: var(--color-success-dark);
}

[ds-theme="dark"] .tooltip-content.warning {
  background: var(--color-warning-dark);
  color: var(--color-white);
}

[ds-theme="dark"] .tooltip-content.warning::before {
  border-top-color: var(--color-warning-dark);
}

[ds-theme="dark"] .tooltip-content.warning.bottom::before {
  border-bottom-color: var(--color-warning-dark);
}

[ds-theme="dark"] .tooltip-content.warning.left::before {
  border-left-color: var(--color-warning-dark);
}

[ds-theme="dark"] .tooltip-content.warning.right::before {
  border-right-color: var(--color-warning-dark);
}

[ds-theme="dark"] .tooltip-content.danger,
[ds-theme="dark"] .tooltip-content.error {
  background: var(--color-danger-dark);
  color: var(--color-white);
}

[ds-theme="dark"] .tooltip-content.danger::before,
[ds-theme="dark"] .tooltip-content.error::before {
  border-top-color: var(--color-danger-dark);
}

[ds-theme="dark"] .tooltip-content.danger.bottom::before,
[ds-theme="dark"] .tooltip-content.error.bottom::before {
  border-bottom-color: var(--color-danger-dark);
}

[ds-theme="dark"] .tooltip-content.danger.left::before,
[ds-theme="dark"] .tooltip-content.error.left::before {
  border-left-color: var(--color-danger-dark);
}

[ds-theme="dark"] .tooltip-content.danger.right::before,
[ds-theme="dark"] .tooltip-content.error.right::before {
  border-right-color: var(--color-danger-dark);
}

[ds-theme="dark"] .tooltip-content.info {
  background: var(--color-info-dark);
  color: var(--color-white);
}

[ds-theme="dark"] .tooltip-content.info::before {
  border-top-color: var(--color-info-dark);
}

[ds-theme="dark"] .tooltip-content.info.bottom::before {
  border-bottom-color: var(--color-info-dark);
}

[ds-theme="dark"] .tooltip-content.info.left::before {
  border-left-color: var(--color-info-dark);
}

[ds-theme="dark"] .tooltip-content.info.right::before {
  border-right-color: var(--color-info-dark);
}

/* Snackbar styles for dark theme */
[ds-theme="dark"] .snackbar {
  background: var(--color-surface);
  color: var(--color-text-primary);
}

[ds-theme="dark"] .snackbar.success {
  background: var(--color-success-dark);
  color: var(--color-white);
}

[ds-theme="dark"] .snackbar.warning {
  background: var(--color-warning-dark);
  color: var(--color-white);
}

[ds-theme="dark"] .snackbar.error,
[ds-theme="dark"] .snackbar.danger {
  background: var(--color-danger-dark);
  color: var(--color-white);
}

[ds-theme="dark"] .snackbar.info {
  background: var(--color-info-dark);
  color: var(--color-white);
}

[ds-theme="dark"] .snackbar.light {
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

[ds-theme="dark"] .snackbar.dark {
  background: var(--color-gray-900);
  color: var(--color-white);
}

/* Example showcase specific styles for dark theme */
[ds-theme="dark"] .example-section {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[ds-theme="dark"] .example-item {
  background: var(--color-background-secondary);
  border-color: var(--color-border);
}

[ds-theme="dark"] .code-example {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[ds-theme="dark"] .code-example pre {
  background: transparent !important;
  color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .code-example code {
  background: transparent !important;
  color: var(--color-text-primary) !important;
}

/* Standalone code elements (not in code examples) */
[ds-theme="dark"] code,
[ds-theme="dark"] .code-text {
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .color-swatch {
  border: 1px solid var(--color-border);
}

/* Card Item overrides for dark theme */
[ds-theme="dark"] .card-item {
  --color-bg-item: var(--color-surface);
  --color-item-border: var(--color-primary-light);
  --color-value-positive: #22c55e;
  --color-frequency-tag: var(--color-surface-secondary);
}

/* Header styles for dark theme */
[ds-theme="dark"] header {
  background: var(--color-surface);
  border-bottom-color: var(--color-border);
}

[ds-theme="dark"] h1,
[ds-theme="dark"] h2,
[ds-theme="dark"] h3,
[ds-theme="dark"] h4,
[ds-theme="dark"] h5,
[ds-theme="dark"] h6 {
  color: var(--color-text-primary);
}

[ds-theme="dark"] p {
  color: var(--color-text-secondary);
}

/* Spinner styles for dark theme */
[ds-theme="dark"] .spinner-circle {
  border-color: var(--color-border);
  border-top-color: var(--color-primary-light);
}

[ds-theme="dark"] .spinner-dots,
[ds-theme="dark"] .spinner-dots::before,
[ds-theme="dark"] .spinner-dots::after,
[ds-theme="dark"] .spinner-pulse,
[ds-theme="dark"] .spinner-bars,
[ds-theme="dark"] .spinner-bars::before,
[ds-theme="dark"] .spinner-bars::after {
  background: var(--color-primary-light);
}

/* Theme toggle button */
.theme-toggle {
  position: fixed;
  top: var(--spacing-4);
  right: var(--spacing-4);
  z-index: 1000;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-round);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-lg);
}

.theme-toggle:hover {
  background: var(--color-surface-secondary);
  transform: scale(1.05);
}

[ds-theme="dark"] .theme-toggle {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[ds-theme="dark"] .theme-toggle:hover {
  background: var(--color-surface-secondary);
}

/* Utility buttons styling */
.utility-buttons {
  position: fixed;
  top: calc(var(--spacing-4) + 60px); /* Below theme toggle */
  right: var(--spacing-4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.utility-btn {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-round);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
}

.utility-btn:hover {
  background: var(--color-surface-secondary);
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

[ds-theme="dark"] .utility-btn {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[ds-theme="dark"] .utility-btn:hover {
  background: var(--color-surface-secondary);
}

/* Responsive utility buttons */
@media (max-width: 768px) {
  .utility-buttons {
    top: calc(var(--spacing-3) + 50px);
    right: var(--spacing-3);
    gap: var(--spacing-1);
  }
  
  .utility-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  .theme-toggle {
    width: 44px;
    height: 44px;
    font-size: 18px;
    top: var(--spacing-3);
    right: var(--spacing-3);
  }
}

@media (max-width: 480px) {
  .utility-buttons {
    top: calc(var(--spacing-2) + 46px);
    right: var(--spacing-2);
  }
  
  .utility-btn {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }
  
  .theme-toggle {
    width: 42px;
    height: 42px;
    font-size: 17px;
    top: var(--spacing-2);
    right: var(--spacing-2);
  }
}

/* Smooth transitions for theme changes */
* {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Disable transitions during theme change to prevent flashing */
.theme-transitioning * {
  transition: none !important;
}