/* Theme Variables and Styles */

/* Dark Theme (Default) */
:root[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #111827;
  --bg-tertiary: #0b1220;
  --bg-input: #0b1220;

  --border-primary: #374151;
  --border-secondary: #334155;

  --text-primary: #ffffff;
  --text-secondary: #e5e7eb;
  --text-tertiary: #9ca3af;
  --text-muted: #6b7280;

  --title-color: #67e8f9;

  --scrollbar-thumb: #444;
  --scrollbar-track: transparent;

  /* Button colors */
  --btn-primary-bg: rgba(16, 185, 129, 0.2);
  --btn-primary-border: rgba(16, 185, 129, 0.3);
  --btn-primary-hover: rgba(16, 185, 129, 0.3);

  --btn-danger-bg: rgba(220, 38, 38, 0.2);
  --btn-danger-border: rgba(220, 38, 38, 0.3);
  --btn-danger-hover: rgba(220, 38, 38, 0.3);

  --btn-secondary-bg: rgba(107, 114, 128, 0.2);
  --btn-secondary-border: rgba(107, 114, 128, 0.3);
  --btn-secondary-hover: rgba(107, 114, 128, 0.3);
}

/* Light Theme */
:root[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --bg-input: #ffffff;

  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;

  --text-primary: #111827;
  --text-secondary: #374151;
  --text-tertiary: #6b7280;
  --text-muted: #9ca3af;

  --title-color: #0891b2;

  --scrollbar-thumb: #cbd5e1;
  --scrollbar-track: #f1f5f9;

  /* Button colors */
  --btn-primary-bg: rgba(16, 185, 129, 0.15);
  --btn-primary-border: rgba(16, 185, 129, 0.4);
  --btn-primary-hover: rgba(16, 185, 129, 0.25);

  --btn-danger-bg: rgba(220, 38, 38, 0.15);
  --btn-danger-border: rgba(220, 38, 38, 0.4);
  --btn-danger-hover: rgba(220, 38, 38, 0.25);

  --btn-secondary-bg: rgba(107, 114, 128, 0.15);
  --btn-secondary-border: rgba(107, 114, 128, 0.4);
  --btn-secondary-hover: rgba(107, 114, 128, 0.25);
}

