/* ============ ADMIN-MATCHED TOKENS (admin/app/globals.css) ============ */
:root {
  --bg: #a9adb8;
  --shell: #eef0f4;
  --card: #f7f8fa;
  --tile: #fff;
  --ink: #1c1e24;
  --mute: #7b8190;
  --line: #e3e6ec;
  --blue: #2f7bff;
  --blue-deep: #1c3d80;
  --blue-tint: #e6efff;
  --blue-ring: #a9c6ff;
  --green: #16b868;
  --amber: #f5b82e;
  --red: #e5484d;
  --wk: #d5d9e1;
  --shadow: 0 6px 18px rgba(30, 40, 70, .08);
  --bg-input: var(--tile);
  --bg-card: var(--card);
  --text-primary: var(--ink);
  --text-secondary: var(--mute);
  --border-subtle: var(--line);
  --border-gold: var(--line);
}
body.dark-theme {
  --bg: #15171c;
  --shell: #1d2027;
  --card: #23262e;
  --tile: #2a2e37;
  --ink: #eef0f5;
  --mute: #9aa1b0;
  --line: #323641;
  --wk: #343944;
  --shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

/* native controls (select dropdown, date picker, scrollbar) follow the theme */
:root { color-scheme: light; }
body.dark-theme { color-scheme: dark; }
body {
  background-color: var(--shell);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.text-brand { color: var(--ink); }
.text-slate-200 { color: #4b5260; }

/* glass surfaces — admin shell/card layered look */
.glass-nav {
  background: rgba(238, 240, 244, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
body.dark-theme .glass-nav { background: rgba(29, 32, 39, 0.88); }
.glass-card {
  background: var(--card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.theme-surface { background-color: var(--shell); }
.theme-input {
  background-color: var(--bg-input);
  color: var(--ink);
  border-color: var(--line);
  transition: border-color 0.2s ease;
}
.theme-input:focus-within, .theme-input:focus { border-color: var(--blue); }
.theme-text-muted { color: var(--mute); }
input, select, textarea, button { font: inherit; color: inherit; }

/* hero overlay stays photographic; text adapts to theme */
.hero-media {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}
.hero-shade {
  z-index: 2;
  background: linear-gradient(to bottom, rgba(238, 240, 244, 0.84) 0%, rgba(230, 234, 243, 0.66) 45%, var(--shell) 100%);
}
body.dark-theme .hero-shade {
  background: linear-gradient(to bottom, rgba(11, 15, 23, 0.82) 0%, rgba(11, 15, 23, 0.64) 45%, var(--shell) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-media { display: none; }
}
.hero-title, .hero-sub { color: var(--ink); }
.hero-chip {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--blue-ring);
  color: var(--blue-deep);
}
body.dark-theme .hero-chip {
  background: rgba(255, 255, 255, 0.08);
  color: #9cc8ff;
}

/* hero-keep-white survives only on photo-overlays (cards, chips) */
.hero-keep-white { color: #fff; }
body.dark-theme .hero-keep-white { color: #fff; }

/* accent text = admin blue */
.gold-text {
  background: linear-gradient(135deg, #5b93ff 0%, #2f7bff 55%, #1e63d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

input[type="range"] { accent-color: var(--blue); }
.rtrack { background: var(--wk) !important; }

/* sliders/track fallback in dark theme */
body.dark-theme .bg-slate-800 { background-color: #343944 !important; }

/* photo-overlay chips stay dark (sit on images) */
.bg-obsidian\/85 { backdrop-filter: blur(4px); }

/* big containers that were obsidian now follow the theme */
.bg-obsidian\/80, .bg-obsidian\/90, .bg-obsidian {
  background-color: var(--tile) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* nav currency chip */
.nav-chip { background: var(--tile); border: 1px solid var(--line); box-shadow: var(--shadow); }
.nav-chip .cin { color: #7b8190 !important; }
body.dark-theme .nav-chip .cin { color: #9aa1b0 !important; }

/* slate-300 labels readable on light cards */
.text-slate-300 { color: #5b6270 !important; }
body.dark-theme .text-slate-300 { color: #9aa1b0 !important; }
body.dark-theme .text-slate-500 { color: #8b93a5; }

/* white/1x dividers -> theme line (photo chips using white/20 untouched) */
body .border-white\/10, body .border-white\/15 { border-color: var(--line) !important; }

/* close buttons */
.closebtn { color: var(--ink); background-color: var(--wk) !important; }
body.dark-theme .bg-slate-200 { background-color: rgba(255, 255, 255, 0.12) !important; }

/* native dropdown options follow theme */
/* selects — theme-proof in every browser (native quirks killed) */
select { color: var(--ink); background-color: transparent; }
select option, .theme-input option {
  background-color: var(--tile) !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink);
  padding: .4rem .6rem;
}
select option[value=""] { color: var(--mute) !important; -webkit-text-fill-color: var(--mute); }
select option:hover { background-color: var(--wk); }
body.dark-theme select option { border-top: 1px solid var(--line); }

/* custom chevron so we don't depend on the native arrow tint */
.theme-input select { appearance: none; -webkit-appearance: none; padding-right: 1.5rem; }
.theme-input:has(select)::after {
  content: ""; position: absolute; right: .8rem; top: 50%; margin-top: -3px;
  width: 7px; height: 7px; border-right: 2px solid var(--mute);
  border-bottom: 2px solid var(--mute); transform: rotate(45deg); pointer-events: none;
}
.theme-input.relative { position: relative; }
.theme-input { position: relative; }

/* cards panels */
body.dark-theme .text-white { color: #eef0f5 !important; }
body.dark-theme .text-slate-200,
body.dark-theme .text-slate-300,
body.dark-theme .text-slate-400 { color: #9aa1b0 !important; }

.nav-link a.active { color: var(--blue); }

.wa-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-radius: 999px;
  background: var(--green);
  color: #06301c;
  font-weight: 800;
  font-size: 12px;
  box-shadow: 0 10px 30px rgba(22, 184, 104, 0.35);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.wa-float:hover { transform: scale(1.06); opacity: 0.95; }

.toast {
  position: fixed;
  bottom: 6rem;
  right: 1.5rem;
  z-index: 60;
  background: var(--tile);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: all 0.25s ease;
  max-width: 320px;
}
.toast.show { opacity: 1; transform: translateY(0); }

.mg-thumb {
  border: 1.5px solid var(--line);
  border-radius: 0.75rem;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.mg-thumb:hover, .mg-thumb.active { border-color: var(--blue); transform: translateY(-2px); }

.amen-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4 rem;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--blue-tint);
  border: 1px solid var(--blue-ring);
  color: var(--blue-deep);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.dark-theme .amen-chip { background: rgba(47, 123, 255, 0.14); color: #9cc8ff; border-color: rgba(47, 123, 255, 0.35); }

.pin-btn {
  border-radius: 1rem;
  padding: 0.9rem;
  text-align: left;
  transition: all 0.25s ease;
  border: 1px solid var(--line);
  background: var(--tile);
  box-shadow: var(--shadow);
}
.pin-btn:hover { border-color: var(--blue-ring); }
.pin-btn.active {
  background: linear-gradient(135deg, #5b93ff 0%, #2f7bff 60%, #1e63d6 100%);
  color: #fff;
  border-color: #5b93ff;
  box-shadow: 0 10px 24px rgba(47, 123, 255, 0.35);
  transform: scale(1.02);
}

.slot-btn, .mode-btn { border-width: 1px; }
.slot-btn.active, .mode-btn.active {
  border-color: var(--blue-ring);
  background: var(--blue-tint);
  color: var(--blue-deep);
}
body.dark-theme .slot-btn, body.dark-theme .mode-btn { border-color: var(--line); color: var(--mute); }
body.dark-theme .slot-btn.active, body.dark-theme .mode-btn.active {
  border-color: rgba(47, 123, 255, 0.5);
  background: rgba(47, 123, 255, 0.16);
  color: #9cc8ff;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(123, 129, 144, 0.45); border-radius: 4px; }

#grid .card { animation: rise 0.4s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============ 360 PANORAMA ============ */
.pano-stage {
  background-repeat: repeat-x;
  background-size: auto 100%;
  cursor: grab;
  user-select: none;
  transition: background-image 0.3s ease;
}
.pano-stage:active { cursor: grabbing; }