/**
 * Fill-in-Blank Quiz Styles - F-030 Phase 4C-1
 *
 * Styles for fill-in-blank question type with inline input fields
 * and real-time visual feedback
 *
 * Part of F-030: Enhanced Quiz System (Gate 2 - Phase 4C)
 */

/* ==================== CONTAINER ==================== */
/* Note: Container frame comes from parent .question-display */

.quiz-fill-blank {
  width: 100%;
  animation: fillBlankContentFadeIn 300ms ease-out;
}

@keyframes fillBlankContentFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fill-blank-container {
  margin-top: var(--space-lg, 1.5rem);
  padding: var(--space-lg, 1.5rem);
  background: var(--bg-secondary, #f8f9fa);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-md, 0.5rem);
}

.fill-blank-text {
  font-size: var(--font-base, 1rem);
  line-height: var(--line-height, 1.6);
  color: var(--text-primary, #1f2937);
}

/* ==================== INPUT FIELDS ==================== */

.fill-blank-input {
  display: inline-block;
  padding: var(--space-xs, 0.375rem) var(--space-sm, 0.5rem);
  margin: 0 var(--space-xs, 0.25rem);
  font-size: var(--font-base, 1rem);
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  color: var(--text-primary, #1f2937);
  background: var(--bg-card, #ffffff);
  border: 2px solid var(--border, #e5e7eb);
  border-radius: var(--radius-sm, 0.375rem);
  outline: none;
  transition: all 0.2s ease;
  vertical-align: baseline;
  min-width: 80px;
}

.fill-blank-input::placeholder {
  color: var(--text-muted, #9ca3af);
  opacity: 0.5;
}

.fill-blank-input:focus {
  border-color: var(--accent, #2563EB);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ==================== INPUT STATES ==================== */

/* Pending state - not yet validated */
.fill-blank-input-pending {
  border-color: var(--border, #e5e7eb);
}

.fill-blank-input-pending:focus {
  border-color: var(--accent, #2563EB);
}

/* Correct state - green border with checkmark */
.fill-blank-input-correct {
  border-color: var(--success, #22c55e);
  background: rgba(34, 197, 94, 0.05);
  color: var(--success-dark, #166534);
  font-weight: 500;
}

.fill-blank-input-correct:focus {
  border-color: var(--success, #22c55e);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* Incorrect state - red border */
.fill-blank-input-incorrect {
  border-color: var(--error, #ef4444);
  background: rgba(239, 68, 68, 0.05);
  color: var(--error-dark, #991b1b);
}

.fill-blank-input-incorrect:focus {
  border-color: var(--error, #ef4444);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ==================== SCORE DISPLAY ==================== */

.fill-blank-score-container {
  margin-top: var(--space-lg, 1.5rem);
  padding: var(--space-md, 1rem);
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-md, 0.5rem);
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
}

.fill-blank-score-label {
  font-size: var(--font-sm, 0.875rem);
  font-weight: 600;
  color: var(--text-secondary, #4b5563);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fill-blank-score-value {
  font-size: var(--font-lg, 1.125rem);
  font-weight: 700;
  color: var(--text-primary, #1f2937);
  transition: all 0.2s ease;
}

.fill-blank-score-value.fill-blank-score-updating {
  transform: scale(1.1);
  color: var(--accent, #2563EB);
}

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

/* Fade in animation when state changes */
@keyframes fill-blank-fade-in {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fill-blank-input-correct,
.fill-blank-input-incorrect {
  animation: fill-blank-fade-in 0.2s ease-out;
}

/* Pulse animation for correct answer */
@keyframes fill-blank-pulse-correct {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.fill-blank-input-correct {
  animation: fill-blank-fade-in 0.2s ease-out, fill-blank-pulse-correct 0.6s ease-out;
}

/* ==================== DARK MODE ==================== */

@media (prefers-color-scheme: dark) {
  .fill-blank-container {
    background: var(--bg-secondary-dark, #1f2937);
    border-color: var(--border-dark, #374151);
  }

  .fill-blank-text {
    color: var(--text-primary-dark, #f9fafb);
  }

  .fill-blank-input {
    background: var(--bg-card-dark, #111827);
    color: var(--text-primary-dark, #f9fafb);
    border-color: var(--border-dark, #374151);
  }

  .fill-blank-input-correct {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success-light, #86efac);
  }

  .fill-blank-input-incorrect {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error-light, #fca5a5);
  }

  .fill-blank-score-container {
    background: var(--bg-card-dark, #111827);
    border-color: var(--border-dark, #374151);
  }

  .fill-blank-score-value {
    color: var(--text-primary-dark, #f9fafb);
  }
}

/* ==================== MOBILE RESPONSIVE ==================== */

@media (max-width: 640px) {
  .fill-blank-container {
    padding: var(--space-md, 1rem);
  }

  .fill-blank-text {
    font-size: var(--font-sm, 0.875rem);
  }

  .fill-blank-input {
    font-size: var(--font-sm, 0.875rem);
    padding: var(--space-xs, 0.25rem) var(--space-sm, 0.375rem);
    min-width: 60px;
    margin: var(--space-xs, 0.25rem);
  }

  .fill-blank-score-container {
    padding: var(--space-sm, 0.75rem);
  }

  .fill-blank-score-label {
    font-size: var(--font-xs, 0.75rem);
  }

  .fill-blank-score-value {
    font-size: var(--font-base, 1rem);
  }
}

/* ==================== ACCESSIBILITY ==================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .fill-blank-input-correct {
    border-width: 3px;
  }

  .fill-blank-input-incorrect {
    border-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .fill-blank-input,
  .fill-blank-score-value,
  .fill-blank-input-correct,
  .fill-blank-input-incorrect {
    transition: none;
    animation: none;
  }
}

/* Focus visible for keyboard navigation */
.fill-blank-input:focus-visible {
  outline: 2px solid var(--accent, #2563EB);
  outline-offset: 2px;
}

/* ==================== PRINT STYLES ==================== */

@media print {
  .fill-blank-input {
    border: 1px solid #000;
    background: #fff;
  }

  .fill-blank-score-container {
    display: none;
  }
}