/* ============================================
   Compare UI – Base
============================================ */

.compare-ui { margin-bottom: 8px; }

.compare-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 8px 0;
}

/* Globales Label-Layout: dezent, ohne Layout zu erzwingen
   (Panels überschreiben das gezielt) */
.compare-row label{
  display: flex;
  gap: 8px;
  align-items: center;
}

/* legacy/optional */
.compare-row .box{
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
}

.compare-row button{ padding: 6px 10px; }

*,
*::before,
*::after{ box-sizing: border-box; }

/* ============================================
   Compare Table
============================================ */

#compare-table table th,
#compare-table table td{
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

#compare-table table tbody tr:hover{ background: #fafafa; }

/* ============================================
   Qualitätsanzeige (Meta)
============================================ */

.compare-meta{
  margin: 8px 0;
  padding: 10px 12px;
  background: #f5f7f9;
  border: 1px solid #e6e6e6;
  border-left: 8px solid #999;
  color: #333;
}

.compare-meta__title{
  display:flex;
  gap:10px;
  align-items:baseline;
  font-weight: 600;
  margin-bottom: 8px;
}

.compare-meta__status{ font-weight: 600; opacity: .9; }

.compare-meta__badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.compare-meta--ok{ border-left-color:#2e7d32; }
.compare-meta--warn{ border-left-color:#f9a825; }
.compare-meta--bad{ border-left-color:#c62828; }

.compare-badge{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: .9rem;
  background: #fff;
  border: 1px solid #e6e6e6;
}

.compare-badge--ok{ box-shadow: inset 0 0 0 999px rgba(46,125,50,0.06); }
.compare-badge--warn{ box-shadow: inset 0 0 0 999px rgba(249,168,37,0.08); }
.compare-badge--bad{ box-shadow: inset 0 0 0 999px rgba(198,40,40,0.08); }

.compare-badge__extra{ opacity:.8; font-weight: 500; }

/* ============================================
   Gemeinsamer Form-Look (Select/Input)
============================================ */

.compare-ui select,
.compare-ui input{
  padding: 8px 10px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background: #fff;
  font-weight: 500;
}

.compare-ui select:focus,
.compare-ui input:focus{
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74,144,226,0.15);
}

/* ============================================
   Top Controls: Metrik/Modus/Button (Card-Look)
   (HTML: .compare-row.compare-top + labels .compare-field + button .compare-run)
============================================ */

.compare-top{
  padding: 12px;
  border: 1px solid #e6e6e6;
  background: #f5f7f9;
  gap: 16px;
  align-items: flex-end;
}

.compare-top .compare-field{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-weight: 600;
  color: #333;
  min-width: 200px;
}

.compare-top select{
  width: 240px;
  max-width: 100%;
}

.compare-run{
  padding: 10px 14px;
  border-radius: 5px;
  border: 1px solid var(--sppb-farbe-5);
  background: var(--sppb-farbe-4);
  color: var(--sppb-text);
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .12s ease, transform .06s ease, box-shadow .12s ease;
}

.compare-run:hover{ filter: brightness(0.97); }
.compare-run:active{ transform: translateY(1px); }
.compare-run:focus{ box-shadow: 0 0 0 3px rgba(74,144,226,0.25); }

@media (min-width: 900px){
  .compare-run{ margin-left: auto; }
}

@media (max-width: 899px){
  .compare-top .compare-field{ min-width: 160px; }
  .compare-top select{ width: 100%; }
  .compare-run{ width: 100%; }
}

/* ============================================
   MüJ Panel (Card-Look)
   (HTML: #panel-moy + optional .moy-hint)
============================================ */

#panel-moy{
  padding: 12px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #f5f7f9;
}

#panel-moy label{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-weight: 600;
  color: #333;
  min-width: 160px;
}

#panel-moy select,
#panel-moy input{
  width: 200px;
  max-width: 100%;
}

#panel-moy.compare-row{
  gap: 16px;
  align-items: flex-end;
}

#panel-moy .moy-hint{
  align-self: flex-end;
  padding-bottom: 6px;
  opacity: .75;
  font-size: .95rem;
  white-space: nowrap;
}

@media (min-width: 900px){
  #panel-moy{
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-start;
  }
}

@media (max-width: 899px){
  #panel-moy{
    display: flex;
    flex-wrap: wrap;
  }
  #panel-moy label{ min-width: 140px; }
  #panel-moy .moy-hint{ white-space: normal; }
}

/* ============================================
   A/B Panel (Card-Look)
   (HTML: .compare-row.compare-ab + .compare-period Cards)
============================================ */

.compare-ab{
  padding: 12px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #f5f7f9;
  gap: 18px;
  align-items: stretch;
}

