/*
  Wortic macOS UI Kit — CRM Activity Log
  wm-crm-activity-log — o registro de atividade e o histórico unificado do
  relacionamento, no mesmo lugar. Categoria "crm".

  Território: NÃO é o components/timeline. O timeline é um histórico passivo,
  bom para rastreio de pedido: ponto, título, hora. Aqui cada item carrega
  três coisas que o timeline não tem porque não precisa ter — DE ONDE o
  registro veio (`__source`: alguém digitou, o e-mail sincronizou, a telefonia
  gravou), O QUE SAIU dele (`__outcome`) e SE ELE AINDA VAI ACONTECER
  (`--agendada` / `--vencida`). E existe um formulário de registro em cima,
  que é o que faz a pessoa de vendas voltar aqui todo dia.

  As decisões de CSS que carregam regra, não gosto:

  1. `--vencida` é ERRO, não aviso. Compromisso marcado que passou da data não
     é "quase na hora": é uma promessa quebrada com o cliente. Fundo
     --wm-error-fill e ícone próprio (alert-triangle), porque cor sozinha não
     informa quem não distingue vermelho.
  2. `__gap` (nenhum próximo passo agendado) ocupa espaço de item de verdade,
     no fim da lista, com contorno tracejado. A ausência de follow-up é o
     sinal mais barato de negócio morrendo — esconder isso transforma sinal
     em silêncio.
  3. `__source` fica SEMPRE visível, nunca atrás de hover. "Reunião de 40 min"
     digitada à mão por alguém e "reunião de 40 min" vinda do calendário têm
     confiabilidades diferentes, e quem lê precisa saber qual é qual.

  Composição: wm-field / wm-textarea / wm-button / wm-badge do kit. O
  formulário é <form> nativo com `required` no próximo passo — a exigência
  vale no navegador, não só no gerador.
*/

