/* ==========================================================================
   Utility Seva - Dark Theme Stylesheet
   Dark Navy Theme System
   ========================================================================== */

/* Dark mode applied via [data-theme="dark"] on <html> or .dark class */
html[data-theme="dark"],
html.dark {
  /* Dark Navy Backgrounds */
  --bg-primary: #0b0f19;      /* Deepest dark navy page background */
  --bg-surface: #111726;      /* Header, footer, input background */
  --bg-surface-alt: #192237;  /* Secondary background, pill hovers */
  --bg-card: #151d30;         /* Tool card dark navy background */
  --bg-card-hover: #1b253d;   /* Hover card background */
  
  /* Borders */
  --border-color: #232f48;
  --border-color-hover: #35476d;
  --border-focus: #818cf8;
  
  /* Typography */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0f172a;
  
  /* Brand / Accents */
  --brand-50: #1e1b4b;
  --brand-100: #2e2978;
  --brand-200: #3730a3;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-glow: rgba(99, 102, 241, 0.35);
  
  /* Category Colors in Dark Mode */
  --cat-image: #60a5fa;
  --cat-image-bg: rgba(37, 99, 235, 0.16);
  --cat-pdf: #f87171;
  --cat-pdf-bg: rgba(220, 38, 38, 0.16);
  --cat-student: #34d399;
  --cat-student-bg: rgba(5, 150, 105, 0.16);
  --cat-calc: #a78bfa;
  --cat-calc-bg: rgba(124, 58, 237, 0.16);
  
  /* Coming Soon Badge in Dark Mode */
  --badge-bg: rgba(245, 158, 11, 0.14);
  --badge-text: #fbbf24;
  --badge-border: rgba(245, 158, 11, 0.3);
  
  /* Shadows */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 14px 28px -4px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(99, 102, 241, 0.35);
}

/* Toggle icon display when dark mode is active */
html[data-theme="dark"] .theme-toggle-btn .sun-icon,
html.dark .theme-toggle-btn .sun-icon {
  display: block;
}

html[data-theme="dark"] .theme-toggle-btn .moon-icon,
html.dark .theme-toggle-btn .moon-icon {
  display: none;
}

/* Specific Dark Mode Enhancements */
html[data-theme="dark"] .brand-link svg,
html.dark .brand-link svg {
  filter: drop-shadow(0 2px 4px rgba(99, 102, 241, 0.3));
}

html[data-theme="dark"] .search-input,
html.dark .search-input {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-primary);
}

html[data-theme="dark"] .search-input:focus,
html.dark .search-input:focus {
  border-color: var(--brand-500);
  background-color: var(--bg-card);
}

html[data-theme="dark"] .nav-item:hover,
html.dark .nav-item:hover,
html[data-theme="dark"] .nav-item.active,
html.dark .nav-item.active,
html[data-theme="dark"] .nav-menu-group.is-open > .nav-item,
html.dark .nav-menu-group.is-open > .nav-item {
  color: var(--brand-500);
}

html[data-theme="dark"] .nav-item:hover,
html.dark .nav-item:hover,
html[data-theme="dark"] .nav-menu-group.is-open > .nav-item,
html.dark .nav-menu-group.is-open > .nav-item {
  background-color: rgba(99, 102, 241, 0.14);
}

html[data-theme="dark"] .nav-dropdown-panel,
html.dark .nav-dropdown-panel,
html[data-theme="dark"] .nav-mega-panel,
html.dark .nav-mega-panel {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  box-shadow: 0 22px 50px -10px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .nav-dropdown-count,
html.dark .nav-dropdown-count,
html[data-theme="dark"] .nav-mega-count,
html.dark .nav-mega-count {
  background-color: rgba(99, 102, 241, 0.18);
  color: #a5b4fc;
}

html[data-theme="dark"] .dropdown-tool-link:hover,
html.dark .dropdown-tool-link:hover,
html[data-theme="dark"] .mega-tool-link:hover,
html.dark .mega-tool-link:hover,
html[data-theme="dark"] .dropdown-tool-link:focus-visible,
html.dark .dropdown-tool-link:focus-visible,
html[data-theme="dark"] .mega-tool-link:focus-visible,
html.dark .mega-tool-link:focus-visible {
  background-color: var(--bg-card-hover);
  color: #c7d2fe;
}

html[data-theme="dark"] .mobile-nav-link:hover,
html.dark .mobile-nav-link:hover,
html[data-theme="dark"] .mobile-nav-link.active,
html.dark .mobile-nav-link.active,
html[data-theme="dark"] .mobile-acc-trigger:hover,
html.dark .mobile-acc-trigger:hover,
html[data-theme="dark"] .mobile-acc-trigger[aria-expanded="true"],
html.dark .mobile-acc-trigger[aria-expanded="true"],
html[data-theme="dark"] .mobile-tool-link:hover,
html.dark .mobile-tool-link:hover {
  background-color: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}

html[data-theme="dark"] .placeholder-notice,
html.dark .placeholder-notice {
  background-color: rgba(99, 102, 241, 0.1);
  border-left-color: var(--brand-500);
  color: var(--text-secondary);
}

/* Selection */
html[data-theme="dark"] ::selection,
html.dark ::selection {
  background-color: var(--brand-600);
  color: #ffffff;
}

/* Custom Dark Scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar,
html.dark ::-webkit-scrollbar {
  width: 10px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track,
html.dark ::-webkit-scrollbar-track {
  background: #0b0f19;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb,
html.dark ::-webkit-scrollbar-thumb {
  background: #232f48;
  border-radius: 5px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #35476d;
}