/* =============================================================================
   Mel — app.css
   Layout do shell autenticado + telas de login/onboarding/cartela.
   Mobile-first. Ordem de import recomendada: tokens → base → components → app.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Shell do app (index.html)
   Estrutura: header (sticky) → main (scroll) → bottom-nav (fixo)
   --------------------------------------------------------------------------- */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4);
  /* Reserva espaço para a bottom-nav fixa */
  padding-bottom: calc(var(--bottomnav-height) + var(--safe-bottom) + var(--space-6));
}

/* Cada view é um bloco vertical simples */
.view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.view__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.view__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-black);
}
.view__section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---------------------------------------------------------------------------
   Cabeçalho de saudação (Agenda)
   --------------------------------------------------------------------------- */
.greeting {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.greeting__hello {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.greeting__name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-black);
  color: var(--color-text);
}

/* ---------------------------------------------------------------------------
   Resumo financeiro (cards de destaque)
   --------------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.stat__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.stat__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-black);
}
.stat--positive .stat__value { color: var(--color-success); }
.stat--negative .stat__value { color: var(--color-danger); }
.stat--full { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------------
   Item de agendamento (linha do tempo do dia)
   --------------------------------------------------------------------------- */
.appointment {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.appointment__time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-sm);
}
.appointment__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.appointment__client {
  font-weight: var(--font-weight-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appointment__service {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.appointment--concluido { opacity: 0.7; }
.appointment--cancelado { opacity: 0.5; text-decoration: line-through; }

/* ---------------------------------------------------------------------------
   Item de cliente
   --------------------------------------------------------------------------- */
.client-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  width: 100%;
  text-align: left;
  min-height: 64px;
}
.client-item__info { flex: 1; min-width: 0; }
.client-item__name { font-weight: var(--font-weight-bold); }
.client-item__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Barra de busca */
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  min-height: var(--control-height);
}
.search-bar:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.search-bar .icon { width: 20px; height: 20px; color: var(--color-text-muted); }
.search-bar input {
  border: none;
  background: transparent;
  min-height: auto;
}
.search-bar input:focus { outline: none; }

/* ---------------------------------------------------------------------------
   Cartão de fidelidade — carimbos
   --------------------------------------------------------------------------- */
.stamp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
.stamp {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 2px dashed var(--color-border-strong);
  color: var(--color-border-strong);
  font-weight: var(--font-weight-black);
}
.stamp .icon { width: 24px; height: 24px; }
.stamp--filled {
  border-style: solid;
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ---------------------------------------------------------------------------
   Telas de auth / onboarding / offline (fora do shell)
   --------------------------------------------------------------------------- */
.auth-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space-6);
  background: linear-gradient(160deg, var(--color-bg), var(--color-primary-soft));
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-md);
}
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.auth-brand__logo {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-black);
  color: var(--color-primary);
  letter-spacing: -0.02em;
}
.auth-brand__tagline {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}
.auth-tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  margin-bottom: var(--space-6);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-pill);
}
.auth-tab {
  flex: 1;
  min-height: var(--touch-target);
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.auth-tab.is-active {
  background-color: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-xs);
}
.auth-footer {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   Onboarding
   --------------------------------------------------------------------------- */
.onboarding {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: var(--space-6);
  gap: var(--space-6);
}
.onboarding__steps {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}
.onboarding__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--color-border-strong);
}
.onboarding__dot.is-active {
  width: 24px;
  background-color: var(--color-primary);
}

/* Barra de progresso do wizard */
.onboarding__progress {
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-alt);
  overflow: hidden;
}
.onboarding__progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  transition: width var(--transition-base);
}
.onboarding__progress-label {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-align: center;
}

/* Corpo do passo: conteúdo rolável + rodapé de navegação */
.onboarding__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.onboarding__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Linha rótulo + switch (ex.: ligar fidelidade) */
.onboarding__switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* ---------------------------------------------------------------------------
   Paywall
   --------------------------------------------------------------------------- */
.paywall {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 100dvh;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Offline
   --------------------------------------------------------------------------- */
.offline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 100dvh;
  padding: var(--space-8) var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   Cartela pública (fidelização do lado da cliente)
   --------------------------------------------------------------------------- */
.cartela {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  padding: var(--space-6);
  background: linear-gradient(160deg, var(--color-bg), var(--color-primary-soft));
}
.cartela__card {
  width: 100%;
  max-width: 400px;
  margin-top: var(--space-8);
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}

/* ---------------------------------------------------------------------------
   Desktop — apenas centraliza; app continua mobile-first.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .app-main {
    padding-top: var(--space-6);
  }
  .fab {
    right: calc(50% - var(--content-max-width) / 2 + var(--space-4));
  }
}