/* * Estilos da aba "Atendimento" da modal "Atender lead" — mesma estratégia * já usada em crm-timeline.css e crm-lead-details.css: CSS puro, sem * Tailwind, porque o painel Filament serve um bundle CSS estático * publicado do próprio pacote (public/css/filament/...), não recompilado a * partir dos Blades/Schemas desta aplicação. Classes semânticas próprias, * prefixadas com `crm-attendance-flow`, aplicadas via ->extraAttributes() * nos componentes de schema (Group) que envolvem cada seção do fluxo. * * Tema escuro: o Filament alterna adicionando a classe `dark` na tag * , então os overrides de tema aqui seguem `html.dark ...`. */ .crm-attendance-flow__contact-type, .crm-attendance-flow__next-action { border: 1px solid #e4e4e7; border-radius: 0.5rem; padding: 0.875rem 1rem; margin-bottom: 0.25rem; background-color: #fafafa; } html.dark .crm-attendance-flow__contact-type, html.dark .crm-attendance-flow__next-action { border-color: rgb(255 255 255 / 0.1); background-color: rgb(255 255 255 / 0.03); } .crm-attendance-flow__conditional, .crm-attendance-flow__meeting { border-left: 3px solid #d97706; border-radius: 0.375rem; padding: 0.875rem 1rem; margin-top: 0.25rem; background-color: #fffbeb; } html.dark .crm-attendance-flow__conditional, html.dark .crm-attendance-flow__meeting { border-left-color: #fbbf24; background-color: rgb(217 119 6 / 0.08); } .crm-attendance-flow__warning { display: flex; align-items: flex-start; gap: 0.5rem; border: 1px solid #fecaca; border-radius: 0.5rem; padding: 0.875rem 1rem; margin-top: 0.25rem; background-color: #fef2f2; font-size: 0.875rem; color: #991b1b; } html.dark .crm-attendance-flow__warning { border-color: rgb(248 113 113 / 0.3); background-color: rgb(248 113 113 / 0.08); color: #fca5a5; } /* * Fluxo em duas etapas (Registrar atendimento / Definir próximo passo) — * a contagem de colunas de .crm-attend-modal__steps (1 coluna na etapa 1, * 2 colunas lado a lado na etapa 2) é controlada pela própria API de grid * do Filament (Group::make(...)->columns(...)), não por CSS customizado: * o Group já aplica sua própria variável --cols-default lida pelo CSS do * pacote, e uma regra grid-template-columns nossa na mesma propriedade * perderia para ela. Esta classe só recebe ajustes cosméticos que não * conflitam com o grid do Filament. */ .crm-attend-modal__steps { align-items: start; } .crm-attend-modal__panel { border: 1px solid #e4e4e7; border-radius: 0.75rem; padding: 1rem; background-color: #fff; } html.dark .crm-attend-modal__panel { border-color: rgb(255 255 255 / 0.1); background-color: rgb(255 255 255 / 0.02); } .crm-attend-modal__step-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; } .crm-attend-modal__step-badge { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; background-color: #f4f4f5; color: #71717a; } html.dark .crm-attend-modal__step-badge { background-color: rgb(255 255 255 / 0.08); color: #a1a1aa; } .crm-attend-modal__step-badge--ativo { background-color: #fef3c7; color: #b45309; } html.dark .crm-attend-modal__step-badge--ativo { background-color: rgb(217 119 6 / 0.2); color: #fbbf24; } .crm-attend-modal__step-badge--concluido { background-color: #dcfce7; color: #15803d; } html.dark .crm-attend-modal__step-badge--concluido { background-color: rgb(34 197 94 / 0.15); color: #4ade80; } .crm-attend-modal__step-badge-icon { width: 1rem; height: 1rem; } .crm-attend-modal__step-title { font-size: 0.875rem; font-weight: 600; color: #09090b; } html.dark .crm-attend-modal__step-title { color: #fff; } .crm-attend-modal__step-subtitle { font-size: 0.75rem; color: #71717a; } html.dark .crm-attend-modal__step-subtitle { color: #a1a1aa; } .crm-attend-modal__voltar { display: inline-flex; align-items: center; gap: 0.375rem; border: none; background: none; padding: 0; margin-bottom: 0.875rem; font-size: 0.8125rem; font-weight: 500; color: #71717a; cursor: pointer; } .crm-attend-modal__voltar:hover { color: #d97706; } html.dark .crm-attend-modal__voltar { color: #a1a1aa; } html.dark .crm-attend-modal__voltar:hover { color: #fbbf24; } .crm-attend-modal__voltar-icon { width: 0.875rem; height: 0.875rem; }