/* ============================================================
   Zapi Ninja — App CSS
   Estilos base complementares ao Tailwind CSS
   ============================================================ */

/* Scrollbar — fina e discreta, combinando com o fundo claro do sistema */
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(17, 24, 39, 0.14);
    border-radius: 9px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(17, 24, 39, 0.26);
    background-clip: padding-box;
}
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 24, 39, 0.18) transparent;
}

/* Transições suaves globais */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Inputs — autofill do Chrome em tom claro (o fundo do sistema é claro) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #111827 !important;
    caret-color: #111827;
    border-radius: 12px;
}

/* Animação de spin para loading */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.animate-spin {
    animation: spin 1s linear infinite;
}

/* Flash message fade */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.flash-message {
    animation: fadeIn 0.3s ease;
}

/* Focus ring — discreto e na cor da marca (o azul antigo destoava do lime) */
:focus-visible {
    outline: 2px solid rgba(138, 226, 58, 0.85);
    outline-offset: 2px;
}

/* Sidebar transition */
#sidebar {
    transition: transform 0.3s ease;
}

/* ============================================================
   Camada de refinamento visual — sofisticação global e sutil.
   Aplica em todas as telas (os 4 layouts carregam este arquivo).
   Sem mudar as cores da marca; só o acabamento tipográfico e o polimento.
   ============================================================ */

/* Renderização de fonte mais limpa e "cara" — antialiasing + kerning +
   ligaduras + optical sizing do Outfit. Tira o aspecto "duro" do texto. */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body {
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    font-optical-sizing: auto;
    letter-spacing: 0.005em;
}

/* Títulos com tracking levemente negativo = ar mais editorial e elegante. */
h1, h2, h3, h4,
.tracking-tight, .tracking-tighter {
    letter-spacing: -0.018em;
}

/* Números tabulares em métricas/tabelas — alinhamento preciso, menos "rústico". */
table, .tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Seleção de texto na cor da marca. */
::selection { background: #A5FA5D; color: #111827; }
::-moz-selection { background: #A5FA5D; color: #111827; }

/* Micro-transições suaves e consistentes em tudo que é interativo. */
button, a, input, select, textarea, label[role], [role="button"], .transition-all {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* Imagens não "estouram" o container e ficam com cantos coerentes. */
img { image-rendering: auto; }

/* Peso tipográfico — estreita a faixa pra um ar sofisticado (tipo SF/Apple).
   O sistema abusa de font-black (peso 700) em títulos E rótulos, o que deixa
   tudo "grosso". Baixando o topo pra 600, a hierarquia passa a vir do TAMANHO
   (que não muda), não do peso — mais elegante, menos rústico. */
.font-black { font-weight: 600 !important; }
.font-extrabold { font-weight: 600 !important; }

/* Sombras refinadas — o padrão do Tailwind é escuro/pesado ("rústico").
   Aqui elas ficam mais difusas, claras e sutis (profundidade elegante).
   Sobrescreve as utilitárias globalmente pra manter tudo coeso. */
.shadow-sm   { box-shadow: 0 1px 2px 0 rgba(17,24,39,0.05) !important; }
.shadow,
.shadow-md   { box-shadow: 0 2px 8px -2px rgba(17,24,39,0.08) !important; }
.shadow-lg   { box-shadow: 0 6px 18px -6px rgba(17,24,39,0.10) !important; }
.shadow-xl   { box-shadow: 0 10px 30px -10px rgba(17,24,39,0.12) !important; }
.shadow-2xl  { box-shadow: 0 18px 50px -14px rgba(17,24,39,0.16) !important; }

/* Bordas hairline mais finas e discretas em cartões (0.5px "cara de Apple"). */
@media (min-resolution: 1.5dppx) {
    .border { border-width: 0.5px; }
}