/*
 * Tela "Cliente e Histórico". CSS puro, sem Tailwind — mesmo motivo de
 * crm-timeline.css/dashboard.css: o painel serve um bundle CSS estático
 * publicado, que não é recompilado a partir dos Blades desta aplicação.
 * Classes semânticas próprias, todas prefixadas com `cliente-historico`.
 *
 * Superfícies e destaques usam os tokens globais de theme.css.
 * Cores semânticas de status permanecem específicas do módulo.
 *
 * Tema escuro: Filament alterna adicionando a classe `dark` na tag
 * <html>, então os overrides seguem `html.dark .cliente-historico...`.
 */

.cliente-historico {
    --ch-text-primary: var(--app-text);
    --ch-text-secondary: var(--app-secondary);
    --ch-text-muted: var(--app-muted);
    --ch-text-faint: var(--app-faint);
    --ch-card-bg: var(--app-surface);
    --ch-card-border: var(--app-border);
    --ch-divider: var(--app-divider);
    --ch-secondary-btn-bg: var(--app-subtle);
    --ch-secondary-btn-border: var(--app-border);
    --ch-accent: var(--app-accent);
    --ch-accent-text: var(--app-on-accent);

    --ch-pill-success-bg: rgba(34, 197, 94, 0.12);
    --ch-pill-success-text: #15803d;
    --ch-pill-warning-bg: rgba(245, 158, 11, 0.14);
    --ch-pill-warning-text: #b45309;
    --ch-pill-danger-bg: rgba(239, 68, 68, 0.12);
    --ch-pill-danger-text: #b91c1c;
    --ch-pill-info-bg: rgba(59, 130, 246, 0.12);
    --ch-pill-info-text: #1d4ed8;
    --ch-pill-primary-bg: rgba(147, 51, 234, 0.12);
    --ch-pill-primary-text: #7e22ce;
    --ch-pill-gray-bg: rgba(113, 113, 122, 0.12);
    --ch-pill-gray-text: #52525b;

    --ch-icon-success: #16a34a;
    --ch-icon-info: #2563eb;
    --ch-icon-warning: #d97706;
    --ch-icon-danger: #dc2626;
    --ch-icon-primary: #9333ea;
    --ch-icon-gray: #52525b;

    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

html.dark .cliente-historico {
    --ch-text-primary: var(--app-text);
    --ch-text-secondary: var(--app-secondary);
    --ch-text-muted: var(--app-muted);
    --ch-text-faint: var(--app-faint);
    --ch-card-bg: var(--app-surface);
    --ch-card-border: var(--app-border);
    --ch-divider: var(--app-divider);
    --ch-secondary-btn-bg: var(--app-subtle);
    --ch-secondary-btn-border: var(--app-border);
    --ch-accent: var(--app-accent);
    --ch-accent-text: var(--app-on-accent);

    --ch-pill-success-bg: rgba(34, 197, 94, 0.16);
    --ch-pill-success-text: #4ade80;
    --ch-pill-warning-bg: rgba(245, 158, 11, 0.16);
    --ch-pill-warning-text: #fbbf24;
    --ch-pill-danger-bg: rgba(239, 68, 68, 0.16);
    --ch-pill-danger-text: #f87171;
    --ch-pill-info-bg: rgba(59, 130, 246, 0.16);
    --ch-pill-info-text: #60a5fa;
    --ch-pill-primary-bg: rgba(147, 51, 234, 0.18);
    --ch-pill-primary-text: #c084fc;
    --ch-pill-gray-bg: rgba(161, 161, 170, 0.16);
    --ch-pill-gray-text: #d4d4d8;

    --ch-icon-success: #4ade80;
    --ch-icon-info: #60a5fa;
    --ch-icon-warning: #fbbf24;
    --ch-icon-danger: #f87171;
    --ch-icon-primary: #c084fc;
    --ch-icon-gray: #d4d4d8;
}

/* --- Card do cliente --- */

.cliente-historico__card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    border: 1px solid var(--ch-card-border);
    border-radius: 0.875rem;
    background-color: var(--ch-card-bg);
    padding: 1.5rem;
}

.cliente-historico__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
    background-color: var(--ch-accent);
    color: var(--ch-accent-text);
}

.cliente-historico__logo .fi-icon {
    width: 2rem;
    height: 2rem;
}

.cliente-historico__identidade {
    flex: 1 1 16rem;
    min-width: 0;
}

.cliente-historico__nome-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.cliente-historico__nome {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ch-text-primary);
}

.cliente-historico__badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background-color: var(--ch-pill-success-bg);
    color: var(--ch-pill-success-text);
    padding: 0.1875rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.cliente-historico__campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem 1.5rem;
    margin-top: 1rem;
    width: 100%;
}

.cliente-historico__campo-label {
    display: block;
    font-size: 0.75rem;
    color: var(--ch-text-secondary);
}

.cliente-historico__campo-valor {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ch-text-primary);
}

.cliente-historico__campo-valor a {
    color: var(--ch-accent);
    text-decoration: none;
}

.cliente-historico__campo-valor a:hover {
    text-decoration: underline;
}

/* --- Cards de estatística --- */

.cliente-historico__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
}

/*
 * Mesmo tratamento de .executive-kpi: o card em si é sempre o "vidro"
 * neutro (--ch-card-bg/--ch-card-border) — só o ícone circular varia de
 * cor por tipo, nunca o fundo do card inteiro. Evita a tela virar um
 * mosaico de retângulos coloridos, que não é o visual do resto do painel.
 */
.cliente-historico__stat {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    border: 1px solid var(--ch-card-border);
    border-radius: 0.875rem;
    background-color: var(--ch-card-bg);
    padding: 1.125rem 1.25rem;
}

