/* ========================================================= */
/* MIGRATION: main.css RANKING + TEXTANSWER + ANIMATIONS     */
/* ========================================================= */

/* TEXT-ANSWER LEGACY FIXES (harmonisiert) */

.text-answer {
  border: 1px solid var(--border-color);
  padding: var(--space-1);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}

.text-answer strong {
  font-size: var(--font-size-md);
}

.text-answer.answered {
  border: 2px solid var(--state-info);
  background: #0000FF0f;
  font-family: var(--font-family-bold);
}

/* ========================================================= */
/* RANKING                                                    */
/* ========================================================= */

.ranking-entry {
  padding: var(--space-1);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.ranking-entry.answered {
  border: 2px solid var(--state-info);
  background: rgba(0, 128, 0, 0.06);
  font-family: var(--font-family-bold);
}

.ranking-entry.number-live {
  border: 2px dashed var(--border-color);
  background: var(--bg-surface-alt);
  font-style: italic;
}

.tie-entry {
  border: 2px solid var(--state-warning);
  background: rgba(255, 133, 0, 0.06);
}

.tie-label {
  font-size: var(--font-size-xs);
  color: var(--state-warning);
  font-family: var(--font-family-bold);
  margin-left: 6px;
}

/* ========================================================= */
/* ANIMATIONS                                                 */
/* ========================================================= */

@keyframes leadPulse {
  0% { background-color: rgba(0,128,0,0.06); }
  50% { background-color: rgba(0,128,0,0.18); }
  100% { background-color: rgba(0,128,0,0.06); }
}

.leading-animation {
  animation: leadPulse 1.2s ease-out;
}

@keyframes slideUp {
  0% { transform: translateY(10px); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
  0% { transform: translateY(-10px); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 1; }
}

.rank-move-up {
  animation: slideUp 0.5s ease-out;
}

.rank-move-down {
  animation: slideDown 0.5s ease-out;
}



/* ========================================================= */
/* BUTTONS                                                   */
/* ========================================================= */

.btn {
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--font-family-bold);
  font-size: var(--font-size-md);
  border: none;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn:hover {
  color: var(--text-inverse);
  background: var(--btn-bg-hover);
}

.btn-sm {
  padding: 6px 12px;
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: 18px 24px;
  font-size: var(--font-size-lg);
}

/* Disabled-State */
.btn:disabled,
.btn[disabled] {
  background: var(--color-gray);  /* #C6C6C6 laut Tokens */
  color: var(--text-primary);
  cursor: default;
}

/* Kein Hover-Effekt im disabled-State */
.btn:disabled:hover,
.btn[disabled]:hover {
  color: var(--text-primary);
  background: var(--color-gray);
}

/* "Muted"-Zustand: optisch zurückgenommen, aber weiterhin klickbar */
.btn-muted {
  background: var(--color-gray);
  color: var(--text-primary);
}

.btn-muted:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-text);
}

/* --------------------------------------------------------- */
/* Timer-Bottom-Buttons: Freigeben / Löschen                 */
/* --------------------------------------------------------- */

/* Standardzustand: beide grau mit dunklem Text */
#btnUnlockInputs,
#btnResetAllText {
  background: var(--border-color);
  color: var(--text-primary);
}


/* Aktiver Zustand, wenn alle Felder gesperrt sind */
#btnUnlockInputs.btn-free-active {
  background: var(--state-warning);     /* Orange */
  color: var(--text-primary);  
}

#btnResetAllText.btn-reset-active {
  background: var(--text-primary);      /* Navy */
  color: var(--text-inverse);           /* Hell */
}

/* Freigeben – Hover nur im Standardzustand */
#btnUnlockInputs:hover:not(:disabled) {
  background: var(--btn-bg-hover);
  color: var(--text-inverse);
}

/* Hover im aktiven Zustand: bleibt auf diesen Farben */
#btnUnlockInputs.btn-free-active:hover {
  background: var(--btn-bg-hover);
  color: var(--text-inverse);
}

#btnResetAllText.btn-reset-active:hover {
  background: var(--btn-bg-hover);
  color: var(--text-inverse);
}

/* --------------------------------------------------------- */
/* Spezielle Buttons                                         */
/* --------------------------------------------------------- */

#btnSavePointSettings {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid #C6C6C6;
  font-size: var(--font-size-xs);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  height: 28px;
}

#btnSavePointSettings:hover {
  background: rgba(0,0,0,0.04);
}

.btn-correct {
  background: var(--state-correct);
}

.btn-wrong {
  background: var(--state-wrong);
}

.btn-buzzer-open {
  background: var(--color-navy);
}

.btn-lock {
  background: var(--state-wrong);
}

.btn-reset {
  background: var(--state-warning);
}

/* Textanswer Buttons */

.text-answer .btn {
  margin-right: 6px;
}

.text-correct {
  background: var(--state-correct);
}

.text-wrong {
  background: var(--state-wrong);
}

.text-unlock {
  background: var(--border-color);
  color: var(--text-primary);
}

/* Ranking Buttons */

.number-unlock {
  background: var(--border-color);
  color: var(--text-primary);
}

/* Number-Mode Ranking Buttons (Freigeben / Löschen / Anzeigen) */

/* Freigeben = Orange */
.number-free {
  background: var(--state-warning);      /* Orange */
  color: var(--text-primary);            
}

/* Löschen = Schwarz */
.number-reset {
  background: var(--text-primary);       /* Navy/Schwarz */
  color: var(--text-inverse);           /* Hell */
}


/* Button: Lösung anzeigen – aktiver Zustand (Zahl eingeblendet) */
.btn-show-number-active {
  background: var(--state-correct);    /* Grün */
  color: var(--text-inverse);
}

/* Im aktiven Zustand kein blauer Hover */
.btn-show-number-active:hover {
  background: var(--state-correct);
  color: var(--text-inverse);
}


/* ========================================================= */
/* TEXT PANEL GLOBAL ACTIONS                                 */
/* ========================================================= */

.text-global-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.text-global-actions.answers-visible {
  border-radius: var(--radius-sm);
  padding: var(--space-1);
  border: 1px solid var(--state-info);
  background: rgba(0, 0, 255, 0.05);
}

.text-global-actions.answers-visible::before {
  content: "Antworten sind in der Präsentation sichtbar";
  font-size: var(--font-size-xs);
  color: var(--state-info);
  margin-right: var(--space-2);
}


/* ========================================================= */
/* MANUELLE PUNKTE / TEAMNAMEN                               */
/* ========================================================= */

.manual-score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: var(--font-size-sm);
}

.manual-score-row strong {
  width: 120px;
}

.manual-score-row input {
  width: 80px;
}

/* Teamnamen */

#teamNameEditor > div {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: var(--font-size-sm);
}

#teamNameEditor strong {
  width: 40px;
}




/* ========================================================= */
/* TIMER STATES                                              */
/* ========================================================= */

.timer {
  font-size: var(--font-size-lg);
  font-family: var(--font-family-bold);
  color: var(--timer-running);
}

.timer-finished {
  color: var(--timer-finished);
  font-family: var(--font-family-bold);
  animation: blinkTimer 0.8s ease-in-out 3;
}

@keyframes blinkTimer {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}


/* ========================================================= */
/* ANIMATIONS                                                */
/* ========================================================= */

@keyframes slideUp {
  0% { transform: translateY(10px); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
  0% { transform: translateY(-10px); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes leadPulse {
  0% { background-color: rgba(0,128,0,0.06); }
  50% { background-color: rgba(0,128,0,0.18); }
  100% { background-color: rgba(0,128,0,0.06); }
}

@keyframes blinkTimer {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}