/*
  Wortic macOS UI Kit — CRM Contact Card
  wm-crm-contact-card — a ficha de UMA pessoa ou de UMA empresa. Categoria "crm".

  A regra que dá forma ao componente inteiro: CONTATO SEM FORMA DE CONTATO NÃO
  É CONTATO. O gerador recusa emitir a ficha sem pelo menos um canal, e o CSS
  trata o canal como o CORPO do cartão — não como um rodapé opcional. É por
  isso que `__channels` fica logo abaixo da identidade, com alvo de toque de
  --wm-control-height-md, e não escondido atrás de um "ver detalhes".

  Canal que não funciona também é informação: `__channel--invalido` risca o
  valor, tira o link e diz o motivo com a data em que se descobriu. Um e-mail
  que voltou continua na ficha; some dela é que não pode — some da ficha e a
  próxima pessoa tenta o mesmo e-mail de novo.

  Quando TODOS os canais estão inválidos, `__alert` aparece no topo: a ficha
  existe, mas ninguém consegue falar com essa pessoa, e isso é a coisa mais
  importante da tela naquele momento.

  Composição: wm-avatar / wm-avatar-group para as pessoas, wm-badge e wm-tag
  para papel e etiquetas. Nenhum dos dois redesenhado aqui.
*/

@layer components {
  .wm-crm-contact-card {
    container-type: inline-size;
    container-name: wm-crm-contact-card;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-6);
    padding: var(--wm-space-8);
    background: var(--wm-surface-primary);
    border-radius: var(--wm-radius-panel);
    box-shadow:
      inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1);
  }

  /* ------------------------------------------------------------
     Alerta de "ninguém consegue falar com essa pessoa".
     ------------------------------------------------------------ */
  .wm-crm-contact-card__alert {
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-4);
    padding: var(--wm-space-5) var(--wm-space-6);
    border-radius: var(--wm-radius-md);
    background: var(--wm-error-fill);
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-line-height-relaxed);
    color: var(--wm-error);
  }
  .wm-crm-contact-card__alert .wm-icon {
    flex: none;
    width: var(--wm-icon-sm);
    height: var(--wm-icon-sm);
    margin-block-start: var(--wm-space-1);
  }

  /* ------------------------------------------------------------
     Identidade.
     ------------------------------------------------------------ */
  .wm-crm-contact-card__top {
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-6);
  }
  .wm-crm-contact-card__identity {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-2);
  }
  .wm-crm-contact-card__name {
    margin: 0;
    font-size: var(--wm-font-size-title3);
    line-height: var(--wm-leading-title3);
    letter-spacing: var(--wm-tracking-title3);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
  }
  .wm-crm-contact-card__role {
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-line-height-relaxed);
    color: var(--wm-label-secondary);
  }
  .wm-crm-contact-card__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wm-space-2);
    margin-block-start: var(--wm-space-1);
  }

  /* ------------------------------------------------------------
     Canais — o corpo do cartão, nunca um apêndice.
     ------------------------------------------------------------ */
  .wm-crm-contact-card__channels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-1);
  }
  .wm-crm-contact-card__channel {
    display: flex;
    align-items: center;
    gap: var(--wm-space-4);
    min-height: var(--wm-control-height-md);
    padding-inline: var(--wm-space-3);
    border-radius: var(--wm-radius-sm);
  }
  .wm-crm-contact-card__channel-icon {
    flex: none;
    width: var(--wm-icon-sm);
    height: var(--wm-icon-sm);
    color: var(--wm-label-tertiary);
  }
  .wm-crm-contact-card__channel-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-1);
  }
  /* SEM reticências. A primeira versão tinha `white-space: nowrap` +
     `text-overflow: ellipsis` nos dois — a varredura de 390px pegou o
     endereço da ficha de empresa vazando 28px e sendo cortado. E cortar aqui
     é pior do que parece: meio e-mail e meio endereço são exatamente o tipo
     de tela que fica arrumada e não serve para nada. Aqui a linha quebra e a
     ficha cresce; o alvo de toque continua garantido pelo min-height. */
  .wm-crm-contact-card__channel-link {
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-line-height-relaxed);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-accent-text);
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  .wm-crm-contact-card__channel-link:hover {
    text-decoration: underline;
  }
  .wm-crm-contact-card__channel-link:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
    border-radius: var(--wm-radius-xs);
  }
  .wm-crm-contact-card__channel-text {
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-line-height-relaxed);
    color: var(--wm-label-primary);
    overflow-wrap: anywhere;
  }
  .wm-crm-contact-card__channel-note {
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-leading-caption);
    color: var(--wm-label-tertiary);
  }
  /* tertiary, não quaternary: no print de 09/08/2026 o rótulo do tipo
     ("telefone", "e-mail") sumia sobre o branco. Ele é redundante com o
     ícone, mas texto ilegível na tela não é "discreto", é lixo visual. */
  .wm-crm-contact-card__channel-kind {
    flex: none;
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
  }

  .wm-crm-contact-card__channel--principal {
    background: var(--wm-accent-fill);
  }
  .wm-crm-contact-card__channel--principal .wm-crm-contact-card__channel-icon {
    color: var(--wm-accent-text);
  }

  /* Canal que não funciona: continua na ficha, riscado, sem link e com o
     motivo. Sumir com ele faz a próxima pessoa tentar o mesmo número. */
  .wm-crm-contact-card__channel--invalido .wm-crm-contact-card__channel-text {
    text-decoration: line-through;
    color: var(--wm-label-tertiary);
  }
  .wm-crm-contact-card__channel--invalido .wm-crm-contact-card__channel-icon {
    color: var(--wm-error);
  }
  .wm-crm-contact-card__channel--invalido .wm-crm-contact-card__channel-note {
    color: var(--wm-error);
  }

  /* ------------------------------------------------------------
     Rodapé de fatos — último contato, vínculos.
     ------------------------------------------------------------ */
  .wm-crm-contact-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wm-space-3) var(--wm-space-6);
    padding-block-start: var(--wm-space-5);
    border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-leading-caption);
    color: var(--wm-label-tertiary);
  }
  .wm-crm-contact-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-2);
  }
  .wm-crm-contact-card__meta-item .wm-icon {
    width: var(--wm-icon-xs);
    height: var(--wm-icon-xs);
  }
  .wm-crm-contact-card__meta-item--alerta {
    color: var(--wm-warning);
    font-weight: var(--wm-font-weight-medium);
  }
  .wm-crm-contact-card__meta-item time {
    border-block-end: var(--wm-border-width-hairline) dotted var(--wm-separator-strong);
  }

  .wm-crm-contact-card__links {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-3);
  }
  .wm-crm-contact-card__links-title {
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-leading-caption);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-label-tertiary);
  }
  .wm-crm-contact-card__link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-2);
  }
  .wm-crm-contact-card__link-item {
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-line-height-relaxed);
    color: var(--wm-label-primary);
  }
  .wm-crm-contact-card__link-role {
    color: var(--wm-label-tertiary);
  }

  .wm-crm-contact-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wm-space-3);
  }

  /* [hidden] vence toda classe daqui que define display. */
  .wm-crm-contact-card__alert[hidden],
  .wm-crm-contact-card__tags[hidden],
  .wm-crm-contact-card__links[hidden],
  .wm-crm-contact-card__meta[hidden] {
    display: none;
  }

  /* ==========================================================
     ESTREITO — reage ao CONTÊINER. Regras nos FILHOS.
     ========================================================== */
  @container wm-crm-contact-card (max-width: 420px) { /* --wm-bp-xs */
    .wm-crm-contact-card__channel-kind {
      display: none;
    }
    .wm-crm-contact-card__top {
      gap: var(--wm-space-4);
    }
    .wm-crm-contact-card__meta {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--wm-space-2);
    }
  }
}