/* ==========================================================================
   WAARNEMINGEN COCKPIT VIEWPORT & LAYOUT (DEFINITIEVE VERSIE)
   ========================================================================== */

/* Parameter Rijen & Actieve Glow */

.param-unit {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--panel-border);
}

/* Windstroomlijnen Toggle Knop */

.wn-toggle-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
}

.wn-toggle-btn.active .wn-toggle-badge {
  background: rgba(63, 185, 80, 0.2);
  color: var(--status-green);
  border-color: var(--status-green);
}

/* 4. Grafiek Tooltip Fix (Geen oranje balk meer!) */
.chart-container {
  position: relative;
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  margin-bottom: 8px;
}

.wn-chart-tooltip-box {
  pointer-events: none !important;
  z-index: 100 !important;
  transform: translate(-50%, -130%) !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8) !important;
}

@media (max-width: 992px) {
  .waarnemingen-layout {
    grid-template-columns: 1fr;
    height: auto;
    overflow-y: auto;
  }
  .wn-map-viewport {
    height: 65vh;
  }
}

/* Dynamische Interactieve Waarde-Badges op de kaart */

.station-badge-trend {
  line-height: 1;
}

/* ==========================================================================
   MODULE: WAARNEMINGEN (RESPONSIVE DESKTOP & MOBIEL)
   ========================================================================== */

/* 1. Desktop Basis Grid (1fr 340px) */
#waarnemingen-workspace,
.waarnemingen-layout {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
  padding: 12px 16px;
  background-color: var(--bg-base);
  z-index: 450;
  overflow: hidden;
  box-sizing: border-box;
}

/* Harde teardown guard conform architecture.md */
#waarnemingen-workspace.hidden,
.waarnemingen-layout.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -10 !important;
}

/* Kaart Viewport Container */
.wn-map-viewport {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--gray-975);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  overflow: hidden;
}

/* Kaart Stage (behoudt Benelux verhouding) */
.wn-map-stage {
  position: relative;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 9.5 / 12;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wn-map-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}

.wn-wind-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  opacity: 0.88;
  transition: opacity 0.25s ease;
}
.wn-wind-canvas.hidden { opacity: 0; }

.wn-pins-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
}

/* Station Pins & Badges */
.station-pin {
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  z-index: 20;
  transition: background-color 0.15s ease, border-color 0.15s ease, border-width 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.station-pin:hover {
  background-color: rgba(255, 107, 53, 0.4);
  border: 2px solid var(--accent-orange);
  box-shadow: 0 0 12px var(--accent-orange);
  transform: translate(-50%, -50%) scale(1.3);
}

.station-badge {
  position: absolute;
  transform: translate(-50%, -100%);
  background: rgba(11, 15, 23, 0.94);
  border: 1px solid var(--accent-orange);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
  z-index: 25;
  transition: transform 0.15s ease, background 0.15s ease;
  user-select: none;
  margin-top: -6px;
  white-space: nowrap;
}
.station-badge:hover {
  transform: translate(-50%, -105%) scale(1.12);
  background: #121824;
  box-shadow: 0 0 16px rgba(255, 107, 53, 0.4);
  z-index: 35;
}

.station-badge-val {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}

.station-badge-trend {
  font-size: 0.65rem;
  font-weight: 800;
}
.trend-up { color: var(--accent-orange); }
.trend-down { color: var(--status-blue); }
.trend-neutral { color: var(--gray-400); }

.wn-station-tooltip {
  position: absolute;
  display: none;
  background: rgba(13, 17, 23, 0.96);
  color: #ffffff;
  backdrop-filter: blur(12px);
  border: 1px solid var(--accent-orange);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: 0.72rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 40;
  min-width: 160px;
  transform: translate(-50%, -120%);
}

.wn-pill-top {
  position: absolute;
  top: 12px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-bg);
  color: var(--text-main);
  backdrop-filter: blur(8px);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-2xl);
  padding: 5px 12px;
  font-size: 0.74rem;
  z-index: 25;
}

/* Worker loopt achter: nieuwste meting te oud */
.wn-pill-stale {
  color: var(--status-yellow);
  font-weight: 700;
  border-left: 1px solid var(--panel-border);
  padding-left: 8px;
}

/* Tijdlijn Scrubber Dock */
.wn-map-viewport .floating-timeline-dock {
  position: absolute !important;
  bottom: 14px !important;
  top: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 620px !important;
  padding: 8px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 30 !important;
  background: var(--panel-bg);
  color: var(--text-main);
  backdrop-filter: blur(10px);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
}

