/* Infraestrutura do Blazor + ajustes do Vital sobre o MudBlazor. Tokens completos em docs/design/DESIGN.md;
   cores de componente vêm do tema (Layout/Tema.cs). Classes cv-* usam var(--mud-palette-*) em vez de
   hex fixo justamente pra acompanhar sozinhas a troca de modo claro/escuro (MudThemeProvider redefine
   essas variáveis quando IsDarkMode muda — ver Services/TemaService.cs) — nada aqui precisa saber que
   o tema mudou, só o CSS var muda de valor por baixo. */
body { font-family: 'Poppins', system-ui, sans-serif; }
.cv-loading { padding: 48px; color: var(--mud-palette-text-secondary); }

.cv-drawer { border-right: 1px solid var(--mud-palette-divider); }
.cv-brand { display: flex; align-items: center; gap: 10px; padding: 14px 16px 20px; }
.cv-brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex: none; }
/* Logo da marca (wwwroot/logo.png, PNG com fundo transparente). Substitui o antigo quadradinho "CV" (.cv-brand-mark). */
.cv-brand-logo { width: 36px; height: 36px; flex: none; display: block; }
.cv-auth-brand .cv-brand-logo { width: 44px; height: 44px; }
.cv-brand-name { font-size: 13px; font-weight: 500; line-height: 1.2; }
.cv-brand-sub { font-size: 11px; color: var(--mud-palette-text-secondary); }

/* !important nos dois: o MudBlazor já aplica um fundo próprio (tint bem claro do primary) no item
   ativo do MudNavLink, com a mesma especificidade — sem !important ele prevalece sobre este CSS. */
.mud-nav-link { border-radius: 10px !important; margin: 0 4px 2px; }
.mud-nav-link.active:not(.mud-nav-link-disabled) { background: var(--mud-palette-primary) !important; color: var(--mud-palette-primary-text) !important; font-weight: 500; }
.mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root { color: var(--mud-palette-primary-text) !important; }
.cv-locked, .cv-locked .mud-icon-root { color: var(--mud-palette-text-secondary) !important; }

/* Sem max-width: telas de tabela (Clientes) devem usar a largura do monitor. Conteúdo que precisa de
   linha curta para leitura (texto de upgrade, formulário de diálogo) já define sua própria largura
   onde é usado, em vez de depender de um limite global aqui. */
.cv-content { padding: 20px 28px 40px; }
.cv-card { border-radius: 12px; height: 100%; }

/* Topbar: sempre visível (breadcrumb, busca, notificações, upgrade). O botão de menu dentro dela só
   aparece abaixo do breakpoint do MudDrawer (Breakpoint.Md = 960px), quando a barra lateral vira overlay. */
.cv-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 20px; border-bottom: 1px solid var(--mud-palette-divider); background: var(--mud-palette-appbar-background); }
.cv-crumbs { font-size: 12px; color: var(--mud-palette-text-secondary); display: flex; align-items: center; gap: 8px; }
.cv-crumbs b { color: var(--mud-palette-text-primary); font-weight: 500; }
.cv-topbar-actions { display: flex; align-items: center; gap: 4px; }
.cv-menu-toggle { display: none; }

@media (max-width: 959.98px) {
  .cv-menu-toggle { display: inline-flex; }
  .cv-topbar { padding: 8px 12px; }
  .cv-content { padding: 14px 16px 28px; }
}

@media (max-width: 599.98px) {
  .cv-content { padding: 12px 12px 24px; }
}

/* Login/Registrar: cartão centralizado, sem menu — layout próprio (AuthLayout). */
.cv-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--mud-palette-background); padding: 24px 16px; }
.cv-auth-card { width: 100%; max-width: 400px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-divider); border-radius: 16px; padding: 32px 28px; }
.cv-auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.cv-auth-brand .cv-brand-name { font-size: 15px; }

/* Agendamento público (Pages/Publico/AgendarPublico.razor): mesmo cartão do login, mais largo pra caber
   o leiaute em 3 colunas (dados do atendimento | calendário | horários do dia) na etapa de escolher
   dia/horário, estilo cal.com — pedido explícito depois de um print do cal.com como referência. As
   etapas mais simples (lista de tipos, formulário de dados) ficam com `max-width:480px` inline pra não
   esticar demais dentro desse cartão mais largo (mesmo princípio já usado em .cv-content/Upgrade.razor:
   largura de leitura definida onde o conteúdo precisa, não no container global). */
.cv-publico-card { max-width: 900px; }
.cv-horario-chip { cursor: pointer; }
.cv-tipo-item { border-radius: 10px; transition: border-color .15s; }

.cv-agendamento-grid { align-items: flex-start; }
.cv-agendamento-coluna-info { flex: 0 0 190px; }
.cv-agendamento-coluna-calendario { flex: 1 1 300px; min-width: 280px; }
.cv-agendamento-coluna-horarios { flex: 0 0 170px; max-height: 380px; overflow-y: auto; padding-right: 2px; }
.cv-calendario-publico.mud-picker { box-shadow: none; border: 1px solid var(--mud-palette-divider); border-radius: 10px; }

