:root {
  --bg-dark: #111827;
  --text-dark: #1f2937;
  --card-bg-dark: linear-gradient(
    135deg,
    rgba(46, 58, 75, 0.4),
    rgba(16, 185, 129, 0.08)
  );
  --group-bg-dark: #1e293b;
  --button-hover-dark: #4b5563;
  --border-dark: #374151;
  --search-border-dark: #334155;
  --highlight-color: #10b981;
  --danger-color: #ef4444;
  --text-muted: #ccc;
  --max-columns-bg: #2e3a4b;
  --drop-zone-bg: #374151;
  --shadow-light-dark: rgba(0, 0, 0, 0.3);
  --shadow-medium-dark: rgba(0, 0, 0, 0.6);
}

body.dark {
  background-color: var(--bg-dark);
  color: var(--text-light);
}

body.dark header {
  background: linear-gradient(135deg, var(--group-bg-dark), var(--border-dark));
  background-size: 200% 200%;
  animation: gradientShiftDark 7s ease infinite;
  box-shadow: 0px 4px 6px var(--shadow-medium-dark);
}
body.dark header h1 {
  color: var(--text-light);
}

body.dark .section h2 {
  color: var(--highlight-color);
}

@keyframes gradientShiftDark {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

body.dark .edit-mode-toggle {
  background: var(--border-dark);
  color: var(--text-light);
  transition: background var(--transition-speed),
    transform var(--transition-speed);
}
body.dark .edit-mode-toggle:hover {
  background: var(--button-hover-dark);
  transform: translateY(-2px);
}

body.dark #search {
  background-color: var(--group-bg-dark);
  color: var(--text-light);
  border-color: var(--search-border-dark);
}

body.dark .section {
  background: var(--group-bg-dark);
  box-shadow: 0px 4px 6px var(--shadow-light-dark);
}
body.dark .section h3 {
  color: var(--highlight-color);
}
body.dark .section button,
body.dark #theme-toggle {
  background: var(--border-dark);
  transition: background var(--transition-speed),
    transform var(--transition-speed);
}
body.dark .section button:hover,
body.dark #theme-toggle:hover {
  background: var(--button-hover-dark);
  transform: translateY(-2px);
}

body.dark .group-container {
  background: var(--group-bg-dark);
  border-color: var(--border-dark);
  transition: transform var(--transition-speed),
    background-color var(--transition-speed);
}
body.dark .group-header h2 {
  color: var(--highlight-color);
}

body.dark .card {
  background: var(--card-bg-dark);
  border-left-color: transparent;
  box-shadow: 0 2px 5px var(--shadow-light-dark);
  transition: transform var(--transition-speed),
    box-shadow var(--transition-speed);
}
body.dark .card h3 {
  color: var(--highlight-color);
}
body.dark .card p {
  color: var(--text-muted);
}

body.dark .drop-zone {
  border-color: var(--button-hover-dark);
  color: var(--button-hover-dark);
  background-color: transparent;
  transition: background-color var(--transition-speed),
    border-color var(--transition-speed);
}
body.dark .drop-zone.highlight {
  background-color: var(--drop-zone-bg);
  border-color: var(--highlight-color);
  color: var(--highlight-color);
}

body.dark #max-columns {
  background-color: var(--max-columns-bg);
  color: var(--text-light);
  border-color: var(--highlight-color);
  transition: background-color var(--transition-speed),
    border-color var(--transition-speed);
}
body.dark #max-columns:hover {
  background-color: var(--button-hover-dark);
}
body.dark #max-columns:focus {
  border-color: var(--highlight-color);
  background-color: var(--group-bg-dark);
}

body.dark .delete-group-button {
  color: var(--text-muted);
  transition: color var(--transition-speed);
}
body.dark .delete-group-button:hover {
  color: var(--danger-color);
}

body.dark .group-name-input {
  color: var(--highlight-color);
  transition: border-color var(--transition-speed),
    color var(--transition-speed);
}
body.dark .group-name-input:focus {
  border-bottom: 1px dashed var(--highlight-color);
}

body.dark #sort-selector {
  background-color: var(--max-columns-bg);
  color: var(--text-light);
  border-color: var(--highlight-color);
  transition: background-color var(--transition-speed),
    border-color var(--transition-speed);
}
body.dark #sort-selector:hover {
  background-color: var(--button-hover-dark);
}
body.dark #sort-selector:focus {
  border-color: var(--highlight-color);
  background-color: var(--group-bg-dark);
}

body.dark .settings-grid label {
  color: var(--text-light);
}
body.dark .settings-grid input[type="number"],
body.dark .settings-grid select {
  background-color: var(--max-columns-bg);
  color: var(--text-light);
  border-color: var(--highlight-color);
  transition: background-color var(--transition-speed),
    border-color var(--transition-speed);
}
body.dark .settings-grid input[type="number"]:hover,
body.dark .settings-grid select:hover {
  background-color: var(--button-hover-dark);
}
body.dark .settings-grid input[type="number"]:focus,
body.dark .settings-grid select:focus {
  border-color: var(--highlight-color);
  background-color: var(--group-bg-dark);
}