/* =========================================================
   DJ Requests — Tema RCLARO
   Paleta: azul + âmbar sobre azul-quase-preto
   Tipografia: Bricolage Grotesque (display) + Geist (UI)
   ========================================================= */

:root {
  /* Camadas de fundo */
  --bg-0: #0a0e16;
  --bg-1: #0f1421;
  --bg-2: #161d2e;
  --bg-3: #1d2640;
  --bg-4: #283250;
  --border: #232c44;
  --border-soft: #1a2236;

  /* Texto */
  --tx-1: #eef2f8;
  --tx-2: #b8c4d8;
  --tx-3: #8195b3;
  --tx-4: #5a6a85;

  /* Acentos */
  --blue-1: #2d6be4;
  --blue-2: #4682f5;
  --blue-3: #6aa1ff;
  --blue-glow: rgba(70,130,245,.18);
  --amber-1: #f59e0b;
  --amber-2: #fbbf24;
  --amber-glow: rgba(245,158,11,.22);
  --green-1: #22c55e;
  --green-glow: rgba(34,197,94,.18);
  --red-1: #ef4444;
  --red-glow: rgba(239,68,68,.18);

  /* Tipografia */
  --f-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-ui: 'Geist', system-ui, -apple-system, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, monospace;

  /* Cantos */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;

  /* Sombras */
  --sh-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 3px rgba(0,0,0,.4);
  --sh-2: 0 8px 24px rgba(0,0,0,.5);
  --sh-glow: 0 0 0 1px var(--blue-2), 0 0 28px var(--blue-glow);
}

/* ============ Override Bootstrap dark theme ============ */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--bg-0);
  --bs-body-color: var(--tx-1);
  --bs-body-color-rgb: 238, 242, 248;
  --bs-secondary-color: var(--tx-3);
  --bs-secondary-color-rgb: 129, 149, 179;
  --bs-tertiary-color: var(--tx-4);
  --bs-secondary-bg: var(--bg-1);
  --bs-secondary-bg-rgb: 15, 20, 33;
  --bs-tertiary-bg: var(--bg-2);
  --bs-tertiary-bg-rgb: 22, 29, 46;
  --bs-emphasis-color: var(--tx-1);
  --bs-emphasis-color-rgb: 238, 242, 248;
  --bs-border-color: var(--border);
  --bs-border-color-translucent: rgba(35,44,68,.65);

  --bs-primary: var(--blue-2);
  --bs-primary-rgb: 70,130,245;
  --bs-primary-bg-subtle: rgba(70,130,245,.18);
  --bs-primary-border-subtle: var(--blue-1);
  --bs-primary-text-emphasis: var(--blue-3);

  --bs-success: var(--green-1);
  --bs-success-rgb: 34,197,94;
  --bs-success-bg-subtle: rgba(34,197,94,.15);
  --bs-success-text-emphasis: var(--green-1);

  --bs-warning: var(--amber-1);
  --bs-warning-rgb: 245,158,11;
  --bs-warning-bg-subtle: rgba(245,158,11,.18);
  --bs-warning-text-emphasis: var(--amber-2);

  --bs-danger: var(--red-1);
  --bs-danger-rgb: 239,68,68;
  --bs-danger-bg-subtle: rgba(239,68,68,.15);
  --bs-danger-text-emphasis: var(--red-1);

  --bs-info: var(--blue-3);
  --bs-info-rgb: 106,161,255;
  --bs-info-bg-subtle: rgba(106,161,255,.15);

  --bs-link-color: var(--blue-3);
  --bs-link-color-rgb: 106,161,255;
  --bs-link-hover-color: var(--blue-2);
}

/* ============ Base ============ */
*,*::before,*::after { box-sizing: border-box; }

/* Flexbox body — footer sempre no fundo */
html { height: 100%; }
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-0);
  background-image:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(45,107,228,.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(245,158,11,.05), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--tx-1);
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Main cresce para empurrar o footer para o fundo */
body > main { flex: 1; }

/* Footer sempre no fundo */
.site-footer {
  flex-shrink: 0;
  padding: 8px 20px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--tx-4);
  font-size: .72rem;
  background: var(--bg-0);
  user-select: none;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-4); }