/* Dashboard: linhas de agenda/pendência/tarefa dentro dos cards. */
.cv-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; padding: 5px 0; }
.cv-linha + .cv-linha { border-top: 1px solid var(--mud-palette-divider-light); }
.cv-linha-titulo { font-weight: 500; }

#blazor-error-ui { color-scheme: light only; background: #FDECED; color: #C0393F; border-top: 1px solid #C0393F;
  bottom: 0; box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* Agenda (MudCalendar, ver Pages/Agenda/Agenda.razor): cor por status da sessão + bloqueio de ausência. */
.cv-agenda-item { border-radius: 6px; padding: 2px 6px; font-size: 11px; line-height: 1.3; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: column; gap: 1px; }
.cv-agenda-cliente { font-weight: 600; }
.cv-agenda-linha2 { display: flex; align-items: center; gap: 3px; overflow: hidden; }
.cv-agenda-linha2 .mud-icon-root { flex-shrink: 0; }
.cv-agenda-horario { opacity: .85; flex-shrink: 0; }
.cv-agenda-agendada { background: #6B7FD7; }
.cv-agenda-confirmada { background: #7862DD; }
.cv-agenda-realizada { background: #3FA772; }
.cv-agenda-cancelada { background: #C0393F; text-decoration: line-through; }
.cv-agenda-reagendada { background: #D08A2B; }
.cv-agenda-naocompareceu { background: #6B6B78; }
/* Os dois abaixo eram cor fixa (cinza-claro/branco) antes do modo escuro existir — num fundo escuro
   ficariam como retângulos claros destoando do resto da agenda, então acompanham o tema como o resto
   (diferente dos status coloridos acima, que são saturados o bastante pra funcionar nos dois modos). */
.cv-agenda-bloqueio { background: var(--mud-palette-lines-default); color: var(--mud-palette-text-primary); display: flex; align-items: center; gap: 4px; }
.cv-agenda-google { background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border: 1px solid var(--mud-palette-divider); display: flex; align-items: center; gap: 4px; }
.cv-agenda-google .mud-icon-root { color: #4285F4; }
.cv-agenda-tarefa { background: #2894A3; display: flex; align-items: center; gap: 4px; }

/* WhatsApp (Pages/WhatsApp/WhatsApp.razor): duas colunas estilo WhatsApp Web, sem tempo real de verdade
   (projeto não tem SignalR) — atualizado por polling leve enquanto a tela está aberta. */
.cv-whatsapp-conversas { display: flex; gap: 12px; height: 70vh; }
.cv-whatsapp-lista { width: 280px; flex-shrink: 0; overflow-y: auto; }
.cv-whatsapp-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--mud-palette-divider); }
.cv-whatsapp-item:hover { background: var(--mud-palette-action-default-hover); }
.cv-whatsapp-item-ativo { background: var(--mud-palette-action-selected); }
.cv-whatsapp-nome { font-weight: 600; }
.cv-whatsapp-preview { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-whatsapp-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cv-whatsapp-mensagens { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cv-whatsapp-bolha { max-width: 70%; padding: 8px 12px; border-radius: 10px; }
.cv-whatsapp-enviada { align-self: flex-end; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.cv-whatsapp-recebida { align-self: flex-start; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-divider); }
.cv-whatsapp-hora { font-size: 10px; opacity: .7; text-align: right; margin-top: 2px; }
.cv-whatsapp-midia-imagem { max-width: 240px; max-height: 240px; border-radius: 6px; display: block; }
.cv-whatsapp-midia-audio { max-width: 240px; }
.cv-whatsapp-midia-doc { display: flex; align-items: center; gap: 4px; color: inherit; text-decoration: underline; }
.cv-whatsapp-emoji-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 8px; max-width: 220px; }
.cv-whatsapp-emoji { font-size: 20px; cursor: pointer; text-align: center; padding: 2px; border-radius: 4px; }
.cv-whatsapp-emoji:hover { background: var(--mud-palette-action-default-hover); }

/* CRM (Pages/Crm/Crm.razor): pipeline em colunas por estágio, sem drag-and-drop (nenhuma lib no
   projeto pra isso) — mover de estágio é por botão de seta, testável sem simular gesto de arrastar. */
.cv-crm-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; }
.cv-crm-coluna { flex: 0 0 220px; background: var(--mud-palette-table-striped); border-radius: 12px; padding: 10px; }

/* Configurações (Pages/Configuracoes.razor): MudTabs Position=Left centraliza ícone+texto de cada aba
   por padrão (o Mud já define justify-content na regra .mud-tab, daí o !important) — alinhado à
   esquerda fica mais parecido com um menu de verdade. Separador replica o mesmo padrão de .cv-linha. */
.cv-config-tabs .mud-tab { justify-content: flex-start !important; }
.cv-config-tabs .mud-tab + .mud-tab { border-top: 1px solid var(--mud-palette-divider-light); }