/* Theme variables and overrides for light/dark modes */

/* Default (light) theme variables applied via data-theme=light */
:root[data-theme="light"] {
  --primary-color: #1e88e5;
  --primary-dark: #1565c0;
  --secondary-color: #6c757d;
  --success-color: #198754;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #0dcaf0;
  --light-color: #f8f9fa;
  --dark-color: #212529;
  --body-bg: #f5f5f5;
  --body-text: #333333;
  --card-bg: #ffffff;
  --card-border: #e0e0e0;
  --navbar-text: #ffffff;
  --dropdown-bg: #ffffff;
  --dropdown-border: #e9ecef;
}

/* Dark theme variables */
:root[data-theme="dark"] {
  --primary-color: #4b8dfd;
  --primary-dark: #2463d3;
  --secondary-color: #a7b0ba;
  --success-color: #27d17d;
  --danger-color: #ff5c5c;
  --warning-color: #ffd66b;
  --info-color: #35c6ff;
  --light-color: #2a2f36;
  --dark-color: #e5e7eb;
  --body-bg: #121417;
  --body-text: #e5e7eb;
  --card-bg: #1a1f24;
  --card-border: #2a2f36;
  --navbar-text: #e5e7eb;
  --dropdown-bg: #1a1f24;
  --dropdown-border: #2a2f36;
}

/* Smooth theme transition */
body, .card, .navbar, .dropdown-menu, .page-header, .section-header {
  transition: background-color 300ms ease-in-out, color 300ms ease-in-out, border-color 300ms ease-in-out;
}

/* Base overrides driven by variables */
body {
  background-color: var(--body-bg);
  color: var(--body-text);
}

.card, .page-header, .dropdown-menu {
  background-color: var(--card-bg);
  border-color: var(--card-border);
}

.section-title, .page-title { color: var(--dark-color); }
.page-description, .section-link { color: var(--secondary-color); }

/* Navbar override for dark/light using variables */
.navbar {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}
.navbar .nav-link { color: rgba(255,255,255,0.9); }

/* Dropdown menu borders and bg */
.dropdown-menu {
  background-color: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border);
}

/* Tool-specific gentle backgrounds */
.result-area, .code-block, .preview-frame {
  background-color: var(--card-bg);
  border-color: var(--card-border);
}

/* Tables inside content sections */
table.table thead, table.table tbody {
  background-color: var(--card-bg);
}
table.table { border-color: var(--card-border); }

/* Utility to ensure text on dark stays readable */
.text-muted { color: var(--secondary-color) !important; }

/* Admin basic overrides (partial) */
:root[data-theme="dark"] .sidebar { background: #14181c; }
:root[data-theme="dark"] .main-content { background: var(--body-bg); }

/* Dark-mode specific component tuning via media query */
@media (prefers-color-scheme: dark) {
  .tool-card {
    background: linear-gradient(180deg, #494949 0%, #393939 100%);
    color: #f0f0f0;
    border-radius: 8px;
  }

  /* Search results container: mid-gray background with subtle elevation */
  .search-results-content {
    background-color: #777777;
    color: #f5f5f5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  .search-results-content .search-result-item {
    color: #f5f5f5;
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  /* Dropdown items: muted gray text with clearer hover */
  .dropdown-item {
    color: #838383;
  }
  .dropdown-item:hover,
  .dropdown-item:focus {
    color: #d0d0d0;
    background-color: #3a3a3a;
  }

  /* Cards: inherit text color in dark to avoid forced body color */
  .card {
    color: inherit !important;
  }
}

/* Ensure manual theme toggle applies these styles even if system is light */
:root[data-theme="dark"] .tool-card {
  background: linear-gradient(180deg, #494949 0%, #393939 100%);
  color: #f0f0f0;
  border-radius: 8px;
}

:root[data-theme="dark"] .search-results-content {
  background-color: #777777;
  color: #f5f5f5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
:root[data-theme="dark"] .search-results-content .search-result-item {
  color: #f5f5f5;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .dropdown-item {
  color: #838383;
}
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
  color: #d0d0d0;
  background-color: #3a3a3a;
}

:root[data-theme="dark"] .card {
  color: inherit !important;
}

/* Dark footer should stay pure black */
:root[data-theme="dark"] .footer {
  background: #000000;
  color: #ffffff;
}

/* Dark mode background for tool-card-main card body */
:root[data-theme="dark"] .tool-card-main .card-body {
  background: #616161;
}