/* ==============================================
   MODO ESCURO GLOBAL – BIDARTIGOS
   (home, artigo, perfil, sobre, admin)
   ============================================== */

/* Transição global */
body {
  transition: background-color 0.3s ease, color 0.2s ease;
}

body.dark-mode {
  background: #0a0c10;
  color: #eaeef2;
}

/* ---------- HEADER & FOOTER ---------- */
body.dark-mode .site-header,
body.dark-mode .site-footer {
  background: #111418;
  border-color: #2a2f36;
}

body.dark-mode .logo,
body.dark-mode .site-footer p {
  color: #e0e4e8;
}

body.dark-mode nav a {
  color: #9ca3af;
}

body.dark-mode nav a:hover {
  color: #ffffff;
  text-decoration-color: #5f7f9e;
}

/* Botão de alternância de modo escuro no header */
body.dark-mode .dark-mode-toggle {
  background: #1e2a36;
  border-color: #3f5568;
}

body.dark-mode .dark-mode-toggle svg {
  stroke: #ccddee;
}

body.dark-mode .dark-mode-toggle:hover {
  background: #2c4050;
  border-color: #85b0df;
}

/* ---------- CONTAINER PRINCIPAL ---------- */
body.dark-mode .container,
body.dark-mode .article-container,
body.dark-mode .profile-container {
  background: transparent;
}

/* ---------- TÍTULOS ---------- */
body.dark-mode .page-title,
body.dark-mode .article-title,
body.dark-mode .profile-name {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ---------- ÁREA DE BUSCA E FILTROS (home) ---------- */
body.dark-mode .search-box input,
body.dark-mode select,
body.dark-mode .filter-input,
body.dark-mode .date-input {
  background: #1e2a36;
  border-color: #3f5568;
  color: #e0e4e8;
}

body.dark-mode .search-box input:focus,
body.dark-mode select:focus,
body.dark-mode .filter-input:focus,
body.dark-mode .date-input:focus {
  border-color: #85b0df;
  outline: none;
}

body.dark-mode .search-icon {
  stroke: #ccddee;
}

body.dark-mode select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ccddee' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

body.dark-mode #custom-period span {
  color: #9aa2b0;
}

/* ---------- CARDS DE ARTIGOS (home) ---------- */
body.dark-mode .article-card {
  background: #12161c;
  border-color: #2a2f36;
  transition: all 0.2s ease;
}