/* ============ Tipografia ============ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tx-1);
}

code, .font-monospace, .mono { font-family: var(--f-mono); letter-spacing: .02em; }

/* Brand "DJ Requests" gradient */
.navbar-brand, .brand-text {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -.02em;
}
.navbar-brand span:last-child {
  background: linear-gradient(135deg, var(--tx-1) 30%, var(--blue-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-logo {
  display: inline-flex;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue-1), var(--blue-3));
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 4px 14px var(--blue-glow);
  animation: spin 16s linear infinite;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.gradient-text {
  background: linear-gradient(135deg, var(--tx-1) 20%, var(--blue-3) 70%, var(--amber-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============ Navbar ============ */
.navbar {
  background: linear-gradient(180deg, rgba(15,20,33,.96), rgba(15,20,33,.78)) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft) !important;
}
.navbar .nav-link { color: var(--tx-2); transition: color .15s; }
.navbar .nav-link:hover { color: var(--tx-1); }
.navbar .nav-link.text-white-50 { color: var(--tx-3) !important; }

/* ============ Cards ============ */
.card {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-3) !important;
  box-shadow: var(--sh-1);
}
.bg-body-tertiary { background: linear-gradient(180deg, var(--bg-1), var(--bg-2)) !important; }

/* Session cards on dashboard list */
.session-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.session-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: var(--blue-2) !important;
}

/* ============ Forms ============ */
.form-control, .form-select {
  background-color: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--tx-1) !important;
  border-radius: var(--r-2) !important;
  font-family: var(--f-ui);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
  background-color: var(--bg-2) !important;
  color: var(--tx-1) !important;
  border-color: var(--blue-2) !important;
  box-shadow: 0 0 0 3px var(--blue-glow) !important;
}
.form-control::placeholder { color: var(--tx-4) !important; }
.form-label {
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tx-3);
}
.form-check-input { background-color: var(--bg-2); border-color: var(--border); }
.form-check-input:checked { background-color: var(--blue-2); border-color: var(--blue-2); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--blue-glow); }

.input-group .form-control { border-right: 0; }

/* ============ Buttons ============ */
.btn {
  font-family: var(--f-ui);
  font-weight: 600;
  border-radius: var(--r-2);
  transition: all .15s;
}
.btn-primary {
  background: linear-gradient(180deg, var(--blue-2), var(--blue-1)) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 4px 12px var(--blue-glow);
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.1); transform: translateY(-1px); }
.btn-primary:disabled { box-shadow: none; opacity: .55; }

