/* ==========================================================
   AYW DESIGN SYSTEM
   COMPONENTS / EMPTY STATES

   Responsabilidades:
   - estados vazios;
   - buscas sem resultados;
   - ausência de conteúdo;
   - orientação inicial;
   - ações principais e auxiliares;
   - primeiros passos opcionais.

   Um único componente atende:
   - lista vazia;
   - nenhum resultado;
   - nenhum investimento;
   - nenhum post;
   - nenhuma viagem;
   - primeiro uso de uma funcionalidade.

   Dependências:
   - tokens.css;
   - components/buttons.css.
   ========================================================== */


/* ==========================================================
   ESTRUTURA BASE

   As variáveis internas permitem criar variações sem repetir
   toda a estrutura do componente.
   ========================================================== */

   .ayw-empty-state {
    --ayw-empty-state-min-height: 280px;

    --ayw-empty-state-padding-y: var(--ayw-space-10);
    --ayw-empty-state-padding-x: var(--ayw-space-5);

    --ayw-empty-state-border-width: 1px;
    --ayw-empty-state-border-style: dashed;
    --ayw-empty-state-border-color: var(--ayw-border-strong);

    --ayw-empty-state-radius: var(--ayw-radius-lg);

    --ayw-empty-state-bg: var(--ayw-surface);
    --ayw-empty-state-color: var(--ayw-text);

    --ayw-empty-state-icon-size: 64px;
    --ayw-empty-state-icon-radius: var(--ayw-radius-xl);
    --ayw-empty-state-icon-bg: var(--ayw-primary-soft);
    --ayw-empty-state-icon-color: var(--ayw-primary);
    --ayw-empty-state-icon-font-size: 1.6rem;
    --ayw-empty-state-icon-shadow: var(--ayw-shadow-xs);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;
    min-height: var(--ayw-empty-state-min-height);

    padding:
        var(--ayw-empty-state-padding-y)
        var(--ayw-empty-state-padding-x);

    border:
        var(--ayw-empty-state-border-width)
        var(--ayw-empty-state-border-style)
        var(--ayw-empty-state-border-color);

    border-radius: var(--ayw-empty-state-radius);

    background: var(--ayw-empty-state-bg);
    color: var(--ayw-empty-state-color);

    text-align: center;
}


/* ==========================================================
   ÍCONE
   ========================================================== */

.ayw-empty-state-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: var(--ayw-empty-state-icon-size);
    height: var(--ayw-empty-state-icon-size);

    margin-bottom: var(--ayw-space-5);

    overflow: hidden;

    border-radius: var(--ayw-empty-state-icon-radius);

    background: var(--ayw-empty-state-icon-bg);
    color: var(--ayw-empty-state-icon-color);

    box-shadow: var(--ayw-empty-state-icon-shadow);

    font-size: var(--ayw-empty-state-icon-font-size);
    line-height: 1;
}

.ayw-empty-state-icon svg,
.ayw-empty-state-icon img {
    display: block;

    width: 1em;
    height: 1em;
}

.ayw-empty-state-icon img {
    object-fit: contain;
}


/* ==========================================================
   TAMANHOS DO ÍCONE
   ========================================================== */

.ayw-empty-state-icon-sm {
    --ayw-empty-state-icon-size: 52px;
    --ayw-empty-state-icon-radius: var(--ayw-radius-lg);
    --ayw-empty-state-icon-font-size: 1.3rem;
}

.ayw-empty-state-icon-lg {
    --ayw-empty-state-icon-size: 80px;
    --ayw-empty-state-icon-font-size: 2rem;
}


/* ==========================================================
   CONTEÚDO
   ========================================================== */

.ayw-empty-state-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: 560px;
    min-width: 0;
}

.ayw-empty-state-eyebrow {
    margin:
        0
        0
        var(--ayw-space-2);

    color: var(--ayw-primary);

    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-bold);
    line-height: var(--ayw-line-height-normal);
    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.ayw-empty-state-title {
    margin: 0;

    color: var(--ayw-text);

    font-size: var(--ayw-font-size-xl);
    font-weight: var(--ayw-font-weight-semibold);
    line-height: var(--ayw-line-height-tight);
}

.ayw-empty-state-text {
    max-width: 520px;

    margin:
        var(--ayw-space-3)
        0
        0;

    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-sm);
    line-height: var(--ayw-line-height-relaxed);
}


/* ==========================================================
   AÇÕES

   A aparência dos botões pertence a buttons.css.
   Este bloco controla somente layout e posicionamento.
   ========================================================== */

.ayw-empty-state-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 100%;

    gap: var(--ayw-space-3);

    margin-top: var(--ayw-space-6);
}

