/*
 * Va-PoReg — Shared viz-page controls
 * Used by: countrystats, popstats, hm, histmap_regime
 *
 * Each page adds a small page-specific <style> block for layout
 * adaptations (viz-area, mobile breakpoints, etc.).
 */

/* ── Design tokens ────────────────────────────────────────── */
:root {
  --bg:          #1f2230;
  --surface:     #262a3a;
  --surface-alt: #2f3445;
  --border:      #3c4259;
  --text:        #dde1ea;
  --text-muted:  #8892a4;
  --accent:      #6478b8;
  --input-bg:    #1a1e2e;
  --radius:      5px;
  --nav-h:       64px;
  --fp-w:        185px;
  --fp-toggle-w: 24px;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
}

/* ── External CSS overrides ───────────────────────────────── */
button             { width: auto !important; }
input[type="number"] { margin-bottom: 0 !important; }

/* ── Page layout: nav → [main-area] → bottom-row → footer ── */
.page-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.main-area {
  flex: 1; min-height: 0;
  display: flex; flex-direction: row;
}

/* ── Legend panel (collapsible, left of viz) ──────────────── */
.legend-panel {
  flex-shrink: 0;
  width: calc(var(--lp-w, 274px) + var(--fp-toggle-w));
  display: flex; flex-direction: row;
  border-right: 1px solid var(--border);
  background: var(--surface);
  transition: width 0.22s ease;
  overflow: hidden;
}
.legend-panel.collapsed { width: var(--fp-toggle-w); }
.legend-toggle {
  flex-shrink: 0; width: var(--fp-toggle-w);
  background: none; border: none;
  border-left: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; font-size: 10px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: color 0.15s, background 0.15s;
  order: 1; /* keep toggle on the right in desktop row layout */
}
.legend-toggle:hover { color: var(--text); background: rgba(255,255,255,0.06); }
#legend { flex: 1; min-width: 0; height: 100% !important; border: none; }

/* ── Right filter panel ───────────────────────────────────── */
.filter-panel {
  flex-shrink: 0;
  width: calc(var(--fp-w) + var(--fp-toggle-w));
  display: flex; flex-direction: row;
  border-left: 1px solid var(--border);
  background: var(--surface);
  transition: width 0.22s ease;
  overflow: visible;
}
.filter-panel.collapsed { width: var(--fp-toggle-w); }
.filter-panel.collapsed .fp-body { display: none; }

.fp-toggle {
  flex-shrink: 0; width: var(--fp-toggle-w);
  background: none; border: none;
  border-right: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; font-size: 10px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: color 0.15s, background 0.15s;
}
.fp-toggle:hover { color: var(--text); background: rgba(255,255,255,0.06); }

.fp-body {
  flex: 1; min-width: 0;
  padding: 12px 10px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.fp-sep { border: none; border-top: 1px solid var(--border); margin: 2px 0; }

/* ── Filter panel tier structure ──────────────────────────── */
.fg-primary .cp-label { font-weight: 800; }
.fp-divider { border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 0; }
.fp-divider--major { margin-top: 4px; }
.filter-group { display: flex; flex-direction: column; gap: 3px; }
.filter-group-location { display: flex; flex-direction: column; gap: 6px; }

/* ── Bottom row: [year-bar / time-bar] + fp-column extension  */
.bottom-row { flex-shrink: 0; display: flex; flex-direction: row; }

/* .year-bar (countrystats/popstats) and .time-bar (histmap) */
.year-bar, .time-bar {
  flex: 1; min-width: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 8px 14px;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}
.fp-bottom {
  flex-shrink: 0;
  width: calc(var(--fp-w) + var(--fp-toggle-w));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  background: var(--surface);
  transition: width 0.22s ease;
}
.fp-bottom.collapsed { width: var(--fp-toggle-w); }

/* ── Labels ───────────────────────────────────────────────── */
.cp-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); white-space: nowrap;
}
.rng-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

/* ── Year number inputs ───────────────────────────────────── */
input[type="number"].year-inp {
  width: 64px; flex-shrink: 0;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text);
  padding: 4px 6px; font-size: 15px;
  font-family: 'Mulish', monospace; font-weight: 700; text-align: center;
}
input[type="number"].year-inp:focus { outline: none; border-color: var(--accent); }
input[type="number"].year-inp::-webkit-outer-spin-button,
input[type="number"].year-inp::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type="number"].year-inp { -moz-appearance: textfield; }

/* ── Slider wrap ──────────────────────────────────────────── */
.slider-wrap {
  flex: 1; min-width: 0; max-width: 480px;
  display: flex; align-items: center; gap: 6px;
}

/* ── Dual-range slider (countrystats, popstats) ───────────── */
.dual-range-wrap {
  flex: 1; min-width: 0;
  position: relative; height: 20px;
  display: flex; align-items: center;
}
.dual-range-track {
  position: absolute; left: 0; right: 0; height: 3px;
  border-radius: 2px; background: var(--input-bg);
  border: 1px solid rgba(255,255,255,0.1); pointer-events: none;
}
.dual-range-fill { display: none; }
.dual-range-wrap input[type="range"] {
  position: absolute; width: 100%; height: 3px;
  background: transparent; pointer-events: none;
  appearance: none; -webkit-appearance: none; outline: none;
}
.dual-range-wrap input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.dual-range-wrap input[type="range"]::-moz-range-track             { background: transparent; }
.dual-range-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: #ffffff; border: none; box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  cursor: pointer; pointer-events: all;
}
.dual-range-wrap input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: #ffffff; border: none; box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  cursor: pointer; pointer-events: all;
}
.dual-range-wrap input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.2);
}

