/* 🌙 COMPREHENSIVE Dark Theme CSS for XTS Trading App */
/* ✅ Fixes ALL gray text visibility issues across ALL pages */

/* ========================================
   🎯 ROOT VARIABLES FOR DARK THEME
   ======================================== */
[data-theme="dark"] {
  --bg-base-100: #1f2937;
  --bg-base-200: #111827;
  --bg-base-300: #0f172a;
  --text-base-content: #f9fafb;
  --text-base-content-secondary: #d1d5db;
  --border-base-300: #374151;
  --primary: #3b82f6;
  --primary-content: #ffffff;
  --secondary: #8b5cf6;
  --accent: #f59e0b;
  --neutral: #6b7280;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
}

/* ========================================
   🌙 CORE DARK THEME OVERRIDES - HIGH SPECIFICITY
   ======================================== */
html[data-theme="dark"] body,
html[data-theme="dark"],
[data-theme="dark"] body,
[data-theme="dark"] {
  background-color: #111827 !important;
  color: #f9fafb !important;
}

/* Force override for main page containers */
html[data-theme="dark"] .min-h-screen,
[data-theme="dark"] .min-h-screen {
  background-color: #111827 !important;
}

html[data-theme="dark"] .bg-base-200,
[data-theme="dark"] .bg-base-200 {
  background-color: #111827 !important;
}

html[data-theme="dark"] .bg-base-100,
[data-theme="dark"] .bg-base-100 {
  background-color: #1f2937 !important;
}

html[data-theme="dark"] .bg-base-300,
[data-theme="dark"] .bg-base-300 {
  background-color: #0f172a !important;
}

/* ========================================
   🎯 GRAY TEXT FIXES - THE MAIN PROBLEM
   ======================================== */

/* Fix ALL gray-500 text (most common issue) */
[data-theme="dark"] .text-gray-500 {
  color: #d1d5db !important; /* Light gray for dark mode */
}

/* Fix ALL gray-600 text */
[data-theme="dark"] .text-gray-600 {
  color: #e5e7eb !important; /* Lighter gray for dark mode */
}

/* Fix ALL gray-700 text */
[data-theme="dark"] .text-gray-700 {
  color: #f3f4f6 !important; /* Very light gray for dark mode */
}

/* Fix ALL gray-800 text */
[data-theme="dark"] .text-gray-800 {
  color: #f9fafb !important; /* Almost white for dark mode */
}

/* Fix ALL gray-900 text */
[data-theme="dark"] .text-gray-900 {
  color: #ffffff !important; /* Pure white for dark mode */
}

/* Fix ALL gray-400 text */
[data-theme="dark"] .text-gray-400 {
  color: #9ca3af !important; /* Medium gray for dark mode */
}

/* Fix ALL gray-300 text */
[data-theme="dark"] .text-gray-300 {
  color: #d1d5db !important; /* Light gray for dark mode */
}

/* ========================================
   🎯 BACKGROUND FIXES
   ======================================== */

/* Fix white backgrounds */
[data-theme="dark"] .bg-white {
  background-color: #1f2937 !important; /* Dark gray */
  color: #f9fafb !important; /* Light text */
}

/* Fix gray-50 backgrounds (table headers) */
[data-theme="dark"] .bg-gray-50 {
  background-color: #374151 !important; /* Darker gray */
  color: #f9fafb !important; /* Light text */
}

/* Fix gray-100 backgrounds */
[data-theme="dark"] .bg-gray-100 {
  background-color: #4b5563 !important; /* Medium dark gray */
  color: #f9fafb !important; /* Light text */
}

/* Fix gray-200 backgrounds */
[data-theme="dark"] .bg-gray-200 {
  background-color: #6b7280 !important; /* Medium gray */
  color: #f9fafb !important; /* Light text */
}

/* ========================================
   🎯 BORDER FIXES
   ======================================== */

/* Fix gray borders */
[data-theme="dark"] .border-gray-200 {
  border-color: #4b5563 !important;
}

[data-theme="dark"] .border-gray-300 {
  border-color: #6b7280 !important;
}

[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #4b5563 !important;
}

