/* ============================================================
   Global styles — values come from CSS custom properties
   injected by app.py via theme.py. To retheme the whole app,
   edit COLORS in app/theme.py; do not hard-code hex values here.
   ============================================================ */

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--text-primary);
  overflow-x: hidden;
}

/* ── Background depth orbs ────────────────────────────────── */
/* Gives the glassmorphism cards something to blur against */
body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
}
body::before {
  width: 600px; height: 600px;
  background: rgba(var(--accent-a-rgb), 0.12);
  top: -160px; left: -160px;
}
body::after {
  width: 500px; height: 500px;
  background: rgba(var(--accent-rgb), 0.08);
  bottom: -120px; right: -120px;
}

/* ── Glassmorphism card ───────────────────────────────────── */
.glass-card {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

@supports (backdrop-filter: blur(14px)) {
  .glass-card {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }
}

/* Accent line across the top of every glass card */
.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 16px 16px 0 0;
}

/* ── Navbar ───────────────────────────────────────────────── */
.glass-nav {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.18) !important;
}

@supports (backdrop-filter: blur(18px)) {
  .glass-nav {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
}

.glass-nav .navbar-brand {
  color: var(--text-primary) !important;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.glass-nav .nav-link {
  color: var(--text-primary) !important;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.35rem 0.8rem !important;
  border-radius: 7px;
  transition: color 0.15s, background 0.15s;
}

.glass-nav .nav-link:hover {
  color: var(--text-primary) !important;
  background: var(--nav-hover-bg);
}

.glass-nav .nav-link.active {
  color: var(--nav-active) !important;
  background: rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35);
}

.glass-nav .navbar-toggler {
  border-color: rgba(var(--accent-rgb), 0.35);
}

.glass-nav .navbar-toggler-icon {
  background-image: none;
  background-color: rgba(var(--hamburger-rgb), 0.85);
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / contain no-repeat;
}

/* ── Scrolling ticker ─────────────────────────────────────── */
.scrolling-ticker {
  width: 100%;
  overflow: hidden;
  background: var(--ticker-bg);
  border-top:    1px solid rgba(var(--accent-rgb), 0.12);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
  padding: 9px 0;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.scrolling-ticker-inner {
  display: inline-block;
  animation: scroll-ticker 40s linear infinite;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.scrolling-ticker-inner .ticker-highlight {
  color: var(--accent-light);
  font-weight: 600;
}

@keyframes scroll-ticker {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* ── KPI cards ────────────────────────────────────────────── */
.kpi-card {
  padding: 1.5rem 1rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
}

.kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(var(--accent-rgb), 0.22);
}

.kpi-icon  { font-size: 1.4rem; margin-bottom: 0.5rem; }

.kpi-value {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1;
  letter-spacing: -0.04em;
}

.kpi-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-top: 0.45rem;
}

/* ── Record cards (Records page) ──────────────────────────── */
.record-card {
  padding: 1.4rem 1rem 1.2rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
}

.record-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(var(--accent-rgb), 0.22);
}

.record-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.record-detail {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.4rem;
  line-height: 1.4;
}

/* ── Section label ────────────────────────────────────────── */
.section-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-light);
  margin-bottom: 1rem;
}

/* ── Headings ─────────────────────────────────────────────── */
h1 { font-weight: 700; letter-spacing: -0.03em; }
h2 { font-weight: 600; letter-spacing: -0.02em; }
h3, h4 { font-weight: 600; }

/* ── Globe teaser ─────────────────────────────────────────── */
.globe-teaser-inner {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  overflow: hidden;
}

/* ── Accent button ────────────────────────────────────────── */
.btn-accent {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: var(--on-accent) !important;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem 1.5rem;
  border-radius: 9px;
  text-decoration: none;
  border: none;
  transition: opacity 0.18s, box-shadow 0.18s;
}

.btn-accent:hover {
  opacity: 0.88;
  box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.45);
}