@layer components {
  .wm-crm-activity-log {
    container-type: inline-size;
    container-name: wm-crm-activity-log;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-8);
  }

  /* ------------------------------------------------------------
     Cabeçalho.
     ------------------------------------------------------------ */
  .wm-crm-activity-log__header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--wm-space-3) var(--wm-space-6);
  }
  .wm-crm-activity-log__title {
    margin: 0;
    font-size: var(--wm-font-size-headline);
    line-height: var(--wm-leading-headline);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
  }
  .wm-crm-activity-log__pulse {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-2);
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-leading-caption);
    color: var(--wm-label-tertiary);
  }
  .wm-crm-activity-log__pulse .wm-icon {
    width: var(--wm-icon-xs);
    height: var(--wm-icon-xs);
  }
  .wm-crm-activity-log__pulse--alerta {
    color: var(--wm-warning);
    font-weight: var(--wm-font-weight-medium);
  }
  .wm-crm-activity-log__pulse time {
    border-block-end: var(--wm-border-width-hairline) dotted var(--wm-separator-strong);
  }

  /* ------------------------------------------------------------
     Formulário de registro.
     ------------------------------------------------------------ */
  .wm-crm-activity-log__form {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-5);
    padding: var(--wm-space-6);
    background: var(--wm-surface-secondary);
    border-radius: var(--wm-radius-panel);
    box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
  }
  .wm-crm-activity-log__kinds {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wm-space-2);
    border: none;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
  }
  .wm-crm-activity-log__kinds-legend {
    padding: 0;
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-leading-caption);
    color: var(--wm-label-tertiary);
  }
  /* Rádio nativo escondido só da vista — o <label> inteiro é o alvo, e o
     foco de teclado vem do :has(:focus-visible) logo abaixo. */
  .wm-crm-activity-log__kind-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .wm-crm-activity-log__kind {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-2);
    height: var(--wm-control-height-sm);
    padding-inline: var(--wm-space-5);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-fill-tertiary);
    color: var(--wm-label-secondary);
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-medium);
    cursor: pointer;
    transition: background var(--wm-duration-fast) var(--wm-ease-standard),
      color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-crm-activity-log__kind .wm-icon {
    width: var(--wm-icon-xs);
    height: var(--wm-icon-xs);
  }
  .wm-crm-activity-log__kind:hover {
    background: var(--wm-fill-secondary);
  }
  .wm-crm-activity-log__kind:has(.wm-crm-activity-log__kind-input:checked) {
    background: var(--wm-accent);
    color: var(--wm-label-on-accent);
  }
  .wm-crm-activity-log__kind:has(.wm-crm-activity-log__kind-input:focus-visible) {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
  }

  .wm-crm-activity-log__row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--wm-space-4);
  }
  .wm-crm-activity-log__field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-2);
  }
  /* `flex: 1 1 220px` SÓ dentro de __row. Na primeira versão a regra estava no
     __field, e o campo do "o que saiu disso" é filho DIRETO do __form, que é
     `flex-direction: column` — ali flex-basis é ALTURA, não largura, e o campo
     ganhou 220px de altura com 120px de vazio embaixo do textarea. Passou por
     todo `grep` e só apareceu no print de 09/08/2026. */
  .wm-crm-activity-log__row > .wm-crm-activity-log__field {
    flex: 1 1 220px;
  }
  .wm-crm-activity-log__label {
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-leading-caption);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-label-secondary);
  }
  .wm-crm-activity-log__hint {
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-line-height-relaxed);
    color: var(--wm-label-tertiary);
  }
  .wm-crm-activity-log__required {
    color: var(--wm-error);
    font-weight: var(--wm-font-weight-semibold);
  }
  .wm-crm-activity-log__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wm-space-3);
  }

  /* ------------------------------------------------------------
     Feed.
     ------------------------------------------------------------ */
  .wm-crm-activity-log__feed {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-3);
  }
  .wm-crm-activity-log__day {
    padding-block: var(--wm-space-3) var(--wm-space-1);
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-leading-caption);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-tertiary);
  }

  .wm-crm-activity-log__item {
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-5);
    padding: var(--wm-space-5) var(--wm-space-6);
    border-radius: var(--wm-radius-md);
    background: var(--wm-surface-secondary);
  }
  .wm-crm-activity-log__item-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wm-control-height-xs);
    height: var(--wm-control-height-xs);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-fill-tertiary);
    color: var(--wm-label-secondary);
  }
  .wm-crm-activity-log__item-icon .wm-icon {
    width: var(--wm-icon-xs);
    height: var(--wm-icon-xs);
  }
  .wm-crm-activity-log__item-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-2);
  }
  .wm-crm-activity-log__item-top {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--wm-space-2) var(--wm-space-4);
  }
  .wm-crm-activity-log__item-title {
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-line-height-relaxed);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
  }
  .wm-crm-activity-log__outcome {
    margin: 0;
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-line-height-relaxed);
    color: var(--wm-label-secondary);
  }
  .wm-crm-activity-log__item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wm-space-2) var(--wm-space-5);
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-leading-caption);
    color: var(--wm-label-tertiary);
  }
  .wm-crm-activity-log__item-meta time {
    border-block-end: var(--wm-border-width-hairline) dotted var(--wm-separator-strong);
  }

  /* DE ONDE veio o registro — sempre visível. */
  .wm-crm-activity-log__source {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-2);
    padding-inline: var(--wm-space-3);
    height: 18px;
    border-radius: var(--wm-radius-pill);
    background: var(--wm-fill-quaternary);
    color: var(--wm-label-tertiary);
    font-size: var(--wm-font-size-caption2);
  }
  .wm-crm-activity-log__source .wm-icon {
    width: var(--wm-icon-xs);
    height: var(--wm-icon-xs);
  }

  /* Agendada: ainda vai acontecer. Contorno em vez de preenchimento — o que
     já aconteceu é fato, o que vai acontecer é intenção. */
  .wm-crm-activity-log__item--agendada {
    background: transparent;
    box-shadow: inset 0 0 0 var(--wm-border-width-thin) var(--wm-separator-strong);
  }
  .wm-crm-activity-log__item--agendada .wm-crm-activity-log__item-icon {
    background: var(--wm-accent-fill);
    color: var(--wm-accent-text);
  }

  /* Vencida: promessa quebrada com o cliente. Erro, não aviso. */
  .wm-crm-activity-log__item--vencida {
    background: var(--wm-error-fill);
    box-shadow: inset 0 0 0 var(--wm-border-width-thin) var(--wm-error);
  }
  .wm-crm-activity-log__item--vencida .wm-crm-activity-log__item-icon {
    background: var(--wm-error);
    color: var(--wm-label-on-accent);
  }
  .wm-crm-activity-log__item--vencida .wm-crm-activity-log__item-meta {
    color: var(--wm-error);
    font-weight: var(--wm-font-weight-medium);
  }

  /* Nenhum próximo passo agendado — ocupa lugar de item de verdade. */
  .wm-crm-activity-log__gap {
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-5);
    padding: var(--wm-space-5) var(--wm-space-6);
    border-radius: var(--wm-radius-md);
    border: var(--wm-border-width-thin) dashed var(--wm-warning);
    background: var(--wm-warning-fill);
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-line-height-relaxed);
    color: var(--wm-warning);
  }
  .wm-crm-activity-log__gap .wm-icon {
    flex: none;
    width: var(--wm-icon-sm);
    height: var(--wm-icon-sm);
    margin-block-start: var(--wm-space-1);
  }

  .wm-crm-activity-log__empty {
    padding: var(--wm-space-9) var(--wm-space-6);
    border-radius: var(--wm-radius-md);
    border: var(--wm-border-width-thin) dashed var(--wm-separator-strong);
    text-align: center;
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-line-height-relaxed);
    color: var(--wm-label-tertiary);
  }

  /* [hidden] vence toda classe daqui que define display. */
  .wm-crm-activity-log__form[hidden],
  .wm-crm-activity-log__gap[hidden],
  .wm-crm-activity-log__empty[hidden],
  .wm-crm-activity-log__feed[hidden] {
    display: none;
  }

  /* ==========================================================
     ESTREITO — reage ao CONTÊINER. Regras nos FILHOS.
     ========================================================== */
  @container wm-crm-activity-log (max-width: 560px) { /* --wm-bp-sm */
    .wm-crm-activity-log__row > .wm-crm-activity-log__field {
      flex: 1 1 100%;
    }
    .wm-crm-activity-log__header {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  @container wm-crm-activity-log (max-width: 420px) { /* --wm-bp-xs */
    .wm-crm-activity-log__item {
      padding: var(--wm-space-5);
      gap: var(--wm-space-4);
    }
    .wm-crm-activity-log__kind {
      padding-inline: var(--wm-space-4);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-crm-activity-log__kind {
      transition: none;
    }
  }
}