.cliente-historico__stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.625rem;
    color: var(--app-text);
}

.cliente-historico__stat-icon .fi-icon {
    width: 1.375rem;
    height: 1.375rem;
}

.cliente-historico__stat-numero {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ch-text-primary);
}

.cliente-historico__stat-label {
    font-size: 0.8125rem;
    color: var(--ch-text-secondary);
}

.cliente-historico__stat--blue .cliente-historico__stat-icon { background-color: var(--ch-icon-info); }
.cliente-historico__stat--green .cliente-historico__stat-icon { background-color: var(--ch-icon-success); }
.cliente-historico__stat--amber .cliente-historico__stat-icon { background-color: var(--ch-icon-warning); }
.cliente-historico__stat--purple .cliente-historico__stat-icon { background-color: var(--ch-icon-primary); }

/* --- Grid principal (timeline + resumo) --- */

.cliente-historico__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 64rem) {
    .cliente-historico__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: start;
    }
}

.cliente-historico__panel {
    border: 1px solid var(--ch-card-border);
    border-radius: 0.875rem;
    background-color: var(--ch-card-bg);
    padding: 1.25rem;
}

.cliente-historico__panel + .cliente-historico__panel {
    margin-top: 1.25rem;
}

.cliente-historico__panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.cliente-historico__panel-header .fi-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--ch-accent);
}

.cliente-historico__panel-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ch-text-primary);
}

/* --- Timeline --- */

.cliente-historico__evento {
    position: relative;
    display: flex;
    gap: 0.875rem;
    padding-bottom: 1.375rem;
}

.cliente-historico__evento:last-child {
    padding-bottom: 0;
}

.cliente-historico__conector {
    position: absolute;
    left: 17px;
    top: 2.25rem;
    bottom: 0;
    width: 1px;
    background-color: var(--ch-divider);
}

/* Círculo cheio (não a "pill" translúcida) de propósito: é o marcador
   mais visível da tela, o ponto de ancoragem visual de cada linha da
   timeline — precisa continuar lendo bem tanto no claro quanto no
   escuro, diferente das pills de status (fundo translúcido + texto). */
.cliente-historico__marcador {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    color: #fff;
}

.cliente-historico__marcador .fi-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.cliente-historico__marcador--info { background-color: var(--ch-icon-info); }
.cliente-historico__marcador--primary { background-color: var(--ch-icon-primary); }
.cliente-historico__marcador--success { background-color: var(--ch-icon-success); }
.cliente-historico__marcador--warning { background-color: var(--ch-icon-warning); }
.cliente-historico__marcador--danger { background-color: var(--ch-icon-danger); }
.cliente-historico__marcador--gray { background-color: var(--ch-icon-gray); }

.cliente-historico__evento-conteudo {
    min-width: 0;
    flex: 1 1 0%;
}

.cliente-historico__evento-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.cliente-historico__evento-titulo {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ch-text-primary);
}

.cliente-historico__evento-data {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--ch-text-faint);
}

.cliente-historico__evento-descricao {
    margin-top: 0.1875rem;
    font-size: 0.8125rem;
    color: var(--ch-text-secondary);
}

.cliente-historico__evento-motivo {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--ch-text-muted);
}

.cliente-historico__evento-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    margin-top: 0.5rem;
}

.cliente-historico__evento-autor {
    font-size: 0.75rem;
    color: var(--ch-text-faint);
}

.cliente-historico__evento-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ch-accent);
    text-decoration: none;
    white-space: nowrap;
}

.cliente-historico__evento-link:hover {
    text-decoration: underline;
}

.cliente-historico__evento-link .fi-icon {
    width: 0.75rem;
    height: 0.75rem;
}

.cliente-historico__vazio {
    border: 1px dashed var(--ch-card-border);
    border-radius: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
}

.cliente-historico__vazio-titulo {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ch-text-primary);
}

.cliente-historico__vazio-subtitulo {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--ch-text-muted);
}

.cliente-historico__carregar-mais {
    margin-top: 0.5rem;
    border: none;
    background: none;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ch-accent);
    cursor: pointer;
}

.cliente-historico__carregar-mais:hover {
    text-decoration: underline;
}

/* --- Resumo do relacionamento --- */

.cliente-historico__resumo-linha {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--ch-divider);
}

.cliente-historico__resumo-linha:first-child {
    padding-top: 0;
    border-top: none;
}

.cliente-historico__resumo-linha:last-child {
    padding-bottom: 0;
}

.cliente-historico__resumo-label {
    font-size: 0.75rem;
    color: var(--ch-text-secondary);
}

.cliente-historico__resumo-valor {
    margin-top: 0.125rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ch-text-primary);
}

.cliente-historico__resumo-valor a {
    color: var(--ch-accent);
    text-decoration: none;
}

.cliente-historico__resumo-valor a:hover {
    text-decoration: underline;
}

.cliente-historico__resumo-secundario {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--ch-text-faint);
}

.cliente-historico__resumo-data {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--ch-text-faint);
    white-space: nowrap;
}

/* --- Observações --- */

.cliente-historico__observacoes-texto {
    border-radius: 0.5rem;
    background-color: var(--ch-secondary-btn-bg);
    padding: 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ch-text-secondary);
    white-space: pre-line;
}

.cliente-historico__observacoes-editar {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
    border: 1px solid var(--ch-secondary-btn-border);
    border-radius: 0.5rem;
    background-color: var(--ch-secondary-btn-bg);
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ch-text-primary);
    cursor: pointer;
}

.cliente-historico__observacoes-editar:hover {
    opacity: 0.85;
}

.cliente-historico__observacoes-editar .fi-icon {
    width: 0.875rem;
    height: 0.875rem;
}