/* ── dbc.Tabs dark styling ────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.25) !important;
}

.nav-tabs .nav-link {
  color: var(--text-secondary) !important;
  font-weight: 500;
  font-size: 0.875rem;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 0.65rem 1.25rem !important;
  background: transparent !important;
  transition: color 0.15s, border-color 0.15s;
}

.nav-tabs .nav-link:hover {
  color: var(--text-primary) !important;
  border-bottom-color: rgba(var(--accent-rgb), 0.4) !important;
}

.nav-tabs .nav-link.active {
  color: var(--nav-active) !important;
  border-bottom-color: var(--accent-light) !important;
  background: transparent !important;
}

.tab-content { padding-top: 1rem; }

/* ── Floating map controls panel ──────────────────────────── */
.map-controls-float {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  min-width: 170px;
  /* Override the glass-card transparency — needs to be readable over the globe */
  background: var(--panel-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.map-controls-float .form-check-label {
  color: var(--text-primary) !important;
  font-size: 0.9rem;
  font-weight: 500;
}

.map-controls-float .form-check-input:checked {
  background-color: var(--accent-light);
  border-color: var(--accent-light);
}

.map-controls-float .form-check {
  margin-bottom: 0.4rem;
}

/* Colored swatch next to each layer toggle — doubles as the map color key */
.layer-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

/* Floating city-detail panel — mirrors the controls panel on the right */
.map-detail-float {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 260px;
  max-height: calc(80vh - 2rem);
  overflow-y: auto;
  background: var(--panel-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.map-detail-float ul {
  padding-left: 1.1rem;
  margin-bottom: 0.4rem;
}

.map-detail-float a {
  color: var(--link);
  text-decoration: none;
}

.map-detail-float a:hover {
  color: var(--link-hover);
}

/* Atmosphere halo hugging the globe's rim. Plotly fits the orthographic
   globe to the smaller side of the plot (minus its 10px margins), so the
   radius below tracks the graph's height and the wrapper's width. */
.globe-glow {
  position: relative;
  container-type: inline-size;
  --globe-r: calc(min(100cqw, var(--globe-stage-h)) / 2 - 10px);
}

.globe-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 50%,
    transparent calc(var(--globe-r) - 2px),
    rgba(var(--accent-rgb), 0.55) var(--globe-r),
    rgba(var(--accent-rgb), 0.18) calc(var(--globe-r) + 14px),
    transparent calc(var(--globe-r) + 56px)
  );
  pointer-events: none;
  z-index: 0;
}

/* Emoji standing in for the colored dot on icon-drawn map layers */
.layer-icon {
  display: inline-block;
  width: 1.1em;
  margin-right: 6px;
  text-align: center;
}

/* Faint starfield behind the map stage (invisible on light backgrounds) */
.map-stage {
  --globe-stage-h: max(80vh, 520px);
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, 0.35), transparent 100%),
    radial-gradient(1px 1px at 28% 74%, rgba(255, 255, 255, 0.28), transparent 100%),
    radial-gradient(1.5px 1.5px at 41% 12%, rgba(255, 255, 255, 0.30), transparent 100%),
    radial-gradient(1px 1px at 57% 88%, rgba(255, 255, 255, 0.25), transparent 100%),
    radial-gradient(1px 1px at 66% 31%, rgba(255, 255, 255, 0.32), transparent 100%),
    radial-gradient(1.5px 1.5px at 79% 63%, rgba(255, 255, 255, 0.27), transparent 100%),
    radial-gradient(1px 1px at 88% 17%, rgba(255, 255, 255, 0.33), transparent 100%),
    radial-gradient(1px 1px at 94% 79%, rgba(255, 255, 255, 0.24), transparent 100%);
  border-radius: 16px;
}

/* Below desktop: drop the floating panels into normal flow so they
   don't cover the globe on phones or skinny windows. */
@media (max-width: 991.98px) {
  .map-controls-float {
    position: static;
    min-width: 0;
    margin-bottom: 1rem;
  }

  .map-detail-float {
    position: static;
    width: auto;
    max-height: 320px;
    margin-bottom: 1rem;
  }
}

/* ── Theme picker ─────────────────────────────────────────── */
.theme-picker {
  width: auto;
  max-width: 170px;
  background-color: var(--nav-bg);
  color: var(--text-primary);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  font-weight: 500;
}

.theme-picker:focus {
  border-color: var(--accent-light);
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25);
}

/* ── About page ───────────────────────────────────────────── */
.about-text p { color: var(--text-secondary); line-height: 1.75; }

/* ── Brand logo ───────────────────────────────────────────── */
.brand-logo { height: 32px; width: 32px; border-radius: 50%; object-fit: cover; }

@media (max-width: 576px) { .brand-logo { height: 26px; width: 26px; } }

/* ── Dividers & scrollbar ─────────────────────────────────── */
hr { border-color: var(--hr-color); }

