/**
 * ADHD Dashboard - Custom Color Theme
 * Warm, inviting ADHD-friendly palette overriding NiceAdmin defaults
 */

:root,
[data-theme="light"] {
  /* =========================================
     ADHD Color Palette - Warm & Inviting (Light Theme)
     ========================================= */
  --color-urgent: #FFB300;          /* Bright Yellow - High visibility, not anxiety */
  --color-secondary: #FF9F43;       /* Bright Orange - Secondary attention */
  --color-calm: #3B82F6;            /* Calm Blue - Rather than green, using blue for quick wins */
  --color-neutral: #E8E8E8;         /* Light Gray - Low priority */
  --color-success: #27AE60;         /* Green - Positive reinforcement */
  --color-error: #E74C3C;           /* Red - Errors only (use sparingly) */
  --color-info: #3498DB;            /* Blue - Informational */
  
  /* Text Colors - Primary text for backgrounds */
  --color-text-dark: #2D3A4E;       /* Dark - Primary text on light backgrounds */
  --color-text-muted: #8A95A3;      /* Muted - Secondary text */
  --color-text-light: #B0B8C1;      /* Light - Placeholder text */
  
  /* Contrast-Aware Text Colors for Colored Backgrounds */
  --color-text-on-urgent: #2D3A4E;  /* Dark text on yellow/orange (light backgrounds) */
  --color-text-on-secondary: #FFFFFF; /* White text on orange (slightly dark) */
  --color-text-on-calm: #FFFFFF;    /* White text on medium blue #3B82F6 */
  --color-text-on-success: #FFFFFF; /* White text on green */
  --color-text-on-error: #FFFFFF;   /* White text on red */
  --color-text-on-info: #FFFFFF;    /* White text on blue */

  
  /* Backgrounds */
  --color-bg-primary: #FFFFFF;      /* White - Main background */
  --color-bg-secondary: #F9FAFB;    /* Soft Gray - Secondary background */
  --color-bg-capture: #FFFAF0;      /* Warm Cream - Capture section bg */
  --color-bg-urgent: #FFFAF0;       /* Warm Cream - Urgent slots */
  --color-bg-calm: #EBF5FF;         /* Light Blue - Calm/Quick Wins slots */
  
  /* Borders */
  --color-border-light: #E0E4E8;    /* Light border */
  --color-border-dark: #D1D5DB;     /* Dark border */
}

/* =========================================
   Dark Theme
   ========================================= */
[data-theme="dark"] {
  --color-urgent: #FFB300;          /* Keep warm colors even in dark */
  --color-secondary: #FF9F43;
  --color-calm: #3B82F6;
  --color-neutral: #444444;
  --color-success: #27AE60;
  --color-error: #E74C3C;
  --color-info: #3498DB;
  
  --color-text-dark: #E8E9EB;       /* Light text for dark background */
  --color-text-muted: #A0AAB5;      /* Muted light text */
  --color-text-light: #6B7380;      /* Lighter muted text */
  
  /* Contrast-Aware Text Colors for Colored Backgrounds */
  --color-text-on-urgent: #2D3A4E;  /* Dark text on yellow/orange */
  --color-text-on-secondary: #2D3A4E; /* Dark text on orange */
  --color-text-on-calm: #FFFFFF;    /* White text on blue */
  --color-text-on-success: #FFFFFF; /* White text on green */
  --color-text-on-error: #FFFFFF;   /* White text on red */
  --color-text-on-info: #FFFFFF;    /* White text on blue */
  
  --color-bg-primary: #1A1A1A;      /* Dark background */
  --color-bg-secondary: #2D2D2D;    /* Slightly lighter dark */
  --color-bg-capture: #262626;      /* Dark capture area */
  --color-bg-urgent: #2A2520;       /* Dark warm background */
  --color-bg-calm: #1F2833;         /* Dark blue background */
  
  --color-border-light: #3D3D3D;    /* Dark border */
  --color-border-dark: #505050;     /* Darker border */
}

/* =========================================
   Blue Theme
   ========================================= */
