/* Wetter-Dashboard-Komponenten (Live-Messwerte + Wetterverlauf), gemeinsam
   genutzt von wetter.html. Ergaenzt assets/styles.css (Basis-Optik: Fonts,
   Hintergrund, Farbtokens) um die Chart-/Kachel-spezifischen Regeln, die in
   index.html inline definiert sind - hier dupliziert statt extrahiert, um
   das bestehende, funktionierende Hauptdashboard nicht anzufassen. */

:root {
  /* Chart color tokens - validated categorical palette (dataviz skill,
     node scripts/validate_palette.js), fixed slot order, reused everywhere
     the same metric appears. Sequential ramp lives in assets/weather.js. */
  --chart-surface: #ffffff;
  --chart-text-primary: #1f231f;
  --chart-text-secondary: #435041;
  --chart-muted: #7c8a75;
  --chart-grid: #e4e8df;
  --series-temp: #b5442e;
  --series-wind: #0e9280;
  --series-gust: #b98a1f;
  --series-rain: #2f6fa8;
  --series-rainrate: #663d8f;
  /* Was #a8386f - too close to --series-temp (normal-vision ΔE 10.6, below
     the 15 floor) once actually validated all-pairs. This one clears >=15
     against every other slot here. --series-wind vs --series-rain still
     sits at 13.8 (just under the floor) - left alone deliberately, since
     fixing it would mean giving up "wind=teal"/"rain=blue" (both used
     elsewhere with no ramp dependency, unlike --series-temp, but still a
     established, expected color to change without a stronger reason). */
  --series-pressure: #c431c4;
  /* Neutral, deliberately not part of the categorical series palette -
     direction is an annotation on the wind-speed line, not a fourth
     quantitative series. Darker than --chart-muted for better contrast
     as a small chart glyph (6.6:1 vs 3.65:1 on white). */
  --series-winddir: #556052;
}

main {
  width: min(1180px, 100% - 36px);
  margin: 24px auto 40px;
}

.panel {
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 34px);
  margin-bottom: 28px;
  border: 1px solid rgba(32, 68, 48, 0.08);
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
}

.section-head p {
  margin: 0;
  color: #56624f;
  font-size: 0.9rem;
}

.weather-live-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
  margin-top: 18px;
}