/* ========================================
   🎯 TABLE-SPECIFIC FIXES
   ======================================== */

/* Table headers */
[data-theme="dark"] thead {
  background-color: #374151 !important;
}

[data-theme="dark"] thead th {
  color: #f9fafb !important;
  background-color: #374151 !important;
}

/* Table rows */
[data-theme="dark"] tbody tr {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
}

[data-theme="dark"] tbody tr:hover {
  background-color: #374151 !important;
}

/* Table cells */
[data-theme="dark"] td {
  color: #f9fafb !important;
}

/* ========================================
   🎯 FORM FIXES
   ======================================== */

/* Form labels */
[data-theme="dark"] label {
  color: #f9fafb !important;
}

/* Form inputs */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #374151 !important;
  color: #f9fafb !important;
  border-color: #6b7280 !important;
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 1px #3b82f6 !important;
}

/* ========================================
   🎯 BUTTON FIXES
   ======================================== */

/* Secondary buttons */
[data-theme="dark"] .btn-secondary {
  background-color: #6b7280 !important;
  color: #f9fafb !important;
  border-color: #6b7280 !important;
}

[data-theme="dark"] .btn-secondary:hover {
  background-color: #4b5563 !important;
  border-color: #4b5563 !important;
}

/* ========================================
   🎯 CARD AND CONTAINER FIXES
   ======================================== */

/* Cards */
[data-theme="dark"] .card {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
}

/* Shadows */
[data-theme="dark"] .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
}

/* ========================================
   🎯 NAVIGATION FIXES
   ======================================== */

/* Navigation links */
[data-theme="dark"] .navbar {
  background-color: #1f2937 !important;
  border-bottom: 1px solid #374151 !important;
}

[data-theme="dark"] .navbar a {
  color: #f9fafb !important;
}

[data-theme="dark"] .navbar a:hover {
  color: #3b82f6 !important;
}

/* Breadcrumbs */
[data-theme="dark"] .breadcrumbs a {
  color: #d1d5db !important;
}

[data-theme="dark"] .breadcrumbs a:hover {
  color: #3b82f6 !important;
}

/* ========================================
   🎯 UTILITY OVERRIDES
   ======================================== */

/* Ensure all text is visible - handled by specific rules below */

/* Specific overrides for common problematic classes */
[data-theme="dark"] .text-sm {
  color: inherit !important;
}

[data-theme="dark"] .text-xs {
  color: inherit !important;
}

/* ========================================
   🎯 PRESERVE IMPORTANT COLORS
   ======================================== */

/* Keep success/error colors intact */
[data-theme="dark"] .text-green-600,
[data-theme="dark"] .text-green-500 {
  color: #10b981 !important;
}

[data-theme="dark"] .text-red-600,
[data-theme="dark"] .text-red-500 {
  color: #ef4444 !important;
}

[data-theme="dark"] .text-blue-600,
[data-theme="dark"] .text-blue-500 {
  color: #3b82f6 !important;
}

[data-theme="dark"] .text-yellow-600,
[data-theme="dark"] .text-yellow-500 {
  color: #f59e0b !important;
}

/* ========================================
   🎯 SPECIFIC PAGE FIXES
   ======================================== */

/* Positions page specific fixes */
[data-theme="dark"] .position-row td {
  color: #f9fafb !important;
}

/* Order book page specific fixes */
[data-theme="dark"] .order-row td {
  color: #f9fafb !important;
}

/* Strategy page specific fixes */
[data-theme="dark"] .strategy-card {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
}

/* Place order page specific fixes */
[data-theme="dark"] .form-group label {
  color: #f9fafb !important;
}

[data-theme="dark"] .form-group .help-text {
  color: #d1d5db !important;
}

/* ========================================
   🎯 FINAL CATCH-ALL RULES
   ======================================== */

/* Ensure no text is invisible in dark mode */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #f9fafb !important;
}

[data-theme="dark"] p {
  color: #e5e7eb !important;
}

[data-theme="dark"] span {
  color: inherit !important;
}

[data-theme="dark"] div {
  color: inherit !important;
}

