/* Tema bonito e harmonioso para Pão Diário Online */
/* Marca Ázimos */
.navbar-brand .brand-logo { height: 28px; width: auto; display: block; }
.navbar-brand .brand-logo-img { height: 56px; width: auto; display: block; }
.navbar-brand { gap: .6rem !important; }
.navbar-brand .brand-title { font-weight: 700; letter-spacing: .3px; }
.navbar-brand .brand-subtitle { margin-top: 1px; line-height: 1.1; font-size: .80rem; }

/* Estilo do popover da marca */
.brand-popover {
  --bs-popover-max-width: 420px;
}
.brand-popover .popover-body {
  font-size: .9rem;
  line-height: 1.35;
}

/* Dropdown do usuário no mobile: posicionar relativo ao container do header e alinhar à direita */
@media (max-width: 768px) {
  header.navbar .container { position: relative; }
  header.navbar .dropdown { position: static; }
  header.navbar .dropdown-menu {
    position: absolute; /* absoluto em relação ao container do header */
    left: auto !important;
    right: .75rem; /* afastado da borda direita */
    transform: none !important;
  }
}

/* Modo escuro: mantém contraste da marca */
body.dark .navbar-brand .brand-title { color: var(--brand-primary); }
:root {
  --brand-primary: #2563eb; /* azul principal */
  --brand-primary-2: #3b82f6; /* azul claro para gradientes */
  --brand-secondary: #00bfa5; /* teal */
  --brand-accent: #ff7043; /* coral */
  /* Offset padrão do header fixo para elementos sticky */
  --header-offset: 72px;
  /* Altura aproximada da barra de busca para afastar o menu abaixo dela */
  --search-offset: 64px;
  /* Cor de fundo do container de pesquisa (opaco, azul claro) */
  --search-bg: #eaf2ff;
  /* Auth cards */
  --auth-card-bg: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  --auth-card-bg-dark: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
}

html[data-theme="dark"] {
  color-scheme: dark;
}

body.bg-body {
  background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
}

/* Botão laranja (warning) mais próximo do laranja desejado */
.btn-outline-warning {
  color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  color: #fff !important;
}
html[data-theme="dark"] body.bg-body {
  background: linear-gradient(180deg, #101316 0%, #171a1f 100%);
}

.navbar-brand { color: var(--brand-primary); }

/* Hero */
.hero .hero-inner {
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(0,191,165,.12));
  border: 1px solid rgba(37,99,235,.25);
}
html[data-theme="dark"] .hero .hero-inner {
  background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(0,191,165,.16));
  border-color: rgba(37,99,235,.35);
}

/* ===== Auth pages ===== */
.auth-page { padding-top: 0.5rem; }
.auth-card {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  background: var(--auth-card-bg);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
html[data-theme="dark"] .auth-card { background: var(--auth-card-bg-dark); box-shadow: 0 14px 30px rgba(255,255,255,.06); }
.auth-logo { height: 56px; width: auto; }
.auth-title { font-weight: 800; letter-spacing: .3px; color: var(--brand-primary); }
.auth-card .input-group-text { background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.20); }
.auth-card .form-control:focus { box-shadow: 0 0 0 0.25rem rgba(37,99,235,.20); }
.auth-card .btn-outline-secondary { border-color: #cbd5e1; }

/* Cards */
.card.post-card {
  border: none;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
  border-radius: 18px;
  overflow: hidden;
}
.card.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

.badge-category {
  background: linear-gradient(135deg, var(--brand-primary-2), var(--brand-secondary));
  color: #fff;
  border: 1px solid rgba(37,99,235,.22);
  box-shadow: 0 6px 14px rgba(37,99,235,.18);
  letter-spacing: .2px;
}
.badge-category:hover { filter: brightness(0.95); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-2));
  border: none;
}
.btn-primary:hover { filter: brightness(0.95); }

