/* ============================================================
   APP.CSS — Estilos customizados do SGE
   Complementa o Tailwind. Mude com cuidado: muita coisa aqui
   afeta a UI inteira.
   ============================================================ */

/* ============================================================
   SCROLLBAR CUSTOMIZADA — Para combinar com o tema azul
   Webkit (Chrome/Edge/Safari) usa ::-webkit-scrollbar
   ============================================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9; /* slate-100 */
}
.dark ::-webkit-scrollbar-track {
    background: #0f172a; /* slate-900 */
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 5px;
}
.dark ::-webkit-scrollbar-thumb {
    background: #475569; /* slate-600 */
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* slate-500 */
}

/* Firefox tem propriedades próprias */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}
.dark * {
    scrollbar-color: #475569 #0f172a;
}

/* ============================================================
   BOTÃO "VOLTAR AO TOPO" — Estado oculto/visível
   Controlado pela classe `oculto` adicionada/removida no app.js
   conforme o scroll da página
   ============================================================ */
#sge-btn-topo.oculto {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

/* ============================================================
   TOAST DE SALVAMENTO — Visível quando tem a classe `aparecer`
   Disparado por window.sgeNotificarSalvo() no app.js
   ============================================================ */
#sge-toast-salvo.aparecer,
#sge-toast-aviso.aparecer {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ============================================================
   HTMX INDICATOR — O HTMX adiciona/remove a classe `htmx-request`
   no elemento durante o request. Usamos isso para mostrar spinners.
   ============================================================ */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: inline-block;
}
.htmx-request.htmx-indicator {
    display: inline-block;
}

/* ============================================================
   ANIMAÇÕES SUTIS — Entrada de elementos na tela
   ============================================================ */
@keyframes sgeFadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sge-fade-in {
    animation: sgeFadeInUp 0.3s ease-out;
}

/* ============================================================
   FOCO ACESSÍVEL — Anel azul ao focar com Tab (não com clique)
   Importante para acessibilidade via teclado
   ============================================================ */
:focus-visible {
    outline: 2px solid #0271c5; /* brand-600 */
    outline-offset: 2px;
    border-radius: 4px;
}
.dark :focus-visible {
    outline-color: #36abf6; /* brand-400 */
}

/* ============================================================
   AJUSTE NO ALPINE.JS — Esconde elementos com x-cloak
   antes do framework carregar (evita "flash" do conteúdo)
   Use: <div x-data x-cloak>...</div>
   ============================================================ */
[x-cloak] {
    display: none !important;
}