/* * Estilos da timeline de histórico do lead (aba "Histórico" da modal * "Atender lead"). CSS puro, sem Tailwind: o painel Filament serve um * bundle CSS estático publicado do próprio pacote (public/css/filament/...), * que não é recompilado a partir dos Blades desta aplicação — qualquer * utility Tailwind escrita aqui (flex, gap-3, rounded-full etc.) não tem * garantia de existir nesse bundle. Por isso este componente usa classes * semânticas próprias, todas prefixadas com `crm-timeline`, para não * colidir com nada do Filament nem de outras telas. * * Tema escuro: o Filament alterna adicionando a classe `dark` na tag * (não usa `prefers-color-scheme` nem `data-theme`), então os * overrides de tema aqui seguem o seletor `html.dark .crm-timeline...`. */ .crm-timeline__toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } .crm-timeline__toolbar-title { display: flex; flex-direction: column; gap: 0.125rem; } .crm-timeline__heading { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: #09090b; } html.dark .crm-timeline__heading { color: #fff; } .crm-timeline__count { font-size: 0.75rem; line-height: 1rem; color: #71717a; } html.dark .crm-timeline__count { color: #a1a1aa; } .crm-timeline__filter { width: 14rem; max-width: 100%; } /* --- Estado vazio --- */ .crm-timeline__empty { border: 1px dashed #d4d4d8; border-radius: 0.5rem; padding: 2rem 1rem; text-align: center; } html.dark .crm-timeline__empty { border-color: rgb(255 255 255 / 0.1); } .crm-timeline__empty-title { font-size: 0.875rem; font-weight: 500; color: #09090b; } html.dark .crm-timeline__empty-title { color: #fff; } .crm-timeline__empty-subtitle { margin-top: 0.25rem; font-size: 0.75rem; color: #71717a; } html.dark .crm-timeline__empty-subtitle { color: #a1a1aa; } /* --- Lista / eventos --- */ .crm-timeline__list { list-style: none; margin: 0; padding: 0; } .crm-timeline__event { position: relative; display: flex; gap: 0.75rem; padding-bottom: 1.25rem; } .crm-timeline__event:last-child { padding-bottom: 0; } .crm-timeline__connector { position: absolute; left: 15px; top: 2rem; bottom: 0; width: 1px; background-color: #e4e4e7; } html.dark .crm-timeline__connector { background-color: rgb(255 255 255 / 0.1); } .crm-timeline__marker { position: relative; z-index: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; background-color: #fafafa; box-shadow: inset 0 0 0 1px rgb(9 9 11 / 0.05); } html.dark .crm-timeline__marker { background-color: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); } .crm-timeline__marker .fi-icon { width: 1rem; height: 1rem; } .crm-timeline__content { min-width: 0; flex: 1 1 0%; padding-top: 0.25rem; } .crm-timeline__title-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; row-gap: 0.25rem; } .crm-timeline__title { font-size: 0.875rem; font-weight: 500; color: #09090b; } html.dark .crm-timeline__title { color: #fff; } .crm-timeline__detail { margin-top: 0.125rem; font-size: 0.8125rem; color: #52525b; } html.dark .crm-timeline__detail { color: #d4d4d8; } .crm-timeline__stage-flow { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.375rem; row-gap: 0.25rem; margin-top: 0.375rem; } .crm-timeline__stage-arrow { width: 0.75rem; height: 0.75rem; flex-shrink: 0; color: #a1a1aa; } html.dark .crm-timeline__stage-arrow { color: #71717a; } .crm-timeline__reason { margin-top: 0.25rem; font-size: 0.75rem; color: #71717a; } html.dark .crm-timeline__reason { color: #a1a1aa; } .crm-timeline__description { margin-top: 0.25rem; font-size: 0.875rem; color: #52525b; } html.dark .crm-timeline__description { color: #d4d4d8; } .crm-timeline__return { display: inline-flex; align-items: center; column-gap: 0.375rem; margin-top: 0.375rem; border-radius: 0.375rem; background-color: #fafafa; padding: 0.25rem 0.5rem; font-size: 0.75rem; color: #52525b; } html.dark .crm-timeline__return { background-color: rgb(255 255 255 / 0.05); color: #d4d4d8; } .crm-timeline__return-icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; } .crm-timeline__meta { margin-top: 0.375rem; font-size: 0.75rem; color: #a1a1aa; } html.dark .crm-timeline__meta { color: #71717a; } .crm-timeline__load-more { margin-top: 0.25rem; border: none; background: none; padding: 0; font-size: 0.875rem; font-weight: 500; color: #d97706; cursor: pointer; } .crm-timeline__load-more:hover { text-decoration: underline; } html.dark .crm-timeline__load-more { color: #fbbf24; }