.btn-outline-primary { color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-outline-primary:hover { background: var(--brand-primary); color: #fff; }

footer a { text-decoration: none; }

.comment {
  border-left: 3px solid rgba(0,0,0,.1);
  padding-left: 12px;
  margin-top: 12px;
}
.comment .author { font-weight: 600; }
.comment .date { font-size: .9rem; color: #777; }

/* Dark adjustments */
html[data-theme="dark"] .card.post-card { box-shadow: 0 10px 25px rgba(255,255,255,.06); }
html[data-theme="dark"] .comment { border-left-color: rgba(255,255,255,.12); }

/* Modern redesign additions */
.glass-nav {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(37,99,235,.15);
}
html[data-theme="dark"] .glass-nav {
  background: rgba(20, 22, 26, 0.55) !important;
  border-bottom-color: rgba(37,99,235,.25);
}

.hero .hero-inner {
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,.06);
}
/* Realce do título e frase no carrossel da Home */
.hero .carousel-caption {
  color: #fff;
  background: rgba(0,0,0,.36);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  border-radius: 14px;
  padding: 1rem 2rem;
  display: block;
  position: absolute; /* garantir posicionamento relativo ao slide */
  left: 0 !important;
  right: 0 !important;
  width: 100%;
  bottom: 0 !important; /* encostar na base da imagem */
  top: auto !important;
  text-align: center;
  backdrop-filter: blur(2px);
}
.hero .carousel-caption h5 {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: .4px;
  text-shadow: 0 3px 12px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35);
}
.hero .carousel-caption p {
  font-size: 1.15rem;
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.30);
}
.card-cover { height: 100%; width: 100%; display: block; object-fit: cover; }
.card-cover-wrap { position: relative; height: 160px; overflow: hidden; }
.card-cover-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.35) 100%); }
.card-cover-chip { position: absolute; left: 12px; top: 12px; z-index: 2; }
.card-cover-tags { position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: calc(100% - 24px); }
.card-cover-icon { position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #dc2626 !important; font-size: 2.25rem; z-index: 3; }
.post-tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* Badges de contagem (verde) */
.badge-count { background-color: #22c55e !important; color: #fff !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 4px 8px; font-weight: 600; min-width: 28px; text-align: center; }
.badge-total { background-color: var(--brand-primary) !important; color: #fff !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 4px 8px; font-weight: 600; min-width: 28px; text-align: center; }

/* Accordion header spacing para não colidir com a seta */
.accordion-button { gap: .5rem; }
.accordion-button .badge-total { margin-left: auto; }

.filter-bar {
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.2);
  border-radius: 14px;
  padding: 8px 12px;
}
html[data-theme="dark"] .filter-bar { background: rgba(37,99,235,.14); }

.btn-primary:focus { box-shadow: 0 0 0 0.25rem rgba(37,99,235,.3); }

/* Typography tweaks */
.display-6 { letter-spacing: .2px; }
.lead { color: #6c757d; }
/* Post content should be high-contrast and regular weight for legibility */
.content.lead { color: #212529; font-weight: 400; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
html[data-theme="dark"] .content.lead { color: #e5e7eb; }

/* Sidebar */
.sidebar-card { border: none; box-shadow: 0 8px 20px rgba(0,0,0,.06); border-radius: 16px; }
.ad-box { background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(0,191,165,.08)); border: 1px dashed rgba(37,99,235,.25); border-radius: 14px; padding: 16px; text-align: center; color: #6b7280; }

/* Avatars */
.avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: 0 0 32px; border: 1px solid rgba(0,0,0,.1); }
html[data-theme="dark"] .avatar { border-color: rgba(255,255,255,.12); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.placeholder { background: #e5e7eb; color: #6b7280; display: inline-flex; align-items: center; justify-content: center; }
.avatar.placeholder i { font-size: 1rem; }

/* Avatar Zoom */
.js-avatar-zoom { cursor: zoom-in; }
.avatar-zoom-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 1050; padding: 24px; }
.avatar-zoom-overlay img { width: min(70vw, 240px); height: min(70vw, 240px); aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; box-shadow: 0 10px 24px rgba(0,0,0,.40); }
html[data-theme="dark"] .avatar-zoom-overlay { background: rgba(0,0,0,.8); }

/* Pop flutuante abaixo do avatar */
.avatar-zoom-pop {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  border: 2px solid rgba(255,255,255,.9);
  background: #fff;
}
.avatar-zoom-pop img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-theme="dark"] .avatar-zoom-pop { border-color: rgba(255,255,255,.25); background: #111; }

/* Admin Posts: cores por status */
.table .status-cell {
  transition: background-color .2s ease, color .2s ease;
}
.status-ativo {
  background-color: #dcfce7; /* verde claro */
  color: #14532d;
}
.status-oculto {
  background-color: #fef9c3; /* amarelo claro */
  color: #7a6b00;
}
.status-bloqueado {
  background-color: #fee2e2; /* vermelho claro */
  color: #7f1d1d;
}
/* Colorir diretamente o select dentro da coluna de status (escopo admin) */
.admin-posts .status-cell .form-select {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.admin-posts .status-ativo .form-select {
  background-color: #dcfce7 !important;
  color: #14532d !important;
  border-color: #86efac !important;
}
.admin-posts .status-oculto .form-select {
  background-color: #fef9c3 !important;
  color: #7a6b00 !important;
  border-color: #fde68a !important;
}
.admin-posts .status-bloqueado .form-select {
  background-color: #fee2e2 !important;
  color: #7f1d1d !important;
  border-color: #fca5a5 !important;
}
/* Controles do carrossel: alinhar texto e ícones sem sobreposição */
.hero .carousel-control-prev,
.hero .carousel-control-next {
  display: flex; /* já é flex no Bootstrap, reforça aqui */
  align-items: center;
  z-index: 5;
}

/* Line clamp utilitário para prévias mantendo formatação inline */
.line-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-10 {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.title-2lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  min-height: 2.7em; /* garante duas linhas mesmo com título curto */
}
.preview-text b, .preview-text strong { font-weight: 700; }
.preview-text i, .preview-text em { font-style: italic; }
.preview-text u { text-decoration: underline; }
/* Menor tamanho de fonte para prévia na home */
.preview-text { font-size: 0.9rem; line-height: 1.5; color: #333; text-align: justify; text-justify: inter-word; hyphens: auto; }
html[data-theme="dark"] .preview-text { color: #e5e7eb; }
/* Data inline ao lado do autor (menor) */
.date-inline { font-size: .78rem; }
/* Chip de data abaixo da imagem do card */
.date-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: .125rem .5rem;
}
.date-chip i { font-size: 1rem; }
html[data-theme="dark"] .date-chip {
  color: #e5e7eb;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.15);
}
/* Linha pontilhada separadora entre autor e conteúdo */
.dotted-sep { border: 0; border-top: 1px dotted rgba(0,0,0,.3); height: 0; }
html[data-theme="dark"] .dotted-sep { border-top-color: rgba(255,255,255,.35); }
.hero .carousel-control-prev { justify-content: flex-start; padding-left: 1rem; }
.hero .carousel-control-next { justify-content: flex-end; padding-right: 1rem; }

/* Ícones */
.hero .carousel-control-prev .carousel-control-prev-icon,
.hero .carousel-control-next .carousel-control-next-icon {
  width: 2rem; height: 2rem;
}

/* Botões de ação (compartilhar/exportar) — icon-only padronizado */
.icon-only-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.icon-only-btn i { color: #fff; }
html[data-theme="dark"] .icon-only-btn i { color: #fff; }

/* Agrupamento com espaçamento mínimo entre botões */
.action-buttons { gap: 3px; }

/* Overlay de exportação PDF */
.pdf-export-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050; /* acima de cards e navbar */
}
.pdf-export-overlay .overlay-inner {
  background: rgba(0,0,0,.4);
  padding: 10px 14px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
}


/* Rótulos visíveis ao lado das setas */
.hero .carousel-control-prev .carousel-control-label,
.hero .carousel-control-next .carousel-control-label {
  position: static !important; /* cancelar posicionamento absoluto anterior */
  top: auto !important; left: auto !important; right: auto !important;
  transform: none !important;
  margin: 0 .5rem;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
/* Ordem: prev = ícone depois texto; next = texto antes ícone */
.hero .carousel-control-prev { gap: .35rem; }
.hero .carousel-control-next { gap: .35rem; }
.hero .carousel-control-next .carousel-control-label { order: 1; }
.hero .carousel-control-next .carousel-control-next-icon { order: 2; }

/* Tipografia responsiva: diminuir levemente no mobile para melhor leitura */
@media (max-width: 576px) {
  /* Legendas do carrossel visíveis e confortáveis no mobile */
  .hero .carousel-caption { padding: .5rem 1rem; background: rgba(0,0,0,.32); }
  .hero .carousel-caption h5 { font-size: 1.25rem; font-weight: 700; }
  .hero .carousel-caption p { font-size: .9rem; }
  /* Prévia nos cards da Home */
  .preview-text { font-size: 0.85rem; line-height: 1.5; }
  /* Conteúdo do post: força menor tamanho, mesmo com estilos inline */
  .content.lead,
  .content.lead p,
  .content.lead li,
  .content.lead span,
  .content.lead div { font-size: 0.95rem !important; line-height: 1.65 !important; }

  /* Carrossel: alinhar controles ao topo no mobile */
  .hero .carousel-control-prev,
  .hero .carousel-control-next {
    align-items: flex-start; /* conteúdo no topo do slide */
    padding-top: .5rem;     /* pequeno afastamento do topo */
  }
  /* Ícones ligeiramente menores no mobile para não encostar na borda */
  .hero .carousel-control-prev .carousel-control-prev-icon,
  .hero .carousel-control-next .carousel-control-next-icon {
    width: 1.75rem; height: 1.75rem;
  }
  /* Rótulos junto ao topo também */
  .hero .carousel-control-prev .carousel-control-label,
  .hero .carousel-control-next .carousel-control-label { margin-top: 0; }
}
/* Sidebar sticky no desktop */
@media (min-width: 768px) {
  .sticky-sidebar {
    position: sticky;
    top: calc(var(--header-offset) + var(--search-offset) + 8px);
    z-index: 10;
  }

  /* Tornar o card da sidebar sticky dentro da coluna flex */
  .sticky-sidebar .sidebar-card.sticky {
    position: sticky;
    top: calc(var(--header-offset) + var(--search-offset) + 8px);
    align-self: flex-start;
  }
}
/* Barra de pesquisa sticky (desktop) */
@media (min-width: 768px) {
  .sticky-search {
    position: sticky;
    top: calc(var(--header-offset) + 8px);
    z-index: 20;
    background-color: var(--search-bg); /* azul claro opaco: evita ver conteúdo por trás */
    /* mantém aparência da .filter-bar original sem sobrescrever o fundo */
    /* se quiser leve sombra, podemos reativar box-shadow aqui */
  }
}
/* Sticky também em mobile */
@media (max-width: 767.98px) {
  .sticky-search {
    position: static; /* desativa sticky no mobile */
    top: auto;
    z-index: 20;
    background-color: var(--search-bg); /* azul claro também no mobile */
  }
  .sticky-sidebar {
    position: static; /* desativa sticky no mobile */
    top: auto;
    z-index: 10;
  }
  .sticky-sidebar .sidebar-card.sticky {
    position: static; /* desativa sticky no mobile */
    top: auto;
    align-self: flex-start;
  }
}
/* Ajusta offset do header por breakpoint (navbar maior no mobile) */
@media (max-width: 992px) { :root { --header-offset: 80px; --search-offset: 68px; } }
@media (max-width: 576px) { :root { --header-offset: 92px; --search-offset: 72px; } }