/**
 * Manic Pixels Web OS — Sounds CSS
 * Estilos para Control Panel > Sons (mixer, eventos, temas).
 * Sprint 8
 */

/* ── Pane overrides ──────────────────────────────────────────────────────── */

.mp-cp-sounds-pane .mp-cp-tabs { margin-bottom: 16px; }

.mp-cp-sounds-content {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.mp-cp-sounds-hint {
  font-size:   var(--mp-font-size-xs, 11px);
  color:       rgba(255,255,255,0.38);
  line-height: 1.5;
  margin:      0 0 12px;
}

/* ── Mixer — master row ──────────────────────────────────────────────────── */

.mp-cp-sounds-master-row {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     8px 0;
}

.mp-cp-sounds-mute-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   8px;
  border:          1px solid rgba(255,255,255,0.10);
  background:      rgba(255,255,255,0.06);
  color:           rgba(255,255,255,0.75);
  cursor:          pointer;
  padding:         0;
  flex-shrink:     0;
  transition:      background 0.12s, color 0.12s, border-color 0.12s;
}

.mp-cp-sounds-mute-btn:hover {
  background:   rgba(255,255,255,0.11);
  color:        rgba(255,255,255,0.95);
}

.mp-cp-sounds-mute-btn.muted {
  color:        rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.04);
  background:   rgba(255,255,255,0.02);
}

.mp-cp-sounds-mute-btn.small {
  width:  26px;
  height: 26px;
  border-radius: 5px;
  border: none;
  background: transparent;
}

.mp-cp-sounds-mute-btn.small:hover {
  background: rgba(255,255,255,0.08);
}

/* ── Mixer — app list ────────────────────────────────────────────────────── */

.mp-cp-sounds-app-list {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.mp-cp-sounds-empty {
  font-size: 12px;
  color:     rgba(255,255,255,0.28);
  padding:   12px 0;
  text-align:center;
  font-style: italic;
}

.mp-cp-sounds-app-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     6px 8px;
  border-radius: 7px;
  background:  rgba(255,255,255,0.025);
  border:      1px solid rgba(255,255,255,0.05);
  transition:  background 0.12s;
}

.mp-cp-sounds-app-row:hover {
  background: rgba(255,255,255,0.04);
}

.mp-cp-sounds-app-icon {
  font-size:   16px;
  flex-shrink: 0;
  width:       20px;
  text-align:  center;
}

.mp-cp-sounds-app-label {
  font-size:  12px;
  color:      rgba(255,255,255,0.70);
  min-width:  80px;
  flex-shrink:0;
  font-weight:450;
}

/* ── Events tab ──────────────────────────────────────────────────────────── */

