/* Modo noturno — Legendas.net
 * Overrides apenas para cores fixas customizadas que não seguem o
 * data-theme do Bulma. O Bulma v1 resolve o resto via CSS vars.
 * Contraste-alvo: AA (4.5:1 texto normal, 3:1 texto grande).
 */

html[data-theme="dark"] body {
  /* mesma cor da navbar (scheme-main, mais escura que o bis) */
  background: var(--bulma-scheme-main);
}

/* --- Sombras: glow branco do Bulma bem mais fraco no dark
 * (original: alpha 0.1; aqui ~0.04) + borda sutil para elevação. --- */
html[data-theme="dark"] {
  --bulma-shadow: 0 0.5em 1em -0.125em hsla(0deg, 0%, 100%, 0.02), 0 0 0 1px hsla(0deg, 0%, 100%, 0.015);
}
html[data-theme="dark"] .box,
html[data-theme="dark"] .card,
html[data-theme="dark"] .dropdown-content {
  /* inset em vez de border: mesmo contorno, zero impacto no box-model */
  box-shadow: var(--bulma-shadow), inset 0 0 0 1px var(--bulma-border-weak);
}

/* --- Navbar: .is-light força barra clara no dark; usa scheme --- */
html[data-theme="dark"] .navbar.is-light {
  background-color: var(--bulma-scheme-main);
}
html[data-theme="dark"] .navbar.is-light .navbar-item,
html[data-theme="dark"] .navbar.is-light .navbar-link {
  color: var(--bulma-text);
}
html[data-theme="dark"] .navbar.is-light .navbar-burger {
  color: var(--bulma-text);
}
html[data-theme="dark"] .navbar.is-light .navbar-menu {
  background-color: var(--bulma-scheme-main);
}
/* Hover/active herdavam pill clara do .is-light; usa ter no dark */
html[data-theme="dark"] .navbar.is-light a.navbar-item:hover,
html[data-theme="dark"] .navbar.is-light a.navbar-item:focus,
html[data-theme="dark"] .navbar.is-light a.navbar-item:active,
html[data-theme="dark"] .navbar.is-light .navbar-link:hover,
html[data-theme="dark"] .navbar.is-light .navbar-link:focus {
  background-color: var(--bulma-scheme-main-ter);
  color: var(--bulma-text-strong);
}

/* --- Logo: fundo branco no link (pai), imagem intacta 112x28, sem glow ---
 * (padding no próprio img encolhia a imagem por causa do border-box) */
html[data-theme="dark"] .navbar.is-light .navbar-brand .navbar-item.logo-bg-on,
html[data-theme="dark"] .navbar.is-light .navbar-brand .navbar-item.logo-bg-on:hover,
html[data-theme="dark"] .navbar.is-light .navbar-brand .navbar-item.logo-bg-on:focus {
  background-image: linear-gradient(#fff, #fff);
  background-origin: content-box;
  /* tamanho fixo: independe da altura do link (que estica como no claro) */
  background-size: 106px 24px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 2px;
}
html[data-theme="dark"] .site-footer-logo.logo-bg-on {
  background-image: linear-gradient(#fff, #fff);
  background-size: calc(100% - 6px) calc(100% - 4px);
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 2px;
  padding: 0;
}
/* img inline deixa vão de baseline no link: vira listra branca no dark */
html[data-theme="dark"] .site-footer-logo img {
  display: block;
}

/* --- Botão do toggle na navbar escura ---
 * (anel via inset shadow: border somaria 2px ao botão e deslocava a página) */
html[data-theme="dark"] #theme-toggle {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--bulma-border);
  color: var(--bulma-text);
}
html[data-theme="dark"] #theme-toggle:hover {
  background-color: var(--bulma-scheme-main-ter);
  box-shadow: inset 0 0 0 1px var(--bulma-border);
  color: var(--bulma-text-strong);
}