::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb        { background: rgba(var(--accent-rgb), 0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(var(--accent-rgb), 0.6); }

/* ============================================================
   FUN "GeoCities" skin — only active under [data-theme="fun"].
   Deliberately over-stimulating: sparkles, marquee, neon, blink.
   The decoration DOM lives in app.py (#fun-decor); these rules
   reveal and animate it. Everything is scoped so other themes
   are completely unaffected.
   ============================================================ */

/* Decoration container hidden unless the fun theme is active */
.fun-decor { display: none; }
[data-theme="fun"] .fun-decor { display: block; }

/* Loud animated background gradient */
[data-theme="fun"] body {
  background: linear-gradient(135deg, #1a0033, #330066, #000022, #4b0082);
  background-size: 400% 400%;
  background-attachment: fixed;
  animation: fun-bg 12s ease infinite;
}
@keyframes fun-bg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Comic Sans absolutely everywhere */
[data-theme="fun"] body,
[data-theme="fun"] .navbar-brand,
[data-theme="fun"] .nav-link {
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive !important;
}

/* Twinkling starfield (the .fun-sparkles div sits behind content) */
.fun-sparkles { display: none; }
[data-theme="fun"] .fun-sparkles {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #ffffff, transparent),
    radial-gradient(2px 2px at 70% 60%, #00ffff, transparent),
    radial-gradient(1px 1px at 40% 80%, #ff00ff, transparent),
    radial-gradient(2px 2px at 90% 20%, #ffff00, transparent),
    radial-gradient(1px 1px at 10% 70%, #ffffff, transparent),
    radial-gradient(2px 2px at 55% 15%, #ff00ff, transparent);
  background-repeat: repeat;
  background-size: 300px 300px;
  animation: fun-twinkle 1.1s steps(2) infinite, fun-drift 60s linear infinite;
}
@keyframes fun-twinkle { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes fun-drift   { from { background-position: 0 0; } to { background-position: 300px 600px; } }

/* Rainbow, ALL-CAPS, blinking headings */
[data-theme="fun"] h1,
[data-theme="fun"] h2,
[data-theme="fun"] h3,
[data-theme="fun"] h4,
[data-theme="fun"] .section-label {
  background: linear-gradient(90deg, #ff0000, #ff9900, #ffff00, #00ff00, #00ffff, #0066ff, #cc00ff, #ff0000);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-transform: uppercase;
  animation: fun-rainbow 4s linear infinite;
}
@keyframes fun-rainbow { to { background-position: 200% center; } }
[data-theme="fun"] h1 { animation: fun-rainbow 4s linear infinite, fun-blink 1s steps(2) infinite; }
@keyframes fun-blink { 50% { opacity: 0.35; } }

/* Neon glowing cards */
[data-theme="fun"] .glass-card {
  border: 2px solid #00ffff !important;
  animation: fun-neon 2s ease-in-out infinite alternate;
}
@keyframes fun-neon {
  from { box-shadow: 0 0 10px rgba(255, 0, 255, 0.5), inset 0 0 8px rgba(0, 255, 255, 0.2); }
  to   { box-shadow: 0 0 24px rgba(0, 255, 255, 0.85), inset 0 0 14px rgba(255, 0, 255, 0.35); }
}

/* Spinning emoji icons */
[data-theme="fun"] .kpi-icon { display: inline-block; animation: fun-spin 3s linear infinite; }
@keyframes fun-spin { to { transform: rotate(360deg); } }

/* Scrolling marquee banner (top of page) */
.fun-marquee {
  overflow: hidden;
  white-space: nowrap;
  background: #000000;
  border-bottom: 3px solid #00ff00;
  position: relative;
  z-index: 1100;
}
.fun-marquee-text {
  display: inline-block;
  padding: 4px 0;
  color: #00ff00;
  font-weight: 700;
  font-family: "Comic Sans MS", cursive;
  animation: fun-marquee-scroll 22s linear infinite;
}
@keyframes fun-marquee-scroll { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }

/* "Under construction" badge, bottom-left */
.fun-construction {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 1100;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 800;
  color: #ffffff;
  -webkit-text-stroke: 1px #000000;
  font-family: "Comic Sans MS", cursive;
  background: repeating-linear-gradient(45deg, #ffcc00, #ffcc00 10px, #000000 10px, #000000 20px);
  animation: fun-blink 1.2s steps(2) infinite;
}

/* Retro visitor counter, bottom-right */
.fun-counter {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 1100;
  padding: 5px 10px;
  border-radius: 4px;
  background: #000000;
  border: 2px solid #00ffff;
  color: #00ffff;
  font-family: "Courier New", monospace;
  font-weight: 700;
}
.fun-counter-num { color: #00ff00; letter-spacing: 2px; }

/* Cursor sparkle trail particles (spawned by fun.js) */
.fun-spark {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  font-size: 14px;
  transform: translate(-50%, -50%);
  animation: fun-spark-fade 0.8s ease-out forwards;
}
@keyframes fun-spark-fade {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  to   { opacity: 0; transform: translate(-50%, -120%) scale(0.4) rotate(90deg); }
}