.windrose-tile {
  background: linear-gradient(165deg, #f8f6ee, #eff7ef);
  border-radius: 14px;
  padding: 14px;
  border: 1px solid rgba(32, 68, 48, 0.12);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.stat-tile {
  border: 1px solid rgba(32, 68, 48, 0.12);
  border-radius: 14px;
  padding: 14px 16px;
  background: linear-gradient(165deg, #f8f6ee, #eff7ef);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-tile-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-tile-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: none;
}

.stat-tile-label {
  color: #56624f;
  font-size: 0.85rem;
}

.stat-tile-value {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 700;
  color: var(--forest);
  font-variant-numeric: proportional-nums;
}

.stat-tile-sub {
  font-size: 0.78rem;
  color: #56624f;
}

.live-updated {
  font-size: 0.85rem;
  color: #56624f;
  margin: 14px 0 0;
}

.compass-tile {
  align-items: center;
}

.compass {
  width: 76px;
  height: 76px;
  flex: none;
}

.compass-needle {
  transform-origin: 50px 50px;
  transition: transform 0.4s ease;
}

.compass-flag {
  transform-origin: 50px 60px;
  animation: compass-flutter linear infinite;
}

@keyframes compass-flutter {
  0%, 100% { transform: rotate(calc(-1 * var(--flutter-amp, 6deg))); }
  50% { transform: rotate(var(--flutter-amp, 6deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .compass-flag {
    animation: none;
  }
}

.compass-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.compass-readout {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.controls {
  margin: 14px 0 20px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: end;
}

.controls label {
  display: grid;
  gap: 5px;
  font-size: 0.85rem;
  color: #56624f;
}

.controls select,
.controls input,
.controls button {
  font: inherit;
  border-radius: 10px;
  border: 1px solid rgba(32, 68, 48, 0.2);
  padding: 8px 12px;
  background: #fff;
  color: var(--text);
}

.controls input {
  min-width: 240px;
}

.controls button {
  background: var(--forest);
  color: #f4fff8;
  border-color: var(--forest);
  cursor: pointer;
  font-weight: 700;
}

.controls button:hover {
  filter: brightness(1.12);
}

.legacy-links {
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 0.88rem;
  color: #56624f;
}

.legacy-links a {
  color: var(--forest);
  font-weight: 700;
  text-decoration: none;
}

.legacy-links a:hover {
  text-decoration: underline;
}

.chart-stack {
  display: grid;
  gap: 24px;
}

.chart-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--chart-text-secondary);
  margin: 0 0 6px;
}

.chart-panel-sub {
  margin: -2px 0 10px;
  font-size: 0.82rem;
  color: #56624f;
}

.chart-wrap {
  position: relative;
  min-height: 260px;
}

.windrose-wrap {
  min-height: 220px;
}

.wetter-header {
  width: min(1180px, 100% - 36px);
  margin: 24px auto 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.wetter-header a {
  color: var(--forest);
  font-weight: 700;
  text-decoration: none;
}

.wetter-header a:hover {
  text-decoration: underline;
}

.wetter-header h1 {
  margin: 0;
}

.wetter-nav {
  width: min(1180px, 100% - 36px);
  margin: 12px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wetter-nav a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid rgba(32, 68, 48, 0.2);
  color: var(--forest);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: 0.2s ease;
}

.wetter-nav a:hover {
  background: var(--forest);
  color: #f4fff8;
  border-color: var(--forest);
}

@media (max-width: 900px) {
  .weather-live-grid {
    grid-template-columns: 1fr;
  }
}

/* Kalender-Heatmap (temperatur/Kalender.php) */

.toggle-group {
  display: inline-flex;
  gap: 6px;
  background: var(--cream);
  border: 1px solid rgba(32, 68, 48, 0.2);
  border-radius: 999px;
  padding: 4px;
  margin: 4px 0 20px;
}

.toggle-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: #56624f;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.toggle-btn[aria-pressed="true"] {
  background: var(--forest);
  color: #f4fff8;
}

.toggle-btn:not([aria-pressed="true"]):hover {
  color: var(--text);
}

.toggle-btn:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}

.hm-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}

.hm-inner {
  width: max-content;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hm-months {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 14px;
  margin-left: 26px;
  height: 16px;
}

.hm-month-label {
  font-size: 0.72rem;
  color: var(--chart-muted);
  align-self: end;
}

.hm-body {
  display: flex;
  gap: 6px;
}

.hm-weekdays {
  display: grid;
  grid-template-rows: repeat(7, 14px);
  gap: 3px;
  width: 20px;
  flex: none;
}

.hm-weekdays span {
  font-size: 0.66rem;
  color: var(--chart-muted);
  display: flex;
  align-items: center;
}

.hm-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 14px);
  gap: 3px;
}

.cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: none;
  padding: 0;
  cursor: default;
}

.cell.pad {
  visibility: hidden;
}

.cell.day {
  cursor: pointer;
}

.cell.day:hover,
.cell.day:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 1px;
}

.cell.no-data,
.legend-nodata {
  background-color: var(--chart-grid);
  background-image: repeating-linear-gradient(45deg, rgba(124, 138, 117, 0.55) 0 2px, transparent 2px 4px);
}

.cell.future {
  background: var(--chart-grid);
  opacity: 0.55;
}

.legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--chart-muted);
  flex-wrap: wrap;
}

.legend-gradient {
  width: 160px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(to right,
    #1d4e78, #3d74a0, #8fb9d6, #f2efe4, #f4d9bd, #e3a374, #cc6a44, #b5442e);
}

.legend-swatches {
  gap: 14px;
}

.legend-swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-swatch i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

#hmTooltip {
  position: fixed;
  pointer-events: none;
  background: var(--forest);
  color: #f4fff8;
  font-size: 0.78rem;
  padding: 7px 10px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 10;
  max-width: 220px;
}

#hmTooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

#hmTooltip strong {
  display: block;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #hmTooltip {
    transition: none;
  }
}