/* shared-style.css -- common styles for both players */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

/* Set custom text selection color */
::selection {
    background-color: #ef4444; /* red-500 */
    color: #ffffff;
}

body {
  font-family: 'Orbitron', monospace;
  background-color: #1a202c;          /* Dark slate */
}

.glow {
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.7);   /* Indigo glow */
}

/* Scroll-bar, focus, tooltip, and modal styles */
#playlistContainer::-webkit-scrollbar { 
  width: 6px; 
}

#playlistContainer::-webkit-scrollbar-thumb {
  background-color: rgba(99, 102, 241, 0.7); /* Indigo */
  border-radius: 3px;
}

#fileInput { 
  display: none; 
}

button:focus-visible, input:focus-visible {
  outline: 2px solid #6366f1;   /* indigo-500 */
  outline-offset: 2px;
}

.tippy-box[data-theme~='material'] {
  font-family: 'Orbitron', monospace;
  background-color: #2d3748;    /* gray-800 */
}

.tippy-box[data-theme~='material'][data-placement^='top']  > .tippy-arrow::before,
.tippy-box[data-theme~='material'][data-placement^='bottom']> .tippy-arrow::before {
  border-top-color: #2d3748;
  border-bottom-color: #2d3748;
}

.modal-card {
  background-color: #2d3748;    /* gray-800 */
  border-radius: 0.75rem;
  padding: 1.5rem;
  width: 90%;
  max-width: 500px;
  border: 1px solid #4a5568;    /* gray-700 */
}