/* ===== DARK MODE STYLES ===== */
body.dark-mode {
  --neutral-50: #0f172a;
  --neutral-100: #1e293b;
  --neutral-200: #334155;
  --neutral-300: #475569;
  --neutral-400: #64748b;
  --neutral-500: #94a3b8;
  --neutral-600: #cbd5e1;
  --neutral-700: #e2e8f0;
  --neutral-800: #f1f5f9;
  --neutral-900: #f8fafc;

  --primary-blue-alpha: rgba(74, 144, 226, 0.15);
}

body.dark-mode .dashboard-header {
  background-color: #1e293b; /* Ganti dengan warna yang sesuai */
  border-bottom: 1px solid var(--neutral-300);
}

body.dark-mode .sidebar {
  background-color: #1e293b; /* Ganti dengan warna yang sesuai */
  border-right: 1px solid var(--neutral-300);
}

body.dark-mode .tool-card {
  background-color: var(--neutral-100);
  border: 1px solid var(--neutral-300);
}

body.dark-mode .tag {
  background-color: var(--neutral-200);
  color: var(--neutral-700);
}

body.dark-mode .header-search input[type="search"] {
  background-color: var(--neutral-200);
  border-color: var(--neutral-300);
  color: var(--neutral-800);
}

body.dark-mode .header-search input[type="search"]:focus {
  background-color: var(--neutral-100);
  border-color: var(--primary-blue);
}

body.dark-mode .theme-toggle {
  color: var(--neutral-500);
}

body.dark-mode .theme-toggle:hover {
  color: var(--primary-blue);
  background-color: var(--neutral-200);
}

body.dark-mode .back-button {
  background-color: var(--neutral-100);
  color: var(--neutral-800);
  border: 1px solid var(--neutral-300);
}

body.dark-mode .back-button:hover {
  background-color: var(--neutral-200);
}

body.dark-mode #toolFrame {
  background: var(--neutral-100);
}

/* ===== LOGO DARK MODE ===== */
body.dark-mode .header-logo {
  content: url('image/unggul-white.png');
}

/* ===== TOOL CARD ICONS DARK MODE ===== */
body.dark-mode .card-logo {
  background-color: transparent;
}

/* Font Awesome Icons - Simple & Clean */
body.dark-mode .card-icon {
  color: var(--neutral-600);
}

body.dark-mode .tool-card:hover .card-icon {
  color: var(--primary-blue);
}

/* Legacy support - Hanya untuk icon gambar yang benar-benar hitam/gelap */
body.dark-mode .card-logo[src*="black"],
body.dark-mode .card-logo[src*="dark"],
body.dark-mode .card-logo[src*="monochrome"] {
  filter: brightness(0) invert(1);
  background-color: transparent;
}

/* Untuk emoji atau icon text fallback */
body.dark-mode .card-logo:not([src]) {
  background-color: transparent;
  color: var(--neutral-800);
}