.btn-success {
  background: linear-gradient(180deg, #2bd66e, var(--green-1)) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 4px 12px var(--green-glow);
}
.btn-success:hover { filter: brightness(1.1); }

.btn-warning {
  background: linear-gradient(180deg, var(--amber-2), var(--amber-1)) !important;
  border: none !important;
  color: #1a1a1a !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 4px 12px var(--amber-glow);
}

.btn-danger {
  background: linear-gradient(180deg, #f56565, var(--red-1)) !important;
  border: none !important;
  color: #fff !important;
}

.btn-outline-light, .btn-outline-secondary {
  background: var(--bg-3) !important;
  color: var(--tx-1) !important;
  border: 1px solid var(--border) !important;
}
.btn-outline-light:hover, .btn-outline-secondary:hover {
  background: var(--bg-4) !important;
  border-color: var(--blue-2) !important;
}

.btn-outline-info { color: var(--blue-3) !important; border-color: var(--blue-2) !important; background: transparent !important; }
.btn-outline-info:hover { background: var(--blue-glow) !important; color: var(--blue-3) !important; }

.btn-outline-warning { color: var(--amber-2) !important; border-color: var(--amber-1) !important; background: transparent !important; }
.btn-outline-warning:hover { background: var(--amber-glow) !important; color: var(--amber-2) !important; }

.btn-outline-danger { color: var(--red-1) !important; border-color: var(--red-1) !important; background: transparent !important; }
.btn-outline-danger:hover { background: var(--red-glow) !important; color: var(--red-1) !important; }

.btn-outline-success { color: var(--green-1) !important; border-color: var(--green-1) !important; background: transparent !important; }

/* ============ Badges ============ */
.badge {
  font-family: var(--f-ui);
  font-weight: 600;
  border-radius: var(--r-1);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .68rem;
  padding: .35em .65em;
}
.badge.bg-success { background: rgba(34,197,94,.18) !important; color: var(--green-1) !important; }
.badge.bg-warning { background: rgba(245,158,11,.18) !important; color: var(--amber-2) !important; }
.badge.bg-danger  { background: rgba(239,68,68,.15) !important; color: var(--red-1) !important; }
.badge.bg-info    { background: rgba(106,161,255,.15) !important; color: var(--blue-3) !important; }
.badge.bg-secondary { background: var(--bg-3) !important; color: var(--tx-3) !important; }
.badge.bg-primary { background: rgba(70,130,245,.20) !important; color: var(--blue-3) !important; }

/* ============ Tabs ============ */
.nav-tabs {
  border-bottom: 1px solid var(--border-soft);
}
.nav-tabs .nav-link {
  color: var(--tx-3);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--r-2) var(--r-2) 0 0;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .02em;
}
.nav-tabs .nav-link:hover { color: var(--tx-2); background: var(--bg-1); border-color: transparent; }
.nav-tabs .nav-link.active {
  color: var(--tx-1) !important;
  background: var(--bg-2) !important;
  border-color: var(--border) var(--border) transparent !important;
}

.nav-pills .nav-link {
  color: var(--tx-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  font-weight: 600;
  font-size: .85rem;
  padding: .5rem 1rem;
}
.nav-pills .nav-link:hover { background: var(--bg-2); color: var(--tx-1); }
.nav-pills .nav-link.active {
  background: linear-gradient(180deg, var(--blue-2), var(--blue-1)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px var(--blue-glow);
}

/* ============ List rows (pedidos, queue, history) ============ */
.list-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .8rem;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-2);
  transition: background .15s, border-color .15s, transform .15s;
}
.list-row:hover {
  background: var(--bg-2);
  border-color: var(--border);
}
.list-row .cover {
  width: 52px; height: 52px;
  border-radius: var(--r-1);
  object-fit: cover;
  background: var(--bg-3);
  flex-shrink: 0;
}
.list-row .meta { flex-grow: 1; min-width: 0; }
.list-row .title {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: .92rem;
  color: var(--tx-1);
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-row .artist {
  color: var(--tx-3);
  font-size: .78rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.list-row .meta .msg {
  margin-top: .35rem;
  font-size: .78rem;
  font-style: italic;
  color: var(--amber-2);
  background: var(--amber-glow);
  padding: .25rem .5rem;
  border-radius: var(--r-1);
  display: inline-block;
  border: 1px solid rgba(245,158,11,.25);
}
.list-row .actions { display: flex; gap: .35rem; flex-shrink: 0; }
.list-row.drag-handle { cursor: grab; }
.list-row.drag-handle:active { cursor: grabbing; }
.list-row.playing {
  background: linear-gradient(90deg, rgba(245,158,11,.16), rgba(245,158,11,0));
  border-color: rgba(245,158,11,.45);
  box-shadow: 0 0 0 1px rgba(245,158,11,.15);
}
.list-row .badge-pos {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--tx-2);
  border-radius: 50%;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: .8rem;
  flex-shrink: 0;
}
.list-row.playing .badge-pos {
  background: var(--amber-1);
  border-color: var(--amber-1);
  color: #1a1a1a;
  box-shadow: 0 0 12px var(--amber-glow);
}

/* Sortable */
.sortable-ghost { opacity: .35; }
.sortable-chosen { box-shadow: 0 0 0 2px var(--blue-2); }
.sortable-drag { transform: rotate(.5deg); }

/* ============ Search results in modals ============ */
.search-result {
  display: flex; gap: .75rem; align-items: center;
  padding: .55rem .7rem;
  border-radius: var(--r-2);
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  transition: background .15s, border-color .15s;
}
.search-result:hover { background: var(--bg-2); border-color: var(--border); }
.search-result img {
  width: 52px; height: 52px;
  border-radius: var(--r-1);
  object-fit: cover;
  background: var(--bg-3);
  flex-shrink: 0;
}
.search-result .info { flex-grow: 1; min-width: 0; }
.search-result .info .t {
  font-weight: 600;
  font-size: .92rem;
  color: var(--tx-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result .info .a {
  color: var(--tx-3);
  font-size: .78rem;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============ Modals ============ */
.modal-content {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-3) !important;
  box-shadow: var(--sh-2);
}
.modal-header { border-bottom: 1px solid var(--border-soft); }
.modal-footer { border-top: 1px solid var(--border-soft); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.5); }

/* ============ Empty states ============ */
.empty-placeholder {
  text-align: center; padding: 2.5rem 1rem;
  color: var(--tx-4);
  border: 1.5px dashed var(--border-soft);
  border-radius: var(--r-2);
  background: rgba(15,20,33,.4);
}
.empty-placeholder i { opacity: .5; }

/* ============ Now-playing card ============ */
#np-card, #np-card-public {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2)) !important;
  border: 1px solid var(--border) !important;
  position: relative;
  overflow: hidden;
}
#np-card::before, #np-card-public::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 100% at 0% 50%, rgba(245,158,11,.08), transparent 60%);
}
#np-card > *, #np-card-public > * { position: relative; }
#btn-playpause {
  width: 56px; height: 56px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem;
  box-shadow: 0 6px 20px var(--blue-glow);
}