/* ── Filter selects ───────────────────────────────────────── */
select.ctrl-select,
select.centered-dropdown {
  background-color: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%238892a4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 8px 5px;
  color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 5px 24px 5px 8px;
  font-size: 13px; font-family: 'Mulish', sans-serif;
  appearance: none; -webkit-appearance: none;
  cursor: pointer; width: 100%; min-width: 0; max-width: none;
}
select.ctrl-select:focus,
select.centered-dropdown:focus { outline: none; border-color: var(--accent); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; padding: 5px 12px; border-radius: var(--radius);
  font-size: 12.5px; font-family: 'Mulish', sans-serif; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fp-body .btn { width: 100%; }
.btn-primary {
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent); min-width: 86px;
}
.btn-primary:hover { background: #7388cc; border-color: #7388cc; }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); border-color: #556080; background: rgba(255,255,255,0.04); }

/* ── Info hint / popup ────────────────────────────────────── */
.info-hint { position: relative; }
.info-trigger {
  display: flex; align-items: center; justify-content: center;
  gap: 5px; padding: 5px 12px; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: transparent; font-size: 12.5px; font-family: 'Mulish', sans-serif;
  font-weight: 700; color: var(--text-muted); cursor: pointer; user-select: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.info-trigger i { color: var(--accent); }
.info-hint:hover .info-trigger,
.info-hint.open  .info-trigger { color: var(--text); border-color: #556080; background: rgba(255,255,255,0.04); }
.info-popup {
  display: none; position: absolute; top: 0;
  right: calc(100% + var(--fp-toggle-w) + 8px);
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px;
  min-width: 270px; font-size: 12px; color: var(--text-muted);
  line-height: 1.65; box-shadow: 0 4px 16px rgba(0,0,0,0.45); z-index: 50;
}
.info-popup ul { margin: 0; padding-left: 16px; }
.info-popup li { margin-bottom: 3px; }
.info-hint:hover .info-popup,
.info-hint.open  .info-popup { display: block; }

/* ── Timelapse group & mobile-only buttons (desktop: invisible/hidden) ── */
.tl-group { display: contents; } /* transparent to flex layout on desktop */
.mobile-filter-btn { display: none; }
.mobile-legend-btn  { display: none; }

/* ── Responsive base (mobile ≤ 767px) ────────────────────── */
@media (max-width: 767px) {
  /* dvh avoids iOS Safari browser-chrome overlap (unlike 100%) */
  html, body { height: 100dvh; }
  .main-area { flex-direction: column; }

  /* Legend panel: fixed bottom drawer, block layout avoids flex-basis issues */
  .legend-panel {
    display: block !important;
    position: fixed !important;
    bottom: 0; left: 0; right: 0; width: auto !important;
    max-height: 75vh;
    border-right: none; border-top: 1px solid var(--border);
    z-index: 200;
    transform: translateY(110%);
    transition: transform 0.3s ease;
    overflow-y: auto; overflow-x: hidden;
  }
  .legend-panel.mobile-open { transform: translateY(0); }
  /* Close strip at top (button is first in HTML on mobile) */
  .legend-toggle {
    display: flex !important;
    align-items: center !important; justify-content: center !important;
    width: 100% !important; min-height: 44px; height: 44px;
    border-left: none; border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  /* Legend iframe fills remaining space */
  #legend { display: block !important; width: 100%; height: 600px !important; }
  .mobile-legend-btn { display: inline-flex !important; }

  /* Filter panel: fixed bottom drawer — takes no page-flow space */
  .filter-panel {
    position: fixed !important;
    bottom: 0; left: 0; right: 0; width: auto !important;
    max-height: 65vh;
    flex-direction: column;
    border-left: none; border-top: 1px solid var(--border);
    z-index: 200;
    transform: translateY(110%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }
  .filter-panel.mobile-open { transform: translateY(0); }

  /* Close strip: sticky at top of open drawer */
  .fp-toggle {
    width: 100%; min-height: 44px; height: 44px;
    border-right: none; border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: sticky; top: 0;
    background: var(--surface);
  }
  .fp-body {
    flex-direction: row; flex-wrap: wrap;
    gap: 6px 14px; padding: 8px 12px;
  }
  .filter-group, .filter-group-location { flex: none; }
  .filter-group-location { flex-direction: row; gap: 10px; }
  .fp-divider, .fp-divider--major { display: none; }
  .fp-bottom { display: none; }
  .info-hint { display: none; }

  /* Time/year bar: slider gets its own full-width row */
  .slider-wrap { order: 10; flex: 0 0 100%; max-width: none; }
  .year-bar, .time-bar { justify-content: flex-start; flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
  .cp-sep { display: none; }
  .mobile-filter-btn { display: inline-flex !important; }

  /* Larger year-slider thumb for touch (histmap single-range only) */
  input[type="range"].year-slider::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -10px; }
  input[type="range"].year-slider::-moz-range-thumb { width: 22px; height: 22px; }
}