/* ══════════════════════════════════════════════════════════════════
   Last Studio — Theme v3.0
   ──────────────────────────────────────────────────────────────────
   FILOSOFIA:
   - Light mode: Tailwind puro, sem override nenhum.
     As classes base (bg-white, text-gray-900, etc.) já funcionam.
   - Dark mode: sobrescreve via html.dark
   - Accent: vermelho YouTube (#cc0000) via Tailwind brand config
   ══════════════════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --d-bg:      #020810;
  --d-card:    #0a1628;
  --d-card2:   #0f2240;
  --d-border:  #1a2d4a;
  --d-border2: #264060;
  --d-text:    #e8f0ff;
  --d-text2:   #8fb3cc;
  --d-text3:   #7a9ab8;
  --accent:        #cc0000;
  --accent-hover:  #aa0000;
  --accent-subtle: rgba(204,0,0,0.08);
  --accent-glow:   rgba(204,0,0,0.20);
}

/* ── Utilitários globais ── */
* { transition: background-color 0.2s, border-color 0.2s, color 0.15s; }
.glass { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }
html { scroll-behavior: smooth; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.animate-in { animation: fadeInUp 0.3s cubic-bezier(.22,1,.36,1) forwards; }
@media (min-width:1024px) { .page-content { margin-left:15rem; } }
@media (max-width:1023px) { .page-content { padding-top:3.5rem; } }

/* ── Logo LS ── */
.ls-logo {
  background: linear-gradient(135deg, #ff0000, #cc0000) !important;
  box-shadow: 0 2px 12px rgba(204,0,0,0.30) !important;
  color: #fff !important;
}

/* ── Voz inativa ── */
.card-inner { transition: opacity 0.2s; }
.card-inner.inactive { opacity: 0.4; pointer-events: none; }
.voice-card [data-menu] { pointer-events: all !important; }
.voice-card[data-active="false"] { border-style: dashed !important; }
.voice-card.menu-open { z-index: 100 !important; }

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — só isso. Light fica com Tailwind puro.
   ══════════════════════════════════════════════════════════════════ */
html.dark body { background-color: var(--d-bg) !important; color: var(--d-text) !important; }

/* Backgrounds */
html.dark .bg-white,
html.dark .bg-slate-900 { background-color: var(--d-card) !important; }
html.dark .bg-gray-50,
html.dark .bg-slate-950 { background-color: var(--d-bg) !important; }
html.dark .bg-gray-100,
html.dark .bg-slate-800 { background-color: var(--d-card2) !important; }
html.dark .bg-slate-800\/50 { background-color: rgba(15,34,64,0.7) !important; }
html.dark .bg-gray-200 { background-color: var(--d-border2) !important; }

/* Texto */
html.dark .text-white,
html.dark .text-gray-900 { color: var(--d-text) !important; }
html.dark .text-gray-700,
html.dark .text-slate-300 { color: var(--d-text2) !important; }
html.dark .text-gray-500,
html.dark .text-slate-400,
html.dark .text-gray-400 { color: var(--d-text3) !important; }

/* Bordas */
html.dark .border-gray-200,
html.dark .border-slate-800 { border-color: var(--d-border) !important; }
html.dark .border-slate-700,
html.dark .border-gray-300,
html.dark .border-slate-700\/50 { border-color: var(--d-border2) !important; }
html.dark .divide-slate-800\/50 > * + * { border-color: var(--d-border) !important; }

/* Botões */
html.dark .bg-brand-600,
html.dark .bg-brand-500 { background-color: var(--accent) !important; color: #fff !important; }
html.dark .bg-brand-600:hover,
html.dark .hover\:bg-brand-700:hover { background-color: var(--accent-hover) !important; }
/* bg-emerald-600 mantém verde no dark mode — não sobrescrever */
html.dark .text-brand-600,
html.dark .text-brand-500,
html.dark .text-brand-400 { color: #ff4444 !important; }
html.dark .bg-brand-50,
html.dark .bg-brand-900\/20 { background-color: var(--accent-subtle) !important; }
html.dark .border-brand-500,
html.dark .border-brand-600 { border-color: var(--accent) !important; }

/* Hovers */
html.dark .hover\:bg-slate-800:hover,
html.dark .hover\:bg-gray-100:hover { background-color: var(--d-card2) !important; }
html.dark .hover\:bg-slate-700:hover { background-color: var(--d-border) !important; }

/* Inputs */
html.dark input,
html.dark select,
html.dark textarea { background-color: var(--d-card2) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; }
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-subtle) !important; outline: none !important; }

/* Sidebar */
html.dark #sidebar { background-color: #060e20 !important; border-color: var(--d-border) !important; }
html.dark #mobileHeader { background-color: rgba(2,8,16,0.95) !important; border-color: var(--d-border) !important; }
html.dark header.sticky { background-color: rgba(2,8,16,0.92) !important; border-color: var(--d-border) !important; }
html.dark #sidebarGpu { background-color: rgba(10,22,40,0.8) !important; border-color: var(--d-border) !important; }

/* Nav */
html.dark .nav-item { color: var(--d-text3) !important; }
html.dark .nav-item:hover { background: var(--accent-subtle) !important; color: #ff4444 !important; }
html.dark .nav-item.active { background: rgba(204,0,0,0.12) !important; color: #ff4444 !important; font-weight: 600; }

/* Nav light (padrão sem dark) */
.nav-item { border-radius: 12px; }
.nav-item:hover { background-color: #f2f2f2; }
.nav-item.active { background-color: rgba(204,0,0,0.06); color: #cc0000; font-weight: 600; }

/* Cards */
html.dark .voice-card { background-color: var(--d-card2) !important; border-color: var(--d-border) !important; }
html.dark .voice-card:hover { border-color: var(--accent) !important; }
html.dark .voice-card[data-active="false"] { border-color: var(--d-border) !important; }
html.dark .card-glow:hover { box-shadow: 0 0 0 1px var(--accent-glow), 0 8px 32px rgba(204,0,0,0.06) !important; }

/* Modal */
html.dark #lsModal .bg-white,
html.dark .bg-white.rounded-2xl { background-color: var(--d-card) !important; }
html.dark .fixed .rounded-2xl,
html.dark .fixed .rounded-xl { background-color: var(--d-card) !important; border-color: var(--d-border) !important; }

/* Status badges */
html.dark .bg-emerald-50, html.dark .bg-emerald-900\/30 { background-color: rgba(105,240,174,0.1) !important; }
html.dark .text-emerald-600, html.dark .text-emerald-700, html.dark .text-emerald-400 { color: #69f0ae !important; }
html.dark .bg-amber-50, html.dark .bg-amber-900\/30 { background-color: rgba(255,171,0,0.1) !important; }
html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-400 { color: #ffab00 !important; }
html.dark .bg-red-50, html.dark .bg-red-900\/20 { background-color: rgba(255,82,82,0.1) !important; }
html.dark .text-red-600, html.dark .text-red-700, html.dark .text-red-400 { color: #ff5252 !important; }
html.dark .bg-blue-50, html.dark .bg-blue-900\/20 { background-color: rgba(33,150,243,0.1) !important; }
html.dark .text-blue-600, html.dark .text-blue-400 { color: #2196f3 !important; }

/* Menus dropdown */
html.dark .voice-menu,
html.dark #batchMenu { background-color: var(--d-card) !important; border-color: var(--d-border) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; }

/* Now playing */
html.dark #nowPlaying { background-color: #081428 !important; border-color: var(--d-border) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important; }

/* Batch bar */
html.dark #batchBar > div { background-color: var(--d-card) !important; border-color: var(--d-border) !important; }

/* Misc */
html.dark table th { color: var(--d-text3) !important; border-color: var(--d-border) !important; }
html.dark tr:hover td { background-color: rgba(204,0,0,0.03) !important; }
html.dark pre { background-color: #050d1c !important; border-color: var(--d-border) !important; color: #a8d8f0 !important; }
html.dark code { background-color: var(--accent-subtle) !important; color: #ff4444 !important; }
html.dark #editor { background-color: #050d1c !important; color: #a8d8f0 !important; border-color: var(--d-border) !important; }
html.dark #lineNumbers { background-color: #050d1c !important; color: var(--d-text3) !important; }
html.dark canvas { opacity: 0.9; }
html.dark .login-card { box-shadow: 0 0 0 1px rgba(204,0,0,0.1), 0 32px 64px rgba(0,0,0,0.6) !important; }
html.dark ::-webkit-scrollbar-thumb { background: var(--d-border) !important; }
html.dark ::-webkit-scrollbar-thumb:hover { background: var(--d-border2) !important; }

/* ══════════════════════════════════════════════════════════════════
   Botões de Modal — ls-btn-*
   ══════════════════════════════════════════════════════════════════ */
button.ls-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 0.15s, filter 0.15s, transform 0.1s;
  border: none;
  outline: none;
  text-align: center;
  line-height: 1.25rem;
}
button.ls-btn:active { transform: scale(0.97); }

/* Secundário / Cancelar */
button.ls-btn-cancel {
  background: transparent !important;
  border: 1.5px solid #d1d5db !important;
  color: #374151 !important;
  font-weight: 500;
}
button.ls-btn-cancel:hover { background: #f3f4f6 !important; }
html.dark button.ls-btn-cancel {
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}
html.dark button.ls-btn-cancel:hover { background: #1e293b !important; }

/* Confirmar — variações */
button.ls-btn-confirm         { background: var(--accent) !important;       color: #fff !important; }
button.ls-btn-confirm:hover   { background: var(--accent-hover) !important; }

button.ls-btn-warning         { background: #d97706 !important; color: #fff !important; }
button.ls-btn-warning:hover   { background: #b45309 !important; }

button.ls-btn-danger          { background: #dc2626 !important; color: #fff !important; }
button.ls-btn-danger:hover    { background: #b91c1c !important; }

button.ls-btn-success         { background: #059669 !important; color: #fff !important; }
button.ls-btn-success:hover   { background: #047857 !important; }

button.ls-btn-info            { background: #2563eb !important; color: #fff !important; }
button.ls-btn-info:hover      { background: #1d4ed8 !important; }

/* ══════════════════════════════════════════════════════════════════
   Import Folders — lista de pastas com progresso inline
   ══════════════════════════════════════════════════════════════════ */
.if-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  background: var(--if-row-bg, #f9fafb);
  border-radius: 0.5rem;
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}
html.dark .if-row { background: #1e293b; }

.if-row-info { flex: 1; min-width: 0; }

.if-row-name {
  font-weight: 500;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.dark .if-row-name { color: #e2e8f0; }

.if-row-count {
  font-size: 0.625rem;
  color: #9ca3af;
  flex-shrink: 0;
}

.if-progress-wrap { display: none; margin-top: 0.25rem; }
.if-progress-wrap.visible { display: block; }

.if-progress-track {
  height: 4px;
  background: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}
html.dark .if-progress-track { background: #334155; }

.if-progress-bar {
  height: 100%;
  background: #10b981;
  border-radius: 9999px;
  transition: width 0.3s ease;
  width: 0%;
}
.if-progress-bar.error { background: #ef4444; }

.if-progress-info {
  font-size: 0.625rem;
  color: #6b7280;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.if-progress-info.done { color: #059669; }
html.dark .if-progress-info.done { color: #34d399; }

.if-remove-btn {
  color: #9ca3af;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0 2px;
  transition: color 0.15s;
}
.if-remove-btn:hover { color: #ef4444; }


/* ── Override Tailwind base reset para botões específicos ── */
#ifSubmitBtn {
  background-color: #059669 !important;
  color: #fff !important;
  border: none !important;
}
#ifSubmitBtn:hover:not(:disabled) {
  background-color: #047857 !important;
}
#ifSubmitBtn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}