/* 
   CONSOLIDATED COLOR SYSTEM
   ALL color definitions, variables, and color-specific rules from the application
*/

/* ========================================
   CORE COLOR PALETTE
   ======================================== */

:root {
  /* Primary Color System */
  --color-primary: #007bff;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;
  --color-purple: #6f42c1;
  --color-dark: #333;
  --color-gray: #6c757d;
  --color-light-gray: #f8f9fa;
  --color-border: #ddd;
  --color-border-light: #e9ecef;

  /* Progress Gradient Colors */
  --progress-blue: #3b82f6;
  --progress-green: #10b981;
  --progress-yellow: #f59e0b;
  
  /* Counter Colors */
  --counter-1-bg: #e7f3ff;
  --counter-1-hover: #c8d6e8;
}

/* ========================================
   NODE TYPE COLORS (Tree System)
   ======================================== */

:root {
  /* Node Type Colors */
  --node-action-border: #10b981;
  --node-action-bg: #f0fdf4;
  --node-action-bg-gradient: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  --node-action-bg-alt: rgba(16, 185, 129, 0.1);
  --node-action-hover-shadow: rgba(16, 185, 129, 0.2);
  
  --node-question-border: #6366f1;
  --node-question-bg: #eef2ff;
  --node-question-bg-gradient: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  --node-question-bg-alt: rgba(99, 102, 241, 0.1);
  --node-question-hover-shadow: rgba(99, 102, 241, 0.2);
  
  --node-playlist-border: #8b5cf6;
  --node-playlist-bg: #faf5ff;
  --node-playlist-bg-gradient: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  --node-playlist-bg-alt: rgba(139, 92, 246, 0.1);
  --node-playlist-hover-shadow: rgba(139, 92, 246, 0.2);
  
  /* Canvas Properties */
  --canvas-bg-color: #fafbfc;
  --canvas-grid-color: rgba(99, 102, 241, 0.1);
  --canvas-border: 2px solid #e2e8f0;
}

/* ========================================
   ACTION TYPE COLOR SYSTEM
   ======================================== */

:root {
  --action-children: var(--color-primary);
  --action-tree-reference: var(--color-success);
  --action-loop-back: var(--color-warning);
  --action-endpoint: var(--color-gray);
  
  --action-children-bg: rgba(0, 123, 255, 0.05);
  --action-tree-reference-bg: rgba(40, 167, 69, 0.05);
  --action-loop-back-bg: rgba(255, 193, 7, 0.05);
  --action-endpoint-bg: rgba(108, 117, 125, 0.05);
}

/* ========================================
   BUTTON COLOR VARIANTS
   ======================================== */

:root {
  /* Button Variables */
  --btn-primary-bg: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --btn-primary-bg-hover: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  --btn-danger-bg: #dc3545;
  --btn-danger-bg-hover: #c82333;
  --btn-success-bg: #28a745;
  --btn-success-bg-hover: #218838;
  --btn-secondary-bg: #6c757d;
  --btn-secondary-bg-hover: #5a6268;
  
  /* Close Button Variables */
  --close-btn-size: 40px;
  --close-btn-bg: rgba(71, 85, 105, 0.1);
  --close-btn-bg-hover: rgba(239, 68, 68, 0.1);
  --close-btn-color: #64748b;
  --close-btn-color-hover: #ef4444;
}

/* ========================================
   MODAL BACKDROP COLORS
   ======================================== */

:root {
  /* Modal-specific variables */
  --modal-border-radius: 24px;
  --modal-padding: 1.5%;
  --modal-padding-mobile: 1.5%;
  --modal-backdrop: rgba(15, 23, 42, 0.6);
  --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
  
  /* Form variables */
  --input-padding: 1% 1.25%;
  --input-border: 2px solid #e2e8f0;
  --input-border-focus: #3b82f6;
  --input-bg: #f8fafc;
  --input-border-radius: 12px;
}

/* ========================================
   BODY AND BASIC ELEMENT COLORS
   ======================================== */

body {
  background: #f5f5f5;
}

html {
  overflow-x: hidden;
}

/* ========================================
   TYPOGRAPHY COLORS
   ======================================== */

h1, h2, .card-title {
  color: var(--color-dark);
}

.card-title {
  color: var(--color-dark);
}

h3 {
  color: #495057;
}

h4 {
  color: var(--color-gray);
}

/* ========================================
   STATUS-BASED COLORS
   ======================================== */

/* Utility Classes */
.error { color: var(--color-danger); }
.success { color: var(--color-success); }
.info { color: var(--color-info); }
.warning { color: var(--color-warning); }

/* Status with countdown styles */
.status {
  color: var(--color-gray);
}

.status.active {
  color: var(--color-success);
}

.countdown {
  color: var(--color-primary);
}

/* Trackable Status Colors */
.trackable-status.due { 
  background: var(--color-warning); 
  color: #856404; 
}

.trackable-status.overdue { 
  background: var(--color-danger); 
  color: white; 
}

.trackable-status.completed { 
  background: var(--color-success); 
  color: white; 
}

.schedule-badge { 
  background: #e9ecef; 
  color: var(--color-gray); 
}

.trackable-streak { 
  background: var(--color-info); 
  color: white; 
}

.trackable-due-date { 
  color: var(--color-gray); 
  opacity: 0.8; 
}

.priority-star { 
  color: #ffc107; 
}

/* ========================================
   TRACKABLE ITEM STATUS COLORS
   ======================================== */

.trackable-item.status-due { 
  border-left-color: var(--color-warning); 
  background: rgba(255, 193, 7, 0.05); 
}

.trackable-item.status-overdue { 
  border-left-color: var(--color-danger); 
  background: rgba(220, 53, 69, 0.05); 
}

.trackable-item.completed { 
  border-left-color: var(--color-success) !important; 
  background: rgba(40, 167, 69, 0.02) !important;
  opacity: 0.7; 
  filter: grayscale(100%) opacity(50%);
}

.trackable-item.completed .trackable-title { 
  color: var(--color-gray); 
}

.trackable-item.partial-completion {
  border-left-color: var(--color-warning);
  background: rgba(255, 193, 7, 0.05);
}

.trackable-item.partial-completion .trackable-title::after {
  color: var(--color-warning);
}

/* ========================================
   HOVER STATES
   ======================================== */

/* Trackable Item Hovers */
.trackable-item:hover {
  background: #e9ecef;
}

/* Button Hovers */
.trackable-btn:hover {
  background: #0056b3;
}

.trackable-btn.dec:hover {
  background: #c82333;
}

.trackable-checkbox-btn:hover {
  background: rgba(40, 167, 69, 0.4);
}

.trackable-checkbox-btn.completed:hover {
  background: rgba(40, 167, 69, 0.5);
}

.timer-btn:hover {
  background: #138496;
}

.timer-btn.stop:hover {
  background: #e0a800;
}

.counter-1 button:hover {
  background: #0056b3;
}

.counter-1 .progress-btn:hover {
  background: var(--counter-1-hover);
}

.inc-dec-btn:hover {
  background: var(--color-border-light);
}

.progress-btn:hover {
  background: rgba(255, 255, 255, .5);
}

.end-protocol-btn:hover {
  background: #c82333;
}

.weekday-grid label:hover {
  border-color: var(--color-primary);
  background: rgba(0, 123, 255, 0.05);
}

.collapsible-header:hover {
  color: var(--color-primary);
}

.btn-type:hover:not(.active) {
  background: var(--color-border-light);
}

.close-playlist-add:hover {
  color: var(--color-danger);
}

.playlist-create-btn:hover {
  background: #218838;
}

.close-playlist-add-btn:hover {
  background: #5a6268;
}

.inc-dec-btn:hover {
  background: var(--color-border-light);
}

.sequence-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1);
}

.sequence-item:hover .custom-title-indicator {
  opacity: 1;
}

.sequence-control-btn.config:hover {
  background: rgba(0, 123, 255, 0.1);
}

.sequence-control-btn:hover {
  background: #e2e8f0;
}

.sequence-control-btn.remove:hover {
  background: rgba(220, 53, 69, 0.1);
  border-color: var(--color-danger);
}

.sets-control-btn:hover:not(:disabled) {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3);
}

