/*
 * dark-theme-override.css — Junagal dark theme overrides for tools & resources
 * Overrides the light-theme variables and styles to dark mode.
 */

:root {
  /* Overrides for style.css variables */
  --color-bg: #040816 !important;
  --color-bg-elevated: #080f25 !important;
  --color-bg-overlay: #0e1635 !important;
  --color-bg-card: #080f25 !important;
  
  --color-text-main: #f0ede6 !important;
  --color-text-body: #a2a4bc !important;
  --color-text-muted: #7c7e9a !important;
  --color-link: #3b82f6 !important;
  
  --color-border-soft: #182342 !important;
  --color-border-strong: #22325c !important;
  
  --color-primary: #3b82f6 !important;
  --color-primary-glow: rgba(59, 130, 246, 0.15) !important;
  
  --color-accent: #3b82f6 !important;
  --color-accent-glow: rgba(59, 130, 246, 0.2) !important;
  
  --gradient-main: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
  --gradient-main-soft: rgba(59, 130, 246, 0.08) !important;
  --gradient-glow: 0 0 32px rgba(59, 130, 246, 0.12) !important;
  
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
  --shadow-glow: 0 0 24px rgba(59, 130, 246, 0.15) !important;
  
  --brand-success: #10b981 !important;
}

/* Base resets for dark mode */
html, body {
  background-color: #040816 !important;
  color: #f8fafc !important;
}

/* Card overrides */
.glass-card, .tool-card, .resource-card, .featured-app {
  background: var(--bg-card) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
  color: #f8fafc !important;
}

/* Input / Form styling for dark mode */
input[type="text"],
input[type="number"],
input[type="email"],
select,
textarea {
  background-color: rgba(8, 15, 37, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
  border-radius: 6px !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  border-color: #3b82f6 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

/* Metric / Result card highlights */
.tool-metric strong {
  color: #3b82f6 !important;
}

/* Buttons in dark mode */
.btn-outline, .btn-ghost {
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}
.btn-outline:hover, .btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

/* Navigation overrides for V1 style fallback */
.logo {
  color: #f0ede6 !important;
}
.nav-link {
  color: #7c7e9a !important;
}
.nav-link:hover, .nav-link.active {
  color: #3b82f6 !important;
}

/* Highlight boxes */
.highlight-box {
  background: rgba(59, 130, 246, 0.05) !important;
  border: 1px solid rgba(59, 130, 246, 0.15) !important;
}

/* Table overrides for dark mode */
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  background-color: #080f25 !important;
  color: #f0ede6 !important;
  border-bottom: 1px solid #182342 !important;
}
td {
  border-bottom: 1px solid #182342 !important;
  color: #a2a4bc !important;
}
tr:hover td {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Editorial premium body background and premium page headers dark overrides */
body.editorial-premium {
  background: 
    radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.04) 0%, transparent 50%),
    #040816 !important;
  background-attachment: fixed !important;
}

.editorial-premium .page-header,
.editorial-premium .article-header,
.editorial-premium .tool-hero,
.editorial-premium .careers-header {
  background: #040816 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.editorial-premium .hero-title,
.editorial-premium .article-title,
.editorial-premium .careers-title,
.editorial-premium .error-title,
.editorial-premium .tool-title {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

.editorial-premium .hero-subtitle,
.editorial-premium .blog-subtitle {
  color: #cbd5e1 !important;
}