/* Music Empire — small custom utilities on top of Tailwind CDN. */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #18181b; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #52525b; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  border: 1px solid;
}
.badge-ready    { background: rgba(16,185,129,.15); border-color: #047857; color: #6ee7b7; }
.badge-uploaded { background: rgba(255,215,0,.10); border-color: #a16207; color: #fde047; }
.badge-rejected { background: rgba(244,63,94,.15);  border-color: #be123c; color: #fda4af; }
.badge-failed   { background: rgba(244,63,94,.15);  border-color: #be123c; color: #fda4af; }
.badge-generating { background: rgba(59,130,246,.15); border-color: #1d4ed8; color: #93c5fd; }
.badge-quality_check { background: rgba(168,85,247,.15); border-color: #7e22ce; color: #d8b4fe; }
.badge-active   { background: rgba(16,185,129,.15); border-color: #047857; color: #6ee7b7; }
.badge-paused   { background: rgba(245,158,11,.15); border-color: #b45309; color: #fcd34d; }
.badge-banned   { background: rgba(244,63,94,.15);  border-color: #be123c; color: #fda4af; }
.badge-default  { background: rgba(82,82,91,.30); border-color: #52525b; color: #d4d4d8; }

.card {
  background: #18181b; border: 1px solid #27272a; border-radius: 0.75rem;
  transition: border-color .15s;
}
.card:hover { border-color: #3f3f46; }

.stat-card {
  background: linear-gradient(135deg, #18181b 0%, #0f0f12 100%);
  border: 1px solid #27272a; border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500;
  border: 1px solid; cursor: pointer; transition: all .15s;
}
.btn-primary { background: #FFD700; color: #000; border-color: #FFD700; }
.btn-primary:hover { background: #E0B100; border-color: #E0B100; }
.btn-ghost   { background: #27272a; color: #e5e7eb; border-color: #3f3f46; }
.btn-ghost:hover { background: #3f3f46; }
.btn-danger  { background: #7f1d1d; color: #fee2e2; border-color: #b91c1c; }
.btn-danger:hover { background: #991b1b; }

.input, .select, .textarea {
  background: #0a0a0a; border: 1px solid #3f3f46; color: #f4f4f5;
  border-radius: 6px; padding: 6px 10px; font-size: 13px;
  outline: none; transition: border-color .15s;
  width: 100%;
}
.input:focus, .select:focus, .textarea:focus { border-color: #FFD700; }

.log-line { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; line-height: 1.5; }

.log-info  { color: #d4d4d8; }
.log-warn  { color: #fcd34d; }
.log-error { color: #fda4af; }
.log-debug { color: #94a3b8; }

.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #FFD700; border-top-color: transparent;
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.htmx-request .htmx-indicator { display: inline-block; }
.htmx-indicator { display: none; }

.fade-in { animation: fadeIn .2s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }