/* =========================================================
   BirdPI – Page Styles: Dashboard
   Nur dashboard-spezifische Regeln; alles andere bleibt global
   ========================================================= */

/* Gibt es auch in birdpi.css */

.card.kpi {

  align-content: flex-start;

}

/* KPI-Grid oben */
body.page-dashboard .grid-kpi.top-bar{
  display:grid;
  gap:8px;
  grid-template-columns:auto auto 1fr auto auto;
}

/* Varianten (falls genutzt) */
body.page-dashboard .grid-kpi-5{ display:grid; gap:8px; grid-template-columns:repeat(5,1fr); }
body.page-dashboard .grid-kpi-2{ display:grid; gap:8px;  grid-template-columns:repeat(2,1fr); }

/* Top-Art Karte inkl. Bildzeile */
body.page-dashboard .card.kpi.top{ overflow:hidden; }
body.page-dashboard #kpi-top{
  display:flex;
  gap:12px;
}
body.page-dashboard #kpi-top-img{
  height:100%;
  width:100%;
  max-width:120px;
  object-fit:cover;
  border-radius:12px;
  margin-top:8px;
}


/* Feste Breite für Top-Art-Karte */
.card.kpi.top.align-top {
  width: 255px;      /* feste Breite - Wert anpassen nach Bedarf */
  min-width: 255px;  /* verhindert Schrumpfen */
  max-width: 255px;  /* verhindert Wachsen */
  align-items: center;
}

.top-art-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


#kpi-total.v {
  display:grid;
  align-items: center;
  justify-content: center;
}

/* Badge-Gruppen im KPI-Block (linke Spalte + System-Badges) */
body.page-dashboard .badge-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}
body.page-dashboard .badge-group > .badge,
body.page-dashboard .badge-group > .tools{
  width:100%;
  justify-content:flex-start;
}
body.page-dashboard .badge-group > .tools > .badge{
  width:100%;
  justify-content:flex-start;
}

/* Linkdarstellung in den Dashboard-Listen (Top-Arten, Tabelle) */
body.page-dashboard #tbl a,
body.page-dashboard #top a,
body.page-dashboard #kpi-top-name a{
  color:var(--fg);
  opacity:1;
  text-decoration:none;
}
body.page-dashboard #tbl a:hover,
body.page-dashboard #top a:hover,
body.page-dashboard #kpi-top-name a:hover{
  opacity:1;
  text-decoration:underline;
}

/* Responsive: KPI-Grid bricht auf 2 Spalten */
@media (max-width:760px){
  body.page-dashboard .grid-kpi{ grid-template-columns:repeat(2,1fr); }
}

/* Mittlere Reihe (Top-Arten & Tabelle) */
.middle-row {                      /* Flex-Item zwischen Top-Bar und Bottom-Row */
  flex-grow: 1;                    /* nimmt verbleibenden vertikalen Platz ein */
  /* overflow: hidden; */          /* war früher nötig: würde eigenes Scrollen verhindern */
  display: grid;                   /* zwei Spalten-Layout innerhalb der Reihe */
  min-height: 0;                   /* erlaubt Kindern korrekt zu scrollen (Flex/Grid-Fix) */
  gap: 8px;                        /* horizontaler Abstand zwischen den Spalten */
  grid-template-columns: 0.7fr 2fr;  /* linke Spalte 1 Teil, rechte 2 Teile */
  margin-bottom: 0;                /* kein zusätzlicher Außenabstand nach unten */
}

.middle-row > .card {              /* Karten in der mittleren Reihe */
  display: flex;                   /* macht Inhalte vertikal strukturierbar */
  flex-direction: column;          /* Kopf oben, Inhalt darunter */
  overflow: hidden;                /* Kinder scrollen; Karte selbst schneidet Überlauf ab */
}

.scroll-card {                     /* der scrollbare Inhaltsbereich in der Karte */
  flex-grow: 1;                    /* füllt die Resthöhe der Karte */
  overflow-y: auto;                /* vertikales Scrollen bei Bedarf */
}


/* Tabellen-Container volle Breite */
.middle-row .card {
  width: 100%;
  flex: 1;  /* nimmt verfügbaren Platz ein */
}

/* Innerer Container und Tabelle auf volle Breite */
.middle-row .card .inner.scroll-card {
  width: 100%;
  height: 100%;
}

/* Tabelle selbst auf volle Breite */
.middle-row .card table {
  width: 100%;
  table-layout: fixed; /* verhindert, dass Spaltenbreiten "springen" */
}

/* Optional: Spaltenbreiten definieren */
.middle-row .card table th:nth-child(1) { width: 28%; }  /* Zeit */
.middle-row .card table th:nth-child(2) { width: 46%; }  /* Art */
.middle-row .card table th:nth-child(3) { width: 20%; }  /* Kategorie */
.middle-row .card table th:nth-child(4) { width: 9%; }  /* Score */



.middle-row .card div{
  /* Variante 1: rem (relativ zur Root-Schriftgröße) */
  font-size: 1.1rem;  /* 20% größer als Basis */
  font-weight: 600;
}

/* Untere Mneureihe */
.bottom-row {                      /* Leiste mit Buttons/Badges unten */
  display: flex;                   /* horizontale Anordnung der Elemente */
  flex-wrap: wrap;                 /* Umbruch, falls nicht alles in eine Zeile passt */
  gap: 8px;                        /* Abstand zwischen den Elementen */
  align-items: center;             /* vertikal zentriert in der Leiste */
  justify-content: center;         /* Inhalte mittig ausrichten */
  margin-top: 0;                   /* kein Außenabstand nach oben */
  padding-top: 0;                  /* kein Innenabstand nach oben */
}
.bottom-row .badge {               /* optische Anpassung der Badges */
  background: var(--badge-bg);
}

body.page-dashboard {              /* Grundlayout der Dashboard-Seite */
  display: flex;                   /* vertikale Stapelung der Reihen */
  flex-direction: column;          /* Top -> Middle -> Bottom */
  height: 100vh;                   /* gesamte Viewport-Höhe */
}