.wn-timeline-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  flex: 1 !important;
  width: 100% !important;
  min-width: 120px !important;
  height: 6px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 3px !important;
  outline: none !important;
  cursor: pointer !important;
  accent-color: var(--accent-orange) !important;
}

/* Rechter Sidebar Panel */
.wn-sidebar-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  overflow-y: auto;
  padding-right: 2px;
}

.wn-sidebar-panel .floating-panel {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  margin: 0 !important;
  flex-shrink: 0;
}

.wn-param-btn,
.wn-toggle-btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  color: var(--text-main);
  font-family: var(--font-ui);
  font-size: 0.78rem;
}

.wn-param-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 107, 53, 0.4);
}

.wn-param-btn.active {
  background: rgba(255, 107, 53, 0.14) !important;
  border-color: var(--accent-orange) !important;
  box-shadow: 0 0 14px rgba(255, 107, 53, 0.35) !important;
}
.wn-param-btn.active span:first-child { color: #ffffff; font-weight: 700; }
.wn-param-btn.active .param-unit {
  color: var(--accent-orange) !important;
  background: rgba(255, 107, 53, 0.2) !important;
  border-color: rgba(255, 107, 53, 0.4) !important;
}

.wn-toggle-btn.active {
  border-color: var(--status-green) !important;
  background: rgba(63, 185, 80, 0.1) !important;
}

.chart-point { cursor: pointer; transition: r 0.15s ease; }
.chart-point:hover { r: 5.5; fill: var(--accent-orange) !important; stroke: #fff !important; stroke-width: 2.5; }

.wn-chart-tooltip-box {
  position: absolute !important;
  display: none;
  background: rgba(13, 17, 23, 0.96) !important;
  border: 1px solid var(--accent-orange) !important;
  color: #ffffff !important;
  padding: 3px 8px !important;
  border-radius: var(--radius-xs) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  pointer-events: none;
  z-index: 100;
  transform: translate(-50%, -130%);
  white-space: nowrap;
}

/* Station detailkaart: extra meetvelden, weertype en grafiek-tabs */
#waarnemingen-workspace .wn-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
#waarnemingen-workspace .wn-detail-item { padding: 4px 6px; min-width: 0; }
#waarnemingen-workspace .wn-detail-label { font-size: 9px; color: var(--gray-400); }
#waarnemingen-workspace .wn-detail-value {
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#waarnemingen-workspace .wn-detail-wx {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
}
#waarnemingen-workspace .wn-detail-wx:empty { display: none; }

#waarnemingen-workspace .wn-chart-kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
}
#waarnemingen-workspace .wn-chart-uren { display: flex; gap: 4px; }
#waarnemingen-workspace .wn-chart-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
#waarnemingen-workspace .wn-chart-tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#waarnemingen-workspace .wn-chart-tab:hover { border-color: rgba(255, 107, 53, 0.4); }
#waarnemingen-workspace .wn-chart-tab.active {
  color: var(--accent-orange);
  border-color: var(--accent-orange);
  background: rgba(255, 107, 53, 0.14);
}

/* Weertype-iconen (WaWa) op badges, pins, tooltip en detailkaart */
#waarnemingen-workspace .station-badge-wx { font-size: 0.66rem; line-height: 1; }
#waarnemingen-workspace .station-pin-wx {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}
#waarnemingen-workspace .wx-onweer { color: #facc15; }
#waarnemingen-workspace .wx-regen { color: var(--status-blue); }
#waarnemingen-workspace .wx-sneeuw { color: var(--slate-200); }
#waarnemingen-workspace .wx-ijzel { color: #67e8f9; }
#waarnemingen-workspace .wx-hagel { color: #f0abfc; }
#waarnemingen-workspace .wx-mist { color: var(--slate-300); }

