/* Accent Color Backgrounds for Light and Dark Mode */

/* CSS Custom Properties for Accent Colors */
:root {
  /* Light mode accent colors */
  --accent-primary: #3b82f6;
  --accent-primary-light: #dbeafe;
  --accent-primary-dark: #1e40af;

  --accent-secondary: #8b5cf6;
  --accent-secondary-light: #ede9fe;
  --accent-secondary-dark: #6d28d9;

  --accent-success: #10b981;
  --accent-success-light: #d1fae5;
  --accent-success-dark: #047857;

  --accent-warning: #f59e0b;
  --accent-warning-light: #fef3c7;
  --accent-warning-dark: #b45309;

  --accent-error: #ef4444;
  --accent-error-light: #fee2e2;
  --accent-error-dark: #b91c1c;

  --accent-info: #06b6d4;
  --accent-info-light: #cffafe;
  --accent-info-dark: #0891b2;
}

/* Dark mode accent colors */
.dark {
  --accent-primary: #60a5fa;
  --accent-primary-light: #1e3a8a;
  --accent-primary-dark: #93c5fd;

  --accent-secondary: #a78bfa;
  --accent-secondary-light: #4c1d95;
  --accent-secondary-dark: #c4b5fd;

  --accent-success: #34d399;
  --accent-success-light: #064e3b;
  --accent-success-dark: #6ee7b7;

  --accent-warning: #fbbf24;
  --accent-warning-light: #78350f;
  --accent-warning-dark: #fcd34d;

  --accent-error: #f87171;
  --accent-error-light: #7f1d1d;
  --accent-error-dark: #fca5a5;

  --accent-info: #22d3ee;
  --accent-info-light: #164e63;
  --accent-info-dark: #67e8f9;
}

/* Accent Background Utility Classes */
.bg-accent-primary {
  background-color: var(--accent-primary);
  color: white;
}

.bg-accent-primary-light {
  background-color: var(--accent-primary-light);
  color: var(--accent-primary-dark);
}

.bg-accent-secondary {
  background-color: var(--accent-secondary);
  color: white;
}

.bg-accent-secondary-light {
  background-color: var(--accent-secondary-light);
  color: var(--accent-secondary-dark);
}

.bg-accent-success {
  background-color: var(--accent-success);
  color: white;
}

.bg-accent-success-light {
  background-color: var(--accent-success-light);
  color: var(--accent-success-dark);
}

.bg-accent-warning {
  background-color: var(--accent-warning);
  color: white;
}

.bg-accent-warning-light {
  background-color: var(--accent-warning-light);
  color: var(--accent-warning-dark);
}

.bg-accent-error {
  background-color: var(--accent-error);
  color: white;
}

.bg-accent-error-light {
  background-color: var(--accent-error-light);
  color: var(--accent-error-dark);
}

.bg-accent-info {
  background-color: var(--accent-info);
  color: white;
}

.bg-accent-info-light {
  background-color: var(--accent-info-light);
  color: var(--accent-info-dark);
}

/* Gradient Accent Backgrounds */
.bg-accent-gradient-primary {
  background: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    var(--accent-primary-dark) 100%
  );
  color: white;
}

.bg-accent-gradient-secondary {
  background: linear-gradient(
    135deg,
    var(--accent-secondary) 0%,
    var(--accent-secondary-dark) 100%
  );
  color: white;
}

.bg-accent-gradient-success {
  background: linear-gradient(
    135deg,
    var(--accent-success) 0%,
    var(--accent-success-dark) 100%
  );
  color: white;
}

.bg-accent-gradient-warning {
  background: linear-gradient(
    135deg,
    var(--accent-warning) 0%,
    var(--accent-warning-dark) 100%
  );
  color: white;
}

.bg-accent-gradient-error {
  background: linear-gradient(
    135deg,
    var(--accent-error) 0%,
    var(--accent-error-dark) 100%
  );
  color: white;
}

.bg-accent-gradient-info {
  background: linear-gradient(
    135deg,
    var(--accent-info) 0%,
    var(--accent-info-dark) 100%
  );
  color: white;
}

/* Subtle Accent Backgrounds with Transparency */
.bg-accent-primary-subtle {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--accent-primary);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.dark .bg-accent-primary-subtle {
  background-color: rgba(96, 165, 250, 0.1);
  color: var(--accent-primary);
  border-color: rgba(96, 165, 250, 0.2);
}

