/* ============================================ */
/* Layout Principal do Dashboard (de index.php) */
/* ============================================ */

/* ===============================================================================
 * 01 -> Variáveis Globais e Estilos Base
 * =============================================================================== */
:root {
  --bg: #0f1115;
  --bg-post-card: #212529;
  --panel: #161a22;
  --border: #242a36;
  --text: #e8ecf3;
  --muted: #bfc7d5;
  --primary: #6b5bff;
  --primary-600: #5a4de0;
  --success: #38d397;
  --success-border: #1a8362;
  --warning: #ffc107;
  --warning-border: #a37d09;
  --danger: #ff6b6b;
  --danger-border: #a54242;
  --danger-border: #b92525;
  --alert: #ce7f7f;
  --stars: #ffc107 !important;
  --stars-border: #ff8800 !important;
  --stars-inner: #b3ff00 !important;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background-color: #212529; /* Cor mais escura, alinhada com o tema */
  border-right: 1px solid #343a40;
  padding: 1rem;
}

.sidebar-header {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.5rem 1.5rem 0.5rem;
  border-bottom: 1px solid #343a40;
  margin-bottom: 1rem;
}

.content-area {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  background-color: #2c3034; /* Cor de fundo da área de conteúdo */
}

.content-iframe {
  flex-grow: 1;
  border: none;
  width: 100%;
  height: 100%;
  overflow: auto; /* Permitir scroll se necessário */
}

/* ========================================= */
/* Estilos da Modal (de showAppModal)        */
/* ========================================= */
.modal-content {
  border: none; /* Remove a borda padrão para dar mais destaque à do header */
}

