/* ── Design tokens ── */
:root {
  --bg:          #fdfcf9;
  --bg-2:        #f6f3ed;
  --bg-3:        #eeeae2;
  --ink:         #1a1a2e;
  --caption:     #6a6a7a;
  --border:      #e2ddd5;
  --border-dark: #ccc6bc;
  --accent:      #0f766e;
  --accent-h:    #f3f0ea;
  --shadow-sm:   rgba(0,0,0,0.04);
  --shadow-md:   rgba(0,0,0,0.09);
  --red:         #dc2626;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-lg: 16px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  font-size: var(--text-md);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

/* ── Header ── */
.header {
  flex-shrink: 0;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-3);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px var(--shadow-sm);
  z-index: 10;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.header-logo {
  height: 26px;
  width: auto;
  object-fit: contain;
}
.header-title-group {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.header-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.header-badge {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--caption);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 1px 8px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ── Loading indicator ── */
.loading-indicator {
  display: none;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  color: var(--caption);
}
body.loading .loading-indicator { display: flex; }

/* ── App body ── */
.app-body {
  flex: 1;
  min-height: 0;
  position: relative;
}

/* ── Upload pane ── */
.upload-pane {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--bg);
  overflow-y: auto;
}
.upload-card {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--sp-4);
  box-shadow: 0 4px 24px var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.upload-icon-wrap {
  color: var(--accent);
  display: flex;
  justify-content: center;
  padding-bottom: var(--sp-1);
}
.upload-heading {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.upload-sub {
  font-size: var(--text-sm);
  color: var(--caption);
  text-align: center;
  line-height: 1.5;
}

/* ── Dropzone ── */
.dropzone {
  position: relative;
  border: 2px dashed var(--border-dark);
  border-radius: 8px;
  padding: var(--sp-4);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.dropzone:hover, .dropzone.drag-over {
  border-color: var(--accent);
  background: #f0fafa;
}
.file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--caption);
  pointer-events: none;
}
.dropzone-inner svg { color: var(--accent); }
.dropzone-inner span { font-size: var(--text-sm); }
.dropzone-link {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dropzone-hint {
  font-size: var(--text-xs);
  color: var(--border-dark);
}

/* ── Example table ── */
.upload-example {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.example-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--caption);
}
.example-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.example-table th, .example-table td {
  padding: 5px 10px;
  text-align: left;
  border: 1px solid var(--border);
}
.example-table th {
  background: var(--bg-2);
  font-weight: 600;
  color: var(--caption);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.example-table td { color: var(--ink); }
.example-note {
  font-size: var(--text-xs);
  color: var(--caption);
  line-height: 1.5;
}

.upload-stats {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--caption);
  text-align: center;
  letter-spacing: 0.04em;
}
.upload-stats #visitsCount,
.upload-stats #mapsCount {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.upload-stats-sep {
  margin: 0 6px;
  color: var(--border-dark);
}

/* ── Map pane ── */
.map-pane {
  position: absolute;
  inset: 0;
  display: flex;
}

