/* 
 * Dark Mode Styles
 * This file is loaded conditionally when dark mode is enabled.
 * It contains all dark theme overrides for the application.
 */

/* Dark mode support - works with data-theme attribute */
[data-theme="dark"] body,
html[data-theme="dark"] body {
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
  color: #e2e8f0;
}

[data-theme="dark"] .main-header {
  background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
}

[data-theme="dark"] .currency-form,
[data-theme="dark"] .conversion-result,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .info-box,
[data-theme="dark"] .tool-card {
  background: #1e293b;
  /* Light dark for inner cards */
  color: #e2e8f0;
  border-color: #4a5568;
}

[data-theme="dark"] .tool-container,
[data-theme="dark"] section[aria-labelledby] {
  background-color: #00000042 !important;
  /* Semi-transparent container */
  color: #e2e8f0;
  border-color: #4a5568;
}

/* Ensure forms inside containers match the card style */
[data-theme="dark"] section[aria-labelledby] form {
  background-color: #1e293b !important;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #4a5568;
}

/* Dark mode for category headers on homepage */
[data-theme="dark"] .tool-categories h2 {
  background: linear-gradient(90deg, #1e3a5f 60%, #2c5282 100%);
  color: #63b3ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .tool-list {
  background: transparent;
}

[data-theme="dark"] .tool-card {
  background: #2d3748;
  border-color: #4a5568;
  color: #63b3ed;
}

[data-theme="dark"] .tool-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  border-color: #63b3ed;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-control,
[data-theme="dark"] textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] select {
  background: #1e2938 !important;
  border: 1px solid #4a5568 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus {
  border-color: #63b3ed !important;
  box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.3) !important;
}

/* Main page headings - PURE WHITE for visibility */
[data-theme="dark"] h1,
[data-theme="dark"] section h1,
[data-theme="dark"] .main-content h1 {
  color: #ffffff !important;
}

/* Form labels - bright and visible */
[data-theme="dark"] .form-group label,
[data-theme="dark"] label,
[data-theme="dark"] form label {
  color: #ffffff !important;
}

/* Subheadings */
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
  color: #f7fafc !important;
}

[data-theme="dark"] .amount,
[data-theme="dark"] .currency,
[data-theme="dark"] .feature-card h3,
[data-theme="dark"] .info-box h3 {
  color: #f7fafc !important;
}

