/* ==========================================================================
   BSP FREE SERVICE - Dark Mode Color System & Overrides
   Dark Navy / Obsidian Surfaces with Neon Cyan & Blue Accents
   ========================================================================== */

[data-theme="dark"] {
  --bg-body: #0B1120;
  --bg-card: #131E33;
  --bg-card-hover: #1E293B;
  --bg-glass: rgba(11, 17, 32, 0.88);
  --border-color: #1E293B;
  --border-hover: #334155;
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-inverse: #0F172A;
  
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  --glow-cyan: 0 0 25px rgba(6, 182, 212, 0.35);
}

[data-theme="dark"] .site-header {
  background-color: var(--bg-glass);
  border-bottom-color: #1E293B;
}

[data-theme="dark"] .brand-logo {
  color: #FFFFFF;
}

[data-theme="dark"] .nav-link {
  color: #CBD5E1;
}

[data-theme="dark"] .nav-link:hover {
  color: #38BDF8;
  background-color: rgba(56, 189, 248, 0.1);
}

[data-theme="dark"] .nav-link.active {
  color: #38BDF8;
  background-color: rgba(56, 189, 248, 0.15);
}

[data-theme="dark"] .header-search-btn {
  background-color: #0F172A;
  border-color: #1E293B;
  color: #94A3B8;
}

[data-theme="dark"] .header-search-btn:hover {
  border-color: #38BDF8;
  color: #F8FAFC;
}

[data-theme="dark"] .header-search-btn kbd {
  background-color: #1E293B;
  border-color: #334155;
  color: #CBD5E1;
}

[data-theme="dark"] .theme-toggle-btn {
  background-color: #0F172A;
  border-color: #1E293B;
  color: #F8FAFC;
}

[data-theme="dark"] .mobile-toggle {
  background-color: #0F172A;
  border-color: #1E293B;
  color: #F8FAFC;
}

[data-theme="dark"] .section-alt {
  background-color: #0F172A;
  border-top-color: #1E293B;
  border-bottom-color: #1E293B;
}

[data-theme="dark"] .category-card {
  background-color: #131E33;
  border-color: #1E293B;
}

[data-theme="dark"] .category-icon-wrap {
  background: rgba(56, 189, 248, 0.12);
  color: #38BDF8;
}

[data-theme="dark"] .category-card:hover {
  background-color: #16243F;
  border-color: #38BDF8;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.2);
}

[data-theme="dark"] .card {
  background-color: #131E33;
  border-color: #1E293B;
}

[data-theme="dark"] .card:hover {
  border-color: #38BDF8;
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.7), 0 0 20px rgba(56, 189, 248, 0.2);
}

[data-theme="dark"] .btn-secondary {
  background-color: #131E33;
  color: #F8FAFC;
  border-color: #1E293B;
}

[data-theme="dark"] .btn-secondary:hover {
  background-color: #1E293B;
  border-color: #38BDF8;
}

[data-theme="dark"] .prompt-box {
  background-color: #0B1120;
  border-color: #1E293B;
  color: #CBD5E1;
}

[data-theme="dark"] .search-bar-input {
  background-color: #131E33;
  border-color: #1E293B;
  color: #F8FAFC;
}

[data-theme="dark"] .search-bar-input:focus {
  border-color: #38BDF8;
  background-color: #0F172A;
}

[data-theme="dark"] .filter-btn {
  background-color: #131E33;
  border-color: #1E293B;
  color: #94A3B8;
}

[data-theme="dark"] .filter-btn:hover {
  background-color: #1E293B;
  color: #F8FAFC;
}

[data-theme="dark"] .filter-btn.active {
  background-color: var(--secondary-blue);
  color: #FFFFFF;
  border-color: var(--secondary-blue);
}

[data-theme="dark"] .modal-content {
  background-color: #0F172A;
  border-color: #1E293B;
  color: #F8FAFC;
}

[data-theme="dark"] .modal-header {
  border-bottom-color: #1E293B;
}

[data-theme="dark"] .modal-footer {
  border-top-color: #1E293B;
}

[data-theme="dark"] .accordion-item {
  background-color: #131E33;
  border-color: #1E293B;
}

[data-theme="dark"] .accordion-item.active {
  border-color: #38BDF8;
}

[data-theme="dark"] .form-control {
  background-color: #0B1120;
  border-color: #1E293B;
  color: #F8FAFC;
}

[data-theme="dark"] .form-control:focus {
  border-color: #38BDF8;
  background-color: #0F172A;
}

[data-theme="dark"] .urdu-quote {
  color: #38BDF8;
}