/* ── Sidebar ── */
.sidebar {
  /* Calm professional dark-blue palette — scoped via custom properties so
     every component inside the sidebar (selects, toggles, buttons, advanced
     section, facet-order list) re-skins automatically. */
  --bg:          #1e293b;
  --bg-2:        #2a3649;
  --bg-3:        #334155;
  --ink:         #f1f5f9;
  --caption:     #94a3b8;
  --border:      #3a4a61;
  --border-dark: #475569;
  --accent:      #3b82f6;
  --accent-h:    #2a3649;
  --shadow-sm:   rgba(0,0,0,0.20);
  --shadow-md:   rgba(0,0,0,0.35);

  width: 270px;
  flex-shrink: 0;
  background: var(--bg);
  color: var(--ink);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Lighten the dropdown chevron + placeholder for legible contrast on dark bg */
.sidebar .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.sidebar .input::placeholder { color: #64748b; }

/* Replace the hard-coded teal hover with a deeper blue */
.sidebar .btn-primary:hover { background: #2563eb; }

/* Brighter status colors so they pass contrast on the dark bg */
.sidebar .stat-ok   { color: #4ade80; }
.sidebar .stat-warn { color: #fbbf24; }
.sidebar .stat-bad  { color: #f87171; }

/* Slight lift so facet-order rows separate from the sidebar bg */
.sidebar .facet-order-item { background: var(--bg-2); }
.sidebar-section {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.sidebar-section:last-of-type { border-bottom: none; }
.section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.section-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--caption);
}

/* ── Toggle ── */
.toggle-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}
.toggle-wrap input[type=checkbox] { display: none; }
.toggle-label {
  font-size: var(--text-xs);
  color: var(--caption);
  font-weight: 500;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 99px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.toggle-wrap input:checked + .toggle-label {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── Fields ── */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--caption);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.field-text {
  font-size: var(--text-sm);
  color: var(--ink);
}
.select, .input {
  width: 100%;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  outline: none;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a6a7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}
.select:focus, .input:focus { border-color: var(--accent); }
.input::placeholder { color: var(--border-dark); }

.range-input {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
  margin-top: 2px;
}
.field-val {
  font-weight: 400;
  color: var(--ink);
  margin-left: 4px;
}

/* ── Match stats ── */
.match-stats {
  font-size: var(--text-xs);
  margin-top: 2px;
  min-height: 16px;
}
.stat-ok  { color: #15803d; }
.stat-warn { color: #b45309; }
.stat-bad { color: var(--red); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 4px 10px; font-size: var(--text-xs); }
.btn-ghost {
  padding: 5px 10px;
  background: transparent;
  color: var(--caption);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg-2); }
.btn-primary {
  padding: 7px 14px;
  background: var(--accent);
  color: #fff;
  width: 100%;
  justify-content: center;
}
.btn-primary:hover { background: #0c625b; }

/* ── Threshold fields ── */
.threshold-fields { opacity: 1; transition: opacity 0.15s; }
.threshold-fields.disabled { opacity: 0.35; pointer-events: none; }
.section-note {
  font-size: var(--text-xs);
  color: var(--caption);
  margin-top: 8px;
}

/* ── Advanced section ── */
.sidebar-section-advanced { padding: 0; }
.advanced-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  color: var(--caption);
  text-align: left;
}
.advanced-toggle:hover { background: var(--bg-2); }
.advanced-chevron {
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.advanced-toggle[aria-expanded="true"] .advanced-chevron {
  transform: rotate(180deg);
}
.advanced-body {
  padding: 0 var(--sp-3) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.advanced-subsection .section-hd { margin-top: 4px; }

/* ── Facet order list ── */
.facet-order-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}
.facet-order-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: grab;
  user-select: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.facet-order-item:hover {
  border-color: var(--accent);
}
.facet-order-item:active { cursor: grabbing; }
.facet-order-item.is-dragging {
  opacity: 0.45;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.facet-order-item.drop-before { box-shadow: 0 -2px 0 0 var(--accent); }
.facet-order-item.drop-after  { box-shadow:  0 2px 0 0 var(--accent); }

.facet-order-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  color: var(--caption);
  flex-shrink: 0;
}
.facet-order-item:hover .facet-order-grip { color: var(--accent); }

.facet-order-index {
  font-size: var(--text-xs);
  color: var(--caption);
  font-variant-numeric: tabular-nums;
  min-width: 14px;
}
.facet-order-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Sidebar footer ── */
.sidebar-footer {
  margin-top: auto;
  padding: var(--sp-3);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Utility ── */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hidden { display: none !important; }

/* ── Map content ── */
.map-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
}
.map-title-row {
  flex-shrink: 0;
  padding: 8px var(--sp-3);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  display: none;
}
.map-title-row.visible { display: block; }
.map-stage {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--bg-2);
}

/* Leaflet container must fill map-stage */
.map-stage .leaflet-container {
  width: 100% !important;
  height: 100% !important;
  background: var(--bg-2);
}

/* ── Map placeholder ── */
.map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
}

/* ── Map error ── */
.map-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--red);
  line-height: 1.6;
  padding: var(--sp-4);
  background: var(--bg-2);
}

/* ── Legend bar ── */
.legend-bar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  padding: 4px var(--sp-3);
  color: var(--caption);
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.legend-title {
  font-weight: 600;
  color: var(--ink);
  margin-right: 4px;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.legend-swatch {
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.12);
  flex-shrink: 0;
  display: inline-block;
}

/* Legend size variants */
.legend-sm           { font-size: 11px; }
.legend-sm .legend-swatch  { width: 12px; height: 12px; }
.legend-md           { font-size: 13px; }
.legend-md .legend-swatch  { width: 15px; height: 15px; }
.legend-lg           { font-size: 15px; }
.legend-lg .legend-swatch  { width: 20px; height: 20px; }

/* Floating legend panel */
.legend-float {
  position: absolute;
  z-index: 500;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 2px 16px var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  min-width: 110px;
}
.legend-float .legend-item { gap: 7px; }
.legend-float--top-left     { top: 16px;    left: 16px;  }
.legend-float--top-right    { top: 16px;    right: 16px; }
.legend-float--bottom-left  { bottom: 16px; left: 16px;  }
.legend-float--bottom-right { bottom: 16px; right: 16px; }

/* ── Leaflet tooltip ── */
.choropleth-tooltip {
  font-family: var(--font) !important;
  font-size: var(--text-sm) !important;
  background: rgba(26,26,46,0.92) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
  pointer-events: none !important;
}
.choropleth-tooltip::before { display: none !important; }
.leaflet-tooltip-top.choropleth-tooltip::before { display: none !important; }
.choropleth-tooltip strong { font-weight: 600; }

/* ── Facet small-multiples grid ── */
.facet-grid {
  display: grid;
  gap: 8px;
  padding: 8px;
  width: 100%;
  height: 100%;
  grid-template-columns: 1fr;
}
.facet-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facet-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facet-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facet-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.facet-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.facet-grid--1 .facet-cell {
  border: none;
  background: transparent;
}
.facet-cell-caption {
  flex-shrink: 0;
  padding: 5px 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
  color: var(--ink);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.facet-cell-map {
  flex: 1;
  min-height: 0;
  position: relative;
}
.facet-cell-map .leaflet-container {
  width: 100% !important;
  height: 100% !important;
  background: var(--bg-2);
}

/* ── Spinner ── */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.spinner-lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}
@keyframes spin { to { transform: rotate(360deg); } }