/* ============================================================
   EXERCISES.CSS - Estils del motor d'exercicis
   ============================================================
   Conte:
   1. Capcalera d'exercicis (puntuacio, progres)
   2. Graella de targetes
   3. Targeta d'exercici (estat: pendent, correcte, error)
   4. Tipus d'input: test, resposta curta, comanda
   5. Feedback (correcte / incorrecte)
   6. Resposta del professor (mode professor)
   7. Boto "anar a la terminal"
   ============================================================ */

/* ------------------------------------------------------------
   1. CAPCALERA D'EXERCICIS
   ------------------------------------------------------------ */
.exercises-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: 1px solid #dde3ea;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.exercises-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a2332;
}

.exercises-score {
  font-size: 0.88rem;
  color: #6b7a8d;
}

.score-value {
  font-weight: 700;
  color: #2d7d46;
  font-size: 1rem;
}

/* Boto per reiniciar tots els exercicis */
.exercises-reset-btn {
  background: #f0f4f8;
  border: 1px solid #dde3ea;
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  color: #6b7a8d;
  cursor: pointer;
  transition: all 200ms ease;
}

.exercises-reset-btn:hover {
  background: #dde3ea;
  color: #1a2332;
}


/* ------------------------------------------------------------
   2. GRAELLA DE TARGETES
   ------------------------------------------------------------ */
.exercises-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}


/* ------------------------------------------------------------
   3. TARGETA D'EXERCICI
   ------------------------------------------------------------ */
.exercise-card {
  background: #ffffff;
  border: 2px solid #dde3ea;
  border-radius: 10px;
  padding: 1.1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: border-color 200ms ease, box-shadow 200ms ease;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Estat: correcte */
.exercise-card.correct {
  border-color: #2d7d46;
  background: #f0faf4;
}

/* Estat: incorrecte */
.exercise-card.incorrect {
  border-color: #c0392b;
  background: #fdf5f5;
}

/* Estat: resolt (ja no editable) */
.exercise-card.solved {
  opacity: 0.85;
}


/* ------------------------------------------------------------
   CAPCALERA DE LA TARGETA
   ------------------------------------------------------------ */
.exercise-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.exercise-number {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #6b7a8d;
}

/* Badge de tipus d'exercici */
.exercise-type-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  flex-shrink: 0;
}

.badge-test      { background: #e8f4fd; color: #2980b9; }
.badge-short     { background: #fef9e7; color: #d68910; }
.badge-command   { background: #e8f5ed; color: #2d7d46; }
.badge-simulator { background: #f4e8fd; color: #8e44ad; }


/* ------------------------------------------------------------
   PREGUNTA I INPUT
   ------------------------------------------------------------ */
.exercise-question {
  font-size: 0.92rem;
  color: #1a2332;
  line-height: 1.55;
  font-weight: 500;
}

.exercise-input-area {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}


/* ------------------------------------------------------------
   4a. TIPUS TEST (opcions multiples)
   ------------------------------------------------------------ */
.test-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.test-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid #dde3ea;
  border-radius: 6px;
  background: #f8fafc;
  font-size: 0.88rem;
  color: #1a2332;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all 200ms ease;
}

.test-option:hover:not(:disabled) {
  background: #e8f5ed;
  border-color: #2d7d46;
}

.test-option.selected {
  background: #e8f5ed;
  border-color: #2d7d46;
  font-weight: 600;
}

.test-option.correct-option {
  background: #e8f5ed;
  border-color: #2d7d46;
  color: #1e5c32;
}

.test-option.wrong-option {
  background: #fdf5f5;
  border-color: #c0392b;
  color: #922b21;
  text-decoration: line-through;
  opacity: 0.7;
}

.test-option:disabled {
  cursor: default;
}

/* Lletra de l'opcio (A, B, C, D) */
.option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #dde3ea;
  color: #6b7a8d;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.test-option.selected .option-letter,
.test-option.correct-option .option-letter {
  background: #2d7d46;
  color: white;
}

.test-option.wrong-option .option-letter {
  background: #c0392b;
  color: white;
}


/* ------------------------------------------------------------
   4b. TIPUS RESPOSTA CURTA I COMANDA
   ------------------------------------------------------------ */
.text-input-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.exercise-text-input {
  flex: 1;
  min-width: 160px;
  padding: 0.5rem 0.75rem;
  border: 1px solid #dde3ea;
  border-radius: 6px;
  font-size: 0.88rem;
  font-family: inherit;
  color: #1a2332;
  background: #f8fafc;
  transition: border-color 200ms ease;
}

/* Input de comanda: font monoespaiada */
.exercise-card[data-type="command"] .exercise-text-input {
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  background: #1a2332;
  color: #a8d8a8;
  border-color: #3a4556;
}

.exercise-card[data-type="command"] .exercise-text-input::placeholder {
  color: #4a5568;
}

.exercise-text-input:focus {
  outline: none;
  border-color: #2d7d46;
  box-shadow: 0 0 0 3px rgba(45,125,70,0.12);
}

.exercise-text-input:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Boto enviar */
.submit-btn {
  padding: 0.5rem 1rem;
  background: #2d7d46;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms ease;
  white-space: nowrap;
}

.submit-btn:hover:not(:disabled) {
  background: #1e5c32;
}

.submit-btn:disabled {
  background: #b0bec5;
  cursor: default;
}


/* ------------------------------------------------------------
   5. FEEDBACK (resposta de l'exercici)
   ------------------------------------------------------------ */
.exercise-feedback {
  font-size: 0.85rem;
  padding: 0.55rem 0.8rem;
  border-radius: 6px;
  display: none;      /* ocult fins que l'usuari respon */
}

/* Feedback visible */
.exercise-feedback.visible {
  display: block;
}

.exercise-feedback.feedback-ok {
  background: #e8f5ed;
  color: #1e5c32;
  border-left: 3px solid #2d7d46;
}

.exercise-feedback.feedback-error {
  background: #fdf5f5;
  color: #922b21;
  border-left: 3px solid #c0392b;
}

/* Icona davant del feedback */
.feedback-icon {
  margin-right: 0.3rem;
  font-weight: 700;
}

/* Pista (hint) -->  */
.exercise-hint {
  font-size: 0.8rem;
  color: #6b7a8d;
  font-style: italic;
  margin-top: 0.25rem;
}


/* ------------------------------------------------------------
   6. RESPOSTA DEL PROFESSOR (mode professor)
   Visible nomes si TeacherMode.isActive === true
   ------------------------------------------------------------ */
.teacher-answer {
  margin-top: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: #fff8e1;
  border: 1px dashed #f39c12;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #7d6608;
}

.teacher-answer-label {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #d68910;
  display: block;
  margin-bottom: 0.2rem;
}

.teacher-answer-value {
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  color: #1a2332;
  word-break: break-all;
}


/* ------------------------------------------------------------
   7. BOTO "OBRE LA TERMINAL" (exercicis de simulador)
   ------------------------------------------------------------ */
.simulator-info {
  font-size: 0.85rem;
  color: #6b7a8d;
  line-height: 1.5;
}

.go-terminal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding: 0.5rem 1rem;
  background: #1a2332;
  color: #4ecdc4;
  border: 1px solid #4ecdc4;
  border-radius: 6px;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 200ms ease;
}

.go-terminal-btn:hover {
  background: #4ecdc4;
  color: #1a2332;
}