/* Light mode theme for SIBUDI Dashboard */

/* Light mode CSS variables */
:root, html.light {
  --light-color-bg:      #f8fafc;
  --light-color-card:    #ffffff;
  --light-color-card2:   #f1f5f9;
  --light-color-border:  #e2e8f0;
  --light-color-muted:   #64748b;
  --light-color-text:    #1e293b;
  --light-color-subtext: #475569;
  --light-color-accent:  #f59e0b;
  --light-color-danger:  #ef4444;
  --light-color-success: #10b981;
  --light-color-chart-grid: #e2e8f0;
  --light-color-chart-text: #64748b;
  --light-color-chart-line: #334155;
}

html.light {
  --color-bg:      var(--light-color-bg);
  --color-card:    var(--light-color-card);
  --color-card2:   var(--light-color-card2);
  --color-border:  var(--light-color-border);
  --color-muted:   var(--light-color-muted);
  --color-text:    var(--light-color-text);
  --color-subtext: var(--light-color-subtext);
  --color-accent:  var(--light-color-accent);
  --color-danger:  var(--light-color-danger);
  --color-success: var(--light-color-success);
  --color-chart-grid: var(--light-color-chart-grid);
  --color-chart-text: var(--light-color-chart-text);
  --color-chart-line: var(--light-color-chart-line);
}