.sets-control-btn.next-set:hover {
  box-shadow: 0 4px 20px rgba(40, 167, 69, 0.4);
}

.sets-control-btn.reset-sets:hover {
  background: var(--color-danger);
  color: white;
  box-shadow: 0 4px 16px rgba(220, 53, 69, 0.3);
}

.available-trackable-card:hover {
  background: #e2e8f0;
  border-color: var(--color-primary);
}

.available-trackable-card[draggable="true"]:hover {
  box-shadow: 0 12px 40px rgba(0, 123, 255, 0.2);
}

.sequence-item[draggable="true"]:hover {
  border-color: rgba(0, 123, 255, 0.4);
  background: rgba(0, 123, 255, 0.02);
}

.edit-goal-btn:hover {
  background: #0056b3;
}

.add-goal-btn:hover {
  background: var(--color-border-light);
  border-color: var(--color-primary);
}

/* ========================================
   BADGE COLORS
   ======================================== */

.schedule-badge, 
.trackable-due-date, 
.trackable-status, 
.trackable-streak, 
.child-count-badge, 
.goal-badge, 
.tag-badge {
  color: var(--color-primary);
  border: 1px solid rgba(0, 123, 255, 0.2);
}

.child-count-badge { 
  background: rgba(40, 167, 69, 0.1); 
  color: var(--color-success); 
  border: 1px solid rgba(40, 167, 69, 0.2);
}

.goal-badge, .tag-badge {
  background: rgba(0, 123, 255, 0.1);
  color: var(--color-primary);
  border: 1px solid rgba(0, 123, 255, 0.2);
}

.tag-badge {
  color: var(--color-primary);
}

.more-tags {
  background: rgba(108, 117, 125, 0.1);
  color: var(--color-gray);
  border: 1px solid rgba(108, 117, 125, 0.2);
}

/* ========================================
   NAVIGATION COLORS
   ======================================== */

.top-nav {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.nav-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-gray);
}

.nav-btn:hover {
  color: var(--color-primary);
  background: rgba(0, 123, 255, 0.05);
}

.nav-btn.active {
  color: var(--color-primary);
  background: rgba(0, 123, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.2);
}

.nav-action-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-gray);
}

.nav-action-btn:hover {
  background: var(--color-light-gray);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Crisis Button - Orange/Red Gradient */
#crisisBtn {
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  color: white;
  border-color: transparent;
}

#crisisBtn:hover {
  background: linear-gradient(135deg, #FF5722 0%, #FF8F00 100%);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

/* Settings Toggle - Purple Gradient */
#settingsToggle {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: transparent;
}

#settingsToggle:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

#settingsToggle.active {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
}

/* ========================================
   DROPDOWN COLORS
   ======================================== */

.nav-dropdown-menu {
  background: white;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.dropdown-section {
  border: 1px solid rgba(0, 123, 255, 0.2);
  background: rgba(0, 123, 255, 0.02);
}

.dropdown-section-title {
  color: var(--color-gray);
}

.dropdown-divider {
  background: var(--color-border);
}

.checkbox-option:hover {
  background: var(--color-light-gray);
}

.theme-option:hover {
  background: var(--color-light-gray);
}

.theme-option.active {
  background: var(--color-primary);
  color: white;
}

.dropdown-item.connected {
  background: rgba(40, 167, 69, 0.1);
  color: var(--color-success);
}

.dropdown-item.connected .dropdown-icon {
  color: var(--color-success);
}

/* ========================================
   THEME PREVIEW COLORS
   ======================================== */

.office-preview {
  background: #0078D4;
}

.zen-preview {
  background: linear-gradient(45deg, #E8A898 0%, #A8C990 100%);
}

.gaming-preview {
  background: linear-gradient(45deg, #FF6B9D 0%, #4ECDC4 100%);
}

/* ========================================
   CARD AND CONTAINER COLORS
   ======================================== */

.counter-card,
.trackables-card,
.diet-card,
.motivation-card,
.tool-card,
.playlists-card,
.container-card {
  background: white;
}

.achieve-vision-wrapper {
  background: #f8f9fa;
}

.no-playlists {
  color: var(--color-gray);
}

.vision-content {
  background: #f8f9fa;
}

/* ========================================
   GAMIFICATION COLORS
   ======================================== */

.gp-overlay .gp-cell {
  background: rgba(0, 0, 0, 0.85);
}

.gp-overlay .gp-cell.cleared {
  background: transparent;
}

.gp-filter {
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(255,255,255,0.02) 1px,
      rgba(255,255,255,0.02) 2px
    );
}

.gp-cell.color-reveal {
  background: transparent !important;
}

.gp-cell.greyscale-reveal {
  background: rgba(0, 0, 0, 0.65);
}

.vision-content.greyscale img,
.vision-content.greyscale video,
.vision-content.greyscale iframe {
  filter: grayscale(100%) contrast(33%) opacity(67%);
}

/* ========================================
   PROGRESS-BASED COLORS (Vision Rewards)
   ======================================== */

.modal-vision-card-container.progress-low {
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(135deg, #3b82f6, #60a5fa) border-box;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.modal-vision-card-container.progress-medium {
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(135deg, #10b981, #34d399) border-box;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.modal-vision-card-container.progress-high {
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(135deg, #f59e0b, #fbbf24) border-box;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.4);
}

.modal-vision-card-container.progress-complete {
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b) border-box;
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.6), 
              0 0 60px rgba(245, 158, 11, 0.3);
}

/* Close button progress colors */
.close-vision-modal {
  background: rgba(0, 0, 0, 0.7);
  color: white;
}

.close-vision-modal:hover {
  background: rgba(0, 0, 0, 0.9);
}

.close-vision-modal.progress-low {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.close-vision-modal.progress-medium {
  background: linear-gradient(135deg, #10b981, #34d399);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.close-vision-modal.progress-high {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.close-vision-modal.progress-complete {
  background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
}

.close-vision-modal.progress-low:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.7);
}

.close-vision-modal.progress-medium:hover {
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.7);
}

.close-vision-modal.progress-high:hover {
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.7);
}

.close-vision-modal.progress-complete:hover {
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.8);
}

/* Hover states with translucency */
.modal-vision-card-container.progress-low .gp-cell:hover {
  background: rgba(59, 130, 246, 0.8);
  box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.3);
}

.modal-vision-card-container.progress-medium .gp-cell:hover {
  background: rgba(16, 185, 129, 0.8);
  box-shadow: inset 0 0 10px rgba(16, 185, 129, 0.3);
}

.modal-vision-card-container.progress-high .gp-cell:hover {
  background: rgba(245, 158, 11, 0.8);
  box-shadow: inset 0 0 10px rgba(245, 158, 11, 0.3);
}

.modal-vision-card-container.progress-complete .gp-cell:hover {
  background: rgba(245, 158, 11, 0.85);
  box-shadow: inset 0 0 15px rgba(245, 158, 11, 0.4);
}

/* Thumbnail progress colors */
.vision-thumbnail-card.progress-low .gp-overlay .gp-cell {
  background: rgba(0, 0, 0, 0.8);
}

.vision-thumbnail-card.progress-low .gp-overlay .gp-cell:hover {
  background: rgba(59, 130, 246, 0.75);
}

.vision-thumbnail-card.progress-medium .gp-overlay .gp-cell {
  background: rgba(0, 0, 0, 0.8);
}

.vision-thumbnail-card.progress-medium .gp-overlay .gp-cell:hover {
  background: rgba(16, 185, 129, 0.75);
}

.vision-thumbnail-card.progress-high .gp-overlay .gp-cell {
  background: rgba(0, 0, 0, 0.8);
}

.vision-thumbnail-card.progress-high .gp-overlay .gp-cell:hover {
  background: rgba(245, 158, 11, 0.75);
}

.vision-thumbnail-card.progress-complete .gp-overlay .gp-cell {
  background: rgba(0, 0, 0, 0.8);
}

.vision-thumbnail-card.progress-complete .gp-overlay .gp-cell:hover {
  background: rgba(245, 158, 11, 0.8);
}

/* ========================================
   REDDIT TRADING CARD COLORS
   ======================================== */

.card-border {
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 25%, #2c5aa0 50%, #1e3a5f 100%);
}

.card-border::before {
  background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700, #ffed4e);
}