.ayw-empty-state-actions > .ayw-btn {
    width: 100%;
}


/* ==========================================================
   AÇÃO AUXILIAR

   Estrutura recomendada:

   <a
     href="#"
     class="ayw-btn ayw-btn-link ayw-empty-state-link"
   >
     Saiba mais
   </a>

   Cor, hover, foco e tipografia pertencem a buttons.css.
   ========================================================== */

.ayw-empty-state-link {
    margin-top: var(--ayw-space-4);
}


/* ==========================================================
   VARIAÇÕES VISUAIS
   ========================================================== */

.ayw-empty-state-soft {
    --ayw-empty-state-border-style: solid;
    --ayw-empty-state-border-color: var(--ayw-border);
    --ayw-empty-state-bg: var(--ayw-bg-soft);
}

.ayw-empty-state-muted {
    --ayw-empty-state-border-style: solid;
    --ayw-empty-state-border-color: var(--ayw-border);
    --ayw-empty-state-bg: var(--ayw-bg-muted);
}

.ayw-empty-state-elevated {
    --ayw-empty-state-border-style: solid;
    --ayw-empty-state-border-color: var(--ayw-border);

    box-shadow: var(--ayw-shadow-sm);
}

.ayw-empty-state.is-borderless,
.ayw-empty-state-borderless {
    --ayw-empty-state-min-height: auto;

    --ayw-empty-state-padding-y: var(--ayw-space-8);
    --ayw-empty-state-padding-x: var(--ayw-space-4);

    --ayw-empty-state-border-width: 0;
    --ayw-empty-state-bg: transparent;
}


/* ==========================================================
   VARIAÇÕES DE TAMANHO
   ========================================================== */

.ayw-empty-state-compact {
    --ayw-empty-state-min-height: 200px;

    --ayw-empty-state-padding-y: var(--ayw-space-8);
    --ayw-empty-state-padding-x: var(--ayw-space-4);

    --ayw-empty-state-icon-size: 52px;
    --ayw-empty-state-icon-radius: var(--ayw-radius-lg);
    --ayw-empty-state-icon-font-size: 1.3rem;
}

.ayw-empty-state-lg {
    --ayw-empty-state-min-height: 360px;

    --ayw-empty-state-padding-y: var(--ayw-space-12);
    --ayw-empty-state-padding-x: var(--ayw-space-8);

    --ayw-empty-state-icon-size: 80px;
    --ayw-empty-state-icon-font-size: 2rem;
}


/* ==========================================================
   VARIAÇÕES SEMÂNTICAS
   ========================================================== */

.ayw-empty-state-success {
    --ayw-empty-state-icon-bg: var(--ayw-success-soft);
    --ayw-empty-state-icon-color: var(--ayw-success);
}

.ayw-empty-state-warning {
    --ayw-empty-state-icon-bg: var(--ayw-warning-soft);
    --ayw-empty-state-icon-color: var(--ayw-warning);
}

.ayw-empty-state-danger {
    --ayw-empty-state-icon-bg: var(--ayw-danger-soft);
    --ayw-empty-state-icon-color: var(--ayw-danger);
}

.ayw-empty-state-info {
    --ayw-empty-state-icon-bg: var(--ayw-info-soft);
    --ayw-empty-state-icon-color: var(--ayw-info);
}


/* ==========================================================
   ESTADO DE BUSCA SEM RESULTADOS

   Mantém a mesma estrutura, mas reduz a altura para funcionar
   melhor dentro de listas, dropdowns e resultados de busca.
   ========================================================== */

.ayw-empty-state-search {
    --ayw-empty-state-min-height: 220px;

    --ayw-empty-state-padding-y: var(--ayw-space-8);
    --ayw-empty-state-padding-x: var(--ayw-space-4);

    --ayw-empty-state-icon-size: 52px;
    --ayw-empty-state-icon-radius: var(--ayw-radius-lg);
    --ayw-empty-state-icon-font-size: 1.3rem;
}


/* ==========================================================
   ESTADO INLINE

   Útil dentro de tabelas, painéis, modais e blocos menores.
   ========================================================== */

.ayw-empty-state-inline {
    --ayw-empty-state-min-height: auto;

    --ayw-empty-state-padding-y: var(--ayw-space-6);
    --ayw-empty-state-padding-x: var(--ayw-space-4);

    --ayw-empty-state-border-width: 0;
    --ayw-empty-state-bg: transparent;

    --ayw-empty-state-icon-size: 44px;
    --ayw-empty-state-icon-radius: var(--ayw-radius-md);
    --ayw-empty-state-icon-font-size: 1.1rem;
}

