/* ==========================
   TOKENS / TEMA (DARK DEFAULT)
   ========================== */
   
:root {
  --bg: #0a0a0a;
  --text: #ffffff;
  --text-muted: rgba(255,255,255,.7);
  --surface-soft: rgba(255,255,255,.035);
  --surface-strong: rgba(255,255,255,.07);
  --border-soft: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.12);
  --header-bg: rgba(13,13,16,.1);
  --player-bg: rgba(6,6,8,.95);
    --vh-metal-0: #ffffff0d; /* brilho leve */
  --vh-metal-1: #d4d4d815; /* prata suave */
  --vh-metal-2: #e5e5e71a; /* prata mais opaca */
  --vh-dark-0: #0a0a0b;
  --vh-dark-1: #070708;
  --vh-dark-2: #040405;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* fundo “voidhall” em gradiente */
  --vh-bg-gradient: radial-gradient(circle at 20% 0%, #0f0f0f 0%, #060606 45%, #020203 95%);
  --vh-range-track: rgba(255,255,255,0.14);
  --vh-range-fill: rgba(255,255,255,0.85);
  --vh-range-thumb: #f5f5f6;
  --vh-range-thumb-border: rgba(0,0,0,0.65);
}

* {
  box-sizing: border-box;
}

input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}


body {
  padding-top: var(--safe-top);
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle at 0 0, #0a0a0a 0%, #070707 55%, #050506 100%);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

a {
  color: var(--text);
  text-decoration: none;
  opacity: .9;
}

a:hover {
  opacity: 1;
}

/* Header + player usam os tokens do tema */

header.sticky {
  background-color: var(--header-bg) !important;
  height: 64px;
  display: flex;
  align-items: center;
}

#player {
  background-color: var(--player-bg) !important;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* comportamento normal: nav fica acima do player global */
.vh-bottom-nav {
  bottom: 4rem; /* mesmo valor de bottom-16 */
}

/* na página da track (player global escondido) o nav cola ao fundo */
body.vh-page-track .vh-bottom-nav {
  bottom: 0;
}


/* Quando estamos na página de track */
body.vh-page-track #player {
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
}

/* ==========================
   UTILIDADES GENÉRICAS
   (sem animações de página)
   ========================== */

/* Antes: .fade-in fazia animação; agora é só um helper neutro */
.fade-in {
  opacity: 1;
  transform: none;
}

.fade-in.show {
  opacity: 1;
  transform: none;
}

/* ==========================
   VOIDTHALL RANGE BASE
   ========================== */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

/* range Voidhall (player / volume) */
input[type="range"].vh-range {
  width: 100%;
  height: 2px;
  cursor: pointer;
}

/* container base */
.page-shell {
  opacity: 1;
  transform: none;
}

.page-shell.vh-enter {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 160ms ease-out,
    transform 160ms cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}

.page-shell.vh-enter.vh-enter-active {
  opacity: 1;
  transform: translateY(0);
}

.user-menu {
  padding: 0.35rem;
  font-size: 0.875rem;
  border-width: 1px;
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);

  /* Era o "dark mode" – agora é o único */
  background: rgba(10, 10, 10, 0.96);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f9fafb;
}

/* Itens do menu */
.user-menu .menu-item {
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.75rem;
  border-radius: 9999px;
  line-height: 1.25rem;
}

/* Hover */
.user-menu .menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Separador */
.user-menu .menu-separator {
  margin: 0.25rem 0;
  height: 1px;
  background: rgba(148, 163, 184, 0.4);
}

/* Botão de sair */
.user-menu .menu-danger {
  color: #fecaca;
}

/* TRACK PAGE: no mobile, nav encosta ao fundo e o player global desaparece */
@media (max-width: 768px) {
  body.vh-page-track .vh-global-player {
    display: none !important;
  }

  body.vh-page-track .vh-mobile-nav {
    bottom: 0 !important; /* em vez de bottom-16 */
  }
}

/* ========= Mobile transitions (player + bottom nav) ========= */
@media (max-width: 768px) {
  .vh-mobile-nav {
    transition: bottom 180ms ease, transform 180ms ease;
    will-change: bottom, transform;
  }

  .vh-global-player {
    transition: transform 180ms ease, opacity 180ms ease;
    will-change: transform, opacity;
	
  }

  /* normal pages */
  body:not(.vh-track-mode) .vh-mobile-nav { bottom: 0rem; } /* = bottom-16 */
  body:not(.vh-track-mode) .vh-global-player { bottom: 35px; opacity: 1; }

  /* track mode (anima) */
  body.vh-track-mode .vh-mobile-nav { bottom: 0; }
  body.vh-track-mode .vh-global-player { transform: translateY(110%); opacity: 0; }

  /* quando terminar a animação, cortamos mesmo */
  body.vh-track-mode .vh-global-player.is-hidden { display: none !important; }
}


/* ==========================
   MOBILE INPUT ANTI-ZOOM FIX
   ========================== */

/* força 16px mesmo com Tailwind */
input,
textarea,
select {
  font-size: 16px !important;
}

/* Safari iOS: impede auto resize */
html {
  -webkit-text-size-adjust: 100%;
}

