/* Basis-Styling */

/* ========================
   Allgemeine Variablen
   ======================== */
:root {
    /* Primäre Farben und Hintergrundfarben */
    --primary-color: #a8b9a3; /* Hauptfarbe, Blau */
    --secondary-color: #e74c3c; /* Sekundäre Farbe, Rot */
    --background-color: #f9f9f9; /* Grau für Fragen und Auswertungsfelder */
    --text-color: #FFFFFF; /* Standard Textfarbe */
    --button-hover-color: #4A7C59; /* Hover-Farbe für Buttons */
    --page-bg-color: #dee1d1; /* Hintergrundfarbe der Seite, hellgrün */
    --button-bg-color: #3E6A4D; /* Farbe der Buttons */
	
body {
  font-family: Arial, sans-serif;
	/* margin: 1px; */
  background-color: #f7f7f7;
}

html, body {
    font-family: Arial, sans-serif; /* Schriftart für die Seite */
    background-color: var(--page-bg-color); /* Setzt den Hintergrund der Seite */
}

/* ========================
   Hover-Effekt für den Button
   ======================== */
button:hover {
    background-color: #7f9773; /* Dunklerer Grünton beim Hover */
}


#loginContainer {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px; /* Hier kannst du die Breite nach Bedarf anpassen */
  z-index: 1000;
} 

#tokenContainer {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px; /* Hier kannst du die Breite nach Bedarf anpassen */
} 

input[type="email"], input[type="text"] {
  border: 2px solid #ccc; /* Setzt einen sichtbaren Rahmen */
  border-radius: 4px; /* Optionale abgerundete Ecken */
  padding: 10px; /* Innenabstand */
  box-sizing: border-box; /* Sorgt dafür, dass Padding in die Breite einfließt */
  width: 100%; /* Nimmt die gesamte Breite des Containers ein */
}

input[type="email"]:focus, input[type="text"]:focus {
  border-color: #0078d4; /* Fokusfarbe */
  outline: none; /* Entfernt den Standard-Fokusrahmen */
}


.container {
  margin: 10px auto !important; 
  padding: 15px;
  width: 90%;
  max-width: 95%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  margin-bottom: 40px !important; 
}

#dashboardContent {
    display: flex; /* Flexbox für horizontale Anordnung */
    gap: 20px; /* Abstand zwischen den Elementen */
    align-items: center; /* Vertikale Zentrierung */
}

#dashboardContent span {
    background-color: #f9f9f9; /* Optional: Hintergrundfarbe */
    padding: 10px; /* Innenabstand */
    border-radius: 5px; /* Abgerundete Ecken */
    font-size: 14px; /* Schriftgröße */
    text-align: center; /* Zentrierte Inhalte */
}

.container h2 {
  margin-top: 0;
}

#dashboardContainer {
  width: 100%; /* oder eine feste Breite */
  height: auto; /* passt sich an Inhalte an */
  overflow: auto; /* scrollt, falls Inhalte überfließen */
  margin-top: 5px;
  margin-bottom: 5px;
}

canvas {
  width: 100% !important;
  max-width: 100%;
  height: auto;
}


label {
  display: block;
  margin-bottom: 5px;
}

input[type="email"],
input[type="text"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  font-size: 1em;
  box-sizing: border-box;
}

button {
  padding: 10px 15px;
  font-size: 1em;
  cursor: pointer;
  background-color: var(--button-bg-color) !important; /* Hellgrün */
  color: #fff; /* Weißer Text */
  border: none;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Leichter Schatten */
}

button:hover {
  background-color: var(--button-hover-color) !important; /* Dunkleres Grün beim Hover */
}

#updateChartBtn {
    border: 4px solid green; /* Grüne Umrandung */
    border-radius: 8px; /* Optional: Abgerundete Ecken */
    padding: 10px;
    background-color: white; /* Optional: Hintergrundfarbe */
    color: white; /* Optional: Textfarbe */
}

#showSelectionBtn {
    border: 4px solid blue; /* Blaue Umrandung */
    border-radius: 8px;
    padding: 10px;
    background-color: white;
    color: white;
}