/* Navigation bar dark theme */
[data-theme="dark"] .navbar {
  background-color: var(--bg-base-100) !important;
  color: var(--text-base-content) !important;
  border-bottom-color: var(--border-base-300) !important;
}

/* Cards dark theme */
[data-theme="dark"] .card {
  background-color: var(--bg-base-100) !important;
  color: var(--text-base-content) !important;
}

/* Input fields dark theme */
[data-theme="dark"] .input {
  background-color: var(--bg-base-300) !important;
  color: var(--text-base-content) !important;
  border-color: var(--border-base-300) !important;
}

[data-theme="dark"] .input:focus {
  border-color: var(--primary) !important;
  outline: none !important;
}

/* Buttons dark theme */
[data-theme="dark"] .btn {
  color: var(--text-base-content) !important;
}

[data-theme="dark"] .btn-ghost {
  background-color: transparent !important;
  color: var(--text-base-content) !important;
}

[data-theme="dark"] .btn-ghost:hover {
  background-color: var(--bg-base-300) !important;
}

/* Tables dark theme */
[data-theme="dark"] .table {
  background-color: var(--bg-base-100) !important;
  color: var(--text-base-content) !important;
}

[data-theme="dark"] .table th {
  background-color: var(--bg-base-300) !important;
  color: var(--text-base-content) !important;
  border-bottom-color: var(--border-base-300) !important;
}

[data-theme="dark"] .table td {
  border-bottom-color: var(--border-base-300) !important;
}

/* 🎨 Comprehensive Gray Text Classes Dark Mode Support - High Specificity */
/* Light gray text becomes lighter in dark mode for better visibility */
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] body .text-gray-400,
[data-theme="dark"] * .text-gray-400 {
  color: #9ca3af !important; /* Lighter gray for dark mode */
}

html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] body .text-gray-500,
[data-theme="dark"] * .text-gray-500,
html[data-theme="dark"] .text-xs.font-medium.text-gray-500,
html[data-theme="dark"] .text-sm.text-gray-500 {
  color: #d1d5db !important; /* Much lighter for visibility */
}

html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] body .text-gray-600,
[data-theme="dark"] * .text-gray-600,
html[data-theme="dark"] .text-sm.text-gray-600 {
  color: #e5e7eb !important; /* Light gray for secondary text */
}

html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] body .text-gray-700,
[data-theme="dark"] * .text-gray-700,
html[data-theme="dark"] .text-sm.text-gray-700 {
  color: #f3f4f6 !important; /* Very light for primary text */
}

html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] body .text-gray-800,
[data-theme="dark"] * .text-gray-800 {
  color: #f9fafb !important; /* Almost white for headers */
}

html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] body .text-gray-900,
[data-theme="dark"] * .text-gray-900 {
  color: #ffffff !important; /* Pure white for main content */
}

/* 🎨 Background Gray Classes Dark Mode Support - High Specificity */
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] body .bg-gray-50,
[data-theme="dark"] * .bg-gray-50 {
  background-color: #374151 !important; /* Dark gray for hover states */
}

html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] body .bg-gray-100,
[data-theme="dark"] * .bg-gray-100 {
  background-color: #4b5563 !important; /* Medium dark gray */
}

html[data-theme="dark"] .bg-gray-200,
html[data-theme="dark"] body .bg-gray-200,
[data-theme="dark"] * .bg-gray-200 {
  background-color: #6b7280 !important; /* Lighter dark gray */
}

html[data-theme="dark"] .bg-gray-300,
html[data-theme="dark"] body .bg-gray-300,
[data-theme="dark"] * .bg-gray-300 {
  background-color: #9ca3af !important; /* Light gray for borders */
}

/* 🎨 Border Gray Classes Dark Mode Support - High Specificity */
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] body .border-gray-200,
[data-theme="dark"] * .border-gray-200 {
  border-color: #4b5563 !important; /* Dark border */
}

html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] body .border-gray-300,
[data-theme="dark"] * .border-gray-300 {
  border-color: #6b7280 !important; /* Medium dark border */
}