[data-theme="blue"] {
  --color-urgent: #0066FF;          /* Blue primary */
  --color-secondary: #0052CC;       /* Darker blue */
  --color-calm: #1F7BFF;            /* Brighter blue */
  --color-neutral: #E8E8E8;
  --color-success: #27AE60;
  --color-error: #E74C3C;
  --color-info: #0066FF;
  
  --color-text-dark: #0E2B7B;       /* Dark blue text */
  --color-text-muted: #4A5F99;      /* Blue-tinted muted */
  --color-text-light: #8FA3C9;      /* Light blue text */
  
  /* Contrast-Aware Text Colors for Colored Backgrounds */
  --color-text-on-urgent: #FFFFFF;  /* White text on dark blue #0066FF */
  --color-text-on-secondary: #FFFFFF; /* White text on very dark blue #0052CC */
  --color-text-on-calm: #FFFFFF;    /* White text on medium-bright blue #1F7BFF */
  --color-text-on-success: #FFFFFF; /* White text on green */
  --color-text-on-error: #FFFFFF;   /* White text on red */
  --color-text-on-info: #FFFFFF;    /* White text on blue */

  
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F0F4FF;    /* Blue tinted light bg */
  --color-bg-capture: #E8ECFB;      /* Blue light capture */
  --color-bg-urgent: #F0F4FF;       /* Blue light */
  --color-bg-calm: #E3E8F8;         /* Blue lighter */
  
  --color-border-light: #D6DAED;
  --color-border-dark: #B8C0E0;
}

/* =========================================
   Green Theme
   ========================================= */
[data-theme="green"] {
  --color-urgent: #10B981;          /* Green primary */
  --color-secondary: #059669;       /* Darker green */
  --color-calm: #34D399;            /* Brighter green */
  --color-neutral: #E8E8E8;
  --color-success: #10B981;
  --color-error: #E74C3C;
  --color-info: #10B981;
  
  --color-text-dark: #064E3B;       /* Dark green text */
  --color-text-muted: #047857;      /* Green-tinted muted */
  --color-text-light: #6EE7B7;      /* Light green text */
  
  /* Contrast-Aware Text Colors for Colored Backgrounds */
  --color-text-on-urgent: #FFFFFF;  /* White text on dark green #10B981 */
  --color-text-on-secondary: #FFFFFF; /* White text on very dark green #059669 */
  --color-text-on-calm: #064E3B;    /* Dark text on bright-light green #34D399 (light background) */
  --color-text-on-success: #FFFFFF; /* White text on green */
  --color-text-on-error: #FFFFFF;   /* White text on red */
  --color-text-on-info: #FFFFFF;    /* White text on green */

  
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F0FDF4;    /* Green tinted light bg */
  --color-bg-capture: #DCFCE7;      /* Green light capture */
  --color-bg-urgent: #ECFDF5;       /* Green light */
  --color-bg-calm: #D1FAE5;         /* Green lighter */
  
  --color-border-light: #A7F3D0;
  --color-border-dark: #6EE7B7;
}

/* =========================================
   Purple Theme
   ========================================= */
[data-theme="purple"] {
  --color-urgent: #8B5CF6;          /* Purple primary */
  --color-secondary: #7C3AED;       /* Darker purple */
  --color-calm: #A78BFA;            /* Brighter purple */
  --color-neutral: #E8E8E8;
  --color-success: #27AE60;
  --color-error: #E74C3C;
  --color-info: #8B5CF6;
  
  --color-text-dark: #2D3A4E;       /* Dark neutral text (reverted from purple) */
  --color-text-muted: #6D28D9;      /* Medium purple-tinted muted text */
  --color-text-light: #C4B5FD;      /* Light purple text for placeholders */
  
  /* Contrast-Aware Text Colors for Colored Backgrounds */
  --color-text-on-urgent: #FFFFFF;  /* White text on dark purple #8B5CF6 */
  --color-text-on-secondary: #FFFFFF; /* White text on very dark purple #7C3AED */
  --color-text-on-calm: #2D3A4E;    /* Dark neutral text on light purple #A78BFA background */
  --color-text-on-success: #FFFFFF; /* White text on green */
  --color-text-on-error: #FFFFFF;   /* White text on red */
  --color-text-on-info: #FFFFFF;    /* White text on dark purple */

  
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #FAF5FF;    /* Purple tinted light bg */
  --color-bg-capture: #F3E8FF;      /* Purple light capture */
  --color-bg-urgent: #F5F3FF;       /* Purple light */
  --color-bg-calm: #EDE9FE;         /* Purple lighter */
  
  --color-border-light: #DDD6FE;
  --color-border-dark: #C4B5FD;
}

