/* app/static/css/tiles.css
   ============================================================
   Tiles — componente reutilizável de "card compacto com indicador".
   Visualmente alinhado ao restante do app via --border-light + --shadow-soft.

   Uso típico:
     <div class="tiles-row">
       <div class="tile">
         <div class="tile-title">Pendentes</div>
         <div class="tile-single">3</div>
       </div>
       <div class="tile">
         <div class="tile-title">Convidados</div>
         <div class="tile-vstat">
           <div class="tile-vstat-row"><strong>180</strong> Priorizados</div>
           <div class="tile-vstat-row"><strong>250</strong> Total</div>
         </div>
       </div>
     </div>

   ".tile" não impõe layout interno — combine com .tile-single (1 número
   grande centralizado) ou .tile-vstat (lista vertical "número + label").
   Dá pra adicionar variações novas no futuro sem quebrar as existentes.
   ============================================================ */

.tiles-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
}

.tile {
  flex: 1 1 140px;
  min-width: 140px;
  background: var(--branco);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: var(--shadow-soft);
}

.tile-title {
  font-size: 0.78rem;
  margin-bottom: 6px;
}

.tile-single {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  margin-top: 4px;
}

.tile-vstat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tile-vstat-row {
  font-size: 0.85rem;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.tile-vstat-row strong {
  font-size: 1.05rem;
  min-width: 28px;
  display: inline-block;
  text-align: center;
}


/* ============================================================
   Modificadores do .tile (família "tile" do tiles.css)
   Promovidos do rsvp.css na Onda 1.5.
   ============================================================ */

/* Tiles com tile-single — uniformiza o número grande no centro vertical
   pra que Convidados / Pendentes / Aprovadas / Automáticas / Ignoradas
   pareçam visualmente idênticos. */
.tile-stat {
  display: flex;
  flex-direction: column;
}
.tile-stat .tile-single {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  font-size: 22px;     /* alinha com .funnel-tile.small .funnel-number do Step 4 */
  font-weight: bold;
  line-height: 1;      /* tira diferença de altura por entrelinha */
}
/* Spacer invisível com a mesma altura do sub-line "+ NN em Lista de Espera"
   pra que tiles sem sub-line tenham o mesmo espaço útil pro tile-single. */
.tile-stat .tile-bottom-spacer {
  font-size: 0.78rem;
  line-height: 1;
  visibility: hidden;
}

/* Sub-linha discreta no pé do tile-stat — mesmo peso visual das sub-linhas
   dos tiles de Convidados (.funnel-sub: cinza, 11px). Usada no host
   ("Atrasado" dentro do tile Pendente). Tiles sem nota usam a MESMA classe
   com conteúdo vazio (&nbsp;) pra reservar a altura e alinhar o número. */
.tile-stat .tile-bottom-sub {
  margin-top: auto;
  text-align: center;
  font-size: 0.78rem;   /* mesmo tamanho de .tile-title (legibilidade da sub-linha) */
  line-height: 1.6;
  color: var(--cinza-claro);
}
/* Sub-linha em alerta (ex.: Atrasado com valor) — vermelho escuro do Ausente. */
.tile-stat .tile-bottom-sub.tile-sub-alert { color: var(--vermelho-erro); }

/* Tile "Presença" — vstat centralizado verticalmente + mais respiro
   entre o número e o label. (Cores dos IDs ind-yes/ind-no ficam no
   rsvp.css onde os outros IDs ind-* vivem.) */
.tile-presenca {
  display: flex;
  flex-direction: column;
}
.tile-presenca .tile-vstat {
  flex: 1;
  justify-content: center;
  padding-left: 16px;
}
.tile-presenca .tile-vstat-row {
  gap: 14px;
}


/* ============================================================
   Auxiliares da família "funnel" (.funnel-tile, .funnel-number,
   .funnel-label do funnel.css). Promovidos do <style> inline do
   wa_campaign_form.html na Onda 1.5. Ficam aqui pra centralizar
   classes de tile (BACKLOG seção 8).
   ============================================================ */

/* Tile "Repescagem" — só o número fica em laranja quando há pendentes
   (alinha com a bolinha 5 warning e o botão "Fazer repescagem"). A classe
   .tile-catchup é toggleada via JS conforme a contagem (0 → azul padrão). */
.tile-catchup .funnel-number {
    color: var(--amarelo-alerta-600);
}

/* Sub-info no bottom do tile — mesma fonte e cor do label do tile,
   alinhada bottom centralizada. Usada pelo Tile 1 ("N Sem telefone")
   e pelo Tile Repescagem ("X Novas · Y Alteradas") no Step 4 do wizard
   de campanha. */
.tile-bottom-info {
    margin-top: auto;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.25;
}


/* ============================================================
   Tiles do dashboard de check-in (componente). O layout da tela
   — card, colunas, painéis — fica em checkin.css; aqui mora só o
   tile, pra um redesenho futuro de tiles tocar um arquivo só.
   3 tiles lado a lado no topo da coluna esquerda, altura fixa.
   ============================================================ */

.checkin-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    flex-shrink: 0;
}

.checkin-tile {
    height: 140px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    background: var(--branco);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    box-shadow: var(--shadow-soft);
}

.checkin-tile-title {
    font-size: 0.78rem;
    line-height: 1.25;
}

/* Número grande centralizado no espaço livre do tile. */
.checkin-tile-number {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
}

.checkin-tile-number.is-checked { color: var(--verde-sucesso); }
.checkin-tile-number.is-pending { color: var(--vermelho-erro); }
.checkin-tile-number.is-total   { color: var(--azul-escuro); }

/* Detalhe do tile — linhas de presença. Texto e números todos em cinza
   (sem código de cor por status); só o número fica em negrito. */
.checkin-tile-sub {
    font-size: 0.72rem;
    line-height: 1.45;
    text-align: center;
    color: var(--cinza-claro);
}

.checkin-tile-sub .is-confirmed,
.checkin-tile-sub .is-absent,
.checkin-tile-sub .is-noreply {
    font-weight: 600;
}

/* ============================================================
   Seção colapsável (genérica) — barra-título clicável que
   esconde/mostra o bloco abaixo. Visual = subtítulo "Jornada do
   Evento" (dashboard.css) e RSVP (rsvp.css). Mora aqui no tiles.css
   (global) porque normalmente envolve tiles, mas serve pra qualquer
   conteúdo. Motor: utils.js (.section-toggle[data-toggle-target]).
   Os clones legados (funnel-subtitle, finance-hist, rsvp scoped)
   migram pra cá — ver BACKLOG.
   ============================================================ */
.section-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 6px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--azul-slate700);
}
.section-toggle:hover { color: var(--azul-slate900); }
.section-toggle:focus-visible {
    outline: 2px solid var(--azul-destaque-ativo);
    outline-offset: 2px;
    border-radius: 4px;
}
.section-arrow {
    display: inline-block;
    font-size: 0.65rem;
    color: var(--cinza-texto);
    transition: transform 0.15s ease;
}
.section-toggle.collapsed .section-arrow { transform: rotate(-90deg); }
.section-body[hidden] { display: none; }
/* O display:flex do .section-toggle sobrepõe o display:none padrão do atributo
   [hidden] — regra explícita pra permitir esconder a BARRA inteira (drill-down
   da lente host esconde as seções não-selecionadas). */
.section-toggle[hidden] { display: none; }