/* Light mode specific overrides for better visual hierarchy */
html.light {
  /* Override hardcoded dark backgrounds */
  .bg-\\[\\#020617\\],
  .bg-\\[\\#0a1628\\],
  .bg-\\[\\#0f172a\\],
  .bg-\\[\\#1e293b\\] {
    background-color: var(--light-color-card) !important;
  }

  .bg-\\[\\#0f172a\\]\\/50,
  .bg-\\[\\#0f172a\\]\\/60,
  .bg-\\[\\#1e293b\\]\\/20,
  .bg-\\[\\#1e293b\\]\\/30,
  .bg-\\[\\#1e293b\\]\\/40,
  .bg-\\[\\#1e293b\\]\\/50,
  .bg-\\[\\#1e293b\\]\\/60,
  .bg-\\[\\#1e293b\\]\\/90 {
    background-color: var(--light-color-card2) !important;
  }

  /* Override hardcoded dark borders */
  .border-\\[\\#1e293b\\],
  .border-\\[\\#334155\\] {
    border-color: var(--light-color-border) !important;
  }

  .border-\\[\\#1e293b\\]\\/40 {
    border-color: var(--light-color-border) !important;
  }

  .divide-\\[\\#1e293b\\] > * + * {
    border-color: var(--light-color-border) !important;
  }

  /* Override text colors for better readability */
  .text-slate-100,
  .text-slate-200,
  .text-slate-300,
  .text-slate-400 {
    color: var(--light-color-text) !important;
  }

  .text-slate-500,
  .text-slate-600 {
    color: var(--light-color-subtext) !important;
  }

  .text-slate-700 {
    color: var(--light-color-muted) !important;
  }

  /* Override hover states */
  .hover\\:bg-\\[\\#0f172a\\]\\/50:hover,
  .hover\\:bg-\\[\\#0f172a\\]\\/60:hover,
  .hover\\:bg-\\[\\#1e293b\\]\\/30:hover,
  .hover\\:bg-\\[\\#1e293b\\]\\/50:hover,
  .hover\\:bg-\\[\\#1e293b\\]\\/90:hover {
    background-color: var(--light-color-card2) !important;
  }

  .hover\\:border-amber-500\\/30:hover,
  .hover\\:border-amber-500\\/40:hover {
    border-color: rgba(245, 158, 11, 0.3) !important;
  }

  /* Adjust scrollbar colors for light mode */
  ::-webkit-scrollbar-track {
    background: var(--light-color-card2);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--light-color-border);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--light-color-muted);
  }

  /* Adjust sidebar link hover for light mode */
  .sidebar-link:hover {
    background: rgba(0, 0, 0, 0.05);
  }

  /* Adjust active sidebar link for light mode */
  .sidebar-link.active {
    background: rgba(245, 158, 11, 0.12);
  }

  /* Adjust sidebar sublink hover for light mode */
  .sidebar-sublink:hover {
    background: rgba(0, 0, 0, 0.05);
  }

  /* Adjust sidebar sublink active for light mode */
  .sidebar-sublink.active {
    background: rgba(245, 158, 11, 0.12);
  }

  /* Adjust top header background for light mode */
  .top-header {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--light-color-border);
  }

  /* Adjust data cards for light mode - add subtle shadow */
  .kpi-card,
  .data-card,
  .stat-chip {
    background: var(--light-color-card);
    border-color: var(--light-color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  /* Adjust KPI card gradients for light mode */
  .kpi-card--btc {
    background: radial-gradient(120% 140% at 100% 0%, rgba(6, 182, 212, 0.08), transparent 55%), var(--light-color-card);
  }

  .kpi-card--onchain {
    background: radial-gradient(120% 140% at 100% 0%, rgba(139, 92, 246, 0.06), transparent 55%), var(--light-color-card);
  }

  .kpi-card--score {
    background: radial-gradient(120% 140% at 100% 0%, rgba(245, 158, 11, 0.06), transparent 55%), var(--light-color-card);
  }

  /* Adjust section rule for light mode */
  .section-rule {
    background: linear-gradient(90deg, var(--light-color-border), transparent);
  }

  /* Adjust badges for light mode - stronger backgrounds */
  .badge-ok {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.3);
  }
  .badge-err {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.3);
  }
  .badge-warn {
    background: rgba(249, 115, 22, 0.18);
    color: #ea580c;
    border-color: rgba(249, 115, 22, 0.3);
  }

  .badge-cron {
    background: rgba(56, 189, 248, 0.15);
    color: #0284c7;
    border-color: rgba(56, 189, 248, 0.3);
  }

  .badge-startup {
    background: rgba(251, 146, 60, 0.15);
    color: #ea580c;
    border-color: rgba(251, 146, 60, 0.3);
  }

  .badge-manual {
    background: rgba(167, 139, 250, 0.15);
    color: #8b5cf6;
    border-color: rgba(167, 139, 250, 0.3);
  }

  .badge-api {
    background: rgba(52, 211, 153, 0.15);
    color: #059669;
    border-color: rgba(52, 211, 153, 0.3);
  }

  .badge-unknown {
    background: rgba(100, 116, 139, 0.15);
    color: #64748b;
    border-color: rgba(100, 116, 139, 0.3);
  }

  /* Better text contrast in light mode */
  .text-slate-400 {
    color: var(--light-color-subtext);
  }

  /* Adjust meter/gauge backgrounds for light mode */
  .meter,
  .cbbi-gauge-bar {
    background: var(--light-color-card2);
  }

  /* Adjust sidebar colors for light mode */
  .sidebar {
    background: var(--light-color-card);
    border-color: var(--light-color-border);
  }

  .sidebar-link,
  .sidebar-sublink {
    color: var(--light-color-subtext);
  }

  .sidebar-link:hover,
  .sidebar-sublink:hover {
    color: var(--light-color-text);
  }

  .sidebar-section-label {
    color: var(--light-color-muted);
  }

  .sidebar-brand-text .text-sm {
    color: var(--light-color-text);
  }

  .sidebar-brand-text .text-\\[10px\\] {
    color: var(--light-color-subtext);
  }

  /* Adjust section band colors */
  .section-tick {
    background: linear-gradient(#f59e0b, #f97316);
  }

  .text-\\[11px\\].font-bold.text-slate-300 {
    color: var(--light-color-text);
  }

  .text-\\[11px\\].text-slate-600 {
    color: var(--light-color-subtext);
  }

  /* Adjust button backgrounds */
  .bg-amber-500\\/20 {
    background-color: rgba(245, 158, 11, 0.15);
  }

  .hover\\:bg-amber-500\\/30:hover {
    background-color: rgba(245, 158, 11, 0.25);
  }

  .border-amber-500\\/40 {
    border-color: rgba(245, 158, 11, 0.3);
  }

  .hover\\:border-amber-500\\/50:hover {
    border-color: rgba(245, 158, 11, 0.4);
  }
}

/* Theme toggle button styles */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-subtext);
  cursor: pointer;
  transition: all 0.15s ease;
}

.theme-toggle:hover {
  color: var(--color-text);
  background: var(--color-card2);
  border-color: var(--color-muted);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Hide/show theme icons based on mode */
.theme-icon-sun,
.theme-icon-moon {
  display: none;
}

html:not(.light) .theme-icon-moon,
html.light .theme-icon-sun {
  display: block;
}

/* Light mode specific chart and modal adjustments */
html.light {
  /* Modal backgrounds */
  .bg-\\[\\#020617\\] {
    background-color: rgba(255, 255, 255, 0.95) !important;
  }

  /* Modal overlay */
  .bg-black\\/60 {
    background-color: rgba(0, 0, 0, 0.4) !important;
  }

  /* Chart canvas containers */
  canvas {
    filter: none;
  }

  /* Adjust chart text colors */
  .chart-container {
    color: var(--light-color-chart-text);
  }

  /* Slider thumb borders - critical for modals */
  .oc-slider::-webkit-slider-thumb {
    border: 2px solid var(--light-color-border) !important;
  }

  .oc-slider::-moz-range-thumb {
    border: 2px solid var(--light-color-border) !important;
  }

  /* Modal header and content backgrounds */
  .border-\\[\\#334155\\] {
    border-color: var(--light-color-border) !important;
  }

  /* Text colors in modals */
  .text-slate-200,
  .text-slate-300,
  .text-slate-400 {
    color: var(--light-color-text) !important;
  }

  .text-slate-500,
  .text-slate-600 {
    color: var(--light-color-subtext) !important;
  }

  /* Chart colors for better visibility in light mode */
  .text-cyan-400\\/80 {
    color: rgba(34, 211, 238, 0.8) !important;
  }

  .text-amber-400\\/70,
  .text-amber-400\\/80 {
    color: rgba(251, 191, 36, 0.8) !important;
  }

  .text-red-400\\/80 {
    color: rgba(248, 113, 113, 0.8) !important;
  }

  .text-emerald-500\\/60 {
    color: rgba(16, 185, 129, 0.7) !important;
  }

  .text-red-500\\/60 {
    color: rgba(239, 68, 68, 0.7) !important;
  }

  /* Stat chip improvements */
  .stat-chip {
    background: var(--light-color-card);
    border-color: var(--light-color-border);
  }

  .stat-chip .stat-label {
    color: var(--light-color-muted);
  }

  .stat-chip .stat-value {
    color: var(--light-color-text);
  }

  /* Data card improvements */
  .data-card-header {
    border-color: var(--light-color-border);
    background: transparent;
  }

  /* Table improvements for config pages */
  .divide-\\[\\#1e293b\\] > * + * {
    border-color: var(--light-color-border) !important;
  }

  .hover\\:bg-\\[\\#0f172a\\]\\/50:hover,
  .hover\\:bg-\\[\\#0f172a\\]\\/60:hover {
    background-color: var(--light-color-card2) !important;
  }

  /* Ensure proper contrast for important text */
  .font-semibold.text-slate-100,
  .font-semibold.text-slate-200 {
    color: var(--light-color-text) !important;
  }

  .text-xs.text-slate-500 {
    color: var(--light-color-subtext) !important;
  }

  .mono.text-slate-400 {
    color: var(--light-color-subtext) !important;
  }

  .mono.text-slate-500 {
    color: var(--light-color-muted) !important;
  }

  .text-xs.mono.text-slate-200 {
    color: var(--light-color-text) !important;
  }

  .text-xs.mono.text-slate-500 {
    color: var(--light-color-muted) !important;
  }

  /* Special colors for states */
  .text-emerald-600 {
    color: #059669 !important;
  }

  .text-\\[10px\\].text-emerald-600 {
    color: #059669 !important;
  }

  .text-\\[10px\\].text-slate-600 {
    color: var(--light-color-muted) !important;
  }

  .text-\\[10px\\].mono.text-slate-400 {
    color: var(--light-color-subtext) !important;
  }

  /* Button improvements */
  .bg-\\[\\#0f172a\\].border-\\[\\#334155\\].text-slate-300 {
    background-color: var(--light-color-card) !important;
    border-color: var(--light-color-border) !important;
    color: var(--light-color-text) !important;
  }

  .hover\\:text-amber-400:hover {
    color: #fbbf24 !important;
  }

  .hover\\:border-amber-500\\/30:hover {
    border-color: rgba(245, 158, 11, 0.3) !important;
  }

  /* Form element improvements */
  .placeholder-slate-600::placeholder {
    color: var(--light-color-muted) !important;
  }

  /* Input styling improvements */
  input:focus,
  textarea:focus,
  select:focus {
    border-color: var(--light-color-accent);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
  }

  /* Table styling improvements */
  .border-b {
    border-color: var(--light-color-border) !important;
  }

  /* Additional text refinements */
  .text-\\[10px\\].text-slate-600 {
    color: var(--light-color-muted) !important;
  }

  .mono.text-slate-400 {
    color: var(--light-color-subtext) !important;
  }

  .mono.text-slate-500 {
    color: var(--light-color-muted) !important;
  }

  /* Fix for any remaining hardcoded dark backgrounds in hover states */
  .hover\\:bg-\\[\\#0f172a\\]\\/50:hover,
  .hover\\:bg-\\[\\#0f172a\\]\\/60:hover {
    background-color: var(--light-color-card2) !important;
  }

  /* Chart-specific improvements for light mode */
  canvas {
    color: var(--light-color-chart-text);
  }

  /* Glow effects adjustments for light mode */
  .glow-btc,
  .glow-info,
  .glow-bull,
  .glow-sell {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }

  .glow-btc {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
  }

  .glow-info {
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.15);
  }

  .glow-bull {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
  }

  .glow-sell {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.15);
  }

  /* Alert flash animation adjustment for light mode */
  .alert-flash {
    animation: 1.6s ease-out alert-flash-light;
  }

  @keyframes alert-flash-light {
    0% {
      background-color: rgba(251, 146, 60, 0.3);
      box-shadow: 0 0 24px rgba(251, 146, 60, 0.4);
    }
    to {
      box-shadow: none;
      background-color: transparent;
    }
  }

  /* Additional border refinements */
  .border-l-red-500\\/60,
  .border-l-orange-500\\/60,
  .border-l-emerald-500\\/60 {
    border-left-color: var(--light-color-border) !important;
  }

  /* Fix hover text colors */
  .hover\\:text-slate-200:hover {
    color: var(--light-color-text) !important;
  }

  .hover\\:text-slate-300:hover {
    color: var(--light-color-text) !important;
  }

  /* Additional fixes for specific components */
  .bg-\\[\\#1e293b\\].border-\\[\\#334155\\] {
    background-color: var(--light-color-card) !important;
    border-color: var(--light-color-border) !important;
  }
}