/* ==========================================================================
   V3REvent — Área do inscrito (#151)
   Design system: Projeto/docs/design-system.md. Herda os tokens de public.css
   (marca, neutros, raio, sombra) — nada de cor fixa onde a variável manda.

   Isolamento (Code/CLAUDE.md §7.1): TODA regra abaixo é escopada em
   `.v3revent-area`. O plugin não escreve em seletor do tema, não usa `!` e
   não mexe em nó que não é nosso — o pior caso aqui é a área ficar estreita
   num leiaute incomum, nunca a página do site quebrar.

   Mobile-first: a base é a tela pequena (é onde a pessoa abre o e-mail); os
   ajustes de tela maior entram por min-width.
   ========================================================================== */

.v3revent-area {
    font-family: var(--v3revent-font);
    color: var(--v3revent-text);
    max-width: var(--v3revent-content-width);
    margin: 0 auto;
    box-sizing: border-box;
}

.v3revent-area *,
.v3revent-area *::before,
.v3revent-area *::after {
    box-sizing: inherit;
}

.v3revent-area__card {
    background: var(--v3revent-card-bg);
    border: 1px solid var(--v3revent-border);
    border-radius: var(--v3revent-radius-lg);
    box-shadow: var(--v3revent-shadow);
    padding: 1.25rem;
    margin: 0 0 1rem;
}

.v3revent-area__title {
    margin: 0 0 .5rem;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--v3revent-accent-text);
}

.v3revent-area__lead {
    margin: 0 0 1rem;
    color: var(--v3revent-muted);
    font-size: .95rem;
}

.v3revent-area__hint {
    margin: 1rem 0 0;
    color: var(--v3revent-muted);
    font-size: .8rem;
}

/* ── Avisos ─────────────────────────────────────────────────────────── */
.v3revent-area__notice {
    margin: 0 0 1rem;
    padding: .75rem .9rem;
    border-radius: var(--v3revent-radius);
    border-left: 4px solid var(--v3revent-info);
    background: color-mix(in srgb, var(--v3revent-info) 8%, transparent);
    font-size: .9rem;
}

.v3revent-area__notice--ok {
    border-left-color: var(--v3revent-success);
    background: color-mix(in srgb, var(--v3revent-success) 8%, transparent);
}

.v3revent-area__notice--warn {
    border-left-color: var(--v3revent-warning);
    background: color-mix(in srgb, var(--v3revent-warning) 10%, transparent);
}

/* ── Formulário ─────────────────────────────────────────────────────── */
.v3revent-area__form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.v3revent-area__label {
    font-weight: 600;
    font-size: .9rem;
}

.v3revent-area__input {
    width: 100%;
    padding: .7rem .8rem;
    font-size: 1rem;
    color: var(--v3revent-text);
    background: var(--v3revent-field-bg);
    border: 1px solid var(--v3revent-border-strong);
    border-radius: var(--v3revent-radius);
}

.v3revent-area__input:focus {
    outline: none;
    border-color: var(--v3revent-primary);
    box-shadow: 0 0 0 3px var(--v3revent-focus-ring);
}

.v3revent-area__suggestion:empty {
    display: none;
}

.v3revent-area__suggestion {
    font-size: .85rem;
    color: var(--v3revent-muted);
}

/* Escopado em duas classes pelo mesmo motivo do `--link-button` abaixo: o
   tema hospedeiro estiliza `button` por elemento e ganharia da nossa regra
   de classe única — o botão principal saía na cor do tema, não na da marca
   (nem na do evento). Sem `!important` e sem tocar em nó do tema (§7.1). */
.v3revent-area .v3revent-area__button {
    display: inline-block;
    padding: .7rem 1.1rem;
    border: 1px solid var(--v3revent-primary);
    border-radius: var(--v3revent-radius);
    background: var(--v3revent-primary);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.v3revent-area .v3revent-area__button:hover,
.v3revent-area .v3revent-area__button:focus {
    background: var(--v3revent-primary-hover);
    color: #fff;
}

.v3revent-area .v3revent-area__button--ghost {
    background: transparent;
    color: var(--v3revent-accent-text);
    font-weight: 500;
    padding: .45rem .8rem;
    font-size: .85rem;
}

.v3revent-area .v3revent-area__button--ghost:hover,
.v3revent-area .v3revent-area__button--ghost:focus {
    background: color-mix(in srgb, var(--v3revent-primary) 8%, transparent);
    color: var(--v3revent-accent-text);
}

/* ── Barra do topo ──────────────────────────────────────────────────── */
.v3revent-area__bar {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: flex-start;
    margin: 0 0 1rem;
    font-size: .9rem;
    color: var(--v3revent-muted);
}

/* Dois níveis de classe de propósito: o tema hospedeiro estiliza `button`
   por elemento, e uma regra de classe única perde para a dele em vários
   temas (o "Sair" saiu como botão azul grande no Blocksy). Escopar em
   `.v3revent-area` sobe a especificidade SEM tocar em nada do tema e sem
   `!important` — o plugin nunca escreve fora do próprio nó (§7.1). */
.v3revent-area .v3revent-area__link-button,
.v3revent-area .v3revent-area__link-button:hover,
.v3revent-area .v3revent-area__link-button:focus {
    background: none;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-height: 0;
    color: var(--v3revent-secondary-text);
    font: inherit;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: underline;
    cursor: pointer;
}

.v3revent-area__logout {
    margin: 0;
}

/* ── Cartão de evento ───────────────────────────────────────────────── */
.v3revent-area__event-head {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0 0 .5rem;
}

.v3revent-area__event-title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--v3revent-accent-text);
}

.v3revent-area__badge {
    align-self: flex-start;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}

.v3revent-area__badge--ok {
    background: color-mix(in srgb, var(--v3revent-success) 15%, transparent);
    color: #065f46;
}

.v3revent-area__badge--wait {
    background: color-mix(in srgb, var(--v3revent-warning) 20%, transparent);
    color: #92400e;
}

.v3revent-area__event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    margin: 0 0 .75rem;
    font-size: .85rem;
    color: var(--v3revent-muted);
}

.v3revent-area__actions {
    margin: 0 0 .75rem;
}

.v3revent-area__people {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--v3revent-border);
}

.v3revent-area__person {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--v3revent-border);
}

.v3revent-area__person:last-child {
    border-bottom: 0;
}

.v3revent-area__person-name {
    font-weight: 600;
    font-size: .95rem;
    overflow-wrap: anywhere;
}

.v3revent-area__person-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

.v3revent-area__muted {
    color: var(--v3revent-muted);
    font-size: .85rem;
}

/* ── Telas maiores ──────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .v3revent-area__card {
        padding: 1.5rem;
    }

    .v3revent-area__form {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "label label"
            "input button"
            "sugg  sugg";
        align-items: start;
        gap: .5rem .75rem;
    }

    .v3revent-area__label      { grid-area: label; }
    .v3revent-area__input      { grid-area: input; }
    .v3revent-area .v3revent-area__button { grid-area: button; }
    .v3revent-area__suggestion { grid-area: sugg; }

    .v3revent-area__bar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .v3revent-area__event-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .v3revent-area__person {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}