/* ============ Alerts ============ */
.alert {
  border-radius: var(--r-2);
  border: 1px solid var(--border);
  background: var(--bg-1);
  color: var(--tx-1);
}
.alert-danger {
  background: rgba(239,68,68,.10) !important;
  border-color: rgba(239,68,68,.35) !important;
  color: var(--red-1) !important;
}
.alert-success {
  background: rgba(34,197,94,.10) !important;
  border-color: rgba(34,197,94,.35) !important;
  color: var(--green-1) !important;
}
.alert-warning {
  background: rgba(245,158,11,.10) !important;
  border-color: rgba(245,158,11,.35) !important;
  color: var(--amber-2) !important;
}
.alert-secondary {
  background: var(--bg-2) !important;
  border-color: var(--border) !important;
  color: var(--tx-3) !important;
}

/* ============ Tables ============ */
.table { color: var(--tx-1); }
.table-dark { --bs-table-bg: var(--bg-2); --bs-table-border-color: var(--border-soft); }
.table > :not(caption) > * > * { border-bottom-color: var(--border-soft); }

/* ============ Toast ============ */
.toast {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-1) !important;
  color: var(--tx-1) !important;
  box-shadow: var(--sh-2);
  backdrop-filter: blur(8px);
}
.toast.bg-success { border-left: 3px solid var(--green-1) !important; background: var(--bg-2) !important; color: var(--tx-1) !important; }
.toast.bg-danger  { border-left: 3px solid var(--red-1)   !important; background: var(--bg-2) !important; color: var(--tx-1) !important; }
.toast.bg-warning { border-left: 3px solid var(--amber-1) !important; background: var(--bg-2) !important; color: var(--tx-1) !important; }
.toast.bg-info    { border-left: 3px solid var(--blue-2)  !important; background: var(--bg-2) !important; color: var(--tx-1) !important; }

/* ============ Karaoke ============ */
.karaoke-body {
  margin: 0; padding: 0;
  background: #050608;
  background-image: radial-gradient(circle at 50% 20%, var(--bg-2) 0%, #050608 70%);
  background-attachment: fixed;
  height: 100vh;
  overflow: hidden;
  font-family: var(--f-ui);
}

/* Stage preenche exactamente o viewport — nada faz scroll */
.karaoke-stage {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--tx-1);
}

/* Botão fullscreen */
.karaoke-fs-btn {
  position: fixed;
  top: 12px; right: 12px;
  z-index: 30; opacity: .3;
  transition: opacity .2s;
}
.karaoke-fs-btn:hover { opacity: 1; }