#chartDescription {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center; /* Zentriert den Text über dem Diagramm */
  margin-bottom: 10px; /* Abstand zum Diagramm */
  color: #333; /* Optional: Textfarbe */
}

/* Standardmäßig werden nur der Login-Container angezeigt */
#tokenContainer, #dashboardContainer {
  display: none;
}

/* Dashboard Layout: Auf CSS Grid umgestellt */
/* Der gesamte Dashboard-Bereich (Grid) bleibt unverändert */
#dashboardLayout {
  display: grid;
  grid-template-columns: 1fr 0.3fr;  /* Linke Spalte (mehr Platz) und rechte Spalte (schmaler) */
  gap: 20px;
  /* Damit beide Spalten in der Zeile dieselbe Höhe erhalten, sorgt der Grid-Row-Mechanismus für diese Angleichung */
}

/* Linke Spalte: enthält Chart und InfoContainer */
#leftColumn {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;  /* nimmt den Großteil des verfügbaren Platzes ein */
}

/* Chart bleibt unverändert */
/* Chart Container: feste Höhe vorgeben */
/* Chart Container: feste Höhe und Platz für x-Achsen-Labels */
#chartContainer {
  width: 100%;
  max-width: 100%;
  height: 400px;              /* anpassen nach Wunsch */
  padding: 15px;
  padding-bottom: 60px;       /* WICHTIG: Platz für x-Achsen-Labels */
  background-color: #f1f1f1;
  border: 4px solid green;
  border-radius: 5px;
  box-sizing: border-box;
}

/* Canvas füllt den Container exakt */
#chartContainer canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Falls Chart-Labels sehr lang sind: kleinere Schrift auf der x-Achse */
@media (min-width: 768px) {
  #chartContainer .chartjs-label { font-size: 12px; }
}


/* Entferne oder überschreibe vorherige globale Regeln */
canvas {
  max-width: 100% !important;
  /* height: auto;  <-- diese Zeile entfernen/überschreiben */
}


/* InfoContainer passt sich der vollen Breite des leftColumn an */
#infoContainer {
  width: 100%;
  padding: 25px;
  background-color: #f1f1f1;
  border: 4px solid blue; /* Blaue Umrandung */
  border-radius: 5px;
}

/* Rechte Spalte: Statistiken */
#statisticsContainer {
  display: flex; /* Verwende Flexbox, um die Reihenfolge besser zu kontrollieren */
  flex-direction: column; /* Staple die Elemente vertikal */
  gap: 10px; /* Abstand zwischen den Elementen */
  padding: 10px;
  background-color: #f9f9f9; /* Hintergrundfarbe */
  border-left: 1px solid #ccc; /* Trennlinie zwischen den Spalten */
}

/* Scrollbox für die Ergebnisse */
.scrollbox {
  margin-top: 5; /* Entfernt unnötigen oberen Abstand */
  flex-grow: 1; /* Scrollbox dehnt sich bei Bedarf aus */
  overflow-y: auto; /* Scrollleiste aktivieren */
  border: 1px solid #ccc; /* Optional: Rahmen */
  max-height: 580px; /* Begrenzte maximale Höhe */
  padding: 10px; /* Innenabstand */
  background-color: #fff; /* Optional: Weißer Hintergrund */
  margin-bottom: 10px;
}


/* Buttons */
#statisticsContainer button {
  width: 100%; /* Buttons füllen die volle Breite */
  margin-top: 10px; /* Abstand über den Buttons */
}

/* Gestaltung der Datensätze */
.record {
  display: flex;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
  gap: 5px; /* Abstand zwischen Checkbox und Text */
}

.record:last-child {
  border-bottom: none;
}

.record span {
  margin-left: 5px;
}

.record label {
  display: inline-block; /* Blockverhalten für Zentrierung */
  text-align: center; /* Text innerhalb des Labels horizontal zentrieren */
  font-size: 16px; /* Schriftgröße */
  line-height: 1.5; /* Vertikaler Textabstand */
  width: 90%; /* Optional, falls Zentrierung über volle Breite gewünscht ist */
}

input[type="checkbox"] {
  transform: scale(1.2); /* Größe der Checkbox anpassen */
}

