/* ==========================================================================
   Seite „Soundboard“ · Modul-Code SND · id „sounds“ · Route #sounds
   Skript: public/js/pages/sounds.js

   Sounds als Pads im Look der Pult-Tasten aus A: Tastenkappe, LED oben
   rechts (grün aktiv, aus, blau Vorschau, amber über dem Limit), Name in
   Mono, Kosten und Abrufe, Pegel als 10er-Segmentleiste. Darunter je Pad
   eine Leiste mit Schalter und Aktionen. Nur Tokens aus tokens.css.
   ========================================================================== */

/* ---------- Pads ---------------------------------------------------------------- */

.page-sounds .snd-pads {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 14px;
}

.page-sounds .snd-pad {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r1);
  background: var(--key);
  box-shadow: var(--key-inset);
  transition: border-color var(--dur-1), background-color var(--dur-1);
}

/* Spielfläche: der ganze obere Teil ist die Taste */
.page-sounds .snd-pad__hit {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 11px 12px 10px;
  border: 0;
  border-radius: var(--r1) var(--r1) 0 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-1);
}
.page-sounds .snd-pad__hit:hover { background: var(--key-hi); }
.page-sounds .snd-pad__hit:active { transform: translateY(1px); }
.page-sounds .snd-pad__hit:focus-visible { outline-offset: -2px; }
.page-sounds .snd-pad__hit .led { position: absolute; top: 13px; right: 12px; width: 6px; height: 6px; }

.page-sounds .snd-pad__name {
  padding-right: 18px;
  font: 500 13px/1.3 var(--f-mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.page-sounds .snd-pad__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font: 400 11.5px/1.3 var(--f-mono);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.page-sounds .snd-pad__vol { display: flex; align-items: center; gap: 8px; }
.page-sounds .snd-pad__level { display: flex; gap: 2px; flex: 1; max-width: 96px; height: 4px; }
.page-sounds .snd-pad__level i { flex: 1; border-radius: 1px; background: var(--chart-track); }
.page-sounds .snd-pad__level i.on { background: var(--ink-3); }
.page-sounds .snd-pad__pct { font: 400 11px/1 var(--f-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }

.page-sounds .snd-pad__hint { padding: 0 12px 8px; }
.page-sounds .snd-pad__hint .over-limit-hint { margin-top: 0; }

.page-sounds .snd-pad__bar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: auto;
  padding: 4px 4px 4px 12px;
  border-top: 1px solid var(--line);
}
.page-sounds .snd-pad__bar .switch { margin-right: auto; }

/* Zustände */
.page-sounds .snd-pad.is-playing { border-color: var(--pgm); }
.page-sounds .snd-pad.is-playing .snd-pad__level i.on { background: var(--pgm); }
.page-sounds .snd-pad.is-off .snd-pad__name,
.page-sounds .snd-pad.is-over-limit .snd-pad__name { color: var(--ink-3); }
.page-sounds .snd-pad.is-over-limit .snd-pad__name { text-decoration: line-through; text-decoration-color: var(--ink-4); }
.page-sounds .snd-pad.is-off { background: var(--raised); box-shadow: none; }

/* Aktionen auf Geräten mit Maus erst beim Überfahren voll sichtbar */
@media (hover: hover) {
  .page-sounds .snd-pad__bar .btn { opacity: 0.5; transition: opacity var(--dur-1); }
  .page-sounds .snd-pad:hover .snd-pad__bar .btn,
  .page-sounds .snd-pad__bar .btn:focus-visible { opacity: 1; }
}

/* Legende im Paneelfuß */
.page-sounds .snd-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.page-sounds .snd-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.page-sounds .snd-legend .led { width: 6px; height: 6px; }

/* ---------- Editor ------------------------------------------------------------------- */

.page-sounds-dialog .snd-call { font: var(--t-code); color: var(--pgm-ink); white-space: nowrap; }

/* ---------- Schmal ------------------------------------------------------------------------ */

@media (max-width: 560px) {
  .page-sounds .snd-pads { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .page-sounds .snd-pad__bar { padding-left: 10px; }
  .page-sounds .snd-board .pnl__actions { display: none; }
}