/* ===== Variáveis Globais ===== */
:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --purple: #a855f7;
  --bg-dark: #0a0a0f;
  --bg-card: #1a1a2e;
  --bg-card2: #16213e;
  --text-muted: rgba(255,255,255,.5);
  --border: rgba(255,255,255,.1);
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,.7); }

/* ===== Utilitários ===== */
.text-gradient {
  background: linear-gradient(135deg, var(--primary), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== Flash messages ===== */
.flash-container { max-width: 360px; }

/* ===== Loading spinner ===== */
.spinner-karaoke {
  width: 48px; height: 48px;
  border: 4px solid rgba(99,102,241,.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Animações ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInUp .4s ease forwards; }

/* ===== Responsive ===== */
@media (max-width: 576px) {
  .display-5 { font-size: 1.8rem; }
  .display-6 { font-size: 1.4rem; }
}


/* ================================================================
   ADMIN — Correções globais de tema escuro
   ================================================================ */

/* --- Inputs e Textareas --- */
.form-control,
.form-control.bg-dark,
textarea.form-control {
  background-color: #111827 !important;
  color: #e5e7eb !important;
  border-color: rgba(255,255,255,.15) !important;
}
.form-control::placeholder { color: rgba(255,255,255,.3) !important; }
.form-control:focus,
.form-control.bg-dark:focus {
  background-color: #1f2937 !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 .2rem rgba(99,102,241,.25) !important;
}

/* --- Selects / Dropdowns --- */
.form-select,
.form-select.bg-dark {
  background-color: #111827 !important;
  color: #e5e7eb !important;
  border-color: rgba(255,255,255,.15) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
.form-select:focus,
.form-select.bg-dark:focus {
  background-color: #1f2937 !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 .2rem rgba(99,102,241,.25) !important;
}
/* Opções do select no browser */
.form-select option,
select option {
  background-color: #1f2937;
  color: #e5e7eb;
}

/* --- File input --- */
.form-control[type="file"] {
  background-color: #111827 !important;
  color: #9ca3af !important;
}
.form-control[type="file"]::file-selector-button {
  background-color: #374151;
  color: #e5e7eb;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.15);
  padding: .375rem .75rem;
  margin-right: .75rem;
  transition: background .2s;
}
.form-control[type="file"]::file-selector-button:hover {
  background-color: #4b5563;
}

/* --- Tabs --- */
.nav-tabs {
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
.nav-tabs .nav-link {
  color: rgba(255,255,255,.5) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px 6px 0 0;
  padding: .5rem 1rem;
  transition: color .2s, background .2s;
}
.nav-tabs .nav-link:hover {
  color: rgba(255,255,255,.85) !important;
  background: rgba(255,255,255,.06) !important;
  border-color: transparent !important;
}
.nav-tabs .nav-link.active {
  color: #fff !important;
  background: #1a1a2e !important;
  border-color: rgba(255,255,255,.12) rgba(255,255,255,.12) #1a1a2e !important;
  font-weight: 600;
}

/* Tab pane background transparente */
.tab-content { background: transparent; }

/* --- Nav pills (sidebar) --- */
.nav-pills .nav-link {
  color: rgba(255,255,255,.7) !important;
}
.nav-pills .nav-link:hover,
.nav-pills .nav-link.active {
  background: rgba(99,102,241,.3) !important;
  color: #fff !important;
}

/* --- Alerts dentro de cards escuros --- */
.alert-danger {
  background-color: rgba(239,68,68,.15) !important;
  border-color: rgba(239,68,68,.3) !important;
  color: #fca5a5 !important;
}
.alert-success {
  background-color: rgba(34,197,94,.15) !important;
  border-color: rgba(34,197,94,.3) !important;
  color: #86efac !important;
}
.alert-warning {
  background-color: rgba(245,158,11,.15) !important;
  border-color: rgba(245,158,11,.3) !important;
  color: #fcd34d !important;
}
.alert-info {
  background-color: rgba(99,102,241,.15) !important;
  border-color: rgba(99,102,241,.3) !important;
  color: #a5b4fc !important;
}

/* --- Tables escuras --- */
.table-dark {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(255,255,255,.04);
  color: #e5e7eb;
}
.table-dark th { color: rgba(255,255,255,.5); font-weight: 500; font-size: .82rem; }
.table-dark td { border-color: rgba(255,255,255,.06) !important; }
.table-dark thead tr { border-bottom: 1px solid rgba(255,255,255,.1); }

/* --- Paginação --- */
.page-link {
  background-color: #1f2937 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #9ca3af !important;
}
.page-link:hover { background-color: #374151 !important; color: #fff !important; }
.page-item.active .page-link {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.page-item.disabled .page-link { opacity: .4; }

/* --- Badges --- */
.badge { font-weight: 600; letter-spacing: .02em; }

/* --- Botões outline no tema escuro --- */
.btn-outline-secondary {
  color: #9ca3af !important;
  border-color: rgba(255,255,255,.2) !important;
}
.btn-outline-secondary:hover {
  background-color: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.btn-outline-light { border-color: rgba(255,255,255,.3) !important; }

/* --- Card headers --- */
.card-header { background: transparent !important; }

/* --- pre/code dentro do admin --- */
pre {
  background: rgba(0,0,0,.3);
  border-radius: 6px;
  padding: .75rem 1rem;
  font-size: .8rem;
}

/* --- Form check switch --- */
.form-check-input {
  background-color: #374151 !important;
  border-color: rgba(255,255,255,.2) !important;
}
.form-check-input:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(99,102,241,.25) !important;
}