/* --- Footer --- */
html[data-theme="dark"] .site-footer {
  background: var(--bulma-scheme-main-bis);
  border-top-color: var(--bulma-border);
}
html[data-theme="dark"] .site-footer-links a,
html[data-theme="dark"] .site-footer-links button,
html[data-theme="dark"] .site-footer-support-text {
  color: var(--bulma-text-weak);
}
html[data-theme="dark"] .site-footer-links a:hover,
html[data-theme="dark"] .site-footer-links button:hover {
  color: var(--bulma-text-strong);
}
html[data-theme="dark"] .site-footer-donate-row {
  border-top-color: var(--bulma-border);
}
html[data-theme="dark"] .footer-donate-btn {
  background: var(--bulma-scheme-main-ter);
  color: var(--bulma-text);
}
html[data-theme="dark"] .footer-donate-btn:hover {
  background: var(--bulma-border);
}
html[data-theme="dark"] .social-icon-btn {
  background: var(--bulma-scheme-main-ter);
  color: var(--bulma-text);
}

/* --- Títulos customizados --- */
html[data-theme="dark"] .section-title-large {
  color: var(--bulma-text-strong) !important;
}
html[data-theme="dark"] .title-link {
  color: var(--bulma-text-strong) !important;
}
html[data-theme="dark"] .title-link:hover {
  color: var(--bulma-text-weak) !important;
}

/* --- Gradientes: escurece a ponta clara para manter branco legível --- */
html[data-theme="dark"] .has-background-gradient-decent {
  background-image: linear-gradient(to right, #3a0d78, #6b641f);
}
html[data-theme="dark"] .has-background-gradient-moonlit,
html[data-theme="dark"] .has-background-gradient-moonlit2,
html[data-theme="dark"] .has-background-gradient-blue-crimson {
  /* mantém matiz, texto .has-text-white continua AA-large sobre eles */
  filter: brightness(0.85);
}

/* --- Select2 (fundo/bordas/texto fixos no base.html) --- */
html[data-theme="dark"] .select2-container .select2-selection--single {
  background-color: var(--bulma-scheme-main) !important;
  border-color: var(--bulma-border) !important;
}
html[data-theme="dark"] .select2-container .select2-selection--single .select2-selection__rendered {
  color: var(--bulma-text-strong) !important;
}
html[data-theme="dark"] .select2-container .select2-selection--single .select2-selection__placeholder {
  color: var(--bulma-text-weak) !important;
}
html[data-theme="dark"] .select2-dropdown {
  background-color: var(--bulma-scheme-main) !important;
  border-color: var(--bulma-border) !important;
}
html[data-theme="dark"] .select2-search--dropdown .select2-search__field {
  background-color: var(--bulma-scheme-main) !important;
  border-color: var(--bulma-border) !important;
  color: var(--bulma-text) !important;
}
html[data-theme="dark"] .select2-results__option[aria-selected="true"] {
  background-color: var(--bulma-scheme-main-ter) !important;
  color: var(--bulma-text-strong) !important;
}
html[data-theme="dark"] .select2-container--disabled .select2-selection--single {
  background-color: var(--bulma-scheme-main-ter) !important;
}

/* --- Quill --- */
html[data-theme="dark"] .quill-editor-container {
  background-color: var(--bulma-scheme-main);
  color: var(--bulma-text);
}
html[data-theme="dark"] .quill-editor-container .ql-toolbar,
html[data-theme="dark"] .quill-editor-container .ql-container {
  border-color: var(--bulma-border) !important;
}
html[data-theme="dark"] .quill-editor-container .ql-editor {
  color: var(--bulma-text);
}
html[data-theme="dark"] .quill-editor-container .ql-toolbar button,
html[data-theme="dark"] .quill-editor-container .ql-toolbar .ql-picker {
  filter: invert(0.75);
}

/* --- Turnstile: remove caixa branca, tema vai via data-theme="auto"/JS --- */
html[data-theme="dark"] .cf-turnstile {
  background-color: transparent !important;
}

/* --- Cards de usuário / reputação --- */
html[data-theme="dark"] .user-hover-card {
  background: var(--bulma-scheme-main);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--bulma-border);
}
html[data-theme="dark"] .user-hover-card-avatar {
  border-color: var(--bulma-scheme-main);
  background: var(--bulma-scheme-main);
}
html[data-theme="dark"] .user-hover-card-name,
html[data-theme="dark"] .user-hover-card-stat b {
  color: var(--bulma-text-strong);
}
html[data-theme="dark"] .user-hover-card-title,
html[data-theme="dark"] .nav-reputation-labels {
  color: var(--bulma-text-weak);
}
html[data-theme="dark"] .user-hover-card-stat span {
  color: var(--bulma-text-weak);
}
html[data-theme="dark"] .nav-reputation-bar,
html[data-theme="dark"] .reputation-bar {
  background: var(--bulma-scheme-main-ter);
}