.record input[type="checkbox"] {
  vertical-align: middle; /* Horizontale Linie mit dem Text */
  margin-top: 0; /* Falls nötig, Anpassung des Abstands */
}


/* Container unter dem Diagramm */
#resultBarsContainer {
  margin-top: 20px;
}

/* Jede Zeile im Balkendiagramm */
.resultBar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/* Label (Kategoriebezeichnung) */
.resultLabel {
  width: 200px;           /* Passe die Breite nach Bedarf an */
  font-weight: bold;
}

/* Basis des Balkens (grauer Hintergrund) */
.barBase {
  flex-grow: 1;
  background: #e0e0e0;
  margin: 0 10px;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
}

/* Der gefüllte Balken, dessen Breite dynamisch gesetzt wird */
.barFill {
  height: 100%;
}

/* Anzeige des Zahlenwerts */
.resultValue {
  width: 40px;
  text-align: right;
}


.vc-link-danger { color: #c0392b; text-decoration: underline; cursor: pointer; font-size: 13px; }

#leftColumn {
    display: flex;
    flex-direction: column;
}

#infoContainer {
    flex-shrink: 0;
}


.footer-text {
    margin-top: 20px; /* statt auto */
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    line-height: 1.5;
	flex-shrink: 0;
    margin-top: 20px;
}

/* Modal‑Style für Login/Token */
/* Modal‑Style für Login/Token (korrigiert, schmal und zentriert) */
#loginContainer,
#tokenContainer {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: calc(100% - 40px);
  max-width: 380px !important;   /* gewünschte maximale Breite */
  background: #fff;
  padding: 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 2147483647 !important; /* sehr hoch, damit es über allem liegt */
  box-sizing: border-box;
  margin: 0;
  display: block;
}

/* Eingabefelder und Buttons innerhalb der Box passen sich an */
#loginContainer input,
#tokenContainer input,
#loginContainer button,
#tokenContainer button {
  width: 100%;
  box-sizing: border-box;
}

/* Optionales Overlay */
#vc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 2147483646;
  display: none;
}

/* Desktop Feintuning */
@media (min-width: 1200px) {
  #loginContainer,
  #tokenContainer {
    max-width: 360px;
    padding: 20px;
  }
}

/* Mobile Anpassung */
@media (max-width: 480px) {
  #loginContainer,
  #tokenContainer {
    width: calc(100% - 24px);
    max-width: 360px;
    padding: 14px;
    border-radius: 6px;
    transform: translate(-50%, -50%) !important;
    left: 50% !important;
    top: 50% !important;
  }
}




/* Responsive Design für kleinere Bildschirme */
/* Basis-Styling bleibt unverändert */

/* ========================
   Responsive Design für Tablets und Smartphones
   ======================== */

/* Tablets */
@media screen and (max-width: 1024px) {
    #dashboardLayout {
        grid-template-columns: 1fr; /* Alle Inhalte werden gestapelt */
        grid-template-rows: auto auto; /* Jede Zeile nimmt eine neue Zeile ein */
        gap: 15px;
    }

    #statisticsContainer {
        grid-row: 2; /* Statistiken kommen in die zweite Zeile */
        width: 100%; /* Volle Breite */
    }
}

/* Smartphones */
@media screen and (max-width: 768px) {
    #dashboardLayout {
        display: flex; /* Wechsle von Grid zu Flexbox */
        flex-direction: column; /* Elemente werden gestapelt */
        gap: 10px;
    }

    #statisticsContainer {
        order: 3; /* Stelle sicher, dass es als letztes angezeigt wird */
        width: 100%; /* Volle Breite */
        margin-top: 10px; /* Abstand von den oberen Elementen */
    }

    #leftColumn, #chartContainer, #infoContainer {
        order: 1; /* Inhalte oberhalb der Statistiken */
        width: 100%;
    }

    canvas {
        height: 250px; /* Begrenzte Höhe für Diagramme */
    }
}



#leftColumn { display:flex; flex-direction:column; }
#infoContainer { flex: 0 0 auto; }
.footer-text {
  display:block !important;
  flex: 0 0 auto;
  margin-top: 20px;
  background:#f4f4f4;
  padding:10px;
  border-radius:8px;
  color:#222;
}