/* =========================================
   Button Overrides - ADHD Warm Palette
   ========================================= */

.btn-primary {
  background-color: var(--color-urgent);
  border-color: var(--color-urgent);
  color: var(--color-text-on-urgent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #E6A100;
  border-color: #E6A100;
  color: var(--color-text-on-urgent);
  box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.2);
}

.btn-primary:disabled {
  background-color: var(--color-neutral);
  border-color: var(--color-neutral);
  color: var(--color-text-muted);
}

.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #FFFFFF;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: #E68A2E;
  border-color: #E68A2E;
  color: #FFFFFF;
}

.btn-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-text-on-success);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: #1E8449;
  border-color: #1E8449;
  color: var(--color-text-on-success);
}

.btn-outline-primary {
  background-color: var(--color-urgent);
  border-color: var(--color-urgent);
  color: var(--color-text-on-urgent);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #E6A100;
  border-color: var(--color-urgent);
  background-color: transparent;
}

.btn-outline-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-text-on-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
  background-color: transparent;
}

.btn-outline-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-text-on-success);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
  color: var(--color-text-on-success);
  border-color: var(--color-success);
  background-color: transparent;
}

.btn-light {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-dark);
  border: 1px solid var(--color-border-light);
}

.btn-light:hover {
  background-color: #EEF1F5;
  border-color: var(--color-urgent);
  color: var(--color-urgent);
}

.btn-danger {
  background-color: var(--color-error);
  border-color: var(--color-error);
  color: #FFFFFF;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: #C0392B;
  border-color: #C0392B;
  color: #FFFFFF;
}

/* =========================================
   Alert & Badge Overrides
   ========================================= */

.alert-success {
  background-color: rgba(39, 174, 96, 0.1);
  border-color: var(--color-success);
  color: #1E8449;
}

.alert-warning {
  background-color: rgba(255, 179, 0, 0.1);
  border-color: var(--color-urgent);
  color: #2D3A4E;
}

.alert-danger {
  background-color: rgba(231, 76, 60, 0.1);
  border-color: var(--color-error);
  color: #C0392B;
}

.alert-info {
  background-color: rgba(52, 152, 219, 0.1);
  border-color: var(--color-info);
  color: #1A5A7A;
}

.badge {
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
}

.badge-success {
  background-color: var(--color-success);
}

.badge-warning {
  background-color: var(--color-urgent);
  color: var(--color-text-dark);
}

.badge-danger {
  background-color: var(--color-error);
}

.badge-info {
  background-color: var(--color-info);
}

.badge-urgent {
  background-color: var(--color-urgent);
  color: var(--color-text-dark);
}

.badge-secondary {
  background-color: var(--color-secondary);
  color: #FFFFFF;
}

.badge-calm {
  background-color: var(--color-calm);
  color: var(--color-text-dark);
}

/* =========================================
   Form Control Overrides
   ========================================= */

.form-control:focus,
.form-select:focus {
  border-color: var(--color-urgent);
  box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.15);
  color: var(--color-text-dark);
}

.form-control::placeholder {
  color: var(--color-text-light);
}

/* =========================================
   Progress Bar
   ========================================= */

.progress {
  background-color: var(--color-neutral);
}

.progress-bar {
  background-color: var(--color-success);
}

/* =========================================
   Text Color System
   ========================================= */

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

.text-muted {
  color: #5A6B7A !important;
}

.text-warning {
  color: var(--color-urgent) !important;
}

/* Icon-only use: .text-warning should ONLY be applied to icons (<i> elements), not to text
   All text using this color must be on colored backgrounds (e.g., filled buttons) */

.text-success {
  color: var(--color-success) !important;
}

.text-danger {
  color: var(--color-error) !important;
}