.compare-period{
  flex: 1;
  min-width: 260px;
  padding: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e3e3e3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.compare-period strong{
  font-size: 1rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}

/* ✅ LETZTE ÄNDERUNG:
   Desktop: Von / input / Bis / input in einer Zeile
   Mobile: sauber umbrechen (vertikal) */
.compare-period label{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #444;
  flex-wrap: wrap;
}

.compare-period input[type="date"]{
  min-width: 160px;
}

@media (min-width: 900px){
  .compare-ab{
    display: flex;
    flex-wrap: nowrap;
  }
}

@media (max-width: 899px){
  .compare-ab{
    display: flex;
    flex-wrap: wrap;
  }

  .compare-period label{
    flex-direction: column;
    align-items: flex-start;
  }

  .compare-period input[type="date"]{
    width: 100%;
    min-width: 0;
  }
}

/* A/B Datumsauswahl: Von / Input / Bis / Input in einer Zeile (Desktop) */
.compare-range{
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 10px 12px;
  align-items: center;
}

/* Labels etwas ruhiger */
.compare-range__label{
  font-weight: 600;
  color: #444;
  white-space: nowrap;
  padding-left: 5px;
}

/* Wichtig: Template-CSS aushebeln, das Inputs auf 100%/block setzt */
.compare-period .compare-range input[type="date"]{
  width: 100% !important;
  min-width: 160px;
  display: block;
}

/* Wenn es eng wird: sauber umbrechen */
@media (max-width: 935px){
  .compare-range{
    grid-template-columns: 1fr;
  }
  .compare-period .compare-range input[type="date"]{
    min-width: 0;
  }
}

/* ============================================
   Compare Chart
============================================ */

#compare-chart {
  padding-top: 50px;
}

/* ==========================================
   Custom Tooltip (Chart.js Style) – Overlay
   ========================================== */

/* Ziel-Element: bleibt „anklickbar“/verständlich */
[data-tooltip] {
  cursor: help;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Die alten Pseudo-Tooltips deaktivieren,
   damit sie keinen Overflow/Scrollbalken erzeugen */
[data-tooltip]::before,
[data-tooltip]::after {
  display: none !important;
}

/* Overlay Tooltip (Chart.js-ish) */
.tooltip-overlay {
  position: fixed;
  z-index: 99999;

  /* Max Breite: nicht über den Viewport hinaus */
  max-width: min(340px, calc(100vw - 24px));

  background: rgba(30, 30, 30, 0.95);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.25;
  padding: 6px 10px;
  border-radius: 6px;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);

  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.14s ease, transform 0.14s ease;

  /* Tooltip darf umbrechen (sonst wird er zu lang) */
  white-space: normal;
}

/* Sichtbar */
.tooltip-overlay.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* kleiner Pfeil */
.tooltip-overlay::after {
  content: "";
  position: absolute;
  left: var(--arrow-x, 50%);
  bottom: -6px;
  transform: translateX(-50%);

  border-width: 6px;
  border-style: solid;
  border-color: rgba(30, 30, 30, 0.95) transparent transparent transparent;
}

/* Wenn Tooltip unter dem Element sitzt, Pfeil nach oben */
.tooltip-overlay.is-below::after {
  top: -6px;
  bottom: auto;
  border-color: transparent transparent rgba(30, 30, 30, 0.95) transparent;
}

/* ==========================================
Fix: Scrollbar ausblenden (cross-browser)   
========================================== */

.compare-table-wrap{
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #ddd;
}

/* Scrollbar komplett verstecken – bleibt trotzdem scrollbar */
.compare-table-wrap{
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge Legacy */
}
.compare-table-wrap::-webkit-scrollbar{
  display: none;                  /* Chrome/Safari */
}

/* ============================================
   NEW: Compare Controls Grid (Layout Layer)
============================================ */

.compare-controls{
  display: grid;
  gap: 12px;
}

/* Grid-Areas zuweisen */
.compare-controls [data-area="top"]{ grid-area: top; }
.compare-controls [data-area="moy"]{ grid-area: moy; }
.compare-controls [data-area="ab"] { grid-area: ab; }
.compare-controls [data-area="run"]{ grid-area: run; }

/* Desktop: Button rechts unten */
@media (min-width: 900px){
  .compare-controls{
    grid-template-columns: 1fr auto;   /* links Inhalt, rechts Button-Spalte */
    grid-template-areas:
      "top top"
      "moy run"
      "ab  run";
    align-items: end;
  }

  /* Button rechts unten, nicht über die ganze Breite */
  #run-compare.compare-run{
    width: auto;
    justify-self: end;
    align-self: end;
    margin-left: 0; /* dein .compare-run{ margin-left:auto } wird sonst redundant */
  }

  /* Der Top-Block darf ruhig volle Breite nutzen */
  .compare-top{ width: 100%; }
}

