/* ==========================================================================
   Eesier Search Bar (design system component)
   Razor: Views/Shared/_SearchBar.cshtml · Model: SearchBarViewModel
   Anatomia: só texto — ícone de lupa à esquerda, campo no meio, botão de
   limpar (×) que aparece somente quando há texto. Sem moldura: fundo
   transparente, sem borda e sem padding; a altura de 48px (--control-height)
   preserva o alinhamento vertical com os demais controles.

   O campo CRESCE COM O TEXTO (largura medida via JS no _SearchBar.cshtml —
   a mesma técnica do textarea auto-crescente do _Form), então o × fica sempre
   a um passo do fim do texto (o gap da faixa). O texto digitado usa o MESMO
   ESTILO DO ITEM ATIVO DO MENU LATERAL: cor de destaque + peso 700.

   Tema: claro por padrão; a variante escura ativa com a classe "dark" no
   próprio elemento OU em qualquer ancestral. Todas as cores fluem pelas
   variáveis --esb-* (o consumidor pode sobrescrevê-las para retemar).
   ========================================================================== */

.eesier-search {
    --esb-text: var(--color-text-dark, #0f172a);
    --esb-muted: var(--color-muted, #475569);
    /* CINZA DE PLACEHOLDER — O MESMO DOS FORMULÁRIOS (rótulo flutuante em
       repouso e ícone de campo usam --color-disabled): UM SÓ CINZA DE
       "AINDA SEM VALOR" EM TODO O SISTEMA. */
    --esb-placeholder: var(--color-disabled, #94a3b8);
    /* COR DE DESTAQUE — A MESMA DO ITEM ATIVO DO MENU LATERAL (--esn-active-text). */
    --esb-accent: var(--color-palette-primary, #1c91e4);

    display: flex;
    align-items: center;
    gap: var(--space-small, 12px);
    width: fit-content;
    max-width: 100%;
    height: var(--control-height, 48px);
    background: transparent;
    color: var(--esb-text);
}

.eesier-search.dark,
.dark .eesier-search {
    --esb-text: var(--color-text-on-dark, #ffffff);
    --esb-muted: var(--color-muted-on-dark, rgba(255, 255, 255, 0.6));
    --esb-placeholder: rgba(255, 255, 255, 0.5); /* MESMO CINZA DO RÓTULO EM REPOUSO DO _Form NO ESCURO */
    --esb-accent: var(--color-palette-secondary, #4fbefe);
}


/* EMOLDURADA (Framed = true) — A BARRA OCUPA A LARGURA DO HOST E O CAMPO
   ESTICA POR FLEX EM VEZ DE CRESCER COM O TEXTO: PARA CAIXAS DE BUSCA QUE O
   HOST EMOLDURA (UMA PÍLULA DE LARGURA FIXA, POR EXEMPLO). O × CONTINUA A UM
   GAP DO FIM DA BARRA. */

.eesier-search.eesier-search--framed {
    width: 100%;
}

.eesier-search.eesier-search--framed .search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}


/* ÍCONE DE LUPA — MESMO TAMANHO DO ÍCONE DO MENU LATERAL (--space-small,
   12px — a caixa fixa de .eicon), MUDO EM REPOUSO; NO FOCO GANHA A COR DE
   DESTAQUE. O ÍCONE NUNCA MUDA DE TAMANHO — ESCALAR QUEBRA O ALINHAMENTO
   DA GRADE. */

.eesier-search .search-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--esb-placeholder);
    transition: color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}

.eesier-search .search-icon .eicon {
    width: var(--space-small, 12px);
    height: var(--space-small, 12px);
}


/* CAMPO — SEM BORDA, FUNDO NEM PADDING: SÓ O TEXTO. A LARGURA É MEDIDA PELO
   JS (cresce com o texto; min-width mantém o caret visível num campo vazio e
   sem placeholder). O TEXTO DIGITADO = ESTILO DO ITEM ATIVO DO MENU LATERAL:
   COR DE DESTAQUE + PESO 700. */

.eesier-search .search-input {
    flex-shrink: 1;
    min-width: 2px;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--esb-accent);
    font-family: inherit;
    font-size: var(--type-size-small, 0.875rem);
    font-weight: 700;
    caret-color: var(--esb-accent);
}

.eesier-search .search-input:focus {
    outline: none;
}

.eesier-search .search-input::placeholder {
    color: var(--esb-placeholder);
    font-weight: 500;
    opacity: 1; /* FIREFOX REBAIXA A OPACIDADE DO PLACEHOLDER POR PADRÃO */
}

/* REMOVE O BOTÃO DE LIMPAR NATIVO (WEBKIT) — TEMOS O NOSSO PRÓPRIO */

.eesier-search .search-input::-webkit-search-cancel-button {
    display: none;
}


/* FOCO — SEM MOLDURA PARA REAGIR, O SINAL DE FOCO É A LUPA ACESA */

.eesier-search:focus-within .search-icon {
    color: var(--esb-accent);
}


/* LIMPAR — SEMPRE OCUPA SEU LUGAR LOGO APÓS O FIM DO TEXTO (o campo cresce
   com o texto, então o × acompanha a um gap de distância); ENTRA EM CENA
   GIRANDO ATÉ ASSENTAR QUANDO HÁ TEXTO (classe has-value ALTERNADA VIA JS).
   NO HOVER O × GIRA UM QUARTO DE VOLTA — MESMO GESTO DO FECHAR DO MODAL.
   O ÍCONE NUNCA MUDA DE TAMANHO.

   TAMANHO DO GLIFO — o recorte óptico faz todo ícone encher a própria caixa,
   mas o × da Tabler é desenhado pequeno na grade (12/24) enquanto a lupa a
   ocupa quase inteira (20/24): em 16px o × pesaria ~40% mais que a lupa ao
   lado. O glifo fica em 12px (14 × 16/20 ≈ 11,2px, arredondado ao degrau da
   escala), dentro da MESMA caixa estrutural de 16px — a grade e o alvo de
   clique não mudam. */

.eesier-search .search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--icon-size, 16px);
    height: var(--icon-size, 16px);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--esb-muted);
    font-size: calc(var(--icon-size, 16px) * 0.75);
    cursor: pointer;
    opacity: 0;
    transform: rotate(-90deg);
    pointer-events: none;
    transition: color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out), opacity var(--motion-quick, 0.18s) var(--ease-state, ease-in-out), transform var(--motion-standard, 0.36s) var(--ease-travel, cubic-bezier(0.22, 1, 0.36, 1));
}

.eesier-search.has-value .search-clear {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.eesier-search.has-value .search-clear:hover {
    color: var(--esb-accent);
    transform: rotate(90deg);
}

.eesier-search .search-clear:focus-visible {
    outline: 2px solid var(--esb-accent);
    outline-offset: 2px;
    border-radius: var(--radius-standard, 12px);
}


/* MOVIMENTO REDUZIDO — GUARDA PRÓPRIA PARA CONSUMO STANDALONE (SEM site.css). */

@media (prefers-reduced-motion: reduce) {

    .eesier-search .search-icon,
    .eesier-search .search-clear {
        transition: none;
    }
}