/* Prevent blue coloring on headings */
[data-theme="dark"] h2.text-primary,
[data-theme="dark"] h3.text-primary,
[data-theme="dark"] h4.text-primary {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .amount.result {
  color: #63b3ed;
}

[data-theme="dark"] .tool-info-section {
  background: #1a202c;
  border-color: #2d3748;
}

[data-theme="dark"] .result-box {
  background: #2d3748;
}

[data-theme="dark"] .rate-info {
  background: #2d3748;
}

[data-theme="dark"] .tool-search-bar input {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .tool-search-bar input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .btn-secondary {
  background: #4a5568;
  color: #e2e8f0;
  border-color: #718096;
}

[data-theme="dark"] .btn-secondary:hover {
  background: #718096;
}

/* Dark mode dropdown - colors only, no layout changes */
[data-theme="dark"] .dropdown-menu {
  background: #1e3a5f;
  border: 1px solid #2c5282;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
  [data-theme="dark"] .dropdown-menu {
    box-shadow: none;
  }
}

[data-theme="dark"] .dropdown-menu a {
  color: #bee3f8;
}

[data-theme="dark"] .dropdown-menu a:hover {
  background: #2c5282;
  color: #fff;
}

[data-theme="dark"] .dropdown-divider {
  background: #2c5282;
}

/* Dark mode navigation links */
[data-theme="dark"] .nav-links li a {
  color: #bee3f8;
}

[data-theme="dark"] .nav-links li a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

[data-theme="dark"] .drop-toggle {
  color: #bee3f8;
}



[data-theme="dark"] .dropdown-divider {
  background: #4a5568;
}

[data-theme="dark"] .right-sidebar,
[data-theme="dark"] .tool-sidebar {
  background: #2d3748;
  border-color: #4a5568;
}

[data-theme="dark"] .sidebar-widget {
  background: #1a202c;
  border-color: #4a5568;
}

[data-theme="dark"] .sidebar-widget h3 {
  color: #e2e8f0;
}

[data-theme="dark"] pre,
[data-theme="dark"] code {
  background: #1a202c;
  color: #e2e8f0;
  border-color: #4a5568;
}

[data-theme="dark"] .footer,
[data-theme="dark"] footer {
  background: linear-gradient(90deg, #1e3a5f 60%, #2c5282 100%);
  color: #e2e8f0;
}

[data-theme="dark"] .footer a,
[data-theme="dark"] footer a {
  color: #bee3f8;
}

[data-theme="dark"] footer a:hover {
  color: #fff;
}

[data-theme="dark"] .tool-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  border-color: #63b3ed;
}

[data-theme="dark"] .tool-card h3 {
  color: #e2e8f0;
}

[data-theme="dark"] .tool-card p {
  color: #a0aec0;
}

[data-theme="dark"] table {
  background: #2d3748;
  border-color: #4a5568;
}

[data-theme="dark"] th {
  background: #1a202c;
  color: #e2e8f0;
  border-color: #4a5568;
}

[data-theme="dark"] td {
  border-color: #4a5568;
  color: #e2e8f0;
}

[data-theme="dark"] tr:hover {
  background: #4a5568;
}

[data-theme="dark"] .alert-info {
  background: #2c5282;
  border-color: #3182ce;
  color: #bee3f8;
}

[data-theme="dark"] .alert-success {
  background: #276749;
  border-color: #38a169;
  color: #c6f6d5;
}

[data-theme="dark"] .alert-warning {
  background: #975a16;
  border-color: #d69e2e;
  color: #fefcbf;
}

[data-theme="dark"] .alert-error,
[data-theme="dark"] .alert-danger {
  background: #9b2c2c;
  border-color: #e53e3e;
  color: #fed7d7;
}

/* Comprehensive text color fixes for dark mode */
[data-theme="dark"] main p,
[data-theme="dark"] section p,
[data-theme="dark"] article p,
[data-theme="dark"] .main-content p,
[data-theme="dark"] main li,
[data-theme="dark"] section li,
[data-theme="dark"] article li {
  color: #e2e8f0;
  background: transparent !important;
}

[data-theme="dark"] main li:hover,
[data-theme="dark"] section li:hover,
[data-theme="dark"] article li:hover {
  background: transparent !important;
}

/* Links in dark mode */
[data-theme="dark"] a {
  color: #63b3ed;
}

[data-theme="dark"] a:hover {
  color: #bee3f8;
}

/* Blue text elements that may appear */
[data-theme="dark"] .text-primary,
[data-theme="dark"] .text-blue,
[data-theme="dark"] .blue {
  color: #63b3ed !important;
}

/* Strong and bold text */
[data-theme="dark"] strong,
[data-theme="dark"] b {
  color: #e2e8f0;
}

/* Lists */
[data-theme="dark"] ul,
[data-theme="dark"] ol {
  color: #e2e8f0;
}

[data-theme="dark"] ul li,
[data-theme="dark"] ol li {
  color: #e2e8f0;
}

/* Blockquotes */
[data-theme="dark"] blockquote {
  background: #1a202c;
  border-color: #4a5568;
  color: #e2e8f0;
}

/* Code blocks */
[data-theme="dark"] code {
  background: #1a202c;
  color: #63b3ed;
  border-color: #4a5568;
}

[data-theme="dark"] pre code {
  color: #e2e8f0;
}

/* Small text */
[data-theme="dark"] small {
  color: #a0aec0;
}

/* HR line */
[data-theme="dark"] hr {
  border-color: #4a5568;
}

/* Contact form dark mode support */
[data-theme="dark"] .contact-container {
  background: #2d3748 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form select,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="file"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #374151 !important;
  border-color: #6b7280 !important;
  color: #f3f4f6 !important;
  -webkit-text-fill-color: #f3f4f6 !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #a0aec0 !important;
  -webkit-text-fill-color: #a0aec0 !important;
}

[data-theme="dark"] select option {
  background: #1a202c !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1a202c inset !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}

[data-theme="dark"] .is-invalid {
  border-color: #f56565 !important;
}

[data-theme="dark"] .required {
  color: #fc8181;
}

[data-theme="dark"] .tool-desc {
  color: #a0aec0;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .form-text {
  color: #a0aec0 !important;
}

/* Dropdown Menu Styles - REMOVED: These conflict with navigation.css and should not be here */
/* All dropdown positioning is handled in navigation.css */
/* Dark mode only changes colors, not layout */

/* JavaScript handles dropdown display now */
.dropdown-menu.show {
  display: block;
  animation: fadeIn 0.2s ease-out;
}

.dropdown-menu li {
  margin: 0;
  display: block;
}

.dropdown-menu li a {
  display: block;
  padding: 12px 20px;
  color: #4a5568;
  text-decoration: none;
  transition: all 0.2s;
  font-size: 0.95em;
  font-weight: 500;
  border-radius: 0;
  white-space: nowrap;
}

.dropdown-menu li a:hover {
  background: #f0f9ff;
  color: #0284c7;
  padding-left: 24px;
  /* Subtle slide effect */
}

/* First and last items border radius */
.dropdown-menu li:first-child a {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.dropdown-menu li:last-child a {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Dropdown divider */
.dropdown-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 8px 0;
  padding: 0;
  overflow: hidden;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Mobile adjustments */
@media (max-width: 900px) {
  .dropdown {
    display: block;
    width: 100%;
    text-align: center;
  }

  .dropdown-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    margin: 10px auto;
    width: 90%;
    border-radius: 8px;
    padding: 5px 0;
  }

  .dropdown-menu::before {
    display: none;
  }

  .dropdown-menu li a {
    color: white;
    padding: 10px;
    text-align: center;
  }

  .dropdown-menu li a:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding-left: 10px;
  }

  /* Mobile dropdown handled by JavaScript */
}

/* Content Page Styles - Replaces Inline Styles */
.content-section {
  margin-top: 40px;
  padding: 30px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.content-card {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}

.content-card:hover {
  transform: translateY(-2px);
}

.pro-tip-box {
  text-align: center;
  margin-top: 25px;
  padding: 20px;
  background: rgba(37, 99, 235, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.code-display {
  background: #1e293b;
  color: #f8fafc;
  padding: 25px;
  border-radius: 8px;
  margin-bottom: 25px;
  overflow-x: auto;
}

.related-tool-card {
  text-align: center;
  padding: 25px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  transition: transform 0.2s;
}

.related-tool-card:hover {
  transform: translateY(-2px);
}

.further-reading-box {
  margin-top: 30px;
  padding: 25px;
  background: #f0f9ff;
  border-radius: 10px;
  border-left: 4px solid #2563eb;
}

/* Dark Mode Overrides for New Classes */
[data-theme="dark"] .content-section {
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
  border-color: #4a5568;
}

[data-theme="dark"] .content-card {
  background: #2d3748;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .pro-tip-box {
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.3);
}

[data-theme="dark"] .pro-tip-box p {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .related-tool-card {
  background: #2d3748;
  border-color: #4a5568;
}

[data-theme="dark"] .further-reading-box {
  background: rgba(37, 99, 235, 0.1);
  border-left-color: #63b3ed;
}

[data-theme="dark"] .content-card h3,
[data-theme="dark"] .related-tool-card h3,
[data-theme="dark"] .content-section h2 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .content-card p,
[data-theme="dark"] .content-card ul,
[data-theme="dark"] .related-tool-card p {
  color: #cbd5e0 !important;
}

[data-theme="dark"] .code-display {
  background: #0f172a;
  border: 1px solid #334155;
}

/* Article Page Styles */
.article-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.article-title {
  font-family: 'Inter', sans-serif;
  font-size: 2.5rem;
  color: #1e293b;
  text-align: center;
  margin-bottom: 1.5rem;
}

.article-intro {
  font-size: 1.2rem;
  color: #475569;
  text-align: center;
  margin-bottom: 3rem;
  line-height: 1.8;
}

.article-section {
  margin-bottom: 4rem;
}

.section-title {
  color: #2563eb;
  font-size: 1.8rem;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.subsection-title {
  color: #0f172a;
  font-size: 1.4rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.text-content {
  line-height: 1.8;
  color: #334155;
  margin-bottom: 1.5rem;
}

.list-content {
  margin-left: 1.5rem;
  color: #475569;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.text-link {
  color: #2563eb;
  text-decoration: underline;
}

.text-link:hover {
  color: #1d4ed8;
}

.grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.note-box,
.note-box-success,
.note-box-danger,
.note-box-info {
  padding: 1.5rem;
  border-radius: 8px;
  border-left-width: 4px;
}

.note-box-success {
  background: #f0fdf4;
  border-color: #4ade80;
}

.note-box-success h3 {
  color: #166534;
  margin-top: 0;
}

.note-box-success p {
  color: #14532d;
  font-size: 0.95rem;
}

.note-box-danger {
  background: #fef2f2;
  border-color: #f87171;
}

.note-box-danger h3 {
  color: #991b1b;
  margin-top: 0;
}

.note-box-danger p {
  color: #7f1d1d;
  font-size: 0.95rem;
}

.note-box-info {
  background: #f8fafc;
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.note-box-info ol {
  margin-left: 1.5rem;
  color: #475569;
  line-height: 1.8;
  margin: 0;
}

.footer-note {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: #64748b;
  text-align: center;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

.data-table th,
.data-table td {
  padding: 12px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}

.data-table th {
  background: #f1f5f9;
  border-bottom-width: 2px;
  border-bottom-color: #cbd5e1;
}

.cta-box {
  background: #f0f9ff;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  border: 1px solid #bae6fd;
}

.cta-box h3 {
  color: #0369a1;
  margin-top: 0;
}

.cta-box p {
  color: #334155;
  margin-bottom: 1.5rem;
}

.cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-button-primary {
  background: #0284c7;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s;
}

.cta-button-primary:hover {
  background: #0369a1;
  color: white;
}

.cta-button-secondary {
  background: #fff;
  color: #0284c7;
  border: 1px solid #0284c7;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s;
}

.cta-button-secondary:hover {
  background: #f0f9ff;
  color: #0284c7;
}

/* ==========================================================================
   Additional Dark Mode Overrides for Inline Styled Elements
   ========================================================================== */

/* Override inline-styled white backgrounds in dark mode */
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background-color: white"],
[data-theme="dark"] div[style*="background: linear-gradient(135deg, #f8fafc"],
[data-theme="dark"] div[style*="background: #f8fafc"],
[data-theme="dark"] div[style*="background: #f0f9ff"],
[data-theme="dark"] div[style*="background: rgba(37, 99, 235, 0.1)"] {
  background: #2d3748 !important;
  border-color: #4a5568 !important;
}

/* Override inline-styled text colors in dark mode */
[data-theme="dark"] h1[style*="color:"],
[data-theme="dark"] h2[style*="color:"],
[data-theme="dark"] h3[style*="color:"],
[data-theme="dark"] h4[style*="color:"],
[data-theme="dark"] p[style*="color: #1e293b"],
[data-theme="dark"] p[style*="color: #334155"],
[data-theme="dark"] p[style*="color: #475569"],
[data-theme="dark"] p[style*="color: #64748b"],
[data-theme="dark"] li[style*="color:"],
[data-theme="dark"] ul[style*="color:"] {
  color: #e2e8f0 !important;
}

/* Fix page titles (h1) that use inline styles */
[data-theme="dark"] #json-formatter-title,
[data-theme="dark"] #contact-title,
[data-theme="dark"] section h1,
[data-theme="dark"] main h1 {
  color: #e2e8f0 !important;
}

/* Fix section headings with inline colored text */
[data-theme="dark"] h2[style*="color: #1e293b"],
[data-theme="dark"] h3[style*="color: #1e293b"],
[data-theme="dark"] h3[style*="color: #2563eb"],
[data-theme="dark"] h3[style*="color: #059669"],
[data-theme="dark"] h3[style*="color: #dc2626"],
[data-theme="dark"] h3[style*="color: #7c3aed"],
[data-theme="dark"] h3[style*="color: #ea580c"],
[data-theme="dark"] h3[style*="color: #0891b2"],
[data-theme="dark"] h4[style*="color: #2563eb"],
[data-theme="dark"] h4[style*="color: #059669"],
[data-theme="dark"] h4[style*="color: #dc2626"],
[data-theme="dark"] h4[style*="color: #7c3aed"] {
  color: #63b3ed !important;
}

/* Fix required asterisk visibility */
[data-theme="dark"] .required {
  color: #fc8181 !important;
}

/* Fix Pro Tip boxes with inline styles */
[data-theme="dark"] div[style*="background: rgba(37, 99, 235, 0.1)"] p,
[data-theme="dark"] div[style*="background: rgba(37, 99, 235, 0.1)"] strong {
  color: #e2e8f0 !important;
}

/* Override feature cards with inline white background */
[data-theme="dark"] div[style*="background: white; padding: 20px"],
[data-theme="dark"] div[style*="background: white; padding: 25px"] {
  background: #2d3748 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Fix list item colors inside feature cards */
[data-theme="dark"] div[style*="background: white"] ul,
[data-theme="dark"] div[style*="background: white"] li,
[data-theme="dark"] div[style*="background: white"] p {
  color: #a0aec0 !important;
}

/* About page specific fixes */
[data-theme="dark"] .about-section,
[data-theme="dark"] div[style*="What We Do"],
[data-theme="dark"] div[style*="Our Mission"] {
  background: #2d3748 !important;
}

/* QR best practices - Fix red/danger colored text */
[data-theme="dark"] p[style*="color: #b91c1c"],
[data-theme="dark"] p[style*="color: #991b1b"],
[data-theme="dark"] p[style*="color: #dc2626"],
[data-theme="dark"] span[style*="color: #dc2626"],
[data-theme="dark"] .pro-tip-text {
  color: #fc8181 !important;
}

/* Fix all gradient backgrounds in dark mode */
[data-theme="dark"] section[style*="background: linear-gradient"],
[data-theme="dark"] div[style*="background: linear-gradient(135deg, #f8fafc"] {
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%) !important;
  border-color: #4a5568 !important;
}

/* Fix all paragraph text inside sections with inline styles */
[data-theme="dark"] section p,
[data-theme="dark"] section li {
  color: #cbd5e0;
}

/* Dark mode overrides for article/guide pages with inline styles */
[data-theme="dark"] .article-container,
[data-theme="dark"] main[style*="background"],
[data-theme="dark"] article {
  background: #1a202c !important;
  color: #e2e8f0;
}

/* Fix centered section headers that use inline colors */
[data-theme="dark"] h2[style*="text-align: center"],
[data-theme="dark"] h3[style*="text-align: center"] {
  color: #e2e8f0 !important;
}

/* Tool description text */
[data-theme="dark"] .tool-desc {
  color: #a0aec0 !important;
}

/* CTA box dark mode */
[data-theme="dark"] .cta-box {
  background: #1e3a5f !important;
  border-color: #2c5282 !important;
}

[data-theme="dark"] .cta-box h3 {
  color: #bee3f8 !important;
}

[data-theme="dark"] .cta-box p {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .cta-button-secondary {
  background: #2d3748 !important;
  color: #63b3ed !important;
  border-color: #63b3ed !important;
}

[data-theme="dark"] .cta-button-secondary:hover {
  background: #4a5568 !important;
}

/* Note boxes dark mode */
[data-theme="dark"] .note-box-success {
  background: #1a2c2a !important;
  border-color: #276749 !important;
}

[data-theme="dark"] .note-box-success h3 {
  color: #68d391 !important;
}

[data-theme="dark"] .note-box-success p {
  color: #c6f6d5 !important;
}

[data-theme="dark"] .note-box-danger {
  background: #2d1d1d !important;
  border-color: #9b2c2c !important;
}

[data-theme="dark"] .note-box-danger h3 {
  color: #fca5a5 !important;
}

[data-theme="dark"] .note-box-danger p {
  color: #fed7d7 !important;
}

[data-theme="dark"] .note-box-info {
  background: #2d3748 !important;
  border-color: #4a5568 !important;
}

[data-theme="dark"] .note-box-info ol {
  color: #cbd5e8 !important;
}

/* Data table dark mode */
[data-theme="dark"] .data-table th,
[data-theme="dark"] .data-table td {
  border-color: #4a5568 !important;
}

[data-theme="dark"] .data-table th {
  background: #2d3748 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .data-table td {
  color: #e2e8f0 !important;
}

/* Footer note */
[data-theme="dark"] .footer-note {
  color: #a0aec0 !important;
}

/* Grid columns and article sections */
[data-theme="dark"] .grid-2-col,
[data-theme="dark"] .article-section {
  color: #e2e8f0;
}

[data-theme="dark"] .text-content,
[data-theme="dark"] .list-content {
  color: #cbd5e0 !important;
}

[data-theme="dark"] .section-title {
  color: #63b3ed !important;
  border-bottom-color: #4a5568 !important;
}

[data-theme="dark"] .subsection-title {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .text-link {
  color: #63b3ed !important;
}

[data-theme="dark"] .text-link:hover {
  color: #bee3f8 !important;
}

/* Amber/Warning Pro Tip boxes (QR best practices, etc.) */
[data-theme="dark"] .note-box,
[data-theme="dark"] div[style*="background: #fffbeb"],
[data-theme="dark"] div.note-box[style*="#fffbeb"] {
  background: #433422 !important;
  border-left-color: #d69e2e !important;
}

[data-theme="dark"] .note-box h4,
[data-theme="dark"] div[style*="background: #fffbeb"] h4[style*="color: #92400e"],
[data-theme="dark"] h4[style*="color: #92400e"] {
  color: #fbd38d !important;
}

[data-theme="dark"] .note-box p,
[data-theme="dark"] div[style*="background: #fffbeb"] p[style*="color: #78350f"],
[data-theme="dark"] p[style*="color: #78350f"],
[data-theme="dark"] p[style*="color: #92400e"] {
  color: #faf089 !important;
}

/* Content section (About page container) */
[data-theme="dark"] .content-section {
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%) !important;
  border-color: #4a5568 !important;
}

/* Content cards (About page, etc.) */
[data-theme="dark"] .content-card {
  background: #2d3748 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .content-card h3 {
  color: #63b3ed !important;
}

[data-theme="dark"] .content-card p,
[data-theme="dark"] .content-card ul,
[data-theme="dark"] .content-card li {
  color: #cbd5e0 !important;
}

[data-theme="dark"] .content-card strong {
  color: #e2e8f0 !important;
}

/* About page story boxes with inline white background */
[data-theme="dark"] div[style*="background: white; padding: 25px"],
[data-theme="dark"] div[style*="margin-top: 30px; background: white"],
[data-theme="dark"] div[style*="margin-top: 20px; background: white"] {
  background: #2d3748 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] div[style*="background: white"] h3[style*="color: #1e293b"] {
  color: #e2e8f0 !important;
}

[data-theme="dark"] div[style*="background: white"] p[style*="color: #475569"] {
  color: #cbd5e0 !important;
}

/* Pro tip boxes with blue background (JSON formatter, etc.) */
[data-theme="dark"] div[style*="background: rgba(37, 99, 235, 0.1)"] {
  background: rgba(66, 153, 225, 0.15) !important;
  border-color: rgba(66, 153, 225, 0.3) !important;
}

[data-theme="dark"] div[style*="background: rgba(37, 99, 235, 0.1)"] p {
  color: #e2e8f0 !important;
}

[data-theme="dark"] div[style*="background: rgba(37, 99, 235, 0.1)"] strong {
  color: #90cdf4 !important;
}

/* Tables in article pages */
[data-theme="dark"] table,
[data-theme="dark"] table th,
[data-theme="dark"] table td {
  border-color: #4a5568 !important;
}

[data-theme="dark"] table th {
  background: #2d3748 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] table td {
  color: #e2e8f0 !important;
  background: transparent !important;
}

[data-theme="dark"] table tr:nth-child(even) {
  background: rgba(45, 55, 72, 0.5) !important;
}

/* Article container */
[data-theme="dark"] .article-container {
  background: #1a202c !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .article-title {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .article-intro {
  color: #cbd5e0 !important;
}

/* ==========================================================================
   Comprehensive Catch-All Selectors for Inline Styled Elements
   ========================================================================== */

/* All divs with background: white and padding variations */
[data-theme="dark"] div[style*="background: white; padding: 15px"],
[data-theme="dark"] div[style*="background: white; padding: 20px"],
[data-theme="dark"] div[style*="background: white; padding: 25px"],
[data-theme="dark"] div[style*="background: white; padding: 30px"] {
  background: #2d3748 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* All h2 and h3 with color: #1e293b or similar dark colors */
[data-theme="dark"] h2[style*="color: #1e293b"],
[data-theme="dark"] h3[style*="color: #1e293b"],
[data-theme="dark"] h4[style*="color: #1e293b"] {
  color: #e2e8f0 !important;
}

/* All paragraphs, lists, and ordered lists with dark text colors */
[data-theme="dark"] p[style*="color: #475569"],
[data-theme="dark"] p[style*="color: #334155"],
[data-theme="dark"] p[style*="color: #64748b"],
[data-theme="dark"] ul[style*="color: #475569"],
[data-theme="dark"] ol[style*="color: #475569"],
[data-theme="dark"] li[style*="color: #475569"] {
  color: #cbd5e0 !important;
}

/* All sections with gradient backgrounds */
[data-theme="dark"] div[style*="margin-top: 50px; padding: 30px"],
[data-theme="dark"] div[style*="margin-top: 30px; padding: 30px"] {
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%) !important;
  border-color: #4a5568 !important;
}

/* Pro tip boxes with various blue/indigo backgrounds */
[data-theme="dark"] div[style*="text-align: center; margin-top: 25px; padding: 20px"],
[data-theme="dark"] div[style*="margin-top: 25px; padding: 20px; background: rgba"] {
  background: rgba(66, 153, 225, 0.15) !important;
  border-color: rgba(66, 153, 225, 0.3) !important;
}

/* Feature section headers with emoji icons */
[data-theme="dark"] h2[style*="margin-bottom: 25px; font-size: 1.8em"],
[data-theme="dark"] h3[style*="margin-bottom: 15px; font-size: 1.4em"],
[data-theme="dark"] h3[style*="margin-bottom: 15px; font-size: 1.3em"] {
  color: #63b3ed !important;
}

/* Colored h3 headings in feature cards */
[data-theme="dark"] h3[style*="color: #2563eb"],
[data-theme="dark"] h3[style*="color: #059669"],
[data-theme="dark"] h3[style*="color: #dc2626"],
[data-theme="dark"] h3[style*="color: #7c3aed"],
[data-theme="dark"] h3[style*="color: #ea580c"],
[data-theme="dark"] h3[style*="color: #0891b2"] {
  color: #63b3ed !important;
}

/* Use case h4 headings */
[data-theme="dark"] h4[style*="color: #2563eb"],
[data-theme="dark"] h4[style*="color: #059669"],
[data-theme="dark"] h4[style*="color: #dc2626"],
[data-theme="dark"] h4[style*="color: #7c3aed"] {
  color: #90cdf4 !important;
}

/* Use case paragraphs */
[data-theme="dark"] p[style*="color: #64748b; margin: 0"],
[data-theme="dark"] p[style*="margin: 0; font-size: 0.95em"] {
  color: #a0aec0 !important;
}

/* Strong text inside feature sections */
[data-theme="dark"] div[style*="background: white"] strong {
  color: #e2e8f0 !important;
}

/* Monospace code snippets with #fff background (base64 page) */
[data-theme="dark"] span[style*="background: #fff"],
[data-theme="dark"] span[style*="background:#fff"] {
  background: #4a5568 !important;
  color: #e2e8f0 !important;
}

/* Tables with background: white */
[data-theme="dark"] table[style*="background: white"] {
  background: #2d3748 !important;
}

/* Boxes with various light backgrounds */
[data-theme="dark"] div[style*="background: #fffbeb"],
[data-theme="dark"] div[style*="background: #f0f9ff"],
[data-theme="dark"] div[style*="background: #f8fafc"],
[data-theme="dark"] div[style*="background: #f0fdf4"],
[data-theme="dark"] div[style*="background: #fef2f2"] {
  background: #2d3748 !important;
  border-color: #4a5568 !important;
}

/* All paragraphs with line-height styling (content text) */
[data-theme="dark"] p[style*="line-height: 1.7"],
[data-theme="dark"] p[style*="line-height: 1.8"] {
  color: #cbd5e0 !important;
}

/* Font weight styled paragraphs */
[data-theme="dark"] p[style*="font-weight: 600"],
[data-theme="dark"] p[style*="font-weight: 500"] {
  color: #e2e8f0 !important;
}

/* Grid container children (tool feature sections) */
[data-theme="dark"] div[style*="display: grid"]>div[style*="background: white"] {
  background: #2d3748 !important;
}

/* Currency converter info boxes */
[data-theme="dark"] .rate-info,
[data-theme="dark"] .conversion-result,
[data-theme="dark"] .currency-form {
  background: #2d3748 !important;
  border-color: #4a5568 !important;
  color: #e2e8f0 !important;
}

/* Info boxes general */
[data-theme="dark"] .info-box {
  background: #2d3748 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .info-box h3,
[data-theme="dark"] .info-box h4 {
  color: #63b3ed !important;
}

[data-theme="dark"] .info-box p,
[data-theme="dark"] .info-box li {
  color: #cbd5e0 !important;
}

/* ==========================================================================
   COMPREHENSIVE COLORED BOX TEXT FIXES FOR DARK MODE
   Fixes text visibility inside green, yellow, blue, and other colored boxes
   ========================================================================== */

/* Green colored boxes (success, best practices) */
[data-theme="dark"] div[style*="background: #f0fdf4"],
[data-theme="dark"] div[style*="background:#f0fdf4"],
[data-theme="dark"] div[style*="background: #ecfdf5"] {
  background: #1a3a2a !important;
  border-color: #2f855a !important;
}

[data-theme="dark"] div[style*="background: #f0fdf4"] h4,
[data-theme="dark"] div[style*="background: #f0fdf4"] h3,
[data-theme="dark"] div[style*="background: #f0fdf4"] h5,
[data-theme="dark"] h4[style*="color: #16a34a"],
[data-theme="dark"] h4[style*="color: #166534"],
[data-theme="dark"] h4[style*="color: #059669"],
[data-theme="dark"] h4[style*="color: #15803d"] {
  color: #68d391 !important;
}

[data-theme="dark"] div[style*="background: #f0fdf4"] ul,
[data-theme="dark"] div[style*="background: #f0fdf4"] li,
[data-theme="dark"] div[style*="background: #f0fdf4"] p,
[data-theme="dark"] div[style*="background: #f0fdf4"] span {
  color: #c6f6d5 !important;
}

/* Yellow/Amber colored boxes (warnings, tips) */
[data-theme="dark"] div[style*="background: #fef3c7"],
[data-theme="dark"] div[style*="background:#fef3c7"],
[data-theme="dark"] div[style*="background: #fffbeb"],
[data-theme="dark"] div[style*="background:#fffbeb"],
[data-theme="dark"] div[style*="background: #fef9c3"] {
  background: #433422 !important;
  border-color: #d69e2e !important;
}

[data-theme="dark"] div[style*="background: #fef3c7"] h4,
[data-theme="dark"] div[style*="background: #fef3c7"] h3,
[data-theme="dark"] div[style*="background: #fef3c7"] h5,
[data-theme="dark"] div[style*="background: #fffbeb"] h4,
[data-theme="dark"] div[style*="background: #fffbeb"] h3,
[data-theme="dark"] h4[style*="color: #d97706"],
[data-theme="dark"] h4[style*="color: #b45309"],
[data-theme="dark"] h4[style*="color: #92400e"],
[data-theme="dark"] h4[style*="color: #78350f"] {
  color: #fbd38d !important;
}

[data-theme="dark"] div[style*="background: #fef3c7"] ul,
[data-theme="dark"] div[style*="background: #fef3c7"] li,
[data-theme="dark"] div[style*="background: #fef3c7"] p,
[data-theme="dark"] div[style*="background: #fef3c7"] span,
[data-theme="dark"] div[style*="background: #fffbeb"] ul,
[data-theme="dark"] div[style*="background: #fffbeb"] li,
[data-theme="dark"] div[style*="background: #fffbeb"] p,
[data-theme="dark"] div[style*="background: #fffbeb"] span {
  color: #faf089 !important;
}

/* Red colored boxes (danger, warnings) */
[data-theme="dark"] div[style*="background: #fef2f2"],
[data-theme="dark"] div[style*="background:#fef2f2"],
[data-theme="dark"] div[style*="background: #fee2e2"] {
  background: #3a1a1a !important;
  border-color: #c53030 !important;
}

[data-theme="dark"] div[style*="background: #fef2f2"] h4,
[data-theme="dark"] div[style*="background: #fef2f2"] h3,
[data-theme="dark"] div[style*="background: #fef2f2"] h5,
[data-theme="dark"] h4[style*="color: #991b1b"],
[data-theme="dark"] h4[style*="color: #b91c1c"],
[data-theme="dark"] h4[style*="color: #dc2626"] {
  color: #fc8181 !important;
}

[data-theme="dark"] div[style*="background: #fef2f2"] ul,
[data-theme="dark"] div[style*="background: #fef2f2"] li,
[data-theme="dark"] div[style*="background: #fef2f2"] p,
[data-theme="dark"] div[style*="background: #fef2f2"] span {
  color: #fed7d7 !important;
}

/* Blue colored boxes (info, notes) */
[data-theme="dark"] div[style*="background: #f0f9ff"],
[data-theme="dark"] div[style*="background:#f0f9ff"],
[data-theme="dark"] div[style*="background: #eff6ff"],
[data-theme="dark"] div[style*="background: #dbeafe"],
[data-theme="dark"] div[style*="border-left: 4px solid #2563eb"] {
  background: #1a2a3a !important;
  border-color: #2b6cb0 !important;
}

[data-theme="dark"] div[style*="background: #f0f9ff"] h4,
[data-theme="dark"] div[style*="background: #f0f9ff"] h3,
[data-theme="dark"] div[style*="background: #f0f9ff"] h5,
[data-theme="dark"] div[style*="border-left: 4px solid #2563eb"] h4,
[data-theme="dark"] div[style*="border-left: 4px solid #2563eb"] h5,
[data-theme="dark"] h4[style*="color: #1e293b"],
[data-theme="dark"] h5[style*="color: #1e293b"] {
  color: #90cdf4 !important;
}

[data-theme="dark"] div[style*="background: #f0f9ff"] ul,
[data-theme="dark"] div[style*="background: #f0f9ff"] li,
[data-theme="dark"] div[style*="background: #f0f9ff"] p,
[data-theme="dark"] div[style*="background: #f0f9ff"] span,
[data-theme="dark"] div[style*="border-left: 4px solid #2563eb"] p,
[data-theme="dark"] div[style*="border-left: 4px solid #2563eb"] li {
  color: #bee3f8 !important;
}

/* Gray/Slate colored boxes */
[data-theme="dark"] div[style*="background: #f8fafc"],
[data-theme="dark"] div[style*="background:#f8fafc"],
[data-theme="dark"] div[style*="background: #f1f5f9"] {
  background: #2d3748 !important;
  border-color: #4a5568 !important;
}

[data-theme="dark"] div[style*="background: #f8fafc"] h4,
[data-theme="dark"] div[style*="background: #f8fafc"] h3,
[data-theme="dark"] div[style*="background: #f8fafc"] h5,
[data-theme="dark"] div[style*="background: #f1f5f9"] h4,
[data-theme="dark"] div[style*="background: #f1f5f9"] h3 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] div[style*="background: #f8fafc"] ul,
[data-theme="dark"] div[style*="background: #f8fafc"] li,
[data-theme="dark"] div[style*="background: #f8fafc"] p,
[data-theme="dark"] div[style*="background: #f1f5f9"] ul,
[data-theme="dark"] div[style*="background: #f1f5f9"] li,
[data-theme="dark"] div[style*="background: #f1f5f9"] p {
  color: #cbd5e0 !important;
}

/* White background boxes inside grids */
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background:#fff"] {
  background: #2d3748 !important;
  border-color: #4a5568 !important;
}

[data-theme="dark"] div[style*="background: #fff"] h4,
[data-theme="dark"] div[style*="background: #fff"] h3,
[data-theme="dark"] div[style*="background: #fff"] h5 {
  color: #63b3ed !important;
}

[data-theme="dark"] div[style*="background: #fff"] ul,
[data-theme="dark"] div[style*="background: #fff"] li,
[data-theme="dark"] div[style*="background: #fff"] p {
  color: #cbd5e0 !important;
}

/* H5 elements with green color (Pipeline stages) */
[data-theme="dark"] h5[style*="color: #059669"],
[data-theme="dark"] h5[style*="color: #16a34a"],
[data-theme="dark"] h5[style*="color: #166534"] {
  color: #68d391 !important;
}

/* All dark gray text colors that become invisible in dark mode */
[data-theme="dark"] ul[style*="color: #374151"],
[data-theme="dark"] li[style*="color: #374151"],
[data-theme="dark"] p[style*="color: #374151"],
[data-theme="dark"] span[style*="color: #374151"] {
  color: #e2e8f0 !important;
}

/* Override any text with dark colors inside colored boxes */
[data-theme="dark"] div[style*="border: 1px solid #22c55e"] *,
[data-theme="dark"] div[style*="border: 1px solid #fbbf24"] * {
  color: inherit !important;
}

[data-theme="dark"] div[style*="border: 1px solid #22c55e"] h4 {
  color: #68d391 !important;
}

[data-theme="dark"] div[style*="border: 1px solid #22c55e"] li,
[data-theme="dark"] div[style*="border: 1px solid #22c55e"] ul {
  color: #c6f6d5 !important;
}

[data-theme="dark"] div[style*="border: 1px solid #fbbf24"] h4 {
  color: #fbd38d !important;
}

[data-theme="dark"] div[style*="border: 1px solid #fbbf24"] li,
[data-theme="dark"] div[style*="border: 1px solid #fbbf24"] ul {
  color: #faf089 !important;
}

/* Form labels in dark mode */
[data-theme="dark"] section label,
[data-theme="dark"] form label {
  color: #e2e8f0 !important;
}

/* Checkbox and radio labels */
[data-theme="dark"] label input[type="checkbox"]+span,
[data-theme="dark"] label input[type="radio"]+span,
[data-theme="dark"] label:has(input[type="checkbox"]),
[data-theme="dark"] label:has(input[type="radio"]) {
  color: #e2e8f0 !important;
}

/* Section h1 titles */
[data-theme="dark"] section h1,
[data-theme="dark"] section>h1 {
  color: #63b3ed !important;
}

/* White background with border boxes (nested in grids) */
[data-theme="dark"] div[style*="border: 1px solid #e2e8f0"] {
  background: #374151 !important;
  border-color: #4a5568 !important;
}

[data-theme="dark"] div[style*="border: 1px solid #e2e8f0"] h5,
[data-theme="dark"] div[style*="border: 1px solid #e2e8f0"] h4 {
  color: #68d391 !important;
}

[data-theme="dark"] div[style*="border: 1px solid #e2e8f0"] p {
  color: #e2e8f0 !important;
}

/* ==========================================================================
   INPUT PLACEHOLDER TEXT FOR DARK MODE
   ========================================================================== */

/* Placeholder text styling */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #a0aec0 !important;
  opacity: 1 !important;
}

[data-theme="dark"] input::-webkit-input-placeholder,
[data-theme="dark"] textarea::-webkit-input-placeholder {
  color: #a0aec0 !important;
}

[data-theme="dark"] input::-moz-placeholder,
[data-theme="dark"] textarea::-moz-placeholder {
  color: #a0aec0 !important;
}

[data-theme="dark"] input:-ms-input-placeholder,
[data-theme="dark"] textarea:-ms-input-placeholder {
  color: #a0aec0 !important;
}

/* Ensure all inputs have proper dark background */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #1a202c !important;
  color: #e2e8f0 !important;
  border-color: #4a5568 !important;
}

/* Input focus states */
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: #63b3ed !important;
  outline: none !important;
}

/* Contact form container */
[data-theme="dark"] .contact-container,
[data-theme="dark"] .contact-container form,
[data-theme="dark"] form.contact-form {
  background: transparent !important;
  /* Prevent double card effect */
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Decrease contact field length as requested */
[data-theme="dark"] .contact-form input[type="text"],
[data-theme="dark"] .contact-form input[type="email"],
[data-theme="dark"] .contact-form input[type="url"],
[data-theme="dark"] .contact-form input[type="number"],
[data-theme="dark"] .contact-form select,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .contact-form .form-control {
  width: 98% !important;
  margin: 0 auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Required asterisks */
[data-theme="dark"] .required,
[data-theme="dark"] span.required {
  color: #fc8181 !important;
}

/* Select dropdown arrows */
[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a0aec0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.5rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
  padding-right: 2.5rem !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Option elements inside select */
[data-theme="dark"] select option {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
}