/* ==========================================================================
   2. MOBIELE GEOPTIMALISEERDE LAYOUT (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  #waarnemingen-workspace,
  .waarnemingen-layout {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px 10px 48px 10px !important;
    gap: 12px !important;
  }

  /* De kaartviewport behoudt zijn hoogte en klapt nooit in */
  .wn-map-viewport {
    height: 56vh !important;
    min-height: 380px !important;
    max-height: 520px !important;
    width: 100% !important;
    flex: none !important;
    border-radius: var(--radius-xl) !important;
  }

  .wn-map-stage {
    width: 100%;
    height: 100%;
  }

  .wn-pill-top {
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    font-size: 0.68rem;
  }

  /* Tijdlijn dock op mobiel */
  .wn-map-viewport .floating-timeline-dock {
    bottom: 8px !important;
    width: calc(100% - 16px) !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    border-radius: var(--radius-md) !important;
  }

  .wn-timeline-slider {
    min-width: 80px !important;
    height: 8px !important;
  }

  /* Sidebar schuift direct netjes onder de kaart */
  .wn-sidebar-panel {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding-right: 0 !important;
    gap: 10px !important;
    flex: none !important;
  }

  .wn-sidebar-panel .floating-panel {
    border-radius: var(--radius-lg) !important;
    padding: 10px 12px !important;
  }

  /* Buttons in 2 overzichtelijke kolommen voor mobiel */
  .wn-param-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .wn-param-btn,
  .wn-toggle-btn {
    padding: 8px 8px !important;
    font-size: 0.72rem !important;
    min-height: 38px !important;
  }

  /* Dagrecords compact in een 2x2 raster */
  .wn-records-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .wn-records-grid .feed-item {
    padding: 6px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .station-badge {
    padding: 1px 4px !important;
  }
  .station-badge-val {
    font-size: 0.64rem !important;
  }
}

/* ==========================================================================
   HIGH-END POLISH: micro-interacties, custom slider & glas-highlights
   ========================================================================== */

/* Uniforme premium easing + druk-feedback op alle klikbare elementen */
#waarnemingen-workspace .wn-param-btn,
#waarnemingen-workspace .wn-toggle-btn,
.waarnemingen-layout .wn-param-btn,
.waarnemingen-layout .wn-toggle-btn {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
#waarnemingen-workspace .wn-param-btn:hover,
#waarnemingen-workspace .wn-toggle-btn:hover,
.waarnemingen-layout .wn-param-btn:hover,
.waarnemingen-layout .wn-toggle-btn:hover {
  transform: translateY(-1px);
}
#waarnemingen-workspace .wn-param-btn:active,
#waarnemingen-workspace .wn-toggle-btn:active,
.waarnemingen-layout .wn-param-btn:active,
.waarnemingen-layout .wn-toggle-btn:active {
  transform: scale(0.97);
}

/* Glas-highlight op de zwevende panelen, alsof er licht op het glas valt */
#waarnemingen-workspace .wn-sidebar-panel .floating-panel,
#waarnemingen-workspace .wn-pill-top,
#waarnemingen-workspace .wn-map-viewport .floating-timeline-dock,
.waarnemingen-layout .wn-sidebar-panel .floating-panel,
.waarnemingen-layout .wn-pill-top,
.waarnemingen-layout .wn-map-viewport .floating-timeline-dock {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Custom tijdlijn-slider (vervangt de kale OS-slider) */
#waarnemingen-workspace .wn-timeline-slider,
.waarnemingen-layout .wn-timeline-slider {
  background: rgba(255, 255, 255, 0.12) !important;
}
#waarnemingen-workspace .wn-timeline-slider::-webkit-slider-runnable-track,
.waarnemingen-layout .wn-timeline-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: transparent;
}
#waarnemingen-workspace .wn-timeline-slider::-webkit-slider-thumb,
.waarnemingen-layout .wn-timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-top: -5px;
  background: #ffffff;
  border: 2px solid var(--accent-orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.18), 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease;
  cursor: pointer;
}
#waarnemingen-workspace .wn-timeline-slider::-webkit-slider-thumb:hover,
.waarnemingen-layout .wn-timeline-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(255, 107, 53, 0.22), 0 2px 8px rgba(0, 0, 0, 0.55);
}
#waarnemingen-workspace .wn-timeline-slider::-moz-range-track,
.waarnemingen-layout .wn-timeline-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
}
#waarnemingen-workspace .wn-timeline-slider::-moz-range-thumb,
.waarnemingen-layout .wn-timeline-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--accent-orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.18);
  cursor: pointer;
}

/* Slanke, thema-eigen scrollbar in de rechter zijbalk */
#waarnemingen-workspace .wn-sidebar-panel,
.waarnemingen-layout .wn-sidebar-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 107, 53, 0.35) transparent;
}
#waarnemingen-workspace .wn-sidebar-panel::-webkit-scrollbar,
.waarnemingen-layout .wn-sidebar-panel::-webkit-scrollbar {
  width: 6px;
}
#waarnemingen-workspace .wn-sidebar-panel::-webkit-scrollbar-thumb,
.waarnemingen-layout .wn-sidebar-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 53, 0.35);
  border-radius: var(--radius-sm);
}
#waarnemingen-workspace .wn-sidebar-panel::-webkit-scrollbar-thumb:hover,
.waarnemingen-layout .wn-sidebar-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 107, 53, 0.55);
}
#waarnemingen-workspace .wn-sidebar-panel::-webkit-scrollbar-track,
.waarnemingen-layout .wn-sidebar-panel::-webkit-scrollbar-track {
  background: transparent;
}

