/* Importiere die Schrift "Oswald" von Google Fonts (Alternative zu Industry) */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&display=swap');

/* Grundlegender Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Seite fixieren: Keine globale Seite-Scroll-Funktion */
html, body {
  height: 100%;
  overflow: hidden;
}

/* Body & Allgemein */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #f7f9fc;
  color: #333;
  line-height: 1.6;
  padding: 20px;
}

/* HEADER & ERGEBNISÜBERSICHT – Modern, futuristisch, mobiloptimiert */
header {
  display: grid;
  grid-template-areas:
    "team-home score team-away"
    "status status status"
    "buttons buttons buttons";
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 20px 10px;
  margin-bottom: 20px;
  border-radius: 8px;
  /* Schlichter linearer Verlauf: Von Grün (#004d40) zu Schwarz */
  background: linear-gradient(90deg, #004d40 20%, #000000 80%);
  color: #fff;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  /* Schrift im Header: Oswald, 20% kleiner und normal gewichtet */
  font-family: 'Oswald', sans-serif;
}

/* Auflösen des Containers für Teamnamen, damit diese direkt im Grid erscheinen */
#team-names {
  display: contents;
}

/* Heimteam – links vom Score, 1.3em, normal gewichtet */
#team-home {
  grid-area: team-home;
  font-size: 1.3em;
  font-weight: normal;
  text-align: left;
  padding-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Score – zentral positioniert */
#score {
  grid-area: score;
  font-size: 2.5em;
  font-weight: bold;
  text-align: center;
  padding: 0 10px;
  white-space: nowrap;
}

/* Gastteam – rechts vom Score, 1.3em, normal gewichtet */
#team-away {
  grid-area: team-away;
  font-size: 1.3em;
  font-weight: normal;
  text-align: right;
  padding-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Aktueller Spielstatus – zentriert */
#current-status {
  grid-area: status;
  font-size: 1.2em;
  text-align: center;
}

/* Die Stoppuhr bleibt unsichtbar */
#stopwatch {
  display: none !important;
}

/* Login & Logout Buttons im Header (dritte Zeile) */
#login-btn,
#logout-btn {
  grid-area: buttons;
  justify-self: center;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#login-btn {
  background-color: #28a745;
  color: #fff;
}
#logout-btn {
  background-color: #dc3545;
  color: #fff;
}

button {
  background-color: #004d40; /* Dunkles Grün */
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 18px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #00332a; /* noch dunkler bei Hover */
}


/* ADMIN CONTROLS */
#admin-controls {
  text-align: center;
  margin-bottom: 20px;
}
#admin-controls .team-name-setter {
  margin-top: 10px;
}
#admin-controls input.team-name-input {
  padding: 5px;
  margin: 0 5px;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
}
#update-team-button {
  padding: 5px 10px;
  font-size: 1em;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#update-team-button:hover {
  background-color: #0056b3;
}

/* Globale Button-Styles */
button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 18px;
  font-size: 1em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #0056b3;
}

/* MODAL */
.modal {
  display: none;
  position: fixed;
  z-index: 1100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}
.modal-content {
  background: #fff;
  margin: 5% auto;
  padding: 20px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  position: relative;
}
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 30px;
  color: #aaa;
  cursor: pointer;
  transition: color 0.3s ease;
}
.close:hover {
  color: #333;
}

/* Formular im Modal */
#entry-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}
#entry-form input,
#entry-form select,
#entry-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
}

/* TICKER FEED CONTAINER */
#ticker {
  width: 100%;
  max-width: 600px;  /* Auf Desktop maximal 600px */
  margin: 0 auto;
  padding: 0 10px;
  height: calc(100vh - 250px);
  overflow-y: auto;
  overflow-x: hidden;  /* Kein horizontales Scrollen */
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

/* Ticker-Zeilen */


