/**
 * NewCharge: tema do painel (Etapa 3). CSS estatico carregado em todas as
 * paginas (FilamentAsset): o Tailwind do Filament e pre-compilado, entao aqui
 * so entram tokens, estados e movimento, sem mexer na estrutura.
 *
 * Identidade: ardosia #626C70 nas acoes (cor primaria do Filament, 5,4:1 com
 * texto branco), grafite #1D2327 no texto forte e o LIMAO #AEC90B como sinal.
 * O limao e a "linha de carga", o elemento de assinatura: barra de
 * carregamento no topo, item ativo do menu e jornada da oportunidade. Em
 * fundo claro o limao puro tem 1,9:1 com o branco, por isso texto e foco usam
 * o limao escuro #5F7300 (5,3:1); no escuro o limao puro tem 8,4:1 com o
 * grafite.
 *
 * Movimento (HIG, motion.md): curto, com proposito e nunca em interacao
 * frequente. Hover de botao e de menu muda cor e sombra, nao posicao. So
 * transform/opacity/box-shadow animam. prefers-reduced-motion desliga tudo.
 */

:root {
    --nc-lime: #AEC90B;
    --nc-lime-ink: #5F7300;
    --nc-graphite: #1D2327;
    --nc-slate: #626C70;
    --nc-signal: var(--nc-lime-ink);
    --nc-signal-soft: rgb(174 201 11 / .16);
    --nc-ease-out: cubic-bezier(.2, .8, .2, 1);
    --nc-dur-fast: 140ms;
    --nc-dur: 220ms;
    --nc-dur-slow: 520ms;
}

.dark {
    --nc-signal: var(--nc-lime);
    --nc-signal-soft: rgb(174 201 11 / .14);
}

/* ---------------------------------------------------------------------------
 * Tipografia: Manrope com peso e entrelinha de titulo; numeros tabulares onde
 * se compara valor (tabelas, indicadores, totais).
 * ------------------------------------------------------------------------- */
.fi-header-heading {
    letter-spacing: -.02em;
}

.fi-section-header-heading,
.fi-modal-heading {
    letter-spacing: -.01em;
}

.fi-ta-text,
.fi-wi-stats-overview-stat-value,
.fi-in-text,
.nc-num {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Linha de carga 1: barra de carregamento no topo (motion.js liga a classe).
 * Aparece so quando a espera passa de ~300 ms (loading.md: "Show something as
 * soon as possible", sem piscar em resposta rapida).
 * ------------------------------------------------------------------------- */
.nc-charge-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    height: 3px;
    background: linear-gradient(90deg, var(--nc-lime-ink), var(--nc-lime));
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
}

.nc-charge-bar.is-loading {
    opacity: 1;
    animation: nc-charge 2.4s var(--nc-ease-out) forwards;
}

.nc-charge-bar.is-done {
    opacity: 0;
    transform: scaleX(1);
    transition: transform var(--nc-dur) var(--nc-ease-out), opacity 320ms ease 120ms;
}

@keyframes nc-charge {
    from { transform: scaleX(0); }
    40% { transform: scaleX(.55); }
    to { transform: scaleX(.88); }
}

/* ---------------------------------------------------------------------------
 * Linha de carga 2: item ativo do menu ganha o traco limao na borda (alem do
 * fundo e da cor que o Filament ja da: estado nao depende so da cor).
 * ------------------------------------------------------------------------- */
.fi-sidebar-item-active > .fi-sidebar-item-button {
    position: relative;
}

.fi-sidebar-item-active > .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    left: -.5rem;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--nc-lime);
}

.fi-sidebar-item-button {
    transition: background-color var(--nc-dur-fast) ease, color var(--nc-dur-fast) ease;
}

/* ---------------------------------------------------------------------------
 * Botoes: hover muda sombra, nao posicao (interacao frequente). O clique
 * afunda 1 px por um instante: retorno imediato ao toque.
 * ------------------------------------------------------------------------- */
.fi-btn {
    transition:
        background-color var(--nc-dur-fast) ease,
        box-shadow var(--nc-dur-fast) ease,
        transform 90ms ease;
}

.fi-btn:hover {
    box-shadow: 0 2px 6px -2px rgb(0 0 0 / .14);
}

.fi-btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Campos: transicao de borda e halo de foco com o token primario.
 * ------------------------------------------------------------------------- */
.fi-input-wrp {
    transition: box-shadow var(--nc-dur-fast) ease;
}

.fi-input-wrp:not(:has(.fi-ac-action:focus)):focus-within {
    box-shadow:
        0 0 0 4px rgb(var(--primary-500) / .12),
        0 1px 2px 0 rgb(0 0 0 / .05);
}

/* ---------------------------------------------------------------------------
 * Entrada de tela: uma vez por navegacao, 220 ms, fade + 6 px. Os Livewire
 * morphs seguintes nao repetem (o elemento continua no DOM).
 * ------------------------------------------------------------------------- */
.fi-main {
    animation: nc-enter var(--nc-dur) var(--nc-ease-out) both;
}

@keyframes nc-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* Indicadores do painel entram em sequencia curta (so no carregamento). */
.fi-wi-stats-overview-stat {
    animation: nc-enter var(--nc-dur) var(--nc-ease-out) both;
}