.text-info {
  color: var(--color-info) !important;
}

/* =========================================
   Background Colors
   ========================================= */

.bg-light {
  background-color: var(--color-bg-secondary) !important;
}

.bg-capture {
  background-color: var(--color-bg-capture) !important;
}

.bg-urgent-surface {
  background-color: var(--color-bg-urgent) !important;
}

.bg-calm-surface {
  background-color: var(--color-bg-calm) !important;
}

/* =========================================
   Border Colors
   ========================================= */

.border {
  border-color: var(--color-border-light) !important;
}

.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: var(--color-border-light) !important;
}

/* =========================================
   Navbar - Professional Look
   ========================================= */

.navbar {
  background-color: var(--color-bg-primary) !important;
  border-bottom: 1px solid var(--color-border-light);
}

.navbar-brand {
  color: var(--color-text-dark) !important;
}

/* =========================================
   Card Styling
   ========================================= */

.card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--color-border-light);
}

/* =========================================
   Link Colors
   ========================================= */

a {
  color: var(--color-urgent);
}

a:hover {
  color: #E6A100;
}

/* =========================================
   Alert and Notification Styling - ADHD Optimized
   ========================================= */

/* Embedded Alerts (login, register, etc.) */
.alert {
  border-radius: 6px;
  border: 1px solid;
  padding: 12px 16px;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Success Alert - High visibility */
.alert-success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.alert-success .btn-close {
  opacity: 0.5;
}

.alert-success .btn-close:hover {
  opacity: 0.75;
}

/* Danger/Error Alert - High visibility */
.alert-danger {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.alert-danger .btn-close {
  opacity: 0.5;
}

.alert-danger .btn-close:hover {
  opacity: 0.75;
}

/* Info Alert */
.alert-info {
  background-color: #d1ecf1;
  border-color: #bee5eb;
  color: #0c5460;
}

.alert-info .btn-close {
  opacity: 0.5;
}

.alert-info .btn-close:hover {
  opacity: 0.75;
}

/* Warning Alert */
.alert-warning {
  background-color: #fff3cd;
  border-color: #ffeaa7;
  color: #856404;
}

.alert-warning .btn-close {
  opacity: 0.5;
}

.alert-warning .btn-close:hover {
  opacity: 0.75;
}

/* Toast Alerts (fixed position notifications) */
.alert-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  min-width: 300px;
  max-width: 450px;
  border-radius: 6px;
  border-left: 4px solid;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.alert-toast.alert-success {
  background-color: #d4edda;
  border-left-color: #27AE60;
  color: #155724;
}

.alert-toast.alert-danger {
  background-color: #f8d7da;
  border-left-color: #E74C3C;
  color: #721c24;
}

.alert-toast.alert-info {
  background-color: #d1ecf1;
  border-left-color: #3498DB;
  color: #0c5460;
}

.alert-toast.alert-warning {
  background-color: #fff3cd;
  border-left-color: #FFB300;
  color: #856404;
}

/* Utility Classes - ADHD Specific
   ========================================= */

.urgency-today {
  border-left: 4px solid var(--color-urgent);
  background-color: var(--color-bg-urgent);
}

.urgency-soon {
  border-left: 4px solid var(--color-secondary);
  background-color: var(--color-bg-urgent);
}

.urgency-future {
  border-left: 4px solid var(--color-calm);
  background-color: var(--color-bg-calm);
}

.priority-urgent {
  color: var(--color-urgent);
  font-weight: 600;
}

.priority-secondary {
  color: var(--color-secondary);
  font-weight: 600;
}

.priority-calm {
  color: var(--color-calm);
  font-weight: 600;
}

/* =========================================
   Accessibility - Focus States
   ========================================= */

*:focus-visible {
  outline: 3px solid var(--color-urgent);
  outline-offset: 2px;
  border-radius: 2px;
}

:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.25);
}

/* =========================================
   Reduced Motion Support
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================
   High Contrast Mode Support
   ========================================= */

@media (prefers-contrast: more) {
  .btn-primary,
  .btn-secondary,
  .badge,
  .priority-slot {
    border-width: 2px;
  }
  
  body {
    font-weight: 500;
  }
}