body.dark-mode .article-card:hover {
  border-color: #4a627a;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

body.dark-mode .article-card h2 {
  color: #e2e8f0;
}

body.dark-mode .article-summary-preview,
body.dark-mode .article-date {
  color: #95a5b8;
}

/* ---------- METADADOS DO AUTOR (home) ---------- */
body.dark-mode .article-author {
  color: #9aa2b0;
}

body.dark-mode .article-metrics {
  color: #9aa2b0;
}

body.dark-mode .article-metrics svg {
  stroke: #ccddee;
}

/* ---------- TAGS (home) ---------- */
body.dark-mode .tag-badge {
  background: #1e2a36;
  color: #bfd9f0;
  border-color: #2c3e4e;
}

/* ---------- PAGINAÇÃO ---------- */
body.dark-mode .pagination {
  border-top-color: #2a2f36;
}

body.dark-mode .page-btn {
  background: #1e2a36;
  border-color: #3f5568;
  color: #ccddee;
}

body.dark-mode .page-btn.active {
  background: #85b0df;
  color: #0a0c10;
  border-color: #85b0df;
}

body.dark-mode .page-btn:hover {
  background: #2c4050;
  border-color: #85b0df;
}

/* ---------- BADGES (novo, trending, etc.) ---------- */
body.dark-mode .new-badge {
  background: #2a3a4e;
  color: #cbd5e1;
}

body.dark-mode .trending-badge,
body.dark-mode .trending-badge-article {
  background: #3a2a1e;
  color: #ffbd7f;
  border-color: #b45f1b;
  box-shadow: 0 0 4px #ffaa66;
}

/* ---------- PERFIL DO AUTOR (se aplicável) ---------- */
body.dark-mode .profile-card {
  background: #12161c;
  border-color: #2a2f36;
}

body.dark-mode .avatar {
  box-shadow: 0 0 0 2px #1e2a3a;
}

body.dark-mode .profile-bio {
  color: #e2e8f0;
}

body.dark-mode .profile-meta a {
  color: #9aa2b0;
}

body.dark-mode .profile-meta a:hover {
  color: #ffffff;
}

body.dark-mode .articles-grid .article-cover {
  background: #1e2a36;
}

body.dark-mode .no-articles {
  color: #9aa2b0;
}

/* ---------- VERIFICADO ---------- */
body.dark-mode .verified-badge-small {
  background: linear-gradient(135deg, #2c3e50, #1e2f3e);
  color: #9ac4de;
  box-shadow: 0 0 2px #6c9ecf;
}

/* ---------- BADGES DE PRODUTIVIDADE ---------- */
body.dark-mode .productivity-badge.productive {
  background: linear-gradient(135deg, #3a2e22, #2a2018);
  color: #ffbc6e;
  border-color: #b45f2b;
}

body.dark-mode .productivity-badge.ultra-productive {
  background: linear-gradient(135deg, #4a3520, #3e2a18);
  color: #ffbc6e;
  border-color: #d97a2b;
  box-shadow: 0 0 8px rgba(255, 140, 0, 0.3);
}

/* ---------- MARCAÇÃO DE TEXTO (mark) ---------- */
body.dark-mode mark {
  background: #4a3a1a;
  color: #ffdd99;
  border-radius: 4px;
  padding: 0 0.1rem;
}

/* ---------- IMPRESSÃO (não afeta o modo escuro) ---------- */
@media print {
  body.dark-mode {
    background: white;
    color: black;
  }
  body.dark-mode * {
    color: black !important;
    background: white !important;
    border-color: #ccc !important;
  }
}

/* ==============================================
   ESTILOS EXTRAS PARA CONTROLES DA HOME
   ============================================== */

/* Área de período customizado */
body.dark-mode #custom-period {
  background: transparent;
}

body.dark-mode .date-input {
  background: #1e2a36;
  border-color: #3f5568;
  color: #e0e4e8;
}

body.dark-mode .date-input:focus {
  border-color: #85b0df;
}

/* Botões de ordenação e selects (já incluso, mas reforçando) */
body.dark-mode select {
  background-color: #1e2a36;
  color: #e0e4e8;
  border-color: #3f5568;
}

body.dark-mode select option {
  background-color: #1e2a36;
  color: #e0e4e8;
}

/* Paginação (já incluso, mas garantir) */
body.dark-mode .page-btn {
  background: #1e2a36;
  border-color: #3f5568;
  color: #ccddee;
}

body.dark-mode .page-btn.active {
  background: #85b0df;
  color: #0a0c10;
}

body.dark-mode .page-btn:hover {
  background: #2c4050;
}

/* Botão de alternância do modo escuro (quando estiver no header) */
.dark-mode-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  transition: all 0.2s;
}

.dark-mode-toggle svg {
  stroke: #333;
  stroke-width: 1.8;
  width: 20px;
  height: 20px;
  transition: stroke 0.2s;
}

body.dark-mode .dark-mode-toggle svg {
  stroke: #ccddee;
}

.dark-mode-toggle:hover {
  background: #f0f0f0;
}

body.dark-mode .dark-mode-toggle:hover {
  background: #2c4050;
}

/* ===== ESTILO PARA SELECTS (list boxes) NO MODO ESCURO ===== */

body.dark-mode select,
body.dark-mode .search-area select,
body.dark-mode #category-filter,
body.dark-mode #period-filter,
body.dark-mode #sort-by {
  background-color: #1e2a36 !important;
  color: #e0e4e8 !important;
  border-color: #3f5568 !important;
  /* Remove a seta padrão do navegador */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Adiciona a seta personalizada (apenas uma) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ccddee' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 12px;
  padding-right: 2rem !important; /* espaço para a seta */
}

body.dark-mode select option {
  background-color: #1e2a36 !important;
  color: #e0e4e8 !important;
}

body.dark-mode select:focus {
  border-color: #85b0df !important;
  outline: none;
}

/* ===== MODO ESCURO – AJUSTES MOBILE ===== */
@media (max-width: 600px) {
  body.dark-mode .search-area select,
  body.dark-mode .search-box input,
  body.dark-mode .date-input,
  body.dark-mode .filter-input {
    background: #1e2a36 !important;
    color: #e0e4e8 !important;
    border-color: #3f5568 !important;
  }
  
  body.dark-mode .article-card {
    background: #12161c !important;
    border-color: #2a2f36 !important;
  }
  
  body.dark-mode .article-card h2,
  body.dark-mode .article-card .article-date,
  body.dark-mode .article-card .article-summary-preview {
    color: #e2e8f0 !important;
  }
  
  body.dark-mode .pagination .page-btn {
    background: #1e2a36 !important;
    border-color: #3f5568 !important;
    color: #ccddee !important;
  }
  
  body.dark-mode .share-buttons {
    background: rgba(17, 22, 29, 0.95) !important;
    backdrop-filter: blur(12px);
  }
  
  body.dark-mode .share-buttons button,
  body.dark-mode .share-buttons a {
    background: transparent !important;
    color: #ccddee !important;
  }
  
  /* Ajuste para o índice (sumário) no mobile */
  body.dark-mode .article-index {
    background: #11161d !important;
    border-bottom-color: #2c3540 !important;
  }
  
  body.dark-mode .index-toggle {
    color: #ccddee !important;
  }
  
  body.dark-mode .index-content a {
    color: #b8c7dd !important;
  }
}

body.dark-mode .link-card {
  background: #1e2a36;
  border-color: #3f5568;
}
body.dark-mode .email-link {
  color: #ffaa88;
}
body.dark-mode .button-form {
  background: #1e2a36;
  color: #e0e4e8;
  border-color: #3f5568;
}
body.dark-mode .help-text {
  color: #9aa2b0;
}
body.dark-mode .final-message {
  border-top-color: #2a2f36;
  color: #ccddee;
}

/* Grid de imagens lado a lado (para artigos) */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.image-grid img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  background: #f5f5f5;
  transition: transform 0.2s ease;
}
.image-grid img:hover {
  transform: scale(1.02);
}
@media (max-width: 640px) {
  .image-grid {
    grid-template-columns: 1fr;
  }
}
/* Limita a largura do conteúdo do artigo */
.article-container,
.article-content,
#article-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Para telas menores, ocupar 100% */
@media (max-width: 900px) {
  .article-container,
  .article-content,
  #article-content {
    max-width: 100%;
    padding: 0 1rem;
  }
}