/* Nette focus-states voor toetsenbordgebruik i.p.v. de default blauwe outline */
#waarnemingen-workspace .wn-param-btn:focus-visible,
#waarnemingen-workspace .wn-toggle-btn:focus-visible,
#waarnemingen-workspace .wn-timeline-slider:focus-visible,
.waarnemingen-layout .wn-param-btn:focus-visible,
.waarnemingen-layout .wn-toggle-btn:focus-visible,
.waarnemingen-layout .wn-timeline-slider:focus-visible {
  outline: 2px solid var(--accent-orange);
  outline-offset: 2px;
}

/* ==========================================================================
   VOYAGER (LICHT THEMA) OVERRIDES
   ========================================================================== */
body.theme-voyager #waarnemingen-workspace .wn-param-btn.active span:first-child,
body.theme-voyager .waarnemingen-layout .wn-param-btn.active span:first-child {
  color: var(--text-main) !important;
}

body.theme-voyager #waarnemingen-workspace .param-unit,
body.theme-voyager .waarnemingen-layout .param-unit {
  background: rgba(0, 0, 0, 0.06) !important;
}

body.theme-voyager #waarnemingen-workspace .wn-toggle-badge,
body.theme-voyager .waarnemingen-layout .wn-toggle-badge {
  background: rgba(0, 0, 0, 0.05) !important;
}

body.theme-voyager #waarnemingen-workspace .wn-timeline-slider,
body.theme-voyager .waarnemingen-layout .wn-timeline-slider {
  background: rgba(0, 0, 0, 0.12) !important;
}

/* Lichte iconkleuren zijn onleesbaar op het lichte detailpaneel (badges en tooltip blijven donker) */
body.theme-voyager #waarnemingen-workspace .wn-detail-wx .wx-sneeuw,
body.theme-voyager #waarnemingen-workspace .wn-detail-wx .wx-mist {
  color: var(--slate-500);
}

body.theme-voyager #waarnemingen-workspace .wn-timeline-slider::-moz-range-track,
body.theme-voyager .waarnemingen-layout .wn-timeline-slider::-moz-range-track {
  background: rgba(0, 0, 0, 0.12) !important;
}

body.theme-voyager #waarnemingen-workspace .wn-pill-stale {
  color: var(--status-orange-strong);
}
/* ==========================================================================
   PNG-EXPORT & "BESPREEK IN METEOCONNECT" (rechtsboven in de kaartviewport)
   ========================================================================== */
#waarnemingen-workspace .wn-share-actions {
  top: 12px;
  right: 12px;
  z-index: 30;
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: var(--radius-xl);
}

#waarnemingen-workspace .wn-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 107, 53, 0.35);
  background: rgba(255, 107, 53, 0.12);
  color: var(--accent-orange);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#waarnemingen-workspace .wn-share-btn:hover {
  background: var(--accent-orange);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 107, 53, 0.35);
}

#waarnemingen-workspace .wn-share-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

#waarnemingen-workspace .wn-share-btn:disabled:hover {
  background: rgba(255, 107, 53, 0.12);
  color: var(--accent-orange);
  box-shadow: none;
}

#waarnemingen-workspace .wn-btn-bespreek .mc-label-kort { display: none; }

/* Smalle kaart: kort label; op telefoons de knoppen onder de parameterpil */
@media (max-width: 1400px) {
  #waarnemingen-workspace .wn-btn-bespreek .mc-label-lang { display: none; }
  #waarnemingen-workspace .wn-btn-bespreek .mc-label-kort { display: inline; }
}

/* Telefoon: naast de parameterpil blijven (niet over de stationsbadges);
   de PNG-knop toont dan alleen het icoon */
@media (max-width: 600px) {
  #waarnemingen-workspace .wn-share-actions {
    top: 10px;
    right: 8px;
    padding: 3px;
    gap: 4px;
  }
  #waarnemingen-workspace .wn-share-btn { padding: 5px 8px; }
  #waarnemingen-workspace #wn-btn-png span { display: none; }
}

/* Stationskaart pas tonen na het kiezen van een station (er is geen algemene .hidden-regel) */
#waarnemingen-workspace #wn-station-detail-card.hidden { display: none; }