.ayw-empty-state-inline .ayw-empty-state-icon {
    margin-bottom: var(--ayw-space-3);
}

.ayw-empty-state-inline .ayw-empty-state-title {
    font-size: var(--ayw-font-size-md);
}

.ayw-empty-state-inline .ayw-empty-state-text {
    margin-top: var(--ayw-space-2);
}


/* ==========================================================
   PASSOS OPCIONAIS

   Estes blocos podem ser usados em estados de primeiro uso.
   Caso futuramente sejam usados fora de empty states, devem
   ser movidos para components/steps.css.
   ========================================================== */

.ayw-empty-steps {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    width: 100%;
    min-width: 0;

    gap: var(--ayw-space-4);

    margin-top: var(--ayw-space-8);

    text-align: left;
}

.ayw-empty-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    min-width: 0;

    gap: var(--ayw-space-4);

    padding: var(--ayw-space-5);

    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-lg);

    background: var(--ayw-surface);

    box-shadow: var(--ayw-shadow-sm);
}

.ayw-empty-step-header {
    display: flex;
    align-items: flex-start;

    width: 100%;
    min-width: 0;

    gap: var(--ayw-space-4);
}

.ayw-empty-step-number {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    background: var(--ayw-primary);
    color: #ffffff;

    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-bold);
    line-height: 1;
}

.ayw-empty-step-main {
    flex: 1 1 auto;

    min-width: 0;
}

.ayw-empty-step-title {
    margin: 0;

    color: var(--ayw-text);

    font-size: var(--ayw-font-size-md);
    font-weight: var(--ayw-font-weight-semibold);
    line-height: var(--ayw-line-height-tight);
}

.ayw-empty-step-text {
    margin:
        var(--ayw-space-2)
        0
        0;

    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-sm);
    line-height: var(--ayw-line-height-relaxed);
}


/* ==========================================================
   AÇÃO DO PASSO

   Posicionamento apenas.
   A aparência continua pertencendo a buttons.css.
   ========================================================== */

.ayw-empty-step-action {
    margin-top: auto;
}


/* ==========================================================
   MOBILE COMPACTO
   ========================================================== */

@media (max-width: 374px) {
    .ayw-empty-state {
        --ayw-empty-state-padding-y: var(--ayw-space-8);
        --ayw-empty-state-padding-x: var(--ayw-space-4);

        --ayw-empty-state-icon-size: 56px;
        --ayw-empty-state-icon-font-size: 1.4rem;
    }

    .ayw-empty-state-compact,
    .ayw-empty-state-search,
    .ayw-empty-state-inline {
        --ayw-empty-state-icon-size: 48px;
        --ayw-empty-state-icon-font-size: 1.2rem;
    }

    .ayw-empty-step {
        padding: var(--ayw-space-4);
    }

    .ayw-empty-step-header {
        gap: var(--ayw-space-3);
    }
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 768px) {
    .ayw-empty-state {
        --ayw-empty-state-min-height: 320px;

        --ayw-empty-state-padding-y: var(--ayw-space-12);
        --ayw-empty-state-padding-x: var(--ayw-space-8);
    }

    .ayw-empty-state-compact {
        --ayw-empty-state-min-height: 220px;

        --ayw-empty-state-padding-y: var(--ayw-space-8);
        --ayw-empty-state-padding-x: var(--ayw-space-6);
    }

    .ayw-empty-state-search {
        --ayw-empty-state-min-height: 240px;

        --ayw-empty-state-padding-y: var(--ayw-space-8);
        --ayw-empty-state-padding-x: var(--ayw-space-6);
    }

    .ayw-empty-state-inline {
        --ayw-empty-state-min-height: auto;

        --ayw-empty-state-padding-y: var(--ayw-space-6);
        --ayw-empty-state-padding-x: var(--ayw-space-4);
    }

    .ayw-empty-state-lg {
        --ayw-empty-state-min-height: 400px;

        --ayw-empty-state-padding-y: var(--ayw-space-12);
        --ayw-empty-state-padding-x: var(--ayw-space-10);
    }

    .ayw-empty-state.is-borderless,
    .ayw-empty-state-borderless {
        --ayw-empty-state-min-height: auto;

        --ayw-empty-state-padding-y: var(--ayw-space-8);
        --ayw-empty-state-padding-x: var(--ayw-space-4);
    }

    .ayw-empty-state-actions {
        flex-direction: row;
        align-items: center;
        justify-content: center;

        width: auto;
    }

    .ayw-empty-state-actions > .ayw-btn {
        width: auto;
    }

    .ayw-empty-steps {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: var(--ayw-space-6);
    }
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 992px) {
    .ayw-empty-steps {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}