.modal-header {
  border-bottom-width: 4px;
  border-bottom-style: solid;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Título da Modal */
.modal-title {
  font-weight: 600;
}

/* --- Variações de Cor da Modal --- */

/* Sucesso (Verde) */
.modal-content.modal-success .modal-header {
  background-color: var(--success);
  border-color: var(--success-border); /* Tom mais escuro de --success */
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Sucesso (Verde) botão OK */
.modal-content.modal-success .modal-footer .btn-primary {
  background-color: var(--success);
  border-color: var(--success-border); /* Tom mais escuro de --success */
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Erro (Vermelho) */
.modal-content.modal-error .modal-header {
  background-color: var(--danger);
  border-color: var(--danger-border); /* Tom mais escuro de --danger */
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Erro (Vermelho) botão OK */
.modal-content.modal-error .modal-footer .btn-primary {
  background-color: var(--danger);
  border-color: var(--danger-border); /* Tom mais escuro de --danger */
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Alerta (Laranja/Amarelo) */
.modal-content.modal-alert .modal-header {
  background-color: var(--warning);
  border-color: var(--warning-border); /* Tom mais escuro de --warning */
  color: #212529; /* Texto escuro para contraste */
}
.modal-content.modal-alert .modal-header .btn-close {
  filter: none; /* Botão preto padrão para fundos claros */
}

/* Alerta (Laranja/Amarelo) botão OK */
.modal-content.modal-alert .modal-footer .btn-primary {
  background-color: var(--warning);
  border-color: var(--warning-border); /* Tom mais escuro de --warning */
  color: #212529; /* Texto escuro para contraste */
}
.modal-content.modal-alert .modal-header .btn-close {
  filter: none; /* Botão preto padrão para fundos claros */
}

.sidebar-footer {
  padding: 1rem 0.5rem 0.5rem 0.5rem;
  border-top: 1px solid #343a40;
}
.sidebar-footer .user-info {
  display: flex;
  align-items: center;
  color: #adb5bd;
  font-size: 0.9rem;
}

/* Estilos dos links de navegação da sidebar */
.sidebar .nav-link {
  color: #ccc;
  margin-bottom: 5px;
}

.sidebar .nav-link:hover {
  color: #fff;
  background-color: #343a40; /* Fundo sutil no hover */
}

.sidebar .nav-link.active {
  color: #fff;
  font-weight: bold;
  background-color: rgba(13, 110, 253, 0.1); /* Fundo translúcido */
  border-left: 4px solid #0d6efd;
  padding-left: calc(1rem - 4px); /* Compensa a borda */
}
.sidebar .nav-link i {
  opacity: 0.8;
}

/* ========================================= */
/* Estilos do Formulário (de post_form.php)  */
/* ========================================= */
.preview-image {
  width: 237px !important;
  height: 237px !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background-color: #343a40; /* Fundo para a pré-visualização */
}

.audio-player {
  border-radius: 8px;
  padding: 10px;
  display: none; /* Começa escondido */
}

/* ========================================= */
/* Estilos dos Cards                         */
/* ========================================= */

.content-area .card {
  width: 100% !important;
  max-width: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.content-area .card-body {
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.table-responsive {
  width: 100%;
  overflow: auto;
  min-height: 0;
}

/* ========================================= */
/* ----- CSS RESPONSIVO PARA DASHBOARD ----- */
/* ========================================= */

/* Estilos Padrão (Desktop) */
.layout-wrapper {
  position: relative;
  transition: margin-left 0.3s ease;
}

.sidebar {
  width: 250px; /* Largura fixa da sidebar */
  transition: margin-left 0.3s ease;
}

/* Estilos para Telas Pequenas (Mobile) */
@media (max-width: 991.98px) {
  .sidebar {
    position: fixed; /* Fixa a sidebar na tela */
    height: 100vh;
    z-index: 1020; /* Garante que fique acima do conteúdo */
    margin-left: -250px; /* Esconde a sidebar fora da tela */
  }

  .content-area {
    flex: 1 1 auto;
    min-width: 0; /* evita overflow horizontal por conteúdo largo */
  }

  /* Estilo 'toggled' que será aplicado via JavaScript */
  .layout-wrapper.toggled .sidebar {
    margin-left: 0; /* Traz a sidebar de volta para a tela */
  }

  /* Botão de toggle (hambúrguer) visível apenas em mobile */
  .sidebar-toggle-btn {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: #343a40;
    border: 1px solid #495057;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 8px;
    z-index: 1021;
    cursor: pointer;
  }
  .sidebar-toggle-btn span {
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  .layout-wrapper.toggled .sidebar-toggle-btn span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .layout-wrapper.toggled .sidebar-toggle-btn span:nth-child(2) {
    opacity: 0;
  }
  .layout-wrapper.toggled .sidebar-toggle-btn span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Oculta o seletor de visualização (Grid/Lista) em telas menores para evitar quebra de layout */
  .view-toggle-buttons {
    display: none;
  }

  /* Adiciona padding à direita no cabeçalho da lista de posts para não sobrepor o botão de menu */
  #post-list-header,
  #form-header {
    padding-right: 55px;
  }
}

/* --- Estilos para Lista/Grade de Posts --- */

/* Layout para o modo GRADE */
.post-list-container.view-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Estilo do Card no modo GRADE */
.post-list-container.view-mode-grid .post-card {
  background-color: #2c3034; /* Cor de fundo do card */
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-list-container.view-mode-grid .post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Efeito de destaque para um post linkado via âncora (#post-ID) */
/* Aplica-se a ambos os modos */
.post-card {
  background: var(--bg-post-card) !important;
}

.post-card:target {
  animation: highlight-post 1.5s ease-out;
  border-color: #0d6efd !important; /* Cor primária do Bootstrap */
  box-shadow: 0 0 15px rgba(13, 110, 253, 0.5); /* Efeito de brilho */
}

@keyframes highlight-post {
  0% {
    background-color: rgba(13, 110, 253, 0.2);
  }
  100% {
    background-color: #2c3034; /* Cor de fundo original do card */
  }
}

.post-card-checkbox-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-card-checkbox-overlay .form-check-input {
  width: 1.3em;
  height: 1.3em;
  margin: 0 !important;
}
.post-list-container.view-mode-grid .post-card-image {
  position: relative; /* Para posicionar o botão de play */
}

.post-list-container.view-mode-list .post-card-image {
  position: relative; /* Para posicionar o botão de play */
  flex-shrink: 0; /* Evita que a imagem encolha */
}

.post-list-container.view-mode-grid .post-card-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.post-list-container.view-mode-grid .post-card-body {
  padding: 1rem;
  flex-grow: 1;
}

.post-list-container.view-mode-grid .post-card-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
}

.post-list-container.view-mode-grid .post-card-actions {
  padding: 0 1rem 1rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Layout Alternativo: Lista (quando a classe .view-mode-list é adicionada) */
.post-list-container.view-mode-list {
  display: block; /* Sobrescreve o 'display: grid' */
}

.post-list-container.view-mode-list .post-card {
  background-color: #2c3034;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  padding: 1rem;
  margin-bottom: 1rem;
  flex-direction: row; /* Garante o layout horizontal */
}

.post-list-container.view-mode-list .post-card-body {
  flex-grow: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.post-list-container.view-mode-list .post-card-image img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 1.5rem;
}

.post-list-container.view-mode-list .post-card-title {
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.post-list-container.view-mode-list .post-card-description {
  margin-bottom: 0; /* Espaçamento mais compacto */
}

.post-list-container.view-mode-list .post-card-footer {
  display: block; /* Garante que a data fique abaixo do título */
  margin-bottom: 0.25rem; /* Espaçamento mais compacto */
}

.post-list-container.view-mode-list .post-card-actions {
  padding: 0;
  display: block;
  gap: 0.5rem;
  margin-left: 1rem; /* Separa as ações do corpo do texto */
}

/* Estilo para cards ocultos na listagem do admin */
.post-card.is-hidden {
  opacity: 0.5; /* Reduz a opacidade para 50% */

  /* Vamos garantir que o fundo vermelho seja aplicado sobre qualquer outro estilo de card */
  background-color: #4a2a2a !important; /* Fundo avermelhado escuro */

  border-color: #dc3545 !important; /* Borda vermelha de perigo */
}

.post-card.is-hidden .post-card-image img {
  filter: grayscale(80%);
}

/* Estilo da badge do card para o status de visibilidade */
.post-status-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 55px;
  height: 30px;
}

.post-list-container.view-mode-list .post-status-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 55px;
  height: 30px;
  margin-bottom: 5px;
}

/* Por padrão (Grid View), esconde a linha de stats da lista e mostra a da grade */
.post-list-container.view-mode-grid .post-list-view-stats {
  display: none;
}
.post-list-container.view-mode-grid .post-grid-view-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--muted);
}
.post-list-container.view-mode-grid .post-grid-view-stats span {
  white-space: nowrap;
}

/* Na visualização em lista, inverte: mostra a linha de stats e esconde os stats da grade */
.post-list-container.view-mode-list .post-list-view-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Novo container para o rodapé do card na visualização em lista */
.post-card-footer-section {
  /* margin-top: auto; foi removido do HTML para um espaçamento consistente */
  padding-top: 0; /* Espaçamento mais compacto */
}
.post-list-container.view-mode-list .post-grid-view-stats {
  display: none;
}

/* Ajusta o layout das ações na visualização em lista para alinhar os botões à direita */
.post-list-container.view-mode-list .post-card-actions {
  margin-left: auto; /* Empurra os botões para a direita na lista */
  flex-shrink: 0;
  width: 70px;
}

/* Ações do Card no modo GRADE */
.post-list-container.view-mode-grid .post-card-actions {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  align-items: center;
  justify-items: stretch; /* Estica os itens para preencher a largura da célula, garantindo alinhamento */
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border, #333);
  gap: 0.25rem 0.75rem; /* Espaçamento entre linhas e colunas */
}

/* Na visualização em lista, esconde os stat-items do rodapé, pois eles já aparecem no corpo do card */
.post-list-container.view-mode-list .post-card-actions .stat-item {
  display: none;
}

/* Posicionamento dos itens no Grid */
.post-card-actions .stat-item.downloads {
  grid-area: 1 / 1;
}
.post-card-actions .stat-item.filesize {
  grid-area: 2 / 1;
}
.post-card-actions .stat-item.rating {
  grid-area: 3 / 1;
}

.post-list-container.view-mode-grid .teaser-play-btn-dash {
  position: absolute; /* Este seletor é muito específico, o posicionamento do checkbox é feito em .post-card-checkbox-overlay */
  bottom: 10px;
  left: 10px;
  z-index: 5;
}

.post-list-container.view-mode-list .teaser-play-btn-dash {
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 5;
}

.post-card-actions .post-status-badge {
  grid-area: 3 / 2;
  justify-self: center;
}
.post-card-actions .edit-btn {
  grid-area: 3 / 3;
  justify-self: center;
}
.post-card-actions .analytics-btn {
  grid-area: 3 / 4;
  justify-self: center;
}
.post-list-container.view-mode-list .post-card-actions .edit-btn {
  grid-area: 3 / 2;
  justify-self: center;
  width: 55px;
  height: 30px;
  margin-bottom: 5px;
}
.post-card-actions .toggle-visibility-btn {
  grid-area: 3 / 5;
  justify-self: center;
}
.post-list-container.view-mode-list .post-card-actions .toggle-visibility-btn {
  grid-area: 3 / 3;
  justify-self: center;
  width: 55px;
  height: 30px;
}

/* Estilo dos itens de estatística */
.post-card-actions .stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ================================================== */
/* Componente: Botão de Play e Barra de Progresso     */
/* ================================================== */
.teaser-play-button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s;
}
.teaser-play-button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
.teaser-play-button i {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s;
  margin-left: 2px; /* Ajuste fino para o ícone de play */
}
.teaser-play-button i.fa-pause {
  margin-left: 0; /* Ajuste para o ícone de pause */
}

.image-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 8px;
  background-color: var(--primary);
  opacity: 0.8;
  width: 0%; /* Começa com 0 */
  z-index: 6;
  transition: width 0.1s linear;
}

/* Estilo de hover quando o post está VISÍVEL (o card pai NÃO tem a classe .is-hidden) */
.post-card:not(.is-hidden) .toggle-visibility-btn:hover {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #000;
}

.post-card:not(.is-hidden) .toggle-visibility-btn {
  border-color: #dc3545;
  color: #dc3545;
}

/* Estilo de hover quando o post está OCULTO (o card pai TEM a classe .is-hidden) */
.post-card.is-hidden .toggle-visibility-btn:hover {
  background-color: #38802a;
  border-color: #38802a;
  color: #fff;
}

.post-card.is-hidden .toggle-visibility-btn {
  border-color: #38802a;
  color: #38802a;
}

/* --- Seletor de Categoria com Badges --- */
.category-badge-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-body-bg);
}

.category-badge-selector .category-badge {
  font-size: 0.9rem;
  padding: 0.5em 0.9em;
  border-radius: 50rem; /* pill shape */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color-emphasis);
  border: 1px solid transparent;
}

.category-badge-selector .category-badge:hover {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-primary);
}

/* Estilo do badge quando o checkbox correspondente está selecionado */
.category-badge-selector input[type="checkbox"]:checked + .category-badge {
  background-color: var(--bs-primary);
  color: #fff;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(var(--bs-primary-rgb), 0.5);
}