/* --- Autocomplete (navbar + resultados via JS com style inline) --- */
html[data-theme="dark"] #autocomplete-results {
  background: var(--bulma-scheme-main) !important;
  border: 1px solid var(--bulma-border);
}
html[data-theme="dark"] .autocomplete-user-link,
html[data-theme="dark"] .autocomplete-release {
  background-color: var(--bulma-scheme-main) !important;
  color: var(--bulma-text-strong) !important;
}
html[data-theme="dark"] .autocomplete-title {
  background-color: var(--bulma-scheme-main-bis) !important;
  color: var(--bulma-text-strong) !important;
}
html[data-theme="dark"] .autocomplete-user-link:hover,
html[data-theme="dark"] .autocomplete-release:hover,
html[data-theme="dark"] .autocomplete-title:hover {
  background-color: var(--bulma-scheme-main-ter) !important;
}

/* --- Scrollbar --- */
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bulma-scheme-main-ter);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--bulma-grey);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--bulma-text-weak);
}

/* Nota: .button.is-info/.is-success e .tag mantêm as cores de marca (#209cee,
 * #23d160, #ffdd57) nos dois temas — comportamento existente, sem regressão.
 * Texto branco sobre #209cee passa AA-large (3:1); tags warning usam texto
 * escuro sobre amarelo e passam AA nos dois temas. */

/* --- Dropzone (enviar_legenda / media/form) --- */
html[data-theme="dark"] .dropzone-container {
  background-color: var(--bulma-scheme-main-ter);
  border-color: var(--bulma-border);
}
html[data-theme="dark"] .dropzone-container:hover,
html[data-theme="dark"] .dropzone-container.dragover {
  border-color: var(--bulma-link);
  background-color: rgba(66, 134, 244, 0.12);
}
html[data-theme="dark"] .dropzone-container.has-file,
html[data-theme="dark"] .dropzone-container.validation-success {
  border-color: var(--bulma-success);
  background-color: rgba(35, 209, 96, 0.1);
}
html[data-theme="dark"] .dropzone-container.validation-error {
  border-color: var(--bulma-danger);
  background-color: rgba(241, 70, 104, 0.1);
}
html[data-theme="dark"] .dropzone-text {
  color: var(--bulma-text);
}
html[data-theme="dark"] .dropzone-formats {
  color: var(--bulma-text-weak);
}
html[data-theme="dark"] .dropzone-file-info .file-name {
  color: var(--bulma-text-strong);
}

/* --- Pedidos / sugestões --- */
html[data-theme="dark"] .suggestion-header {
  color: var(--bulma-text);
}
html[data-theme="dark"] .suggestion-header a {
  color: var(--bulma-text);
}
html[data-theme="dark"] .suggestion-footer {
  color: var(--bulma-text-weak);
  border-top-color: var(--bulma-border);
}
html[data-theme="dark"] .border-right-line {
  border-right-color: var(--bulma-border);
}
html[data-theme="dark"] .content a {
  color: var(--bulma-link);
}

