/* Theme Variables & Transitions */
:root {
  --bg-primary: #080c14;
  --bg-card: rgba(15, 23, 42, 0.75);
  --border-color: rgba(30, 41, 59, 0.8);
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --header-bg: rgba(8, 12, 20, 0.85);
  --table-hover: rgba(30, 41, 59, 0.4);
}

html.light {
  --bg-primary: #f8fafc;
  --bg-card: rgba(255, 255, 255, 0.9);
  --border-color: rgba(226, 232, 240, 1);
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --header-bg: rgba(255, 255, 255, 0.85);
  --table-hover: rgba(241, 245, 249, 0.8);
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* JIDO Logo Styling */
/* In Dark Mode: single monochrome light color */
html.dark .jido-logo-svg path {
  fill: #f8fafc !important;
  transition: fill 0.3s ease;
}

/* In Light Mode: original colors (Gold & Dark Navy) */
html.light .jido-logo-svg .cls-0 {
  fill: #B07F4D !important;
}
html.light .jido-logo-svg .cls-1,
html.light .jido-logo-svg .cls-2,
html.light .jido-logo-svg .cls-3 {
  fill: #182C35 !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html.dark ::-webkit-scrollbar-track {
  background: #080c14;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 9999px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

html.light ::-webkit-scrollbar-track {
  background: #f1f5f9;
}
html.light ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
html.light ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Tab active states */
.tab-btn.active {
  background-color: rgba(14, 165, 233, 0.1);
  border-color: rgba(14, 165, 233, 0.3);
  color: #0284c7;
}

html.dark .tab-btn.active {
  color: #38bdf8;
}

.tab-btn.active span.bg-slate-800 {
  background-color: rgba(14, 165, 233, 0.2);
  color: #38bdf8;
}

/* Flip arrow for RTL */
html[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}

/* Theme specifics for Light mode elements */
html.light .theme-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
}

html.light .theme-header {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: #e2e8f0 !important;
}

html.light .theme-input {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light .theme-text-muted {
  color: #64748b !important;
}

html.light .theme-text-title {
  color: #0f172a !important;
}

html.light .theme-bg-subtle {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

html.light table thead {
  background: #f8fafc !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}

html.light table tbody tr {
  border-color: #f1f5f9 !important;
}

html.light table tbody tr:hover {
  background: #f8fafc !important;
}

html.light .theme-footer {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* Animations */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.2);
  }
  50% {
    box-shadow: 0 0 25px rgba(14, 165, 233, 0.4);
  }
}

.pulse-glow {
  animation: pulseGlow 3s infinite ease-in-out;
}