/* Stellt sicher, dass der Body die volle Höhe einnimmt und als Flex-Container dient */
body.page-viewport .wrap.fullheight {
  display: flex;
  flex-direction: column;
  height: 100vh; /* oder calc(var(--app-vh, 1vh) * 100) für mobile Browser */
  max-width: 100vw;
  overflow: hidden; /* Verhindert Scrollen auf Body-Ebene */
}

/* Kopfbereich soll nicht schrumpfen */
.head {
  flex-shrink: 0;
}

.controls {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
}

/* Der Tab-Container füllt den verfügbaren Platz */
.tab-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Wichtig für das Scrollen von Kind-Elementen in Flexbox */
}

/* Der Inhaltsbereich der Tabs füllt den verbleibenden Platz im Tab-Container */
.tab-content {
  flex-grow: 1;
  min-height: 0;
  position: relative; /* Für absolut positionierte Kinder, falls nötig */
}

/* Jede Tab-Karte füllt den gesamten Inhaltsbereich */
.tab-pane {
  display: none;
  height: 100%;
  flex-direction: column; /* Stellt sicher, dass .pane die Höhe füllt */
}
.tab-pane.active {
  display: flex; /* Wichtig: flex statt block, damit die Kinder die Höhe erben */
}

/* Die .pane innerhalb eines Tabs füllt die Höhe des Tabs */
.tab-pane .pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%; /* Füllt die Höhe des .tab-pane */
}

/* Der scrollbare Bereich innerhalb der .pane */
.table-wrap, .plot-wrap {
  flex-grow: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Fußzeile soll nicht schrumpfen */
.bottom-row {
  flex-shrink: 0;
}
/* Heatmap styles */
.heatmap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.heatmap-table th, .heatmap-table td {
  border: 1px solid var(--grid);
  padding: 4px;
  text-align: center;
}
.heatmap-table th {
  background-color: var(--tbl-b);
}
.heatmap-table td {
  min-width: 25px;
}

/* Kalender-Heatmap */
.heatmap-controls {
  display: flex;
  justify-content: space-between;
  padding: 0 10px 0px;
}
.heatmap-controls h3 {
  margin: 0;
  font-size: 1.2em;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr; /* Sorgt dafür, dass alle Zeilen die gleiche Höhe haben */
  gap: 5px;
  width: 100%;
  height: 100%;
}
.calendar-day {
  background-color: var(--card);
  border: 1px solid var(--grid);
  border-radius: 4px;
  padding: 5px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.calendar-day.has-data {
  color: var(--bg);
}
.day-number {
  font-weight: bold;
}
.day-detections {
  font-size: 0.9em;
}
.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 5px;
  font-size: 12px;
}


/* Tab-Navigation */
.tab-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.tab-nav {
  display: flex;
  align-items: center; /* Vertikal zentrieren */
  border-bottom: 1px solid var(--grid);
  margin-bottom: 0px;
}
.tab-btn {
  padding: 10px 15px;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 14px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-btn.active {
  color: var(--text);
  border-bottom-color: var(--primary);
}
.tab-content {
  flex-grow: 1;
  min-height: 0;
}
.tab-pane {
  display: none;
  height: 100%;
}
.tab-pane.active {
  display: block;
}
/* Stile für das Blasendiagramm */
#bubble-chart-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Verbesserte Sichtbarkeit für Navigations-Buttons in den Diagramm-Tabs */
.heatmap-controls button {
  background-color: var(--primary-light);
  color: var(--primary-contrast);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  padding: 1px 3;
  font-size: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.heatmap-controls button:hover {
  background-color: var(--primary);
}