/* Theme CSS - Dark/Light Theme Support with CSS Custom Properties */

/* Light Theme (Default) */
:root {
  --bg-color: #f3f0e6;
  --text-color: #333;
  --card-bg: #fff;
  --card-shadow: rgba(0, 0, 0, 0.08) 0 5px 9px, rgba(0, 0, 0, 0.08) 0 1px 4px;
  --link-color: #111;
  --link-hover: #005af0;
  --navbar-bg: #0097a7;
  --navbar-text: #cddc39;
  --sidebar-bg: #0097a7;
  --sidebar-text: #cddc39;
  --toolbar-bg: #bbb8ae;
  --toolbar-text: #0097a8;
}

/* Dark Theme */
.theme-dark {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --card-bg: #2d2d2d;
  --card-shadow: rgba(0, 0, 0, 0.3) 0 5px 9px, rgba(0, 0, 0, 0.3) 0 1px 4px;
  --link-color: #e0e0e0;
  --link-hover: #4da6ff;
  --navbar-bg: #0d4f56;
  --navbar-text: #cddc39;
  --sidebar-bg: #0d4f56;
  --sidebar-text: #cddc39;
  --toolbar-bg: #000000;
  --toolbar-text: #494949;
}

/* Apply theme variables */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  -webkit-transition: background-color 0.3s ease, color 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease;
}

a {
  color: var(--link-color);
}

a:focus,
a:hover {
  color: var(--link-hover);
}

.nb {
  background-color: var(--navbar-bg);
}

.brand,
.sb-tgl,
.settings-tgl {
  color: var(--navbar-text);
}

.sb {
  background: var(--sidebar-bg);
}

.sb-nav a {
  color: var(--sidebar-text);
}

.navigation-toolbar {
  background: transparent;
}

.nav-button {
  background: var(--toolbar-text);
  color: var(--toolbar-bg);
}

.surah-list li.surah-item {
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.theme-dark .ayah {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.theme-dark .surah-search-input {
  background: var(--card-bg);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-color);
}

.theme-dark .surah-search-input:focus {
  border-color: var(--link-hover);
  box-shadow: 0 0 0 3px rgba(77, 166, 255, 0.2);
}

.theme-dark .surah-search-input::placeholder {
  color: rgba(224, 224, 224, 0.5);
}

.theme-dark .no-results {
  color: var(--text-color);
  opacity: 0.7;
}

.theme-dark .ayah-number {
  color: rgba(224, 224, 224, 0.4);
}

.theme-dark .ayah-arabic {
  color: #c0c0c0;
}

.theme-dark .surah-number {
  color: rgba(224, 224, 224, 0.4);
}

.theme-dark .surah-order-btn-main {
  background: var(--card-bg);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-color);
}

.theme-dark .surah-order-btn-main:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--link-hover);
}

.theme-dark .surah-order-btn-main:focus {
  border-color: var(--link-hover);
  box-shadow: 0 0 0 3px rgba(77, 166, 255, 0.2);
}

.theme-dark .sb-hdr {
  background-color: #2d2d2d;
}

.theme-dark .sb-hdr .logo {
  color: var(--text-color);
}

.theme-dark .sb-hdr .x {
  background: #222;
}

.theme-dark .sb-hdr .toggle-switch::before {
  background-color: #222;
}

.theme-dark .sb-hdr .toggle-slider {
  background-color: #222;
}

.theme-dark .lang-sb-hdr {
  background-color: #2d2d2d;
}

.theme-dark .lang-sb-hdr h2 {
  color: var(--text-color);
}

.theme-dark .lang-x {
  background: #222;
  color: var(--text-color);
}

.theme-dark .lang-item {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.theme-dark .lang-item-active {
  background: rgba(205, 220, 57, 0.3);
}

.theme-dark .build-date {
  color: rgba(224, 224, 224, 0.5);
}


/* Smooth transitions for theme changes */
* {
  -webkit-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}