.ticker-row {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.ticker-row:last-child {
  border-bottom: none;
}

/* Wichtige Ereignisse */
.important-event {
  background-color: #F0FFF0;
}

/* Zeitspalte */
.ticker-time {
  flex: 0 0 80px;
  text-align: right;
  font-size: 0.8em;
  color: #666;
  padding-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hauptbereich der Ticker-Einträge */
.ticker-main {
  flex: 1;
  padding-left: 10px;
  overflow-wrap: break-word;
  word-break: break-word;
  /* Neu hinzugefügt, damit das Flex-Item schrumpfen kann */
  min-width: 0;
}
.ticker-title {
  display: block;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 0.2em;
}
.ticker-player-info {
  font-size: 0.85em;
  color: #555;
  margin-bottom: 0.3em;
}
.ticker-details {
  display: block;
  font-size: 0.85em;
  font-style: italic;
  color: #555;
  margin-top: 3px;
  white-space: pre-wrap;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/* RESPONSIVE INSTAGRAM EMBEDS – Wir setzen hier die Breite so, dass der visuelle
   Effekt 80% der Containerbreite ergibt, aber der Layoutbereich bleibt 100% */
.ticker-main iframe,
.ticker-main .instagram-media,
.ticker-main blockquote.instagram-media {
  width: 125% !important;
  max-width: 125% !important;
  transform: scale(0.8) !important;
  transform-origin: left top;
  margin: 0 !important;
  display: block;
}

/* Score-Animation */
.score-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
  height: 1.2em;
  vertical-align: middle;
}
.score-home,
.score-away {
  display: inline-block;
  position: relative;
  height: 1.2em;
  overflow: hidden;
  vertical-align: middle;
}
.score-home-old,
.score-home-new,
.score-away-old,
.score-away-new {
  display: block;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 1.2em;
}
.score-home-old {
  transform: translateY(0);
  opacity: 1;
}
.score-home-new {
  transform: translateY(-100%);
  opacity: 0;
}
.score-away-old {
  transform: translateY(0);
  opacity: 1;
}
.score-away-new {
  transform: translateY(-100%);
  opacity: 0;
}
.score-home-old.animate {
  transform: translateY(100%);
  opacity: 0;
}
.score-home-new.animate {
  transform: translateY(0);
  opacity: 1;
}
.score-away-old.animate {
  transform: translateY(100%);
  opacity: 0;
}
.score-away-new.animate {
  transform: translateY(0);
  opacity: 1;
}
.score-separator {
  font-size: 1em;
  vertical-align: middle;
}

/* Löschen-Button für Einträge */
.delete-button {
  margin-left: 10px;
  background-color: #ff4d4d;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.delete-button:hover {
  background-color: #ff0000;
}

/* Responsive Anpassungen */
@media only screen and (max-width: 600px) {
  body {
    padding: 10px;
  }
  #login-btn, #logout-btn {
    font-size: 0.8em;
    padding: 6px 10px;
  }
  .ticker-time {
    flex: 0 0 70px;  /* Reduzierte Breite für kleine Bildschirme */
    font-size: 0.75em;
    padding-right: 5px;
  }
}

/* Substitutionsbereich */
.substitution-section {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 0.3em 0;
}
.substitution-row {
  display: flex;
  align-items: center;
  font-size: 0.85em;
  margin: 0.2em 0;
}
.arrow {
  font-size: 1em;
  margin-right: 0.3em;
}
.arrow.arrow-up {
  color: green;
}
.arrow.arrow-down {
  color: red;
}
.substitution-action {
  font-weight: bold;
}

.poll-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.poll-options button {
  width: 100%;
  padding: 10px;
  margin: 5px;
  font-size: 1em;
  cursor: pointer;
}

/* Allgemeine Stilanpassung für das Modal */
#poll-modal {
    width: 90%;
    max-width: 400px;
    margin: auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    padding: 15px;
}

/* Eingabefelder benutzerfreundlich machen */
#poll-form input[type="text"] {
    width: 100%;
    padding: 12px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Buttons gut antippbar machen */
#poll-form button {
    display: block;
    width: 100%;
    padding: 12px;
    font-size: 1em;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

#poll-form button:hover {
    background-color: #0056b3;
}

/* Kleinere Bildschirme optimieren */
@media screen and (max-width: 600px) {
    #poll-modal {
        width: 95%;
        max-width: 350px;
        padding: 10px;
    }

    #poll-form input[type="text"],
    #poll-form button {
        font-size: 0.9em;
        padding: 10px;
    }
}

.poll-option-result {
  margin-bottom: 8px;
  font-size: 1em;
}
.poll-result-placeholder {
  font-style: italic;
  color: #666;
  padding: 8px;
}
.poll-progress-container {
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  height: 20px;
  margin-top: 4px;
}
.poll-progress-bar {
  background-color: #004d40; /* Passe diese Farbe nach Wunsch an */
  height: 100%;
  width: 0%;
  transition: width 0.5s ease-in-out;
}
.poll-result-header {
  font-weight: bold;
  margin-bottom: 8px;
}