@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles from base.html */

/* Dark mode styles */
.dark {
  color-scheme: dark;
}
.dark body {
  background-color: #1a1a1a;
  color: #e5e5e5;
}
.dark header {
  background-color: #262626;
  border-color: #404040;
}
.dark footer {
  background-color: #262626;
  border-color: #404040;
}
.dark .inactive-tab {
  color: #9ca3af;
}
.dark .inactive-tab:hover {
  color: #d1d5db;
}
.dark #player-status-bar-container {
  background-color: #262626;
  color: #e5e5e5;
}
.dark .bg-gray-100 {
  background-color: #262626;
}
.dark .bg-gray-200 {
  background-color: #404040;
}
.dark .bg-gray-300 {
  background-color: #525252;
}
.dark .text-gray-500 {
  color: #9ca3af;
}
.dark .text-gray-700 {
  color: #d1d5db;
}
.dark .text-gray-800 {
  color: #e5e5e5;
}
.dark .border-gray-200 {
  border-color: #404040;
}
.dark .hover\:bg-gray-200:hover {
  background-color: #404040;
}
.dark .hover\:bg-gray-300:hover {
  background-color: #525252;
}
.dark .hover\:border-gray-300:hover {
  border-color: #525252;
}
.dark .hover\:bg-gray-50:hover {
  background-color: #262626;
}
.dark .bg-white {
  background-color: #262626;
}
.dark .bg-gray-50 {
  background-color: #1a1a1a;
}
.dark .text-gray-900 {
  color: #e5e5e5;
}
.dark .text-gray-400 {
  color: #9ca3af;
}
.dark .border-gray-300 {
  border-color: #404040;
}
.dark .focus\:ring-offset-2 {
  --tw-ring-offset-color: #262626;
}
.dark .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}
.dark .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Tab styles */
@layer components {
  .active-tab {
    @apply text-blue-600 border-blue-600;
  }
  .active-tab .material-icons {
    @apply text-blue-600;
  }
  .inactive-tab {
    @apply text-gray-500;
  }
  .inactive-tab:hover {
    @apply text-gray-700;
  }
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors duration-150;
  }
  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
  }
  .btn-secondary {
    @apply bg-gray-200 text-gray-700 hover:bg-gray-300;
  }
  .form-input {
    @apply block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500;
  }
}

/* Status message transition */
#status-message {
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* Switch toggle styles */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #0c7ff2;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

/* Shadow for top of status bar */
.shadow-lg-top {
  box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Marquee animation for pattern name on small screens */
@keyframes marquee {
  0%   { transform: translateX(0%); }
  50% { transform: translateX(-50%); }
}

.pattern-marquee {
  display: inline-block;
  min-width: 100%;
  animation: marquee 8s linear infinite;
}

@media (min-width: 640px) { /* sm: and up, disable marquee */
  .pattern-marquee {
    animation: none !important;
    transform: none !important;
  }
}