/* --- Profile / settings (a página usa !important claro: precisa responder igual) --- */
html[data-theme="dark"] .settings-menu-item {
  color: var(--bulma-text) !important;
  background-color: transparent !important;
}
html[data-theme="dark"] .settings-menu-item .icon svg {
  fill: var(--bulma-text) !important;
}
html[data-theme="dark"] .settings-menu-item:hover {
  background-color: var(--bulma-scheme-main-ter) !important;
  color: var(--bulma-text-strong) !important;
}
html[data-theme="dark"] .settings-menu-item:hover .icon svg {
  fill: var(--bulma-text-strong) !important;
}
html[data-theme="dark"] .settings-menu-item:focus {
  outline-color: var(--bulma-link);
}
/* Botão Configurações do perfil (is-light fica claro no dark) */
html[data-theme="dark"] .profile-social-row .button.is-light {
  background-color: transparent;
  border-color: var(--bulma-border);
  color: var(--bulma-text);
}
/* Divisórias e barra fixa com cor clara inline */
html[data-theme="dark"] [style*="border-top: 1px solid #dbdbdb"] {
  border-top-color: var(--bulma-border) !important;
}
html[data-theme="dark"] [style*="border-top: 1px solid #f0f0f0"] {
  border-top-color: var(--bulma-border) !important;
}
html[data-theme="dark"] [style*="background: #ffffff"] {
  background-color: var(--bulma-scheme-main) !important;
}
html[data-theme="dark"] .container.profile .profile-options .tabs ul li.link a {
  background-color: var(--bulma-scheme-main-ter);
}
html[data-theme="dark"] .profile-avatar-wrap img,
html[data-theme="dark"] .profile-online-dot {
  border-color: var(--bulma-scheme-main);
}
html[data-theme="dark"] .profile-mini-stats {
  color: var(--bulma-text-weak);
}
html[data-theme="dark"] .profile-mini-stats b {
  color: var(--bulma-text-strong);
}
html[data-theme="dark"] .reputation-labels {
  color: var(--bulma-text);
}
html[data-theme="dark"] .modal-card .content h1 {
  border-bottom-color: var(--bulma-border);
}

/* --- Media detail (h3 com style inline) --- */
html[data-theme="dark"] .box h3[style] {
  color: var(--bulma-text-strong) !important;
  border-bottom-color: var(--bulma-border) !important;
  border-top-color: var(--bulma-border) !important;
}

/* --- Login/signup OAuth (botões brancos) + divisória --- */
html[data-theme="dark"] a[href="/login/google"],
html[data-theme="dark"] a[href="/login/twitter"] {
  background-color: var(--bulma-scheme-main-ter);
  border-color: var(--bulma-border) !important;
}
html[data-theme="dark"] a[href="/login/google"] span,
html[data-theme="dark"] a[href="/login/twitter"] span {
  color: var(--bulma-text-strong) !important;
}
html[data-theme="dark"] a[href="/login/twitter"] svg {
  color: var(--bulma-text-strong);
}
html[data-theme="dark"] [style*="background-color: #dadce0"] {
  background-color: var(--bulma-border) !important;
}
html[data-theme="dark"] [style*="color: #5f6368"] {
  color: var(--bulma-text-weak) !important;
}

/* --- Skeletons de recomendações (shimmer claro) --- */
html[data-theme="dark"] [style*="linear-gradient(90deg, #f0f0f0"] {
  background: linear-gradient(90deg, var(--bulma-scheme-main-ter) 25%, var(--bulma-border) 50%, var(--bulma-scheme-main-ter) 75%) !important;
}
html[data-theme="dark"] [style*="background: #f0f0f0"] {
  background: var(--bulma-scheme-main-ter) !important;
}

/* --- Autocomplete: textos secundários e divisórias com style inline --- */
html[data-theme="dark"] #autocomplete-results [style*="#999"],
html[data-theme="dark"] #autocomplete-results [style*="#666"] {
  color: var(--bulma-text-weak) !important;
}
html[data-theme="dark"] #autocomplete-results [style*="#d63031"] {
  color: var(--bulma-danger) !important;
}
html[data-theme="dark"] #autocomplete-results [style*="#e8e8e8"] {
  border-bottom-color: var(--bulma-border) !important;
}
html[data-theme="dark"] #autocomplete-results [style*="background-color: #f0f0f0"] {
  background-color: var(--bulma-scheme-main-ter) !important;
}

/* --- Comentários: botões secundários e textarea desabilitado --- */
html[data-theme="dark"] .btn-secondary {
  background: var(--bulma-scheme-main-ter);
  color: var(--bulma-text);
  border-color: var(--bulma-border);
}
html[data-theme="dark"] .btn-secondary:hover {
  background: var(--bulma-border);
}
html[data-theme="dark"] .comment-textarea:disabled {
  background-color: var(--bulma-scheme-main-ter) !important;
  color: var(--bulma-text-weak);
}

/* --- Legibilidade sobre gradientes no dark --- */
html[data-theme="dark"] .has-background-gradient-moonlit .title,
html[data-theme="dark"] .has-background-gradient-moonlit2 .title,
html[data-theme="dark"] .has-background-gradient-blue-crimson .title,
html[data-theme="dark"] .has-background-gradient-decent .title {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}