/* Evita zoom/scroll lateral estranho */
html, body {
  overflow-x: hidden;
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
}



/* ==========================
   LIGHT MODE (Voidhall)
   - tokens
   - tailwind utility overrides (text-white/.. bg-white/.. border-white/..)
   ========================== */

html[data-theme="light"] {
  /* tokens base */
  --bg: #f4f4f6;
  --text: #0b0b0c;
  --text-muted: rgba(0,0,0,.62);

  --surface-soft: rgba(0,0,0,.04);
  --surface-strong: rgba(0,0,0,.07);

  --border-soft: rgba(0,0,0,.12);
  --border-strong: rgba(0,0,0,.18);

  --header-bg: rgba(255,255,255,.72);
  --player-bg: rgba(255,255,255,.85);

  /* “metal / void” em light */
  --vh-metal-0: rgba(0,0,0,.04);
  --vh-metal-1: rgba(0,0,0,.06);
  --vh-metal-2: rgba(0,0,0,.08);

  --vh-dark-0: #f7f7f9;
  --vh-dark-1: #ededf2;
  --vh-dark-2: #e4e4ea;

  --vh-bg-gradient:
    radial-gradient(
      circle at 20% 0%,
      #f2f2f4 0%,
      #e9e9ee 45%,
      #e1e1e7 95%
    );
	
  --vh-range-track: rgba(0,0,0,0.22);
  --vh-range-fill: rgba(0,0,0,0.88);
  --vh-range-thumb: rgba(0,0,0,0.9);
  --vh-range-thumb-border: rgba(255,255,255,0.85);
}

html[data-theme="light"] body {
  background: var(--vh-bg-gradient) !important;
  color: var(--text);
}

html[data-theme="light"] input::placeholder {
  color: rgba(0,0,0,0.42);
}

/* dropdown menu (antes estava fixo dark) */
html[data-theme="light"] .user-menu {
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.86);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}
html[data-theme="light"] .user-menu .menu-item:hover {
  background: rgba(0,0,0,0.06);
}
html[data-theme="light"] .user-menu .menu-separator {
  background: rgba(0,0,0,0.12);
}
html[data-theme="light"] .user-menu .menu-danger {
  color: #b91c1c;
}

/* ==========================
   Tailwind utilities usadas nas tuas pages
   (text-white/.. bg-white/.. border-white/.. hover/focus variants)
   ========================== */

html[data-theme="light"] .text-white { color: rgba(0,0,0,0.92) !important; }
html[data-theme="light"] .hover\:text-white:hover { color: rgba(0,0,0,0.92) !important; }

html[data-theme="light"] .text-white\/80 { color: rgba(0,0,0,0.80) !important; }
html[data-theme="light"] .text-white\/70 { color: rgba(0,0,0,0.70) !important; }
html[data-theme="light"] .text-white\/60 { color: rgba(0,0,0,0.60) !important; }
html[data-theme="light"] .text-white\/55 { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] .text-white\/50 { color: rgba(0,0,0,0.50) !important; }
html[data-theme="light"] .text-white\/45 { color: rgba(0,0,0,0.45) !important; }
html[data-theme="light"] .text-white\/40 { color: rgba(0,0,0,0.40) !important; }
html[data-theme="light"] .text-white\/35 { color: rgba(0,0,0,0.35) !important; }

html[data-theme="light"] .bg-white\/5  { background: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .bg-white\/10 { background: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .hover\:bg-white\/10:hover { background: rgba(0,0,0,0.08) !important; }

html[data-theme="light"] .border-white\/10 { border-color: rgba(0,0,0,0.10) !important; }
html[data-theme="light"] .border-white\/30 { border-color: rgba(0,0,0,0.18) !important; }
html[data-theme="light"] .hover\:border-white\/30:hover { border-color: rgba(0,0,0,0.22) !important; }

html[data-theme="light"] .focus\:border-white\/40:focus { border-color: rgba(0,0,0,0.28) !important; }

/* login tabs/buttons que usam bg-white text-black */
html[data-theme="light"] .bg-white { background: rgba(0,0,0,0.92) !important; }
html[data-theme="light"] .text-black { color: rgba(255,255,255,0.92) !important; }
html[data-theme="light"] .hover\:bg-white\/90:hover { background: rgba(0,0,0,0.82) !important; }

/* ==========================
   GLOBAL PLAYER — Mobile fit
   ========================== */
@media (max-width: 767px) {

  /* menos padding + menos gap = cabe em ecrãs pequenos */
  #player .vh-player-row{
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: .6rem !important;
  }

  /* LEFT tem de poder encolher */
  #player .vh-player-left{
    min-width: 0 !important;       /* mata o min-w-[240px] */
    flex: 1 1 auto;                /* pode encolher */
  }

  /* RIGHT não pode “reservar” 200px */
  #player .vh-player-right{
    min-width: 0 !important;       /* mata o min-w-[200px] */
    flex: 0 0 auto;
    gap: .45rem !important;
  }

  /* botões mais compactos no mobile */
  #player .vh-mini-btn{
    padding: 0.28rem 0.65rem !important;
    letter-spacing: .12em !important;
    font-size: 0.7rem !important;
  }
}