.mp-cp-sounds-events-header {
  display:      flex;
  gap:          8px;
  flex-wrap:    wrap;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mp-cp-sounds-event-list {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.mp-cp-sounds-event-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       7px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.mp-cp-sounds-event-row:last-child { border-bottom: none; }

.mp-cp-sounds-event-label {
  flex:        1;
  min-width:   0;
  font-size:   var(--mp-font-size-base, 13px);
  color:       rgba(255,255,255,0.78);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.mp-cp-sounds-event-controls {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-shrink: 0;
}

/* Test play button */
.mp-cp-sounds-test-btn {
  width:    26px;
  height:   26px;
  padding:  0;
  display:  flex;
  align-items: center;
  justify-content: center;
  font-size:10px;
}

.mp-cp-sounds-test-btn:disabled {
  opacity: 0.35;
  cursor:  not-allowed;
}

/* File pill */
.mp-cp-sounds-file-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       2px 8px;
  border-radius: 12px;
  border:        1px solid rgba(255,255,255,0.07);
  background:    rgba(255,255,255,0.04);
  font-size:     10px;
  cursor:        default;
  max-width:     110px;
  overflow:      hidden;
  transition:    border-color 0.12s, background 0.12s;
}

.mp-cp-sounds-file-pill.has-file {
  border-color: rgba(var(--mp-accent-rgb,61,174,233),0.30);
  background:   rgba(var(--mp-accent-rgb,61,174,233),0.08);
}

.mp-cp-sounds-file-default {
  color: rgba(255,255,255,0.28);
  font-style: italic;
}

.mp-cp-sounds-file-name {
  color:        rgba(255,255,255,0.70);
  overflow:     hidden;
  text-overflow:ellipsis;
  white-space:  nowrap;
  max-width:    80px;
}

.mp-cp-sounds-file-clear {
  border:       none;
  background:   transparent;
  color:        rgba(255,255,255,0.40);
  cursor:       pointer;
  padding:      0;
  font-size:    9px;
  line-height:  1;
  flex-shrink:  0;
  transition:   color 0.1s;
}

.mp-cp-sounds-file-clear:hover { color: #ff5f57; }

/* ── Theme tab ───────────────────────────────────────────────────────────── */

.mp-cp-sounds-theme-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap:                   10px;
  margin-bottom:         4px;
}

.mp-cp-sounds-theme-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  padding:        14px 10px 12px;
  border:         1px solid rgba(255,255,255,0.08);
  border-radius:  10px;
  cursor:         pointer;
  background:     rgba(255,255,255,0.03);
  transition:     border-color 0.15s, background 0.15s, transform 0.12s;
  position:       relative;
  outline:        none;
}

.mp-cp-sounds-theme-card:hover {
  border-color: var(--mp-accent, #3daee9);
  background:   rgba(var(--mp-accent-rgb,61,174,233),0.07);
  transform:    translateY(-1px);
}

.mp-cp-sounds-theme-card.active {
  border-color: var(--mp-accent, #3daee9);
  background:   rgba(var(--mp-accent-rgb,61,174,233),0.12);
}

.mp-cp-sounds-theme-card:focus-visible {
  box-shadow: 0 0 0 2px rgba(var(--mp-accent-rgb,61,174,233),0.5);
}

.mp-cp-sounds-theme-icon {
  font-size: 24px;
}

.mp-cp-sounds-theme-name {
  font-size:   11px;
  font-weight: 500;
  color:       rgba(255,255,255,0.65);
  text-align:  center;
  white-space: nowrap;
}

.mp-cp-sounds-theme-badge {
  position:     absolute;
  top:          5px;
  right:        7px;
  font-size:    9px;
  font-weight:  600;
  color:        var(--mp-accent, #3daee9);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Modal de instalação ─────────────────────────────────────────────────── */

.mp-cp-sounds-modal-overlay {
  position:  fixed;
  inset:     0;
  z-index:   99998;
  background:rgba(0,0,0,0.55);
  display:   flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.mp-cp-sounds-modal {
  background:    var(--mp-menu-bg, rgba(27,30,46,0.98));
  border:        1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  box-shadow:    0 20px 60px rgba(0,0,0,0.6);
  width:         440px;
  max-width:     92vw;
  display:       flex;
  flex-direction:column;
  overflow:      hidden;
}

.mp-cp-sounds-modal-header {
  display:       flex;
  align-items:   center;
  justify-content:space-between;
  padding:       14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-family:   var(--mp-font-ui, system-ui, sans-serif);
  font-size:     14px;
  font-weight:   600;
  color:         var(--mp-menu-fg, #e8e8f0);
}

.mp-cp-sounds-modal-close {
  border:     none;
  background: transparent;
  color:      rgba(255,255,255,0.45);
  cursor:     pointer;
  font-size:  16px;
  padding:    0;
  transition: color 0.12s;
}

.mp-cp-sounds-modal-close:hover { color: rgba(255,255,255,0.85); }

.mp-cp-sounds-modal-body {
  padding: 18px;
  font-family: var(--mp-font-ui, system-ui, sans-serif);
  font-size:   13px;
  color:       rgba(255,255,255,0.70);
  line-height: 1.6;
  overflow-y:  auto;
}

.mp-cp-sounds-modal-body p  { margin: 0 0 10px; }
.mp-cp-sounds-modal-body pre {
  background:    rgba(0,0,0,0.3);
  border:        1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding:       8px 10px;
  font-size:     11px;
  overflow-x:    auto;
  margin:        8px 0;
  color:         rgba(255,255,255,0.80);
}

.mp-cp-sounds-modal-body code {
  background:    rgba(0,0,0,0.25);
  border-radius: 3px;
  padding:       1px 5px;
  font-size:     11px;
  color:         var(--mp-accent, #3daee9);
}

.mp-cp-sounds-modal-footer {
  padding:    14px 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display:    flex;
  justify-content: flex-end;
}