.fi-wi-stats-overview-stat:nth-child(2) { animation-delay: 40ms; }
.fi-wi-stats-overview-stat:nth-child(3) { animation-delay: 80ms; }
.fi-wi-stats-overview-stat:nth-child(4) { animation-delay: 120ms; }

/* Secao recolhivel: a seta gira junto (o Filament troca sem transicao). */
.fi-section-collapse-btn {
    transition: transform var(--nc-dur) var(--nc-ease-out);
}

/* ---------------------------------------------------------------------------
 * Tabelas: linha clicavel com hover discreto (sem movimento).
 * ------------------------------------------------------------------------- */
.fi-ta-row {
    transition: background-color var(--nc-dur-fast) ease;
}

/* ---------------------------------------------------------------------------
 * Estado vazio: convite ao proximo passo (writing.md) com o icone no tom do
 * sinal em vez do cinza neutro.
 * ------------------------------------------------------------------------- */
.fi-ta-empty-state-icon-ctn {
    background: var(--nc-signal-soft);
}

.fi-ta-empty-state-icon {
    color: var(--nc-signal);
}

/* ---------------------------------------------------------------------------
 * Marca: lockup "HDT NewCharge" (simbolo HDT + palavra). "New" em grafite,
 * "Charge" no limao escuro (5,3:1 no claro) ou limao puro no escuro (8,4:1).
 * O simbolo e PNG cinza: no escuro ganha brilho para nao sumir no grafite.
 * ------------------------------------------------------------------------- */
.nc-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    height: 100%;
    white-space: nowrap;
}

.nc-brand-mark {
    height: 1.55rem;
    width: auto;
}

.nc-brand-sep {
    width: 1px;
    height: 1.35rem;
    background: rgb(var(--gray-300));
}

.nc-brand-word {
    font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1;
    color: var(--nc-graphite);
}

.nc-brand-word b {
    font-weight: 800;
    color: var(--nc-lime-ink);
}

.nc-brand--lg { gap: .85rem; }
.nc-brand--lg .nc-brand-mark { height: 2.4rem; }
.nc-brand--lg .nc-brand-sep { height: 2rem; }
.nc-brand--lg .nc-brand-word { font-size: 1.7rem; }

.nc-brand-org {
    height: 100%;
    max-width: 11rem;
    object-fit: contain;
}

.dark .nc-brand-mark { filter: brightness(1.55) saturate(1.05); }
.dark .nc-brand-sep { background: rgb(var(--gray-700)); }
.dark .nc-brand-word { color: #fff; }
.dark .nc-brand-word b { color: var(--nc-lime); }

/* ---------------------------------------------------------------------------
 * Telas simples (trocar senha, aceitar politicas, redefinir senha): fundo com
 * a atmosfera da marca (brilho limao e ardosia + textura de pontos que some
 * nas bordas) e o card com a linha de carga no topo, acesa uma vez.
 * Fora do login (.hdt-page): ele mora dentro do .fi-simple-main e e fixed;
 * transform/overflow aqui viram o bloco de contencao dele e o login some.
 * ------------------------------------------------------------------------- */
.fi-simple-layout:not(:has(.hdt-page)) {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(1100px 560px at 100% -10%, rgb(174 201 11 / .16), transparent 60%),
        radial-gradient(900px 520px at -10% 110%, rgb(98 108 112 / .20), transparent 60%),
        #f3f5f4;
}

.fi-simple-layout:not(:has(.hdt-page))::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgb(29 35 39 / .09) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
    pointer-events: none;
}

.dark .fi-simple-layout:not(:has(.hdt-page)) {
    background:
        radial-gradient(1100px 560px at 100% -10%, rgb(174 201 11 / .10), transparent 60%),
        radial-gradient(900px 520px at -10% 110%, rgb(98 108 112 / .22), transparent 60%),
        #0f1315;
}

.dark .fi-simple-layout:not(:has(.hdt-page))::before {
    background-image: radial-gradient(rgb(255 255 255 / .06) 1px, transparent 1px);
}

.fi-simple-main:not(:has(.hdt-page)) {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    box-shadow:
        0 1px 2px rgb(0 0 0 / .04),
        0 30px 60px -34px rgb(29 35 39 / .35);
    animation: nc-rise 420ms var(--nc-ease-out) both;
}

.fi-simple-main:not(:has(.hdt-page))::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--nc-lime-ink), var(--nc-lime));
    transform-origin: left center;
    animation: nc-charge-fill 700ms var(--nc-ease-out) 180ms both;
}

.fi-simple-header-heading {
    letter-spacing: -.025em;
}

@keyframes nc-rise {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to { opacity: 1; transform: none; }
}

@keyframes nc-charge-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ---------------------------------------------------------------------------
 * Movimento reduzido: sem animacao nem deslocamento. A barra de carga continua
 * aparecendo (e status), so sem crescer.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .fi-btn,
    .fi-input-wrp,
    .fi-sidebar-item-button,
    .fi-section-collapse-btn,
    .fi-ta-row,
    .fi-main,
    .fi-simple-main,
    .fi-simple-main::before,
    .fi-wi-stats-overview-stat {
        transition: none;
        animation: none;
        transform: none;
    }

    .nc-charge-bar.is-loading {
        animation: none;
        transform: scaleX(1);
        opacity: .9;
    }

    .nc-charge-bar.is-done {
        transition: opacity 120ms linear;
    }
}