/* Data Preview */
.data-preview-container { max-width: 1200px; margin: 0 auto; padding: 2rem; --progress-bg: #333; }
.data-preview-header { text-align: center; margin-bottom: 3rem; }
.data-preview-header h1 { font-size: 2rem; margin-bottom: 0.5rem; color: #644ae2; }
.data-preview-header h2 { font-size: 1.5rem; color: #e0e0e0; margin-bottom: 2rem; }
.data-preview-header p { font-style: italic; color: #b0b0b0; margin-bottom: 1rem; }
.data-preview-stats { display: flex; flex-direction: column; gap: 1rem; max-width: 600px; margin: 2rem auto 0; }
.progress-stat { width: 100%; }
.progress-label { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 0.2rem; font-size: 0.875rem; color: #e0e0e0; }
.progress-label > span:first-child { font-weight: 500; align-self: flex-end; }
.required-label > span:first-child { font-weight: bold; position: relative; }
.required-label > span:first-child::after { content: " *"; color: red; font-weight: bold; margin-left: 2px; }
.progress-count { font-weight: 600; color: #e0e0e0; text-align: right; }
.coverage-progress-count { position: relative; display: block; }
.coverage-beerxml-text { position: absolute; left: -54%; top: 0; transform: translateX(-100%); white-space: nowrap; font-weight: 600; pointer-events: none; color: #ffcc80; }
.coverage-beerjson-text { color: #90caf9; }
.progress-bar { width: 100%; height: 24px; background-color: #333; border-radius: 12px; overflow: hidden; position: relative; z-index: 1; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); }
.progress-markers, .progress-markers-coverage { position: absolute; top: 35px; left: 0; width: 100%; pointer-events: none; z-index: 5; }
.progress-markers { height: 34px; }
.progress-markers-coverage { height: 56px; z-index: 4; }
.progress-marker { position: absolute; width: 2px; height: 100%; top: 0; }
.marker-found { background: #0f6214; z-index: 5; }
.marker-beerxml { background: #bf360c; z-index: 4; }
.marker-beerjson { background: #0d47a1; z-index: 4; }
.progress-fill { height: 100%; transition: width 0.5s ease-out, background-color 0.3s ease; }
.progress-fill.complete { background-color: #1fca3a; }
.progress-fill.incomplete-required { background-color: #f44336; }
.progress-fill.incomplete-optional { background-color: #9e9e9e; }
.progress-stat:nth-child(1) .progress-fill, .progress-stat:nth-child(2) .progress-fill { position: relative; }
.progress-stat:nth-child(3) { position: relative; }
.progress-stat:nth-child(3) .progress-fill { position: absolute; top: 0; left: 0; height: 100%; }
.progress-stat:nth-child(3) .progress-label { height: 32px; }
.coverage-beerjson { background-color: #333; z-index: 1; }
.coverage-beerxml { background-color: #ca5531; z-index: 2; }
.coverage-found { background-color: #1fca3a; z-index: 3; }
.progress-badges { position: relative; height: 20px; left: 2px; margin-top: 8px; z-index: 4; }
.progress-badge { position: absolute; top: 0; left: var(--badge-left, 0); transform: translateX(-100%); padding: 2px 8px; font-size: 0.65rem; font-weight: 600; border-radius: 3px; white-space: nowrap; text-align: center; min-width: 50px; }
.badge-found { background-color: #0f6214; color: #75ff5a; z-index: 5; }
.badge-beerxml { background-color: #bf360c; color: #ffcc80; top: 22px; }
.badge-beerjson { background-color: #0d47a1; color: #90caf9; top: 22px; }
.data-preview-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.data-section { background: #121212; border: 1px solid #444444; border-radius: 8px; padding: 0.75rem; }
.data-section-title { font-size: 1.25rem; margin-bottom: 1rem; color: #644ae2; border-bottom: 2px solid #644ae2; padding-bottom: 0.5rem; }
.section-not-applicable { opacity: 0.7; border-left: 3px solid #ffcc80; }
.section-not-applicable .data-section-title { color: #ffcc80; font-style: italic; border-bottom-color: currentColor; }
.field-list { display: flex; flex-direction: column; gap: 0; }
.field-item { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; border-bottom: 1px solid #444444; }
.field-item:last-child { border-bottom: none; }
.field-label { color: #e0e0e0; font-size: 0.875rem; }
.field-not-applicable { color: #666 !important; opacity: 0.7; }
.required-field { font-weight: bold; }
.required-field span { color: red; margin-left: 2px; }
.field-badge { font-size: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 12px; font-weight: 500; white-space: nowrap; }
.badge-present { background-color: #0f6214; color: #75ff5a; }
.badge-missing-required { background-color: #b71c1c; color: #ef9a9a; }
.badge-missing-optional { background-color: #424242; color: #bdbdbd; }
.badge-requires-beerjson { background-color: #0d47a1; color: #90caf9; }
.badge-requires-beerxml { background-color: #e65100; color: #ffcc80; }
.badge-not-applicable { background-color: #424242; color: #757575; font-style: italic; }
.data-preview-actions { display: flex; justify-content: center; gap: 1rem; margin-top: 3rem; }

/* 101% Celebration Animation */
@keyframes rainbow-celebration {
  0% { color: #ff0000; }
  14% { color: #ff8c00; }
  28% { color: #ffd700; }
  42% { color: #00ff00; }
  57% { color: #00bfff; }
  71% { color: #0000ff; }
  85% { color: #8b00ff; }
  100% { color: #ff0000; }
}

@keyframes rainbow-background {
  0% { background-color: #ff0000; }
  14% { background-color: #ff8c00; }
  28% { background-color: #ffd700; }
  42% { background-color: #00ff00; }
  57% { background-color: #00bfff; }
  71% { background-color: #0000ff; }
  85% { background-color: #8b00ff; }
  100% { background-color: #ff0000; }
}

/* Celebration styles for 101% completion */
.celebration-101 {
  animation: rainbow-celebration 0.8s infinite;
  font-size: 1.2em !important;
  font-weight: bold !important;
}

.celebration-progress-fill {
  animation: rainbow-background 0.8s infinite;
}

.celebration-badge {
  animation: rainbow-background 0.8s infinite;
  color: #fff !important;
}

/* Progressive delays for field badges to create cascading effect */
.field-item:nth-child(1) .celebration-badge { animation-delay: -0.3s; }
.field-item:nth-child(2) .celebration-badge { animation-delay: -0.35s; }
.field-item:nth-child(3) .celebration-badge { animation-delay: -0.4s; }
.field-item:nth-child(4) .celebration-badge { animation-delay: -0.45s; }
.field-item:nth-child(5) .celebration-badge { animation-delay: -0.5s; }
.field-item:nth-child(6) .celebration-badge { animation-delay: -0.55s; }
.field-item:nth-child(7) .celebration-badge { animation-delay: -0.6s; }
.field-item:nth-child(8) .celebration-badge { animation-delay: -0.65s; }
.field-item:nth-child(9) .celebration-badge { animation-delay: -0.7s; }
.field-item:nth-child(10) .celebration-badge { animation-delay: -0.75s; }
.field-item:nth-child(11) .celebration-badge { animation-delay: -0.0s; }
.field-item:nth-child(12) .celebration-badge { animation-delay: -0.05s; }
.field-item:nth-child(13) .celebration-badge { animation-delay: -0.1s; }
.field-item:nth-child(14) .celebration-badge { animation-delay: -0.15s; }
.field-item:nth-child(15) .celebration-badge { animation-delay: -0.2s; }
.field-item:nth-child(16) .celebration-badge { animation-delay: -0.25s; }
.field-item:nth-child(17) .celebration-badge { animation-delay: -0.3s; }
.field-item:nth-child(18) .celebration-badge { animation-delay: -0.35s; }
.field-item:nth-child(19) .celebration-badge { animation-delay: -0.4s; }
.field-item:nth-child(20) .celebration-badge { animation-delay: -0.45s; }
.field-item:nth-child(21) .celebration-badge { animation-delay: -0.5s; }
.field-item:nth-child(22) .celebration-badge { animation-delay: -0.55s; }
.field-item:nth-child(23) .celebration-badge { animation-delay: -0.6s; }
.field-item:nth-child(24) .celebration-badge { animation-delay: -0.65s; }
.field-item:nth-child(25) .celebration-badge { animation-delay: -0.7s; }
.field-item:nth-child(26) .celebration-badge { animation-delay: -0.75s; }
.field-item:nth-child(27) .celebration-badge { animation-delay: -0.0s; }
.field-item:nth-child(28) .celebration-badge { animation-delay: -0.05s; }
.field-item:nth-child(29) .celebration-badge { animation-delay: -0.1s; }
.field-item:nth-child(30) .celebration-badge { animation-delay: 1.75s; }