/**
 * Score Overlay Styles
 * Shared styles for the PDF viewer overlay used in practice and piece details
 */

/* Base overlay structure */
.score-overlay {
  background: #111;
  z-index: 1040;
}

.score-overlay-header {
  background: #1c1c1c;
  border-bottom: 1px solid #2a2a2a;
  min-height: 48px;
}

.score-overlay-body {
  min-height: 300px;
}

/* Edit mode badge */
.edit-mode-badge {
  background: rgba(255, 193, 7, 0.2);
  border: 1px solid rgba(255, 193, 7, 0.5);
  color: #ffc107;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

/* Annotation mode badge */
.annotate-mode-badge {
  background: rgba(220, 53, 69, 0.2);
  border: 1px solid rgba(220, 53, 69, 0.5);
  color: #dc3545;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

/* Annotate toggle button active state */
.annotate-toggle.is-active {
  background: rgba(220, 53, 69, 0.25);
  border-color: rgba(220, 53, 69, 0.85);
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

/* ============================================
   ANNOTATION TOOLBAR
   Using Bootstrap btn-group with custom styling
   ============================================ */

.annotate-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Button groups within toolbar */
.annotate-toolbar .btn-group {
  gap: 1px;
}

/* All toolbar buttons base style */
.annotate-toolbar .btn {
  padding: 0.35rem 0.5rem;
  font-size: 0.8125rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.15s ease;
}

.annotate-toolbar .btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* Checked state for toggle buttons - Bootstrap handles this via .btn-check:checked + .btn */
.annotate-toolbar .btn-check:checked + .btn {
  background: rgba(255, 255, 255, 0.9);
  color: #212529;
  border-color: rgba(255, 255, 255, 0.9);
}

.annotate-toolbar .btn-check:focus + .btn {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

/* Separator between button groups */
.annotate-toolbar .toolbar-separator {
  width: 1px;
  height: 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 0.25rem;
}

/* Size indicator dots */
.annotate-toolbar .size-dot {
  display: inline-block;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

.annotate-toolbar .size-dot-sm { width: 4px; height: 4px; }
.annotate-toolbar .size-dot-md { width: 8px; height: 8px; }
.annotate-toolbar .size-dot-lg { width: 12px; height: 12px; }

/* Color swatch buttons */
.annotate-toolbar .btn-color {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  position: relative;
}

.annotate-toolbar .btn-color:hover {
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.1);
}

.annotate-toolbar .btn-check:checked + .btn-color {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
  background: inherit; /* Keep the color, don't override */
}

/* Close/danger button */
.annotate-toolbar .btn-close-annotation:hover {
  background: rgba(220, 53, 69, 0.8);
  border-color: rgba(220, 53, 69, 0.8);
  color: #fff;
}

/* ============================================
   ANNOTATION MODE STATE
   When annotation mode is active
   ============================================ */

/* Hide other controls when annotating */
.score-overlay[data-annotate-mode="1"] [data-annotate-hide="1"] {
  display: none !important;
}

.score-overlay[data-annotate-mode="1"] .score-overlay-title {
  display: none !important;
}

/* Center the toolbar when in annotation mode */
.score-overlay[data-annotate-mode="1"] .score-overlay-header {
  justify-content: center;
}

.score-overlay[data-annotate-mode="1"] .score-overlay-actions {
  flex: 1;
  justify-content: center;
}

/* Hide close button in annotate mode to prevent accidental clicks */
.score-overlay[data-annotate-mode="1"] #scoreCloseBtn {
  display: none;
}

/* ============================================
   CHUNK EDITING STYLES
   ============================================ */

.chunk-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chunk-color-swatch {
  border-radius: 0.4rem;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  color: #111;
}

.btn-check:checked + .chunk-color-swatch {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
  transform: scale(1.05);
}

/* Chunk toggle active state */
.chunk-toggle.is-active {
  background: rgba(255, 193, 7, 0.25);
  border-color: rgba(255, 193, 7, 0.85);
}

/* Fullscreen mode buttons */
.score-fullscreen-btn.is-active {
  background: rgba(13, 110, 253, 0.3);
  border-color: rgba(13, 110, 253, 0.95);
}