/* Apply theme colors */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Title text */
.title-text {
  color: var(--title-color) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* Input fields */
input, textarea, select {
  background-color: var(--bg-input) !important;
  border-color: var(--border-secondary) !important;
  color: var(--text-secondary) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
}

/* Sections/Cards */
.bg-section {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

/* Quill Editor Light Mode */
:root[data-theme="light"] .ql-toolbar.ql-snow {
  background: #f9fafb;
  border-color: #e5e7eb;
}

:root[data-theme="light"] .ql-container.ql-snow {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #111827;
}

:root[data-theme="light"] .ql-editor {
  color: #111827;
}

:root[data-theme="light"] .ql-editor.ql-blank::before {
  color: #9ca3af;
}

:root[data-theme="light"] .ql-snow .ql-stroke {
  stroke: #6b7280;
}

:root[data-theme="light"] .ql-snow .ql-fill {
  fill: #6b7280;
}

:root[data-theme="light"] .ql-snow .ql-picker-label {
  color: #6b7280;
}

:root[data-theme="light"] .ql-toolbar.ql-snow .ql-picker-label:hover,
:root[data-theme="light"] .ql-toolbar.ql-snow button:hover {
  color: #111827;
}

:root[data-theme="light"] .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke,
:root[data-theme="light"] .ql-toolbar.ql-snow button:hover .ql-stroke {
  stroke: #111827;
}

:root[data-theme="light"] .ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill,
:root[data-theme="light"] .ql-toolbar.ql-snow button:hover .ql-fill {
  fill: #111827;
}

/* Smooth transitions */
* {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Override Tailwind dark classes for compatibility */
/* Using attribute selectors to match Tailwind arbitrary values */

/* Background colors */
[data-theme="light"] [class*="bg-[#0f172a]"],
[data-theme="light"] [class*="bg-[#0F172A]"] {
  background-color: #ffffff !important;
}

[data-theme="light"] [class*="bg-[#111827]"],
[data-theme="light"] [class*="bg-[#111827]"] {
  background-color: #f9fafb !important;
}

[data-theme="light"] [class*="bg-[#0b1220]"],
[data-theme="light"] [class*="bg-[#0B1220]"] {
  background-color: #f3f4f6 !important;
}

[data-theme="light"] [class*="bg-[#1f2937]"],
[data-theme="light"] [class*="bg-[#1F2937]"] {
  background-color: #e5e7eb !important;
}

[data-theme="light"] [class*="bg-[#1e293b]"],
[data-theme="light"] [class*="bg-[#1E293B]"] {
  background-color: #f3f4f6 !important;
}

/* Border colors */
[data-theme="light"] [class*="border-[#374151]"],
[data-theme="light"] [class*="border-[#374151]"] {
  border-color: #e5e7eb !important;
}

[data-theme="light"] [class*="border-[#334155]"],
[data-theme="light"] [class*="border-[#334155]"] {
  border-color: #d1d5db !important;
}

[data-theme="light"] .text-white {
  color: #111827 !important;
}

[data-theme="light"] .text-gray-100 {
  color: #1f2937 !important;
}

[data-theme="light"] .text-gray-200 {
  color: #374151 !important;
}

[data-theme="light"] .text-gray-300 {
  color: #4b5563 !important;
}

[data-theme="light"] .text-gray-400 {
  color: #6b7280 !important;
}

[data-theme="light"] .text-gray-500 {
  color: #9ca3af !important;
}

[data-theme="light"] .text-gray-600 {
  color: #4b5563 !important;
}

/* Code/Monospace text */
[data-theme="light"] .font-mono {
  color: #374151;
}

/* Toast notifications light mode */
[data-theme="light"] .bg-green-900\/30 {
  background-color: rgba(34, 197, 94, 0.15) !important;
}

[data-theme="light"] .border-green-500 {
  border-color: rgba(34, 197, 94, 0.5) !important;
}

[data-theme="light"] .text-green-300 {
  color: #15803d !important;
}

[data-theme="light"] .bg-red-900\/30 {
  background-color: rgba(239, 68, 68, 0.15) !important;
}

[data-theme="light"] .border-red-500 {
  border-color: rgba(239, 68, 68, 0.5) !important;
}

[data-theme="light"] .text-red-300 {
  color: #dc2626 !important;
}

/* Status badges */
[data-theme="light"] .bg-blue-900\/20 {
  background-color: rgba(59, 130, 246, 0.15) !important;
}

[data-theme="light"] .bg-yellow-900\/20 {
  background-color: rgba(234, 179, 8, 0.15) !important;
}

[data-theme="light"] .bg-green-900\/20 {
  background-color: rgba(34, 197, 94, 0.15) !important;
}

[data-theme="light"] .bg-red-900\/20 {
  background-color: rgba(239, 68, 68, 0.15) !important;
}

[data-theme="light"] .bg-gray-900\/20 {
  background-color: rgba(107, 114, 128, 0.15) !important;
}

[data-theme="light"] .bg-purple-900\/20 {
  background-color: rgba(168, 85, 247, 0.15) !important;
}

[data-theme="light"] .bg-orange-900\/20 {
  background-color: rgba(249, 115, 22, 0.15) !important;
}

/* Border colors for status badges */
[data-theme="light"] .border-blue-500\/30 {
  border-color: rgba(59, 130, 246, 0.4) !important;
}

[data-theme="light"] .border-yellow-500\/30 {
  border-color: rgba(234, 179, 8, 0.4) !important;
}

[data-theme="light"] .border-green-500\/30 {
  border-color: rgba(34, 197, 94, 0.4) !important;
}

[data-theme="light"] .border-red-500\/30 {
  border-color: rgba(239, 68, 68, 0.4) !important;
}

[data-theme="light"] .border-gray-500\/30 {
  border-color: rgba(107, 114, 128, 0.4) !important;
}

[data-theme="light"] .border-purple-500\/30 {
  border-color: rgba(168, 85, 247, 0.4) !important;
}

[data-theme="light"] .border-orange-500\/30 {
  border-color: rgba(249, 115, 22, 0.4) !important;
}

/* Text colors for status badges */
[data-theme="light"] .text-blue-300 {
  color: #1d4ed8 !important;
}

[data-theme="light"] .text-yellow-300 {
  color: #a16207 !important;
}

[data-theme="light"] .text-purple-300 {
  color: #7c3aed !important;
}

[data-theme="light"] .text-orange-300 {
  color: #c2410c !important;
}

/* Hover states */
[data-theme="light"] .hover\:bg-blue-600\/30:hover {
  background-color: rgba(59, 130, 246, 0.25) !important;
}

[data-theme="light"] .hover\:bg-green-600\/30:hover {
  background-color: rgba(34, 197, 94, 0.25) !important;
}

[data-theme="light"] .hover\:bg-red-600\/30:hover {
  background-color: rgba(239, 68, 68, 0.25) !important;
}

[data-theme="light"] .hover\:bg-gray-600\/30:hover {
  background-color: rgba(107, 114, 128, 0.25) !important;
}

[data-theme="light"] .hover\:bg-orange-600\/30:hover {
  background-color: rgba(249, 115, 22, 0.25) !important;
}

/* Special colors */
[data-theme="light"] .text-cyan-400 {
  color: #0891b2 !important;
}

[data-theme="light"] .text-indigo-500 {
  color: #6366f1 !important;
}