.bg-accent-secondary-subtle {
  background-color: rgba(139, 92, 246, 0.1);
  color: var(--accent-secondary);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.dark .bg-accent-secondary-subtle {
  background-color: rgba(167, 139, 250, 0.1);
  color: var(--accent-secondary);
  border-color: rgba(167, 139, 250, 0.2);
}

.bg-accent-success-subtle {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--accent-success);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.dark .bg-accent-success-subtle {
  background-color: rgba(52, 211, 153, 0.1);
  color: var(--accent-success);
  border-color: rgba(52, 211, 153, 0.2);
}

.bg-accent-warning-subtle {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--accent-warning);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.dark .bg-accent-warning-subtle {
  background-color: rgba(251, 191, 36, 0.1);
  color: var(--accent-warning);
  border-color: rgba(251, 191, 36, 0.2);
}

.bg-accent-error-subtle {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--accent-error);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.dark .bg-accent-error-subtle {
  background-color: rgba(248, 113, 113, 0.1);
  color: var(--accent-error);
  border-color: rgba(248, 113, 113, 0.2);
}

.bg-accent-info-subtle {
  background-color: rgba(6, 182, 212, 0.1);
  color: var(--accent-info);
  border: 1px solid rgba(6, 182, 212, 0.2);
}

.dark .bg-accent-info-subtle {
  background-color: rgba(34, 211, 238, 0.1);
  color: var(--accent-info);
  border-color: rgba(34, 211, 238, 0.2);
}

/* Hover Effects for Accent Backgrounds */
.bg-accent-primary:hover {
  background-color: var(--accent-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.bg-accent-secondary:hover {
  background-color: var(--accent-secondary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bg-accent-success:hover {
  background-color: var(--accent-success-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.bg-accent-warning:hover {
  background-color: var(--accent-warning-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.bg-accent-error:hover {
  background-color: var(--accent-error-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.bg-accent-info:hover {
  background-color: var(--accent-info-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

/* Accent Text Colors */
.text-accent-primary {
  color: var(--accent-primary);
}

.text-accent-secondary {
  color: var(--accent-secondary);
}

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

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

.text-accent-error {
  color: var(--accent-error);
}

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

/* Accent Border Colors */
.border-accent-primary {
  border-color: var(--accent-primary);
}

.border-accent-secondary {
  border-color: var(--accent-secondary);
}

.border-accent-success {
  border-color: var(--accent-success);
}

.border-accent-warning {
  border-color: var(--accent-warning);
}

.border-accent-error {
  border-color: var(--accent-error);
}

.border-accent-info {
  border-color: var(--accent-info);
}

/* Accent Ring Colors for Focus States */
.ring-accent-primary {
  --tw-ring-color: var(--accent-primary);
}

.ring-accent-secondary {
  --tw-ring-color: var(--accent-secondary);
}

.ring-accent-success {
  --tw-ring-color: var(--accent-success);
}

.ring-accent-warning {
  --tw-ring-color: var(--accent-warning);
}

.ring-accent-error {
  --tw-ring-color: var(--accent-error);
}

.ring-accent-info {
  --tw-ring-color: var(--accent-info);
}

/* Smooth Transitions for All Accent Elements */
.bg-accent-primary,
.bg-accent-secondary,
.bg-accent-success,
.bg-accent-warning,
.bg-accent-error,
.bg-accent-info,
.bg-accent-primary-light,
.bg-accent-secondary-light,
.bg-accent-success-light,
.bg-accent-warning-light,
.bg-accent-error-light,
.bg-accent-info-light,
.bg-accent-primary-subtle,
.bg-accent-secondary-subtle,
.bg-accent-success-subtle,
.bg-accent-warning-subtle,
.bg-accent-error-subtle,
.bg-accent-info-subtle {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glass Morphism Effect for Accent Backgrounds */
.bg-accent-glass {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: var(--accent-primary);
}

.dark .bg-accent-glass {
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.2);
}

/* Responsive Accent Backgrounds */
@media (max-width: 768px) {
  .bg-accent-primary:hover,
  .bg-accent-secondary:hover,
  .bg-accent-success:hover,
  .bg-accent-warning:hover,
  .bg-accent-error:hover,
  .bg-accent-info:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Dark Mode Text Color Fixes */
.dark .bg-accent-primary-light {
  color: white;
}

.dark .bg-accent-secondary-light {
  color: white;
}

.dark .bg-accent-success-light {
  color: white;
}

.dark .bg-accent-warning-light {
  color: white;
}

.dark .bg-accent-error-light {
  color: white;
}

.dark .bg-accent-info-light {
  color: white;
}

/* Ensure all text in dark mode containers is white */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark p,
.dark span,
.dark div,
.dark label {
  color: white;
}

/* Specific overrides for timeline and card text */
.dark .timeline-tile-title,
.dark .timeline-tile-content,
.dark .timeline-tile-time,
.dark .timeline-tile-assignee,
.dark .task-tile-title,
.dark .task-tile-meta-text,
.dark .contact-name,
.dark .contact-details {
  color: white !important;
}

/* Override any gray text in dark mode */
.dark .text-gray-900,
.dark .text-gray-800,
.dark .text-gray-700,
.dark .text-gray-600 {
  color: white !important;
}

.dark .text-gray-500 {
  color: #d1d5db !important;
}

.dark .text-gray-400 {
  color: #9ca3af !important;
}

/* Ensure placeholder text is visible in dark mode */
.dark ::placeholder {
  color: #9ca3af !important;
}

/* Fix any remaining dark text in cards and containers */
.dark .bg-white,
.dark .bg-gray-50,
.dark .bg-gray-100 {
  color: white !important;
}

/* Print Styles for Accent Colors */
@media print {
  .bg-accent-primary,
  .bg-accent-secondary,
  .bg-accent-success,
  .bg-accent-warning,
  .bg-accent-error,
  .bg-accent-info {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
  }
}