/* 🎨 Hover States for Gray Backgrounds - High Specificity */
html[data-theme="dark"] .hover\:bg-gray-50:hover,
html[data-theme="dark"] body .hover\:bg-gray-50:hover,
[data-theme="dark"] * .hover\:bg-gray-50:hover {
  background-color: #4b5563 !important;
}

html[data-theme="dark"] .hover\:bg-gray-100:hover,
html[data-theme="dark"] body .hover\:bg-gray-100:hover,
[data-theme="dark"] * .hover\:bg-gray-100:hover {
  background-color: #6b7280 !important;
}

html[data-theme="dark"] .hover\:bg-gray-300:hover,
html[data-theme="dark"] body .hover\:bg-gray-300:hover,
[data-theme="dark"] * .hover\:bg-gray-300:hover {
  background-color: #9ca3af !important;
}

/* 🎨 Hover States for Gray Text - High Specificity */
html[data-theme="dark"] .hover\:text-blue-700:hover,
html[data-theme="dark"] body .hover\:text-blue-700:hover,
[data-theme="dark"] * .hover\:text-blue-700:hover {
  color: #60a5fa !important; /* Lighter blue for dark mode */
}

/* 🎨 Additional UI Elements Dark Mode Support */
/* Placeholders and disabled text */
[data-theme="dark"] .text-gray-400 {
  color: #9ca3af !important;
}

/* Form labels and secondary text */
[data-theme="dark"] .text-sm.text-gray-500,
[data-theme="dark"] .text-xs.text-gray-500 {
  color: #d1d5db !important;
}

/* Table headers */
[data-theme="dark"] .text-xs.font-medium.text-gray-500.uppercase {
  color: #d1d5db !important;
}

/* Pagination and navigation text */
[data-theme="dark"] .text-sm.text-gray-700 {
  color: #f3f4f6 !important;
}

/* Disabled states */
[data-theme="dark"] .cursor-not-allowed {
  opacity: 0.6;
}

/* White backgrounds become dark - High Specificity */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] body .bg-white,
[data-theme="dark"] * .bg-white,
html[data-theme="dark"] table .bg-white,
html[data-theme="dark"] tbody .bg-white {
  background-color: var(--bg-base-100) !important;
  color: var(--text-base-content) !important;
}

/* Ensure proper contrast for interactive elements - High Specificity */
html[data-theme="dark"] .bg-white.hover\:bg-gray-50:hover,
html[data-theme="dark"] body .bg-white.hover\:bg-gray-50:hover,
[data-theme="dark"] * .bg-white.hover\:bg-gray-50:hover {
  background-color: var(--bg-base-300) !important;
}

/* Fix for indigo buttons in dark mode */
[data-theme="dark"] .bg-indigo-600 {
  background-color: #4f46e5 !important;
}

[data-theme="dark"] .bg-indigo-600:hover {
  background-color: #4338ca !important;
}

/* 🎨 Catch-all rules for any remaining gray text issues - Maximum Specificity */
html[data-theme="dark"] th.text-gray-500,
html[data-theme="dark"] td.text-gray-500,
html[data-theme="dark"] div.text-gray-500,
html[data-theme="dark"] span.text-gray-500,
html[data-theme="dark"] .text-xs.text-gray-500,
html[data-theme="dark"] .text-sm.text-gray-500,
html[data-theme="dark"] .font-medium.text-gray-500 {
  color: #d1d5db !important;
}

html[data-theme="dark"] th.text-gray-600,
html[data-theme="dark"] td.text-gray-600,
html[data-theme="dark"] div.text-gray-600,
html[data-theme="dark"] span.text-gray-600 {
  color: #e5e7eb !important;
}

html[data-theme="dark"] th.text-gray-700,
html[data-theme="dark"] td.text-gray-700,
html[data-theme="dark"] div.text-gray-700,
html[data-theme="dark"] span.text-gray-700 {
  color: #f3f4f6 !important;
}

/* Force override for table headers specifically */
html[data-theme="dark"] thead th,
html[data-theme="dark"] thead .text-gray-500 {
  color: #d1d5db !important;
}