.card-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.subreddit-name {
  color: #2c3e50;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.rarity-gem {
  background: radial-gradient(circle, #ff6b6b, #ee5a24);
  box-shadow: 0 0 8px rgba(255, 107, 107, 0.6);
}

.card-artwork {
  background: radial-gradient(circle, #667eea 0%, #764ba2 100%);
}

.play-badge {
  background: conic-gradient(from 0deg, #ffd700, #ffed4e, #ffc107, #ff9800, #ffd700);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}

.reddit-trading-card:hover .play-badge {
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.7);
}

.play-triangle {
  border-left: 20px solid #2c3e50;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.sparkle {
  background: #fff;
}

.card-footer {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.post-title {
  color: #2c3e50;
}

.card-type {
  color: #6c757d;
}

/* ========================================
   CRISIS SUPPORT COLORS
   ======================================== */

.crisis-intro {
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
  border: 2px solid #f59e0b;
}

.crisis-intro h3 {
  color: #92400e;
}

.crisis-intro p {
  color: #78350f;
}

.tree-section-header {
  color: #1e293b;
  border-bottom: 2px solid #e2e8f0;
}

.template-item {
  border-left: 4px solid #10b981;
  background: rgba(16, 185, 129, 0.02);
}

.user-item {
  border-left: 4px solid #6366f1;
  background: rgba(99, 102, 241, 0.02);
}

.tree-icon {
  color: #10b981;
}

.tree-info h4 {
  color: #1e293b;
}

.tree-description {
  color: #64748b;
}

.template-badge {
  background: #10b981;
  color: white;
}

.section-empty {
  color: #64748b;
}

.inline-create-btn {
  background: var(--color-primary);
  color: white;
}

.inline-create-btn:hover {
  background: #2563eb;
}

/* ========================================
   TIMELINE COLORS
   ======================================== */

.timeline-header {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid var(--color-border-light);
}

.legend-item {
  background: white;
  border: 1px solid var(--color-border-light);
}

.timeline-content {
  background: white;
  border: 1px solid var(--color-border-light);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.timeline-title {
  color: var(--color-dark);
}

.timeline-time {
  color: var(--color-gray);
}

.timeline-dependency {
  color: var(--color-primary);
  background: rgba(0, 123, 255, 0.1);
  border: 1px solid rgba(0, 123, 255, 0.2);
}

.timeline-progress-bar {
  background: var(--color-border-light);
}

.timeline-progress-fill {
  background: var(--color-primary);
}

.timeline-progress-text {
  color: var(--color-gray);
}

.timeline-progress-binary {
  color: var(--color-gray);
}

.timeline-progress-binary.complete {
  color: var(--color-success);
}

.timeline-badge.playlist {
  background: rgba(255, 193, 7, 0.2);
  color: #856404;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.timeline-item.available .timeline-dot {
  background: var(--color-success);
}

.timeline-item.locked .timeline-dot {
  background: var(--color-danger);
}

.timeline-item.waiting .timeline-dot {
  background: var(--color-warning);
}

.timeline-item.completed .timeline-dot {
  background: var(--color-success);
  box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
}

.timeline-item.active .timeline-dot {
  background: var(--color-primary);
  box-shadow: 0 0 12px rgba(0, 123, 255, 0.5);
}

.timeline-connection {
  background: var(--color-primary);
}

.timeline-connection.hours-later {
  background: var(--color-warning);
}

.timeline-connection.days-later {
  background: var(--color-info);
}

.dependency-indicator {
  background: white;
  border: 1px solid var(--color-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ========================================
   PLAYLIST COLORS
   ======================================== */

.trackable-playlist {
  background: rgba(0, 123, 255, 0.05);
  border: 1px solid rgba(0, 123, 255, 0.2);
  color: var(--color-primary);
}

.trackable-item.playlist-item {
  border-left: 4px solid var(--color-primary);
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.02) 0%, rgba(0, 123, 255, 0.08) 100%);
}

.trackable-item.playlist-item.playlist-paused {
  border-left-color: var(--color-warning);
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.02) 0%, rgba(255, 193, 7, 0.08) 100%);
}

.trackable-item.playlist-item .trackable-title {
  color: var(--color-primary);
}

.playlist-badge {
  background: rgba(0, 123, 255, 0.1);
  color: var(--color-primary);
  border: 1px solid rgba(0, 123, 255, 0.2);
}

.playlist-badge:hover {
  background: rgba(0, 123, 255, 0.2);
}

/* Playlist header colors */
.playlist-header {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border: 1px solid #34495e;
  color: white;
}

.playlist-header .playlist-track-count,
.playlist-header .playback-status-badge,
.playlist-header .playlist-badge,
.playlist-header .mode-text,
.playlist-header .hierarchy-badge {
  color: white !important;
}

.playlist-header-controls {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-player-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.header-player-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.header-player-btn.play-pause-btn,
.header-player-btn.play-btn {
  background: linear-gradient(135deg, var(--color-primary), #0056b3);
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.header-player-btn.play-pause-btn:hover:not(:disabled),
.header-player-btn.play-btn:hover:not(:disabled) {
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.6);
}

.header-player-status.paused {
  color: var(--color-warning);
}

.playlist-playback-mode {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ========================================
   PLAYLIST MODAL COLORS
   ======================================== */

.playlist-builder {
  background: rgba(0, 0, 0, 0.7);
}

.category-pill {
  background: white;
  border: 2px solid #e2e8f0;
  color: var(--color-gray);
}

.category-pill:hover {
  border-color: var(--color-primary);
  background: rgba(0, 123, 255, 0.05);
}

.category-pill.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.trackable-pill {
  background: var(--color-light-gray);
  color: var(--color-dark);
}

.trackable-pill:hover {
  background: #e2e8f0;
}

.trackable-pill.selected {
  background: rgba(0, 123, 255, 0.1);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.trackable-pill.dragging {
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
}

.sequence-pills-container {
  border: 2px dashed #e2e8f0;
}

.sequence-pills-container.drag-over {
  border-color: var(--color-primary);
  background: rgba(0, 123, 255, 0.05);
}

.sequence-empty-state {
  color: var(--color-gray);
}

.sequence-pill {
  background: rgba(0, 123, 255, 0.1);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.sequence-pill:hover {
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

.sequence-pill .gear-btn,
.sequence-pill .pencil-btn {
  color: var(--color-primary);
}

.sequence-pill .gear-btn:hover,
.sequence-pill .pencil-btn:hover {
  background: rgba(0, 123, 255, 0.2);
}

.sequence-pill.dragging {
  border: 2px dashed var(--color-primary);
  background: rgba(0, 123, 255, 0.15);
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
}

.sequence-pill.reorder-target {
  border-color: var(--color-success);
  background: rgba(40, 167, 69, 0.1);
}

.sequence-pill.valid-reorder-target {
  border-color: rgba(0, 123, 255, 0.6);
  background: rgba(0, 123, 255, 0.15);
}

.add-step-btn {
  background: rgba(0, 123, 255, 0.1);
  border: 2px dashed var(--color-primary);
  color: var(--color-primary);
}

.add-step-btn:hover {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.arrow-symbol {
  color: var(--color-primary);
}

/* Step Configuration Modal */
.step-config-modal {
  background: rgba(0, 0, 0, 0.4);
}

.step-config-modal-content {
  background: white;
}

.step-config-header {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.wizard-step {
  opacity: 0.5;
}

.wizard-step.active {
  opacity: 1;
}

.wizard-step.completed {
  opacity: 0.8;
}

.step-number {
  background: #e2e8f0;
  color: var(--color-gray);
}

.wizard-step.active .step-number {
  background: var(--color-primary);
  color: white;
}

.wizard-step.completed .step-number {
  background: var(--color-success);
  color: white;
}

.step-label {
  color: var(--color-dark);
}

.dependency-option {
  border: 2px solid #e2e8f0;
  background: white;
}

.dependency-option:hover {
  border-color: rgba(0, 123, 255, 0.3);
  background: rgba(0, 123, 255, 0.02);
}

.dependency-option.selected {
  border-color: var(--color-primary);
  background: rgba(0, 123, 255, 0.05);
}

.option-title {
  color: var(--color-dark);
}

.option-desc {
  color: var(--color-gray);
}

.timing-config {
  background: rgba(0, 123, 255, 0.05);
  border: 1px solid rgba(0, 123, 255, 0.2);
}

.timing-label {
  color: var(--color-primary);
}

.dependency-unit {
  color: var(--color-primary);
}

.config-summary {
  background: #f8fafc;
}

.summary-item {
  border-bottom: 1px solid #e2e8f0;
}

.dependency-preview {
  background: rgba(0, 123, 255, 0.05);
  border: 1px solid rgba(0, 123, 255, 0.2);
  color: var(--color-primary);
}

/* ========================================
   PROGRESS BAR COLORS
   ======================================== */

.progress-bar {
  background: #e9ecef;
}

.progress-fill {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-info) 100%);
}

.progress-fill::before {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.progress-checkmark {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.progress-fill.stage-blue {
  background: var(--progress-blue);
}

.progress-fill.stage-blue-green {
  background: linear-gradient(90deg, var(--progress-blue) 0%, var(--progress-green) 100%);
}

.progress-fill.stage-full {
  background: linear-gradient(90deg, var(--progress-blue) 0%, var(--progress-green) 50%, var(--progress-yellow) 100%);
}

.progress-mini {
  background: rgba(0, 0, 0, 0.1);
}

.progress-mini > div {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-success) 100%);
}

.modal-progress-indicator {
  background: rgba(0, 0, 0, 0.8);
}

.modal-progress-text {
  color: white;
}

.modal-progress-bar {
  background: rgba(255, 255, 255, 0.2);
}

.modal-progress-fill {
  background: var(--color-primary);
}

/* ========================================
   PLAYBACK STATUS COLORS
   ======================================== */

.playback-status-badge.playing {
  background: var(--color-success);
  color: white;
}

.playback-status-badge.paused {
  background: var(--color-warning);
  color: #856404;
}

.playback-status-badge.locked {
  background: var(--color-danger);
  color: white;
}

.playing-track-item {
  background: rgba(0, 123, 255, 0.1);
  color: var(--color-primary);
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.queued-track-item {
  color: var(--color-gray);
}

.paused-track-item {
  color: var(--color-warning);
  background: rgba(255, 193, 7, 0.1);
}

.locked-track-item {
  color: var(--color-gray);
}

/* ========================================
   SETS & REPS COLORS
   ======================================== */

.sets-progress-container {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid rgba(0, 123, 255, 0.2);
}

.sets-progress-container::after {
  background: linear-gradient(45deg, 
    transparent 25%, 
    rgba(0, 123, 255, 0.02) 25%, 
    rgba(0, 123, 255, 0.02) 50%, 
    transparent 50%, 
    transparent 75%, 
    rgba(0, 123, 255, 0.02) 75%
  );
}

.sets-progress-display {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 123, 255, 0.3);
}

.sets-segment-fill {
  background: rgba(0, 123, 255, 0.2);
  border: 2px solid rgba(0, 123, 255, 0.3);
}

.sets-segment-fill.completed {
  background: linear-gradient(135deg, var(--color-success) 0%, #20c997 100%);
  border-color: var(--color-success);
  box-shadow: 0 0 12px rgba(40, 167, 69, 0.4);
}

.sets-segment-fill.completed::after {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.sets-segment-label {
  color: var(--color-primary);
  background: white;
  border: 1px solid rgba(0, 123, 255, 0.2);
}

.sets-control-btn {
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-primary);
  border: 2px solid rgba(0, 123, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sets-control-btn.next-set {
  background: linear-gradient(135deg, var(--color-success), #20c997);
  color: white;
  border-color: var(--color-success);
}

.sets-control-btn.reset-sets {
  background: rgba(220, 53, 69, 0.1);
  color: var(--color-danger);
  border-color: rgba(220, 53, 69, 0.3);
}

.sets-progress-container .good-enough-btn {
  background: rgba(255, 193, 7, 0.9);
  border: 2px solid rgba(255, 193, 7, 0.5);
}

/* ========================================
   TRACKABLE PROGRESS CONTROLS
   ======================================== */

.trackable-progress-container {
  background: #e9ecef;
}

.trackable-progress-fill {
  background: var(--color-primary);
}

.trackable-progress-text {
  color: var(--color-dark);
  text-shadow: 0 0 3px rgba(255,255,255,0.8);
}

.trackable-checkbox-btn {
  background: rgba(40, 167, 69, 0.2);
  color: var(--color-success);
}

.trackable-checkbox-btn.completed {
  background: rgba(40, 167, 69, 0.3);
  color: var(--color-success);
}

.trackable-checkbox-btn::before {
  background: rgba(255, 255, 255, 0.3);
}

.good-enough-btn {
  background: rgba(255, 193, 7, 0.3);
  color: #856404;
}

.counter-display {
  color: var(--color-dark);
  background: var(--color-light-gray);
  border: 1px solid var(--color-border);
}

.trackable-current {
  color: var(--color-dark);
}

.trackable-btn {
  background: var(--color-primary);
  color: white;
}

.trackable-btn.dec { 
  background: var(--color-danger); 
}

.minus-btn {
  background: var(--color-danger);
  color: white;
}

.plus-btn {
  background: var(--color-primary);
  color: white;
}

/* ========================================
   TIMER CONTROLS
   ======================================== */

.progress-timer-controls {
  background: rgba(23, 162, 184, 0.1);
  border: 1px solid rgba(23, 162, 184, 0.2);
}

.timer-display {
  color: var(--color-info);
  background: white;
  border: 1px solid rgba(23, 162, 184, 0.3);
}

.trackable-timer-controls {
  background: rgba(23, 162, 184, 0.1);
  border: 1px solid rgba(23, 162, 184, 0.2);
}

.timer-btn {
  background: var(--color-info);
  color: white;
}

.timer-btn.stop { 
  background: var(--color-warning); 
}

.start-timer-btn {
  background: var(--color-info);
  color: white;
}

.stop-timer-btn {
  background: var(--color-warning);
  color: white;
}

/* ========================================
   VALIDATION & ERROR COLORS
   ======================================== */

.is-invalid {
  border: 2px solid #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
  background-color: #fff5f5 !important;
}

.is-invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.field-error-tooltip {
  background: #dc3545;
  color: white;
}

.field-error-tooltip::before {
  border-bottom: 4px solid #dc3545;
}

.weekday-grid.has-error {
  border: 1px solid #dc3545;
  background-color: #fff5f5;
}

.weekday-check.is-invalid + span {
  color: #dc3545;
}

/* Permission and info note colors */
.permission-check {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
}

.info-note {
  background: #d1ecf1;
  border: 1px solid #bee5eb;
  color: #0c5460;
}

.global-permission {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
}

/* ========================================
   DEPENDENCY COLORS
   ======================================== */

.dependency-preview {
  background: rgba(0, 123, 255, 0.05);
  border: 1px solid rgba(0, 123, 255, 0.2);
}

.dependency-conflicts-warning {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.2);
}

.warning-icon {
  color: var(--color-danger);
}

.warning-text {
  color: var(--color-danger);
}

.warning-details {
  color: var(--color-danger);
}

.conflict-item {
  color: var(--color-dark);
}

.conflict-item.error {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.3);
}

.conflict-item.warning {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.resolve-conflict-btn {
  background: var(--color-success);
  color: white;
}

.resolve-conflict-btn:hover {
  background: #218838;
}

.sequence-item.has-dependency {
  border-left: 3px solid var(--color-primary);
  background: rgba(0, 123, 255, 0.02);
}

.sequence-item.has-error {
  border-left: 4px solid var(--color-danger);
  background: rgba(220, 53, 69, 0.02);
}

.sequence-item.has-warning {
  border-left: 4px solid var(--color-warning);
  background: rgba(255, 193, 7, 0.02);
}

.conflict-indicator {
  background: var(--color-primary);
  color: white;
}

.conflict-indicator.error {
  background: var(--color-danger);
  color: white;
}

.conflict-indicator.warning {
  background: var(--color-warning);
  color: #856404;
}

.sequence-conflicts-container {
  background: rgba(220, 53, 69, 0.05);
  border: 2px solid rgba(220, 53, 69, 0.2);
}

.conflicts-title {
  color: var(--color-danger);
}

.auto-resolve-btn {
  background: var(--color-primary);
  color: white;
}

.auto-resolve-btn:hover {
  background: #0056b3;
}

/* ========================================
   PRIORITY SELECT COLORS
   ======================================== */

#prioritySelect {
  background: linear-gradient(45deg, #fff 0%, #f8f9fa 100%);
}

#prioritySelect option[value="0"] { color: var(--color-gray); }
#prioritySelect option[value="1"] { color: var(--color-info); }
#prioritySelect option[value="2"] { color: var(--color-warning); }
#prioritySelect option[value="3"] { color: var(--color-danger); }

/* ========================================
   FORM FIELD COLORS
   ======================================== */

.form-section {
  background: rgba(0, 123, 255, 0.02);
  border: 1px solid var(--color-border-light);
}

.form-section legend {
  color: var(--color-dark);
}

.form-section:last-child {
  background: rgba(40, 167, 69, 0.02);
  border-color: rgba(40, 167, 69, 0.2);
}

.form-section:last-child legend {
  color: var(--color-success);
}

.form-section:hover {
  border-color: rgba(0, 123, 255, 0.3);
  background: rgba(0, 123, 255, 0.03);
}

.btn-type {
  background: var(--counter-1-bg);
  color: var(--color-dark);
  border: 1px solid var(--color-border);
}

.btn-type:hover:not(.active) { 
  background: var(--counter-1-hover); 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-type.active {
  background: var(--color-primary) !important;
  color: white !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4) !important;
}

.btn-type::before {
  background: rgba(255, 255, 255, 0.2);
}

.weekday-grid label {
  border: 2px solid var(--color-border);
  background: white;
}

.weekday-grid label:hover {
  border-color: var(--color-primary);
  background: rgba(0, 123, 255, 0.05);
}

.weekday-grid label.selected {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.sets-reps-toggle-row {
  border: 1px solid var(--color-border-light);
  background: rgba(0, 123, 255, 0.02);
}

.sets-checkbox-label {
  color: var(--color-dark);
}

.sets-input:disabled {
  background: var(--color-light-gray);
  color: var(--color-gray);
}

.reps-label {
  color: var(--color-dark);
}

.custom-interval-row label {
  color: var(--color-dark);
}

.input-help {
  color: var(--color-gray);
}

/* ========================================
   SEARCH AND FILTER COLORS
   ======================================== */

.workspace-controls-row {
  background: #f8fafc;
  border-bottom: 1px solid var(--color-border);
}

#trackable-list-view .workspace-controls-row {
  background: #f8fafc;
  border-bottom: 1px solid var(--color-border);
}

.filter-btn {
  background: white;
  color: var(--color-gray);
  border: 1px solid var(--color-border);
}

.filter-btn.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.filter-btn:hover:not(.active) {
  background: var(--color-light-gray);
  border-color: var(--color-primary);
}

.search-dropdown-toggle {
  background: white;
  border: 1px solid var(--color-border);
  color: var(--color-gray);
}

.search-dropdown-toggle:hover {
  background: var(--color-light-gray);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.search-dropdown-toggle.expanded {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.hierarchy-search-input {
  border: 2px solid var(--color-border);
}

.hierarchy-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.clear-search-btn {
  color: var(--color-gray);
}

.clear-search-btn:hover {
  background: var(--color-danger);
  color: white;
}

.trackable-title mark {
  background: rgba(255, 235, 59, 0.6);
}

/* ========================================
   SECTION HEADER COLORS
   ======================================== */

.section-header {
  color: var(--color-dark);
  border-bottom: 2px solid var(--color-border-light);
}

.section-header:hover {
  color: var(--color-primary);
}

.section-header::before {
  color: var(--color-gray);
}

#completedCount {
  color: var(--color-success);
}

.collapsible-toggle {
  color: var(--color-gray);
}

/* ========================================
   WORKBENCH TAB COLORS
   ======================================== */

.workbench-tabs {
  border-bottom: 2px solid var(--color-border);
}

.workbench-tab {
  background: var(--color-light-gray);
  border: 2px solid var(--color-border);
  color: var(--color-gray);
}

.workbench-tab:hover:not(.active) {
  background: #e2e8f0;
  color: var(--color-dark);
}

.workbench-tab.active {
  background: white;
  color: var(--color-dark);
  border-color: var(--color-border);
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
}

.trees-card .workbench-tabs {
  background: var(--canvas-bg-color);
}

.trees-card .workbench-tab {
  background: #f3f4f6;
  color: #6b7280;
}

.trees-card .workbench-tab.active {
  background: white;
  color: #1e293b;
}

/* ========================================
   EMPTY STATE COLORS
   ======================================== */

.empty-state-card {
  background: var(--color-light-gray);
  color: var(--color-gray);
  border: 1px dashed var(--color-border);
}

.timeline-btn {
  background: rgba(0, 123, 255, 0.1);
  color: var(--color-primary);
  border: 1px solid rgba(0, 123, 255, 0.2);
}

.timeline-btn:hover {
  background: var(--color-primary);
  color: white;
}

.empty-state-icon {
  color: #9ca3af;
}

.empty-state-content h4 {
  color: #6b7280;
}

.empty-state-content p {
  color: #9ca3af;
}

/* ========================================
   CONTEXT HEADER COLORS
   ======================================== */

.context-text {
  color: var(--color-primary);
}

.context-cancel-btn {
  border: 1px solid rgba(0, 123, 255, 0.3);
  color: var(--color-primary);
}

.context-cancel-btn:hover {
  background: rgba(0, 123, 255, 0.1);
  border-color: var(--color-primary);
}

/* ========================================
   MODAL HEADER COLORS
   ======================================== */

.modal,
.settings-modal,
.tree-library-modal,
.tree-runner-modal,
.preview-modal,
.past-trackables-modal,
.goal-modal,
.game-settings-modal {
  background: rgba(0, 0, 0, 0.7);
}

.modal-content,
.settings-content,
.past-trackables-content,
.goal-modal-content,
.timeline-modal-content,
.game-settings-content {
  background: white;
}

.modal-header,
.settings-header,
.tree-library-header,
.tree-runner-header,
.goal-modal h2,
.game-settings-header {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.modal-header h2,
.settings-header h2,
.tree-library-header h2,
.tree-runner-header h2,
.game-settings-header h2 {
  color: #1e293b !important;
}

.composer-header {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-bottom: 1px solid #e2e8f0;
}

.composer-header h3 {
  color: var(--color-dark);
}

.composer-button-row {
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

/* ========================================
   TREE RUNNER COLORS
   ======================================== */

.tree-runner-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.current-tree-name {
  color: white;
}

.tree-runner-header h2 {
  color: #0369a1;
}

.runner-exit-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
}

.runner-exit-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.breadcrumb-item {
  color: #64748b;
}

.breadcrumb-item.current {
  color: #0369a1;
}

.runner-status {
  color: white;
}

.runner-node {
  background: white;
  border: var(--node-border-width) solid #e2e8f0;
}

.runner-node.endpoint {
  border-color: var(--node-action-border);
  background: var(--node-action-bg);
}

.runner-question {
  color: #1e293b;
}

.runner-option-btn {
  background: white;
  border: 3px solid #e2e8f0;
  color: #334155;
}

.runner-option-btn:hover {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.05);
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.2);
}

.option-indicator {
  background: #d1d5db;
}

.option-indicator.children { background: #0369a1; }
.option-indicator.tree_reference { background: var(--node-action-border); }
.option-indicator.loop_back { background: #f59e0b; }
.option-indicator.endpoint { background: #6b7280; }
.option-indicator.link { background: #667eea; }
.option-indicator.restart { background: #667eea; }
.option-indicator.close { background: #6b7280; }

.runner-restart {
  border-color: #0369a1;
  color: #0369a1;
}

.runner-exit {
  border-color: #dc2626;
  color: #dc2626;
}

.runner-exit:hover {
  border-color: #dc2626;
  color: white;
  background: #dc2626;
}

.runner-progress-bar {
  background: #f1f5f9;
}

.progress-fill {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.progress-text {
  color: #64748b;
}

.runner-control-btn {
  background: var(--node-question-bg-alt);
  border: var(--node-border-width) solid var(--node-question-border);
  color: var(--node-question-border);
}

.runner-control-btn:hover {
  background: var(--node-question-border);
  color: white;
}

/* ========================================
   TREE CANVAS COLORS
   ======================================== */

.tree-canvas-empty-state {
  color: #9ca3af;
}

.empty-state-content h4 {
  color: #6b7280;
}

.empty-state-content p {
  color: #9ca3af;
}

.tree-canvas-container.drag-over {
  border-color: var(--node-question-border);
  background-color: var(--node-question-bg-alt);
  box-shadow: 0 0 20px var(--node-question-hover-shadow);
}

.tree-canvas-container.drag-over::before {
  background: rgba(99, 102, 241, 0.9);
  color: white;
}

.tree-node {
  background: white;
  border: var(--node-border-width) solid #e2e8f0;
}

.tree-node:hover {
  border-color: #a5b4fc;
}

.tree-node.selected {
  border-color: #3b82f6;
}

.tree-node-title {
  color: #374151;
}

.tree-connection {
  stroke: var(--node-question-border);
}

#arrowhead polygon {
  fill: var(--node-question-border);
}

.connection-source {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4) !important;
}

.drop-zone {
  border: 2px dashed var(--node-question-border);
  background: var(--node-question-bg-alt);
}

.palette-tabs {
  background: var(--canvas-bg-color);
}

.palette-tab {
  background: var(--canvas-bg-color);
  color: #374151;
  border: 1px solid #e2e8f0;
  border-bottom: 2px solid transparent;
}

.palette-tab:hover {
  background: var(--node-question-bg-alt);
  color: var(--node-question-border);
}

.palette-tab.active {
  color: var(--node-question-border);
  background: white;
  border-bottom-color: var(--node-question-border);
}

.tree-name-input {
  border: 1px solid #d1d5db;
}

.tree-name-input:focus {
  border-color: var(--node-question-border);
  box-shadow: 0 0 0 3px var(--node-question-bg-alt);
}

.add-block-btn {
  border: 1px dashed #cbd5e1;
  background: transparent;
  color: #6b7280;
}

.add-block-btn:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.block-type-buttons .add-block-btn {
  background: white;
  border: 1px solid #e2e8f0;
}

.block-type-buttons .add-block-btn:hover {
  border-color: var(--node-question-border);
  background: var(--node-question-bg-alt);
}

.block-type-buttons .add-block-btn.question {
  color: var(--node-question-border);
  border-color: #a5b4fc;
}

.block-type-buttons .add-block-btn.action {
  color: var(--node-action-border);
  border-color: #86efac;
}

.block-type-buttons .add-block-btn.question:hover {
  background: var(--node-question-bg-alt);
  border-color: var(--node-question-border);
}

.block-type-buttons .add-block-btn.action:hover {
  background: var(--node-action-bg-alt);
  border-color: var(--node-action-border);
}

/* ========================================
   SYNC MODAL COLORS
   ======================================== */

.sync-code-modal,
.sync-input-modal {
  background: rgba(0, 0, 0, 0.7);
}

.sync-code-content,
.sync-input-content {
  background: white;
}

.sync-code-header,
.sync-input-header {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-bottom: 1px solid #e2e8f0;
}

.sync-code-header h3,
.sync-input-header h3 {
  color: #1e293b;
}

.close-sync-code,
.close-sync-input {
  background: var(--close-btn-bg);
  color: var(--close-btn-color);
}

.close-sync-code:hover,
.close-sync-input:hover {
  background: var(--close-btn-bg-hover);
  color: var(--close-btn-color-hover);
}

.sync-code-body,
.sync-input-body {
  background: white;
}

.sync-code-display {
  background: #f0fdf4;
  border: 2px solid #4ade80;
}

.sync-code-display input {
  background: transparent !important;
  color: #16a34a !important;
}

.sync-code-warning {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #92400e;
}

.sync-input-field input {
  border: 2px solid #3b82f6 !important;
  background: #f8fafc !important;
  color: #1e293b !important;
}

.sync-input-field input:focus {
  border-color: #1d4ed8 !important;
  background: white !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.sync-input-help {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #1e40af;
}

.sync-input-help code {
  background: rgba(59, 130, 246, 0.2);
}

.sync-code-actions button {
  background: #3b82f6;
  color: white;
}

.sync-input-actions button:first-child {
  background: #3b82f6;
  color: white;
}

.sync-input-actions button:first-child:hover {
  background: #2563eb;
}

.sync-input-actions button:last-child {
  background: #6b7280;
  color: white;
}

.sync-input-actions button:last-child:hover {
  background: #4b5563;
}

/* ========================================
   USER INFO COLORS
   ======================================== */

.user-info {
  background: var(--color-light-gray);
}

.user-name {
  color: var(--color-dark);
}

.user-email {
  color: var(--color-gray);
}

/* ========================================
   GOOGLE DRIVE MODAL COLORS
   ======================================== */

.google-drive-modal {
  background: rgba(15, 23, 42, 0.6);
}

.google-drive-content {
  background: white;
}

.close-google-drive {
  color: var(--color-gray);
}

.google-drive-header h3 {
  color: var(--color-dark);
}

/* ========================================
   DEBUG PANEL COLORS
   ======================================== */

.debug-panel {
  border-left: 1px solid #e2e8f0;
}

.debug-tabs {
  border-bottom: 2px solid #e2e8f0;
  background: var(--canvas-bg-color);
}

.debug-tab {
  background: transparent;
  color: #374151;
  border-bottom: 2px solid transparent;
}

.debug-tab:hover {
  color: var(--color-primary);
  background: rgba(0, 123, 255, 0.05);
}

.debug-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: rgba(0, 123, 255, 0.1);
}

.debug-tab-content {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.debug-loading {
  color: var(--color-gray);
}

.debug-item {
  background: white;
  border: 1px solid #e2e8f0;
}

.debug-item-header {
  color: var(--color-primary);
}

.debug-item-content {
  background: #f1f5f9;
}

/* ========================================
   GOAL MODAL COLORS
   ======================================== */

.goal-item {
  background: rgba(0, 123, 255, 0.1);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.goal-item:hover {
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

.goal-title {
  color: var(--color-primary);
}

.edit-goal-btn {
  color: var(--color-primary);
}

.edit-goal-btn:hover {
  background: rgba(0, 123, 255, 0.2);
}

.add-goal-btn {
  background: var(--color-light-gray);
  color: var(--color-primary);
  border: 1px solid #dee2e6;
}

.trackable-checkbox-item:hover {
  background: rgba(0, 123, 255, 0.05);
}

.trackable-item-title {
  color: var(--color-dark);
}

.motivation-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.motivation-details summary {
  color: var(--color-dark);
  border-bottom: 1px solid var(--color-border-light);
}

.motivation-details summary:hover {
  color: var(--color-primary);
}

/* ========================================
   LOADING SPINNER COLORS
   ======================================== */

.loading-spinner {
  border: 3px solid var(--color-border-light);
  border-top: 3px solid var(--color-primary);
}

.composer-body.loading::after {
  border: 3px solid var(--color-border-light);
  border-top: 3px solid var(--color-primary);
}

/* ========================================
   HIERARCHY LEVELS
   ======================================== */

/* Status-based connector colors */
.trackable-item.status-due.parent-trackable::before {
  border-color: var(--color-warning);
}

.trackable-item.status-overdue.parent-trackable::before {
  border-color: var(--color-danger);
}

.trackable-item.completed.parent-trackable::before {
  border-color: var(--color-success);
}

.parent-trackable::before {
  border-color: var(--color-border);
}

.child-trackable::after {
  border-left: 2px dashed var(--color-border);
}

.parent-trackable::after {
  border-color: var(--color-border);
}

.trackable-parent-card {
  background-color: var(--color-light-gray);
  border-left: 4px solid var(--color-primary);
}

.trackable-child-item {
  border-left: 1px dashed var(--color-border);
  background: rgba(0, 123, 255, 0.02);
}

.expander-indicator {
  color: var(--color-gray);
}

.expander-indicator:hover {
  color: var(--color-primary);
}

/* ========================================
   SEQUENCE DISPLAY COLORS
   ======================================== */

.playlist-sequence-display {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid rgba(0, 123, 255, 0.2);
}

.sequence-nav-btn {
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(0, 123, 255, 0.3);
  color: var(--color-primary);
}

.sequence-nav-btn:hover {
  background: rgba(0, 123, 255, 0.1);
  border-color: var(--color-primary);
}

.sequence-nav-btn.disabled,
.sequence-nav-btn:disabled {
  background: rgba(128, 128, 128, 0.2);
  border-color: rgba(128, 128, 128, 0.3);
  color: #888;
}

.sequence-nav-btn.disabled:hover,
.sequence-nav-btn:disabled:hover {
  background: rgba(128, 128, 128, 0.2);
  border-color: rgba(128, 128, 128, 0.3);
}

.playlist-sequence-display.fade-left::before {
  background: linear-gradient(to right, rgba(248, 250, 252, 1), transparent);
}

.playlist-sequence-display.fade-right::after {
  background: linear-gradient(to left, rgba(248, 250, 252, 1), transparent);
}

.sequence-slot.current {
  background: rgba(0, 123, 255, 0.1);
  border: 1px solid rgba(0, 123, 255, 0.3);
  color: var(--color-primary);
}

.sequence-slot.past {
  color: #888;
}

.sequence-slot.future {
  color: #888;
}

.sequence-play-btn {
  background: var(--color-primary);
  color: white;
}

.sequence-play-btn:hover {
  background: #0056b3;
}

.mobile-current-container {
  background: rgba(0, 123, 255, 0.1);
  border: 1px solid rgba(0, 123, 255, 0.3);
}

.mobile-slot-content {
  color: var(--color-primary);
}

.mobile-sequence-slot.past {
  background: rgba(108, 117, 125, 0.1);
  color: var(--color-gray);
}

.mobile-sequence-slot.future {
  background: rgba(0, 123, 255, 0.05);
  color: var(--color-gray);
}

/* ========================================
   VISION THUMBNAIL COLORS
   ======================================== */

.vision-thumbnail-card {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 2px solid var(--color-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.vision-thumbnail-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.2);
}

.vision-thumbnail-card::before {
  background: linear-gradient(45deg, 
    transparent 30%, 
    rgba(255, 255, 255, 0.1) 50%, 
    transparent 70%);
}

.thumbnail-vision-content.greyscale {
  filter: grayscale(100%) contrast(50%) brightness(80%);
}

.thumbnail-vision-content.greyscale img,
.thumbnail-vision-content.greyscale video,
.thumbnail-vision-content.greyscale iframe {
  filter: grayscale(100%) contrast(33%) opacity(67%);
}

.vision-thumbnail-card:has(.thumbnail-vision-content.complete):hover {
  border-color: var(--color-success);
  box-shadow: 0 12px 30px rgba(40, 167, 69, 0.3);
}

.thumbnail-quote-content {
  color: var(--color-dark);
}

/* ========================================
   CHECK BUTTON COLORS
   ======================================== */

.check-btn {
  background: var(--color-success);
  color: white;
}

.check-btn:hover {
  background: #218838;
}

/* ========================================
   PLAYLIST LIBRARY COLORS
   ======================================== */

.playlist-library-item {
  background: white;
  border: 1px solid var(--color-border-light);
}

.playlist-library-item:hover {
  background: #f8f9fa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.playlist-info h4 {
  color: var(--color-dark);
}

.edit-playlist-btn {
  background: var(--color-primary);
  color: white;
}

.edit-playlist-btn:hover {
  background: #0056b3;
}

.playlist-library-empty {
  color: var(--color-gray);
}

.weekday-grid {
  background: var(--color-light-gray);
}

.weekday-grid label {
  background: var(--color-light-gray);
}

/* ========================================
   PLAYLIST ADD MODAL COLORS
   ======================================== */

.playlist-add-modal {
  background: rgba(0, 0, 0, 0.6);
}

.playlist-add-modal-content {
  background: white;
}

.playlist-add-header {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-bottom: 1px solid var(--color-border-light);
}

.playlist-add-header h3 {
  color: var(--color-dark);
}

.close-playlist-add {
  color: var(--color-gray);
}

.close-playlist-add:hover {
  color: var(--color-danger);
}

.playlist-add-body {
  background: white;
}

.playlist-create-btn {
  background: var(--color-success);
  color: white;
}

.playlist-create-btn:hover {
  background: #218838;
}

.playlist-trackables-list {
  border: 1px solid var(--color-border-light);
  background: var(--color-light-gray);
}

.playlist-add-footer {
  border-top: 1px solid var(--color-border-light);
  background: var(--color-light-gray);
}

.close-playlist-add-btn {
  background: var(--color-gray);
  color: white;
}

.close-playlist-add-btn:hover {
  background: #5a6268;
}

/* ========================================
   CONNECTION SECTION COLORS
   ======================================== */

.connection-section {
  border: 1px solid rgba(0, 123, 255, 0.2);
  background: rgba(0, 123, 255, 0.02);
}

.connected-to-select option[disabled] {
  background: #f8f9fa;
  color: var(--color-gray);
}

.connected-to-select option[value^="goal:"] {
  color: #2563eb;
}

.connected-to-select option[value^="trackable:"] {
  color: #059669;
}

.goal-inheritance-display {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.connection-errors {
  background: rgba(220, 53, 69, 0.05);
  border: 1px solid rgba(220, 53, 69, 0.3);
}

/* ========================================
   GAME SETTINGS COLORS
   ======================================== */

.game-settings-section label {
  color: var(--color-dark);
}

.gamification-toggle-label input[type="checkbox"] {
  color: var(--color-primary);
}

/* ========================================
   SCHEDULING FORM COLORS
   ======================================== */

.scheduling-content h3 {
  color: var(--color-dark);
  border-bottom: 1px solid var(--color-border-light);
}

.scheduling-form .form-section {
  border: 1px solid var(--color-border-light);
  background: rgba(0, 123, 255, 0.02);
}

.scheduling-form .form-section legend {
  color: var(--color-dark);
}

.scheduling-form input,
.scheduling-form select {
  background: white;
  border: 1px solid var(--color-border);
}

.scheduling-form input:focus,
.scheduling-form select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.radio-option {
  background: transparent;
}

.radio-option:hover {
  background: rgba(0, 123, 255, 0.05);
}

.checkbox-option {
  background: transparent;
}

.checkbox-option:hover {
  background: rgba(0, 123, 255, 0.05);
}

.scheduling-preview {
  background: linear-gradient(135deg, #e0f2fe 0%, #f3e5f5 100%);
  border: 2px solid var(--color-primary);
}

.scheduling-preview h4 {
  color: var(--color-primary);
}

.preview-text {
  color: var(--color-dark);
  background: rgba(255, 255, 255, 0.8);
  border-left: 4px solid var(--color-primary);
}

/* ========================================
   ADDITIONAL STEP CONFIG WIZARD COLORS
   ======================================== */

.wizard-panel {
  color: var(--color-dark);
}

.wizard-panel h3 {
  color: var(--color-dark);
}

.form-group label {
  color: var(--color-gray);
}

.step-title-input,
.step-notes-input,
.dependency-value-input,
.dependency-time-input {
  background: white;
  border: 1px solid var(--color-border);
}

.step-title-input:focus,
.step-notes-input:focus,
.dependency-value-input:focus,
.dependency-time-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.form-hint {
  color: var(--color-gray);
}

.checkbox-label {
  color: var(--color-dark);
}

/* ========================================
   ADDITIONAL VISION COLORS
   ======================================== */

.visions-grid {
  background: transparent;
}

.vision-item {
  background: white;
  box-shadow: var(--shadow-sm);
}

.vision-item:hover {
  box-shadow: var(--shadow-md);
}

.vision-controls {
  background: white;
  border-top: 1px solid var(--color-border-light);
}

.vision-title {
  color: var(--color-dark);
}

.edit-vision {
  background: var(--color-primary);
  color: white;
}

.edit-vision:hover {
  background: #0056b3;
  box-shadow: 0 4px 12px rgba(0, 86, 179, 0.3);
}

.edit-vision::before {
  background: rgba(255, 255, 255, 0.2);
}

.remove-vision {
  background: var(--color-danger);
  color: white;
}

.remove-vision:hover {
  background: #c82333;
  box-shadow: 0 4px 12px rgba(200, 35, 51, 0.3);
}

.remove-vision::before {
  background: rgba(255, 255, 255, 0.2);
}

.vision-text {
  color: var(--color-dark);
}

.quote-content {
  color: var(--color-dark);
}

.edit-vision-actions .btn-primary {
  background: var(--color-primary);
  color: white;
}

.edit-vision-actions .btn-primary:hover {
  background: #0056b3;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.edit-vision-actions .btn-secondary {
  background: var(--color-gray);
  color: white;
}

.edit-vision-actions .btn-secondary:hover {
  background: #5a6268;
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.link-preview {
  color: inherit;
}

.link-preview a {
  color: inherit;
}

.link-title {
  color: var(--color-dark);
}

.link-url {
  color: var(--color-gray);
}

.vision-category-badge {
  background: rgba(0, 123, 255, 0.9);
  color: white;
}

/* ========================================
   AVAILABLE TRACKABLE CARD COLORS
   ======================================== */

.available-trackable-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.trackable-card-title {
  color: var(--color-dark);
}

.add-to-sequence-btn {
  background: var(--color-primary);
  color: white;
}

.trackable-card-meta {
  color: var(--color-gray);
}

.empty-state-hint {
  color: var(--color-gray);
}

/* ========================================
   SEQUENCE ITEM COLORS
   ======================================== */

.sequence-item {
  background: white;
  border: 1px solid #e2e8f0;
}

.sequence-number {
  background: var(--color-primary);
  color: white;
}

.sequence-type-icon {
  color: var(--color-primary);
}

.sequence-item-title {
  color: var(--color-dark);
}

.sequence-control-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: var(--color-gray);
}

.sequence-control-btn.remove {
  color: var(--color-danger);
}

.sequence-item-meta {
  color: var(--color-gray);
}

.sequence-category-badge {
  background: rgba(0, 123, 255, 0.1);
  color: var(--color-primary);
}

.sequence-arrow {
  color: var(--color-gray);
}

/* ========================================
   PREVIEW PANEL COLORS
   ======================================== */

.preview-step {
  border-bottom: 1px solid #e2e8f0;
}

.preview-step-number {
  color: var(--color-primary);
}

.preview-step-title {
  color: var(--color-dark);
}

.preview-step-type {
  color: var(--color-gray);
}

.preview-empty-state {
  color: var(--color-gray);
}

/* ========================================
   DRAG AND DROP COLORS
   ======================================== */

.available-trackable-card.dragging {
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
}

.sequence-item.dragging {
  border: 2px dashed var(--color-primary);
  background: rgba(0, 123, 255, 0.05);
  box-shadow: 0 12px 30px rgba(0, 123, 255, 0.4);
}

.drop-zone.drag-over {
  background: rgba(0, 123, 255, 0.1);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.sequence-item.drop-target {
  border: 2px solid var(--color-success);
  background: rgba(40, 167, 69, 0.05);
  box-shadow: 0 8px 25px rgba(40, 167, 69, 0.2);
}

.sequence-item.drop-target::before {
  background: var(--color-success);
  color: white;
}

/* ========================================
   PLAYLIST DEPENDENCY COLORS
   ======================================== */

.playlist-dependency-alert {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #721c24;
}

/* ========================================
   TIMELINE DETAIL COLORS
   ======================================== */

.timeline-modal-content {
  background: white;
}

.timeline-list-panel {
  border-right: 1px solid var(--color-border-light);
}

.timeline-search-section {
  border-bottom: 1px solid var(--color-border-light);
}

.timeline-search {
  border: 1px solid var(--color-border);
}

.timeline-section-header {
  color: var(--color-gray);
}

.timeline-item {
  background: var(--color-light-gray);
}

.timeline-item:hover {
  background: #e9ecef;
}

.timeline-item.selected {
  border-color: var(--color-primary);
  background: rgba(0, 123, 255, 0.1);
}

.timeline-item-title {
  color: var(--color-dark);
}

.timeline-item-date {
  color: var(--color-gray);
}

.timeline-badge.playlist {
  background: rgba(108, 117, 125, 0.2);
  color: #495057;
  border: 1px solid rgba(108, 117, 125, 0.3);
}

.timeline-details-empty {
  color: var(--color-gray);
}

.timeline-detail-header {
  border-bottom: 1px solid var(--color-border-light);
}

.timeline-detail-title {
  color: var(--color-dark);
}

.timeline-detail-meta {
  color: var(--color-gray);
}

.timeline-detail-section h4 {
  color: var(--color-dark);
}

.timeline-detail-actions {
  border-top: 1px solid var(--color-border-light);
}

.timeline-action-btn.primary {
  background: var(--color-primary);
  color: white;
}

.timeline-action-btn.primary:hover {
  background: #0056b3;
}

.timeline-action-btn.secondary {
  background: var(--color-light-gray);
  color: var(--color-dark);
}

.timeline-action-btn.secondary:hover {
  background: #e9ecef;
}

.timeline-action-btn.delete {
  background: var(--color-danger);
  color: white;
}

.timeline-action-btn.delete:hover {
  background: #c82333;
}

/* ========================================
   SCHEDULE CONFLICTS COLORS
   ======================================== */

.schedule-conflicts {
  background: rgba(220, 53, 69, 0.05);
  border: 1px solid rgba(220, 53, 69, 0.2);
}

.conflicts-header {
  color: var(--color-danger);
}

.conflict-item {
  color: var(--color-danger);
}

.conflict-item::before {
  color: var(--color-danger);
}

/* ========================================
   SCHEDULE VISUAL PREVIEW COLORS
   ======================================== */

.schedule-visual-preview {
  background: white;
  border: 1px solid var(--color-border-light);
}

.visual-preview-empty {
  color: var(--color-gray);
}

.timeline-day.scheduled {
  background: rgba(0, 123, 255, 0.1);
  border: 2px solid var(--color-primary);
}

.timeline-day.not-scheduled {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
}

.day-header {
  color: var(--color-dark);
}

/* ========================================
   ADDITIONAL TREE COLORS
   ======================================== */

.tree-list .tree-item {
  background: white;
  border: 2px solid #f1f5f9;
}

.tree-list .tree-item:hover {
  border-color: #e2e8f0;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.tree-item .tree-info h4 {
  color: #1e293b;
}

.tree-item .tree-info p {
  color: #64748b;
}

/* ========================================
   ADDITIONAL PREFERENCE COLORS
   ======================================== */

.preference-question {
  color: var(--color-dark);
}

.preference-checkbox-label {
  color: var(--color-dark);
}

.preference-checkbox-label:hover {
  color: var(--color-primary);
}

.preference-checkbox-label {
  border: 1px solid var(--color-border-light);
  background: white;
}

.preference-checkbox-label:hover {
  border-color: var(--color-primary);
  background: rgba(0, 123, 255, 0.05);
}

/* ========================================
   ADDITIONAL COMPOSER COLORS
   ======================================== */

.composer-body input[type="text"],
.composer-body input[type="number"],
.composer-body input[type="date"],
.composer-body input[type="time"],
.composer-body select,
.composer-body textarea {
  background: white;
  border: 1px solid var(--color-border);
}

.composer-body input:focus,
.composer-body select:focus,
.composer-body textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.composer-body label {
  color: var(--color-gray);
}

#counterFields,
#timerFields {
  background: white;
  border: 1px solid var(--color-border-light);
}

.target-unit-row .form-group label {
  color: var(--color-dark);
}

.sets-checkbox-label {
  color: var(--color-dark);
}

.reps-label {
  color: var(--color-dark);
}

#recurrenceDetails {
  background: white;
  border: 1px solid var(--color-border-light);
}

/* ========================================
   HIGH CONTRAST MODE COLORS
   ======================================== */

@media (prefers-contrast: high) {
  .tree-node {
    border-color: #000 !important;
  }

  .tree-connection {
    stroke: #000 !important;
  }

  .tree-canvas-container,
  .flow-canvas-area {
    background-color: white !important;
    border: 1px solid #000 !important;
  }
}

/* ========================================
   PRINT MODE COLORS
   ======================================== */

@media print {
  .tree-canvas-container,
  .flow-canvas-area {
    background: white !important;
    border: 1px solid #000 !important;
  }

  .tree-node {
    border-color: #000 !important;
  }

  .tree-connection {
    stroke: #000 !important;
  }
}