/* ── CABEÇALHO: fixo no topo, sempre visível ── */
.karaoke-header {
  flex-shrink: 0;
  text-align: center;
  padding: 1.4rem 2rem .8rem;
  position: relative;
  z-index: 5;
  /* Gradiente para suavizar a transição com a área de letras */
  background: linear-gradient(to bottom,
    rgba(5,6,8,.98) 55%,
    rgba(5,6,8,0) 100%);
  padding-bottom: 2rem;
  margin-bottom: -1.2rem;
}
.karaoke-session-name {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tx-4);
  margin-bottom: .3rem;
}
.karaoke-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--tx-1) 20%, var(--blue-3) 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.karaoke-artist {
  font-size: clamp(.9rem, 1.8vw, 1.25rem);
  color: var(--tx-3);
  margin-top: .3rem;
}

/* ── ÁREA DE LETRAS: preenche resto do stage ── */
.karaoke-lyrics {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Fades topo/fundo para dar profundidade (só no modo LRC) */
.karaoke-lyrics.karaoke-synced::before,
.karaoke-lyrics.karaoke-synced::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  z-index: 4;
  pointer-events: none;
}
.karaoke-lyrics.karaoke-synced::before {
  top: 0; height: 22%;
  background: linear-gradient(to bottom, rgba(5,6,8,1) 0%, transparent 100%);
}
.karaoke-lyrics.karaoke-synced::after {
  bottom: 0; height: 22%;
  background: linear-gradient(to top, rgba(5,6,8,1) 0%, transparent 100%);
}

/* ── Wrapper interno que se move (modo LRC) ── */
.lyrics-inner {
  width: 100%;
  max-width: 860px;
  padding: 0 1.5rem;
  will-change: transform;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94);
}

/* Linha base — tudo começa bem escondido */
.karaoke-synced .karaoke-line {
  display: block;
  text-align: center;
  padding: .35rem .8rem;
  border-radius: 8px;
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--tx-2);
  opacity: .07;          /* base: muito escondido */
  transition: opacity .3s ease, color .3s ease,
              font-size .3s ease, font-weight .3s ease,
              background .3s ease, box-shadow .3s ease,
              text-shadow .3s ease, padding .3s ease;
}
/* Próxima linha: ligeiramente visível */
.karaoke-synced .karaoke-line.upcoming {
  opacity: .35;
  color: var(--tx-2);
}
/* Linha ACTIVA: destaque total, centrada pelo JS */
.karaoke-synced .karaoke-line.active {
  opacity: 1 !important;
  color: var(--tx-1) !important;
  font-size: clamp(1.55rem, 3.2vw, 2.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em;
  background: rgba(70,130,245,.10);
  box-shadow: 0 0 0 1px rgba(70,130,245,.22),
              0 6px 40px rgba(70,130,245,.14);
  text-shadow: 0 0 40px rgba(70,130,245,.5);
  padding: .5rem 1.4rem;
}

/* ── Modo plain: toda a letra visível, tamanho ajustado por JS ── */
.karaoke-lyrics.karaoke-plain {
  display: block !important; /* sair do flex — evita layout em colunas */
  overflow: hidden;
  padding: 0.5rem 0;
}
.karaoke-plain .lyrics-inner {
  display: block;
  column-count: 1 !important; /* forçar coluna única */
  width: calc(100% - 4rem);
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  font-size: 1rem; /* JS vai ajustar */
  line-height: 1.4;
}
/* Estrofe */
.karaoke-plain .plain-verse {
  display: block;
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--tx-2);
  text-align: center;
  margin: 0 0 0.4em 0;
  line-height: inherit;
  column-count: 1 !important;
}
.karaoke-plain .plain-verse:last-child { margin-bottom: 0; }

/* Fonte de letras (fixo fundo) */
.karaoke-source {
  position: fixed; bottom: 8px; left: 0; right: 0;
  color: var(--tx-4); opacity: .5;
  font-family: var(--f-mono); font-size: .65rem;
  text-align: center; z-index: 1;
}
.karaoke-empty { color: var(--tx-4); }

/* ============ Hero (home / landing) ============ */
.hero-pulse {
  background:
    radial-gradient(circle at 30% 30%, rgba(70,130,245,.16), transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(245,158,11,.10), transparent 60%);
}

/* ============ Utilities ============ */
.text-white-50 { color: var(--tx-3) !important; }
.text-muted { color: var(--tx-4) !important; }
.min-w-0 { min-width: 0; }
code { color: var(--blue-3); background: var(--bg-2); padding: .15em .45em; border-radius: var(--r-1); font-size: .9em; }

