/* ============================
   Pomodoro – Clean Styles
============================ */

/* Timer */
.tool-pomodoro-timer {
  font-size: 3rem;
  font-weight: 600;
}

.tool-pomodoro-status {
  opacity: 0.7;
  margin-top: var(--space-xs);
}

.tool-pomodoro-controls {
  margin-top: var(--space-lg);
  display: flex;
  gap: var(--space-xs);
}

/* Footer */
.tool-footer {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

/* Audio */
.pomodoro-audio-footer {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  opacity: 0.35;
}

.tool-pomodoro:hover .pomodoro-audio-footer,
.tool-pomodoro:focus-within .pomodoro-audio-footer {
  opacity: 1;
}

/* Buttons */
#toggleSound,
#testSound,
#soundSelect {
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  opacity: 0.7;
}

/* Dropdown options - fix white leaking in dark mode */
#soundSelect option {
  background-color: var(--card);
  color: var(--text);
}

#toggleSound:hover,
#testSound:hover,
#soundSelect:hover {
  opacity: 1;
  background: rgb(37 99 235 / 8%);
  border-color: var(--primary);
}

#toggleSound.active,
#testSound.playing {
  background: var(--primary);
  color: #fff;
  opacity: 1;
}

/* Responsive */
@media (width <= 640px) {
  .tool-pomodoro-timer {
    font-size: 2.5rem;
  }

  .pomodoro-audio-footer {
    opacity: 1;
  }
}

@media (width <= 480px) {
  .tool-pomodoro-controls {
    flex-direction: column;
  }
}