/**
 * AlphaTab Custom Styles
 * Band Assist - Guitar Pro Player
 *
 * Note: Some !important declarations are necessary because AlphaTab
 * applies inline styles. These are scoped to AlphaTab-specific classes
 * (prefixed with .at-) to minimize global impact.
 */

/* Currently playing bar - subtle amber highlight */
.at-cursor-bar {
  background: rgba(245, 158, 11, 0.12) !important; /* Amber-500 at 12% opacity */
  z-index: 10 !important; /* Below modal overlays (z-50) */
}

/* Beat cursor - vertical line showing exact playback position */
.at-cursor-beat {
  background: rgba(245, 158, 11, 0.85) !important; /* Solid amber */
  width: 3px !important;
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
  z-index: 10 !important; /* Below modal overlays (z-50) */
}

/* Currently playing notes - highlighted in amber */
.at-highlight * {
  fill: #f59e0b !important; /* Amber-500 */
  stroke: #f59e0b !important;
  stroke-width: 1.5 !important;
}

/* Loop range selection - light amber overlay with dashed border
 * Note: AlphaTab applies transform: scale() to this element, which causes
 * the border dashes to stretch. This is a known limitation of AlphaTab's
 * selection rendering and cannot be fixed with pure CSS. */
.at-selection div {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 2px dashed rgba(245, 158, 11, 0.6) !important;
  border-radius: 4px;
  z-index: 10 !important; /* Below modal overlays (z-50) */
}

/* Hover effect on beats (for loop selection) */
.at-surface .at-beat:hover {
  cursor: pointer;
  opacity: 0.8;
}