/* Estilos comuns da moldura (tema/cabeçalho), compartilhados pela área pública e pelo painel.
   Externalizado para não expor CSS inline no código-fonte. */

/* Troca de tema instantânea: ao trocar o href dos stylesheets, o navegador reavalia os
   estilos e re-dispara as `transition` do template. No painel isso fazia o menu lateral
   (.sidebar-wrapper tem `transition: all .3s`) "deslizar"/aparecer no celular a cada troca
   de tema. Enquanto a classe .theme-switching está no <html> (só durante a troca), toda
   transição fica suspensa, então o novo tema é aplicado de imediato, sem animação. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
    animation: none !important;
}

/* Alterna o ícone do botão de tema conforme o tema a selecionar (lua=claro, sol=escuro) */
.theme-icon-sun { display: none; }
html.home-dark .theme-icon-moon { display: none; }
html.home-dark .theme-icon-sun { display: inline-block; }

/* Autofill no tema escuro: o destaque de autocompletar do navegador ignora o tema e pinta
   os campos de branco logo após o carregamento (ex.: ao postar um formulário que recarrega a
   página), causando um "flash" branco. Fixamos o fundo escuro com box-shadow interno e
   adiamos a transição de background para que o branco do navegador nunca chegue a ser pintado. */
html.home-dark input:-webkit-autofill,
html.home-dark input:-webkit-autofill:hover,
html.home-dark input:-webkit-autofill:focus,
html.home-dark input:-webkit-autofill:active,
html.home-dark textarea:-webkit-autofill,
html.home-dark select:-webkit-autofill {
    -webkit-text-fill-color: #f9f9f9;
    -webkit-box-shadow: 0 0 0 1000px #2b2b2b inset;
    box-shadow: 0 0 0 1000px #2b2b2b inset;
    caret-color: #f9f9f9;
    transition: background-color 9999s ease-in-out 0s;
}
/* Site público: mantém o tema escuro original do Landrick (azulado); só o painel usa cinza neutro. */
html.home-dark.site-public input:-webkit-autofill,
html.home-dark.site-public input:-webkit-autofill:hover,
html.home-dark.site-public input:-webkit-autofill:focus,
html.home-dark.site-public input:-webkit-autofill:active,
html.home-dark.site-public textarea:-webkit-autofill,
html.home-dark.site-public select:-webkit-autofill {
    -webkit-text-fill-color: #f8f9fa;
    -webkit-box-shadow: 0 0 0 1000px #1f2d3d inset;
    box-shadow: 0 0 0 1000px #1f2d3d inset;
    caret-color: #f8f9fa;
}

/* Avatar sólido dentro do botão (pílula) de usuário no cabeçalho */
.user-avatar-solid {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background-color: #2f55d4; color: #fff; font-weight: 700; font-size: .8rem;
    line-height: 1;
}

/* Avatar dentro da pílula primária (cabeçalho fixo): círculo branco */
.user-avatar-on-primary {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background-color: #fff; color: #2f55d4; font-weight: 700; font-size: .8rem;
    line-height: 1;
}

/* Área de arrastar-e-soltar para upload de arquivos (componente x-file-dropzone) */
.file-dropzone {
    cursor: pointer;
    border: 1px dashed rgba(47, 85, 212, .45);
    border-radius: .5rem;
    background-color: rgba(47, 85, 212, .03);
    transition: border-color .15s ease, background-color .15s ease;
}
.file-dropzone:hover { border-color: #2f55d4; background-color: rgba(47, 85, 212, .06); }
/* Evita que os filhos (ícone/texto) gerem eventos próprios de drag e causem flicker. */
.file-dropzone > * { pointer-events: none; }
.file-dropzone--over {
    border-style: solid;
    border-color: #2f55d4 !important;
    background-color: rgba(47, 85, 212, .1) !important;
}
html.home-dark .file-dropzone { background-color: rgba(47, 85, 212, .08); border-color: rgba(120, 145, 230, .5); }
html.home-dark .file-dropzone:hover { background-color: rgba(47, 85, 212, .14); }
html.home-dark .file-dropzone--over { background-color: rgba(47, 85, 212, .18) !important; }

/* Descrição longa do download renderizada de Markdown: mantém compacto dentro do card */
.download-richtext > :last-child { margin-bottom: 0; }
.download-richtext p { margin-bottom: .5rem; }
.download-richtext ul, .download-richtext ol { margin-bottom: .5rem; padding-left: 1.25rem; }
.download-richtext h1, .download-richtext h2, .download-richtext h3,
.download-richtext h4, .download-richtext h5, .download-richtext h6 {
    font-size: .9375rem;
    font-weight: 600;
    margin-bottom: .25rem;
}
.download-richtext img { max-width: 100%; height: auto; border-radius: .35rem; }
.download-richtext table { width: 100%; font-size: .8125rem; }

/* Botão de calendário dentro do campo de mês (x-month-input :picker="true"): só o ícone,
   discreto, encostado à direita do campo. */
.month-input-toggle {
    position: absolute; top: 0; right: 0; bottom: 0;
    display: flex; align-items: center; padding: 0 .6rem;
    border: 0; background: none; line-height: 1;
    color: #8492a6;
}
.month-input-toggle:hover,
.month-input-toggle[aria-expanded="true"] { color: #2f55d4; }

/* Filtro "Ver por" mês/período (x-period-filter) e demais filtros das listagens
   (.filter-bar envolve os filtros, .filter-field é cada campo). No celular o
   seletor e o mês dividem a linha; no período, o De/Até vai para a linha de
   baixo; os demais filtros ocupam a largura da tela. */
.period-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.period-filter-stepper { gap: .5rem; }
.period-filter-range { display: flex; gap: 1rem; }
.period-filter-field { width: 130px; }
@media (max-width: 575.98px) {
    .filter-bar, .period-filter { width: 100%; }
    .period-filter { gap: .75rem; }
    .period-filter-mode .btn { padding-left: .75rem; padding-right: .75rem; }
    .period-filter-month { flex: 1 1 0; min-width: 0; }
    .period-filter-stepper { gap: .25rem; }
    .period-filter-month .period-filter-field { flex: 1 1 auto; width: auto; min-width: 0; }
    .period-filter-range { flex: 1 1 100%; gap: .75rem; }
    .period-filter-range .period-filter-field { flex: 1 1 0; width: auto; min-width: 0; }
    .filter-field { flex: 1 1 100%; width: 100% !important; min-width: 0 !important; max-width: none !important; }
}

/* Botão "voltar ao topo": fica quase transparente enquanto o mouse não está sobre ele, para
   não esconder os links do rodapé que ficam por baixo; ganha a cor normal ao ser apontado
   (ou focado pelo teclado). */
.back-to-top { opacity: .2; }
.back-to-top:hover,
.back-to-top:focus-visible { opacity: 1; }