/* ── Mesraq dark-mode theme ──────────────────────────────────
   Loaded on every page. Light-mode variables live inline in
   each page's <style> block; this file only adds overrides.
   ─────────────────────────────────────────────────────────── */

/* ── Variable overrides ─────────────────────────────────── */
html[data-theme="dark"] {
  --bg:      #1A1612;
  --bg-warm: #221C16;
  --ink:     #F5EEDE;
  --ink-soft:#C9BFB0;
  --muted:   #7A6E5F;
  --line:    rgba(245,238,222,0.11);
  --terra:   #E07849;
  --deep:    #C4452E;
  --gold:    #E8B567;
}

/* ── Base ───────────────────────────────────────────────── */
html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink);
}

/* ── Nav ────────────────────────────────────────────────── */
html[data-theme="dark"] nav {
  background: var(--bg);
  border-color: var(--line);
}
html[data-theme="dark"] .mob-nav {
  background: var(--bg);
}

/* ── Hero sections (keep dark-green brand feel) ─────────── */
/* .hero, .page-hero already use hardcoded #1A4028 which
   reads fine in dark mode — no override needed. */

/* ── Footer ─────────────────────────────────────────────── */
html[data-theme="dark"] footer {
  background: #0E2318;
}

/* ── Inputs & selects ───────────────────────────────────── */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--bg-warm);
  color: var(--ink);
  border-color: var(--line);
  color-scheme: dark;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--muted);
}

/* ── Buttons that hardcode light colours ────────────────── */
html[data-theme="dark"] .btn {
  background: var(--ink);
  color: var(--bg);
}
html[data-theme="dark"] .btn:hover {
  background: var(--ink-soft);
}

/* ── Cards (browse) ─────────────────────────────────────── */
html[data-theme="dark"] .card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}

/* ── Auth card ──────────────────────────────────────────── */
html[data-theme="dark"] .auth-wrap {
  background: var(--bg);
}

/* ── Admin sidebar ──────────────────────────────────────── */
html[data-theme="dark"] .sidebar {
  background: var(--bg-warm);
  border-color: var(--line);
}
html[data-theme="dark"] .data-table th {
  background: var(--bg-warm);
}

/* ── Images — subtle dimming in dark mode ───────────────── */
html[data-theme="dark"] .gallery-item img,
html[data-theme="dark"] .rv-photo-thumb,
html[data-theme="dark"] .hl-photo,
html[data-theme="dark"] .hm-hl-photo,
html[data-theme="dark"] .puz-item img,
html[data-theme="dark"] .avatar-sm {
  filter: brightness(0.82);
}

/* ── Leaflet map ────────────────────────────────────────── */
html[data-theme="dark"] .leaflet-container {
  background: #1A1612;
}
html[data-theme="dark"] .leaflet-control-attribution {
  background: rgba(26,22,18,0.85) !important;
  color: rgba(245,238,222,0.55) !important;
}
html[data-theme="dark"] .leaflet-control-attribution a {
  color: var(--terra) !important;
}
html[data-theme="dark"] .leaflet-bar a {
  background: var(--bg-warm) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .leaflet-bar a:hover {
  background: var(--bg) !important;
}
html[data-theme="dark"] .ctip,
html[data-theme="dark"] .leaflet-tooltip {
  background: var(--bg-warm) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] .ctip::before,
html[data-theme="dark"] .leaflet-tooltip::before {
  border-top-color: var(--line) !important;
}

/* ── Community map loading state ────────────────────────── */
html[data-theme="dark"] .community-map-loading {
  color: var(--muted);
}

/* ── Lightbox ───────────────────────────────────────────── */
html[data-theme="dark"] .lb-overlay {
  background: rgba(10,8,6,0.96);
}

/* ── Highlight manager panel ────────────────────────────── */
html[data-theme="dark"] .hl-manager-panel {
  background: var(--bg);
}

/* ── Location prompt ────────────────────────────────────── */
html[data-theme="dark"] .loc-prompt {
  background: var(--bg-warm);
}

/* ── Theme toggle button ────────────────────────────────── */
.theme-toggle {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  line-height: 0;
  padding: 0;
}
.theme-toggle:hover {
  background: var(--bg-warm);
  color: var(--ink);
  border-color: var(--ink-soft);
}