/* ==============================================
   MELHORIAS VISUAIS: TABELAS E VÍDEOS
   (adicione ao final do style.css ou global-dark-mode.css)
   ============================================== */

/* ----- TABELAS RESPONSIVAS ----- */
.article-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.8rem 0;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

/* Bordas e espaçamento interno */
.article-body table th,
.article-body table td {
  border: 1px solid #e2e8f0;
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

/* Cabeçalho */
.article-body table th {
  background: #f8fafc;
  font-weight: 600;
  color: #1e293b;
  border-bottom-width: 2px;
}

/* Linha zebrada (opcional, descomente se quiser) */
/* .article-body table tr:nth-child(even) td {
  background-color: #fafafa;
} */

/* Modo escuro para tabelas */
body.dark-mode .article-body table th {
  background: #1e2a36;
  color: #e2e8f0;
  border-color: #3f5568;
}
body.dark-mode .article-body table td {
  border-color: #3f5568;
  color: #cbd5e1;
}
/* body.dark-mode .article-body table tr:nth-child(even) td {
  background-color: #11161d;
} */

/* ----- VÍDEOS RESPONSIVOS (tag <video> e iframes) ----- */
.article-body video,
.article-body iframe[src*="youtube"],
.article-body iframe[src*="vimeo"] {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  display: block;
  margin: 1.8rem auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  background: #000;
}

/* Para vídeos do YouTube (garante aspect ratio 16:9) */
.article-body iframe[src*="youtube"] {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* ----- FIGURAS COM LEGENDA (caso use <figure><figcaption>) ----- */
.article-body figure {
  margin: 1.8rem 0;
  text-align: center;
}
.article-body figcaption {
  font-size: 0.85rem;
  color: #4b5563;
  margin-top: 0.6rem;
  font-style: italic;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body.dark-mode .article-body figcaption {
  color: #9ca3af;
}

/* ----- LIGHTBOX (melhoria no fundo) ----- */
#lightbox {
  background: rgba(0, 0, 0, 0.94) !important;
  backdrop-filter: blur(6px);
}
#lightbox img {
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(0,0,0,0.3);
}

/* ----- AJUSTES MÓVEIS (tabelas e vídeos) ----- */
@media (max-width: 640px) {
  .article-body table th,
  .article-body table td {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
  .article-body video,
  .article-body iframe[src*="youtube"] {
    border-radius: 14px;
  }
}

/* ==============================================
   PLYR.IO – DESIGN PREMIUM (borda, sombra, glow)
   ============================================== */

/* Container principal do player */
.plyr {
  border-radius: 24px !important;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

/* Borda sutil (com gradiente animado) */
.plyr {
  border: 2px solid transparent;
  background-clip: padding-box;
  background-image: linear-gradient(white, white), 
                    linear-gradient(135deg, #0D8F81, #2c9e8f, #6ab0a5);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Modo escuro – borda com cores mais vibrantes */
body.dark-mode .plyr {
  background-image: linear-gradient(#111418, #111418), 
                    linear-gradient(135deg, #00144d, #4a9eff, #0D8F81);
}

/* Efeito hover: sobe um pouco + glow */
.plyr:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(13, 143, 129, 0.3);
}

/* Barra de controles – gradiente escuro suave */
.plyr__controls {
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 100%);
  border-radius: 0 0 24px 24px;
}

/* Botão de play central (overlay) */
.plyr__control--overlaid {
  background: rgba(13, 143, 129, 0.9) !important;
  backdrop-filter: blur(4px);
  transition: transform 0.2s, background 0.2s;
}
.plyr__control--overlaid:hover {
  background: #0D8F81 !important;
  transform: scale(1.05);
}

/* Indicador de progresso */
.plyr__progress--played,
.plyr__volume--played {
  background: #0D8F81 !important;
}

/* Tempo e texto dos botões */
.plyr__time {
  color: #eee;
  font-weight: 500;
}

/* Menu de configurações (velocidade, qualidade) */
.plyr__menu__container {
  background: #1e2a36;
  border-radius: 16px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
}
.plyr__menu__container .plyr__control--forward,
.plyr__menu__container .plyr__control--back {
  color: #e0e4e8;
}

/* Modo escuro (reforço) */
body.dark-mode .plyr {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(13, 143, 129, 0.2);
}
body.dark-mode .plyr:hover {
  box-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(13, 143, 129, 0.5);
}

/* Modo escuro */
body.dark-mode .related-card {
  background: #12161c;
  border-color: #2a2f36;
}
body.dark-mode .related-card:hover {
  border-color: #4a627a;
  box-shadow: 0 12px 24px rgba(0,0,0,0.3);
}
body.dark-mode .related-card-content h3 {
  color: #e2e8f0;
}
body.dark-mode .related-date {
  color: #95a5b8;
}
/* Responsivo: no celular continua o layout que você já tem (linha com imagem à esquerda) */
@media (max-width: 600px) {
  .related-card .related-cover {
    width: 70px;
    height: 70px;
    aspect-ratio: 1/1;
  }
  .related-card:hover .related-cover {
    transform: none;
  }
}