/* Mobile: alles untereinander, Button volle Breite und automatisch zuletzt */
@media (max-width: 899px){
  .compare-controls{
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "moy"
      "ab"
      "run";
  }

  #run-compare.compare-run{
    width: 100%;
  }
}

/* ============================================
   Layout: Modus oben (mit Panel daneben), darunter Metrik + Run
   (für Option 1 – Panels sind IN der Modus-Box, ohne eigene Card)
============================================ */

/* Panels IN der großen Modus-Box: keine eigene Card-Optik */
.compare-top--mode #panel-moy,
.compare-top--mode #panel-ab{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

/* Modus soll oben „kleben“, Panel darf unten bündig sein */
.compare-top--mode{
  align-items: flex-start;
}

.compare-top--mode > .compare-field{
  align-self: flex-start;
}

.compare-top--mode #panel-ab,
.compare-top--mode #panel-moy{
  align-self: flex-end;
}

/* ============================================
   Desktop (>= 900px)
============================================ */
@media (min-width: 900px){

  /* Modus-Zeile: alles in einer Zeile */
  .compare-top--mode{
    flex-wrap: nowrap;
  }

  /* Modus-Feld bleibt kompakt links */
  .compare-top--mode > .compare-field{
    flex: 0 0 auto;
    min-width: 220px;
  }

  /* Panel nimmt Restbreite; wenn knapp, horizontal scroll statt Chaos */
  .compare-top--mode #panel-moy,
  .compare-top--mode #panel-ab{
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px; /* gegen „optische“ Scrollbar-Kante */
  }

  /* Metrik + Button in einer Zeile */
  .compare-top--metric{
    flex-wrap: nowrap;
    align-items: flex-end;
  }

  .compare-top--metric .compare-field{
    min-width: 220px;
  }

  .compare-top--metric .compare-run{
    margin-left: auto;
    width: auto;
  }
}

/* ============================================
   Mobile (< 900px)
============================================ */
@media (max-width: 899px){

  .compare-top--mode{
    flex-wrap: wrap;
  }

  /* Metrik-Box stapeln, Button volle Breite */
  .compare-top--metric{
    flex-wrap: wrap;
  }

  .compare-top--metric .compare-field{
    width: 100%;
    min-width: 0;
  }

  .compare-top--metric .compare-run{
    width: 100%;
  }
}

/* ============================================
   A/B Kompakt-Layout: Zeitraum A/B: [von] – [bis]
============================================ */

.compare-period--compact{
  min-width: 220px;
  gap: 8px;
}

/* ============================================
   A/B Kompakt-Layout – intelligent (Container Query)
============================================ */

/* Zeitraum-Card wird zum Container (entscheidet selbst bei Engpass) */
.compare-period--compact{
  min-width: 220px;
  gap: 8px;

  /* ✅ aktiviert Container Queries pro Card */
  container-type: inline-size;
}

/* ---------- Fallback (ohne Container Queries): flex-wrap ---------- */
.compare-range-compact{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Inputs dürfen umbrechen, statt Layout zu sprengen */
.compare-range-compact input[type="date"]{
  flex: 1 1 150px;  /* wächst, schrumpft, bricht um */
  min-width: 0;
  width: auto;
}

/* Separator bleibt im Fallback sichtbar (nicht perfekt, aber ok) */
.range-sep{
  opacity: .6;
  font-weight: 600;
  flex: 0 0 auto;
}

/* ---------- Intelligenter Modus: Container Queries (wenn unterstützt) ---------- */
@supports (container-type: inline-size){

  /* Wir schalten auf Grid um, damit der Separator nie „komisch“ umbrechen kann */
  .compare-range-compact{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
  }

  .compare-range-compact input[type="date"]{
    width: 100%;
    flex: none; /* grid übernimmt */
  }

  /* Wenn die Card schmal wird → automatisch untereinander */
  @container (max-width: 22rem){
    .compare-range-compact{
      grid-template-columns: 1fr;
    }
    .range-sep{
      display: none;
    }
  }
}

.range-sep{
  opacity: .6;
  font-weight: 600;
}

/* Wenn es enger wird: Inputs etwas schmaler */
@media (max-width: 1100px){
  .compare-range-compact input[type="date"]{
    width: 130px;
  }
}

/* Mobile: A/B Cards und Inputs volle Breite */
@media (max-width: 899px){
  .compare-period--compact{
    width: 100%;
  }

  .compare-range-compact{
    width: 100%;
  }

  .compare-range-compact input[type="date"]{
    flex: 1;
    width: 100%;
  }
}