/* Drop-down menus */
.dropdown-menu {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-2) !important;
  box-shadow: var(--sh-2);
}
.dropdown-item { color: var(--tx-2) !important; }
.dropdown-item:hover { background: var(--bg-3) !important; color: var(--tx-1) !important; }

/* Footer */
footer { color: var(--tx-4) !important; border-top-color: var(--border-soft) !important; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .04em; }

/* Loading spinner colour */
.spinner-border { color: var(--blue-3); }

/* Mobile tweaks */
@media (max-width: 575.98px) {
  body { font-size: 13px; }
  .list-row .cover, .search-result img { width: 46px; height: 46px; }
  .list-row .actions { flex-wrap: wrap; }
  .karaoke-header { padding: .5rem .5rem 1rem; }
}

/* ════════════════════════════════════
   Dashboard DJ — layout fixo
   body.dj-active: página não faz scroll, só as listas fazem.
   Usa cadeia flexbox: body → main → #session-page (footer-aware).
   Só activo em ecrãs XL ≥1200px.
   ════════════════════════════════════ */

/* Volume slider */
input[type=range]#volume-slider {
  height: 4px; border-radius: 2px; cursor: pointer;
}

@media (min-width: 1200px) {

  /* 1. Body torna-se exactamente o viewport (sem scroll) */
  body.dj-active {
    height: 100vh;
    overflow: hidden;
  }

  /* 2. Main preenche espaço entre nav e footer, sem padding */
  body.dj-active > main {
    flex: 1 1 0;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* 3. Session page preenche o main completamente */
  body.dj-active #session-page {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 10px 12px 0;
  }

  /* 4. Secções fixas no topo (header + player) */
  #session-page > .row:first-child { flex-shrink: 0; margin-bottom: 6px !important; }
  #session-page > #np-card        { flex-shrink: 0; margin-bottom: 6px !important; }

  /* 5. Listas preenchem o restante */
  #session-lists {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    margin: 0 !important;
    padding-bottom: 6px;
    overflow: hidden;
  }

  /* 6. Colunas: sem gutters Bootstrap, flex column, altura total */
  #session-lists > .col-xl-7,
  #session-lists > .col-xl-5 {
    padding-left: 0  !important;
    padding-right: 0 !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  #session-lists > .col-xl-7 { flex: 0 0 calc(58.33% - 5px); }
  #session-lists > .col-xl-5 { flex: 1 1 0; }

  /* 7. Nav tabs/pills: tamanho fixo */
  #djTabs    { flex-shrink: 0; }
  #browseTabs { flex-shrink: 0; }

  /* 8. Tab content da fila: preenche e scrolla */
  #djTabs + .tab-content {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* 9. Browse panel: preenche e scrolla */
  #browseTabs + .tab-content {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* 10. Input de pesquisa: sticky no topo ao scrollar resultados */
  #browse-search > .input-group {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-2, #161d2e);
    padding-top: 2px;
    padding-bottom: 8px;
  }

  /* 11. Footer na página DJ: extra compacto */
  body.dj-active .site-footer { padding: 3px 16px; font-size: .65rem; }

}

/* ============ Gestão de Letras (Lyrics Manager) ============ */
.lrc-editor {
  font-family: var(--f-mono);
  font-size: .82rem;
  line-height: 1.7;
  color: var(--tx-1);
  background: rgba(0,0,0,.3);
  border-color: var(--border);
  resize: vertical;
}
.lrc-editor::placeholder { color: var(--tx-4); opacity: .6; }
.lrc-editor:focus {
  background: rgba(0,0,0,.4);
  border-color: var(--blue-1);
  box-shadow: 0 0 0 2px rgba(70,130,245,.18);
}

/* Song list items */
.song-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px;
  border: none; background: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer; color: inherit;
  transition: background .15s;
}
.song-item:hover   { background: rgba(255,255,255,.04); }
.song-item.song-active {
  background: rgba(70,130,245,.12);
  border-left: 3px solid var(--blue-2);
  padding-left: 9px;
}