/*
 * Cadence — Digital Sheet Music Management Platform
 * Copyright © DoubTech. The LICENSE file in the repo root governs use of this file.
 *
 * annotations-timpani.css — Styles for the timpani drum-selection panel (rendered
 * inside the annotation settings drawer) and the on-page re-tune marker system.
 * Scoped under .timpani-panel / .timpani-retune-marker so there is no bleed into
 * other annotation or rehearsal styles. Themed with the app's design tokens
 * (--c-*) so it reads as a native Cadence surface. Each drum renders as a
 * bordered circle showing bowl size + current pitch, echoing the circled-pitch
 * notation in the Timpani reference; tapping a drum signals the hardware plugin.
 */

/* ── Panel container (inside the settings drawer) ─────────────────────────── */
.timpani-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--c-text-secondary);
}

/* ── Tappable drum circle row ─────────────────────────────────────────────── */
.timpani-drum-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.timpani-drum {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* Circled pitch design: bordered circle showing size + pitch, echoing the
   notation convention where tuning pitches are circled above the staff. */
.timpani-drum-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--c-accent);
  color: var(--c-text-primary);
  background: var(--c-surface-hover);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  gap: 1px;
}

.timpani-drum:hover .timpani-drum-circle,
.timpani-drum:focus-visible .timpani-drum-circle {
  background: var(--c-accent);
  color: var(--c-bg);
}

.timpani-drum-size {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  opacity: 0.75;
}

.timpani-drum-pitch {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
}

/* ── Editor section ──────────────────────────────────────────────────────── */
.timpani-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timpani-count-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.timpani-count-label,
.timpani-drum-label {
  font-size: 12px;
  color: var(--c-text-muted);
  white-space: nowrap;
}

.timpani-drum-label { min-width: 52px; }

.timpani-drum-editors {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.timpani-drum-editor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Inputs/selects share one themed look. */
.timpani-count-select,
.timpani-drum-size-select,
.timpani-drum-pitch-input {
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface-hover);
  color: var(--c-text-primary);
}
.timpani-drum-pitch-input { width: 90px; }
.timpani-count-select:focus,
.timpani-drum-size-select:focus,
.timpani-drum-pitch-input:focus {
  outline: none;
  border-color: var(--c-accent);
}
.timpani-drum-pitch-input::placeholder { color: var(--c-text-muted); }

/* ── Re-tune arm button ──────────────────────────────────────────────────── */
.timpani-retune-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.timpani-arm-btn {
  font: inherit;
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.timpani-arm-btn:hover,
.timpani-arm-btn:focus-visible {
  border-color: var(--c-accent);
  color: var(--c-text-primary);
}
.timpani-arm-btn.armed {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-bg);
  box-shadow: 0 0 0 2px var(--c-selection-bg);
}

/* ── Re-tune markers on the page ─────────────────────────────────────────── */
.timpani-retune-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 10;
  pointer-events: all;
}

.timpani-retune-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 14px;
  background: var(--c-primary);
  color: var(--c-text-primary);
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  transition: background 0.15s;
}
.timpani-retune-marker:hover .timpani-retune-inner {
  background: var(--c-primary-light);
}

/* ── Drum-arch widget (drawer preview + placed on score) ─────────────────── */

.timpani-arch-section { display: flex; flex-direction: column; gap: 6px; }
.timpani-arch-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
}

/* Arch container: drums positioned absolutely along an arch. */
.timpani-arch { position: relative; }

.timpani-arch-drum {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--c-accent);
  background: var(--c-surface-hover);
  color: var(--c-text-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  gap: 1px;
}
.timpani-arch-size { font-size: 9px; font-weight: 600; opacity: 0.75; line-height: 1; }
.timpani-arch-pitch { font-size: 11px; font-weight: 700; line-height: 1; }

/* Drawer preview: grab affordance. */
.timpani-arch-preview { padding: 4px 0; }
.timpani-arch-draggable { cursor: grab; touch-action: none; }
.timpani-arch-draggable:active { cursor: grabbing; }

/* Ghost following the pointer during a drag. */
.timpani-arch-ghost {
  position: fixed;
  z-index: 10050;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.85;
}

/* Placed on the score: centered on its normalized anchor. */
.timpani-arch-placed {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 9;
  pointer-events: auto;
}
.timpani-arch-placed.is-mine { cursor: move; touch-action: none; }

/* On the (white) sheet music the drums need a white fill with dark text so they
   read against the page, unlike the dark-themed drawer preview. */
.timpani-arch-placed .timpani-arch-drum {
  background: #ffffff;
  color: #14202a;
  border-color: var(--c-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.timpani-arch-placed .timpani-arch-size { opacity: 0.65; }

.timpani-arch-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--c-danger);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.timpani-arch-placed.is-mine:hover .timpani-arch-remove { display: flex; }

/* ── Arch sets list (drawer) ─────────────────────────────────────────────── */
.timpani-add-row { display: flex; }
.timpani-add-btn {
  font: inherit;
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-accent);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.timpani-add-btn:hover { background: var(--c-accent); color: var(--c-bg); }

.timpani-sets { display: flex; flex-direction: column; gap: 10px; }
.timpani-sets-empty { font-size: 12px; font-style: italic; color: var(--c-text-muted); }

.timpani-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
}
.timpani-set-trash { width: 32px; height: 32px; flex: 0 0 auto; color: var(--c-text-muted); }
.timpani-set-trash:hover { color: var(--c-danger); background: var(--c-surface-hover); }