/*
 * File: heatmap.css
 * Version: mmdb-1.4.3-claude
 * Munich Musicians DB - Heatmap/Wordcloud Styles
 * Styling for interactive wordcloud visualization
 *
 * Updated to use filter-section-* classes matching directory-advanced.php layout
 * Fixed: Mobile compatibility - improved canvas sizing and minimum heights
 */

/* ---------- Heatmap Container ---------- */
.imm-heatmap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.imm-heatmap h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--mmdb-ink);
  text-align: center;
}

/* ---------- Filter Controls ----------
   Flaeche, Zeilen, Pillen und Ankreuzfelder kommen aus theme.css 5.10
   (.mmdb-filterbar) und 4.3 (.mmdb-panel) - dieselbe Leiste wie in der
   Artists/Bands-Suche. Bis 2026-08-29 stand hier eine zweite, abweichende
   Definition derselben Klassennamen; die Leiste sah auf zwei Laschen derselben
   Seite verschieden aus und folgte auf keiner dem Prototyp. Der
   Zuruecksetzen-Knopf holt seine Form aus der Knopf-Ebene (5.1) - er trug hier
   Versalien, die es laut Vorgabe auf keinem Knopf mehr gibt. */
.heatmap-controls { margin-bottom: 24px; }

/* ---------- Canvas Wrapper ---------- */
.heatmap-canvas-wrapper {
  position: relative;
  background: var(--mmdb-card);
  border-radius: 8px;
  padding: 20px;
  min-height: 500px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

#heatmap-canvas {
  display: block;
  max-width: 100%;
  cursor: default;
}

/* ---------- Loading State ---------- */
.heatmap-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  color: var(--mmdb-ink-muted);
}

.loading-spinner {
  border: 4px solid var(--mmdb-line-soft);
  border-top: 4px solid var(--mmdb-accent);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.heatmap-loading p {
  margin: 0;
  font-size: 0.95rem;
}

/* ---------- Empty State ---------- */
.heatmap-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--mmdb-ink-faint);
}

.heatmap-empty p {
  margin: 0;
  font-size: 1.1rem;
}

/* ---------- Stats Info ---------- */
.heatmap-stats {
  text-align: center;
  margin-top: 20px;
  padding: 15px;
  background: var(--mmdb-info-bg);
  border-radius: 6px;
  color: var(--mmdb-accent-deep);
  font-size: 0.95rem;
}

.heatmap-stats p {
  margin: 0;
}

/* ---------- Responsive Design ---------- */
@media (max-width: 768px) {
  .imm-heatmap {
    padding: 15px;
  }

  .imm-heatmap h2 {
    font-size: 1.5rem;
  }

  .heatmap-canvas-wrapper {
    min-height: 400px;
    padding: 15px;
  }

}

@media (max-width: 480px) {
  .imm-heatmap h2 {
    font-size: 1.3rem;
  }

  .heatmap-canvas-wrapper {
    min-height: 450px;
    padding: 10px;
  }

  #heatmap-canvas {
    /* Ensure canvas fits within viewport on mobile */
    width: 100% !important;
    height: auto !important;
    min-height: 450px;
  }
}

/* ---------- Print Styles ---------- */
@media print {
  .heatmap-controls,
  .heatmap-stats {
    display: none;
  }

  .heatmap-canvas-wrapper {
    box-shadow: none;
    border: 1px solid var(--mmdb-line);
  }
}

/* ============================================================================
   RE-SKIN 2026-08-28: Steuerleiste als dunkles Panel (wie .directory-search auf
   der Discovery-Seite - die Heatmap ist deren dritte Lasche und muss dieselbe
   Optik tragen). Nur Farben/Rahmen, Layout unveraendert.
   ========================================================================= */
body.mmdb-skin .heatmap-controls {
  background: var(--mmdb-panel);
  border: 1px solid var(--mmdb-line-dark);
  border-radius: var(--mmdb-r-card);
  box-shadow: none;
  color: var(--mmdb-text);
}
body.mmdb-skin .heatmap-controls select,
body.mmdb-skin .heatmap-controls input[type="text"],
body.mmdb-skin .heatmap-controls input[type="search"] {
  background: var(--mmdb-bg);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--mmdb-text);
}
/* Die Wolke selbst bleibt eine weisse Karte */
body.mmdb-skin .heatmap-canvas-container,
body.mmdb-skin .heatmap-wordcloud,
body.mmdb-skin .heatmap-results {
  background: var(--mmdb-card);
  color: var(--mmdb-ink-soft);
  border-radius: var(--mmdb-r-card);
}
/* Knopf im dunklen Steuerpanel: Geister-Optik statt weissem Kasten */
body.mmdb-skin .heatmap-controls .button,
body.mmdb-skin .heatmap-controls .button-secondary,
body.mmdb-skin .heatmap-controls #reset-filters {
  background: transparent;
  border: 1px solid var(--mmdb-line-dark2);
  color: var(--mmdb-text);
  box-shadow: none;
}
body.mmdb-skin .heatmap-controls .button:hover,
body.mmdb-skin .heatmap-controls .button-secondary:hover,
body.mmdb-skin .heatmap-controls #reset-filters:hover {
  background: var(--mmdb-fill-dark);
  color: #fff;
}