/* Force override for table cells */
html[data-theme="dark"] tbody td.text-gray-500,
html[data-theme="dark"] tbody .text-gray-500 {
  color: #d1d5db !important;
}

html[data-theme="dark"] tbody td.text-gray-600,
html[data-theme="dark"] tbody .text-gray-600 {
  color: #e5e7eb !important;
}

[data-theme="dark"] .table tr:hover {
  background-color: var(--bg-base-300) !important;
}

/* Dropdown/Menu dark theme */
[data-theme="dark"] .dropdown-content {
  background-color: var(--bg-base-100) !important;
  color: var(--text-base-content) !important;
  border-color: var(--border-base-300) !important;
}

[data-theme="dark"] .menu li > * {
  color: var(--text-base-content) !important;
}

[data-theme="dark"] .menu li > *:hover {
  background-color: var(--bg-base-300) !important;
}

/* Alerts dark theme */
[data-theme="dark"] .alert {
  background-color: var(--bg-base-300) !important;
  color: var(--text-base-content) !important;
  border-color: var(--border-base-300) !important;
}

/* Badges dark theme */
[data-theme="dark"] .badge {
  color: var(--text-base-content) !important;
}

/* Hero section dark theme */
[data-theme="dark"] .hero {
  background-color: var(--bg-base-200) !important;
  color: var(--text-base-content) !important;
}

/* Tabs dark theme */
[data-theme="dark"] .tabs-boxed {
  background-color: var(--bg-base-300) !important;
}

[data-theme="dark"] .tab {
  color: var(--text-base-content-secondary) !important;
}

[data-theme="dark"] .tab-active {
  background-color: var(--primary) !important;
  color: var(--primary-content) !important;
}

/* Form labels dark theme */
[data-theme="dark"] .label-text {
  color: var(--text-base-content) !important;
}

/* Stats/Dashboard cards dark theme */
[data-theme="dark"] .stat {
  background-color: var(--bg-base-100) !important;
  color: var(--text-base-content) !important;
}

/* Breadcrumbs dark theme */
[data-theme="dark"] .breadcrumbs a {
  color: var(--text-base-content-secondary) !important;
}

[data-theme="dark"] .breadcrumbs a:hover {
  color: var(--primary) !important;
}

/* Modal dark theme */
[data-theme="dark"] .modal-box {
  background-color: var(--bg-base-100) !important;
  color: var(--text-base-content) !important;
}

/* Tooltip dark theme */
[data-theme="dark"] .tooltip {
  background-color: var(--bg-base-300) !important;
  color: var(--text-base-content) !important;
}

/* Progress bars dark theme */
[data-theme="dark"] .progress {
  background-color: var(--bg-base-300) !important;
}

/* Divider dark theme */
[data-theme="dark"] .divider {
  border-color: var(--border-base-300) !important;
}

/* Custom text colors for dark theme */
[data-theme="dark"] .text-gray-700 {
  color: var(--text-base-content-secondary) !important;
}

[data-theme="dark"] .text-gray-600 {
  color: var(--text-base-content-secondary) !important;
}

[data-theme="dark"] .text-gray-500 {
  color: var(--text-base-content-secondary) !important;
}

/* Ensure white text becomes light in dark mode */
[data-theme="dark"] .text-white {
  color: var(--text-base-content) !important;
}

/* Fix any remaining black text */
[data-theme="dark"] .text-black {
  color: var(--text-base-content) !important;
}

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

/* ========================================
   🎨 ENHANCED DARK THEME - DAISYUI COMPATIBLE
   ======================================== */

/* Only apply dark theme overrides when explicitly in dark mode */
[data-theme="dark"] {
  /* Use DaisyUI CSS variables for consistency */
  --bg-base-100: #1f2937;
  --bg-base-200: #111827;
  --bg-base-300: #374151;
  --text-base-content: #f9fafb;
  --text-base-content-secondary: #d1d5db;
  --border-base-300: #4b5563;
}

/* Dark theme specific overrides only when needed */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 {
  background-color: var(--bg-base-100) !important;
  color: var(--text-base-content) !important;
}

/* Let DaisyUI handle light mode naturally - no overrides needed */