/*
  Wortic macOS UI Kit — CRM Pipeline Board
  wm-crm-pipeline-board — pipeline de NEGOCIAÇÕES (deals) com colunas que a
  própria pessoa cria/renomeia/reordena/remove. Categoria "crm" (B32).

  Território: NÃO é o mesmo componente que components/kanban-board (mind-tools,
  B30) — aquele é um board de TAREFAS de 3 colunas FIXAS
  (--todo/--doing/--done, classes hardcoded, sem chrome de customização de
  coluna nenhum). Aqui a customização de coluna É o produto: por isso existe
  wm-crm-pipeline-board__column-header (draggable, vira alça de reordenar),
  wm-crm-pipeline-board__column-rename (formulário inline) e
  wm-crm-pipeline-board__add-column (a coluna-fantasma no fim da fileira).
  Idioma de interação herdado do kanban-board como REFERÊNCIA (não como
  código copiado): cartão inteiro é a alça de arrastar, e toda ação por
  mouse tem uma via por teclado que chama a MESMA função — aqui isso vale
  duas vezes, para mover CARTÃO entre colunas (select "mover para", igual
  ao kanban-board) e para mover COLUNA na fileira (itens "Mover para
  esquerda/direita" no menu "...", que o kanban-board não precisa ter
  porque as três colunas dele nunca mudam de ordem).

  Colunas ficam em fileira horizontal com rolagem (não empilham em 1 coluna
  no mobile como o kanban-board) — de propósito: aqui o número de colunas é
  arbitrário e definido pela pessoa, empilhar N colunas verticais faria uma
  rolagem enorme; rolar OS CABEÇALHOS na horizontal deixa a largura de cada
  coluna estável em qualquer contagem de colunas.
*/

@layer components {
  .wm-crm-pipeline-board {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-7);
  }

  .wm-crm-pipeline-board__header {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-2);
  }
  .wm-crm-pipeline-board__title {
    margin: 0;
    font-size: var(--wm-font-size-title2);
    line-height: var(--wm-leading-title2);
    letter-spacing: var(--wm-tracking-title2);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
  }
  .wm-crm-pipeline-board__context {
    margin: 0;
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-line-height-relaxed);
    color: var(--wm-label-secondary);
    max-width: 62ch;
  }

  /* ------------------------------------------------------------
     Fileira de colunas — rolagem horizontal, largura de coluna
     estável independente de quantas colunas existem.
     ------------------------------------------------------------ */
  .wm-crm-pipeline-board__columns {
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-6);
    overflow-x: auto;
    padding-block-end: var(--wm-space-3);
    scroll-padding-inline: var(--wm-space-3);
  }

  .wm-crm-pipeline-board__column {
    flex: 0 0 288px;
    width: 288px;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-4);
    padding: var(--wm-space-5);
    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);
    transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard);
  }
  /* Alvo de drop durante o arrasto de OUTRA coluna (reordenar). */
  .wm-crm-pipeline-board__column.is-column-drop-target {
    box-shadow: inset 0 0 0 var(--wm-border-width-thin) var(--wm-accent);
  }
  .wm-crm-pipeline-board__column.is-dragging {
    opacity: 0.55;
  }

  .wm-crm-pipeline-board__column-header {
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
    cursor: grab;
  }
  .wm-crm-pipeline-board__column-header:active {
    cursor: grabbing;
  }
  /* Enquanto o form de renomear está de pé (2 linhas: campo + ações), o
     contador e o "…" ficam ancorados no TOPO, ao lado do campo — centro
     verticalizava os dois no meio do form inteiro, perto dos botões, o
     que lia estranho (achado no print, não no HTML estático). */
  .wm-crm-pipeline-board__column-header:has(.wm-crm-pipeline-board__column-rename:not([hidden])) {
    align-items: flex-start;
  }
  .wm-crm-pipeline-board__column-header:has(.wm-crm-pipeline-board__column-rename:not([hidden]))
    .wm-crm-pipeline-board__column-count,
  .wm-crm-pipeline-board__column-header:has(.wm-crm-pipeline-board__column-rename:not([hidden]))
    .wm-crm-pipeline-board__column-menu-trigger {
    margin-block-start: var(--wm-space-1);
  }

  .wm-crm-pipeline-board__column-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start;
    margin: 0;
    padding: var(--wm-space-1) var(--wm-space-2);
    border: none;
    border-radius: var(--wm-radius-xs);
    background: transparent;
    font-size: var(--wm-font-size-headline);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
    cursor: text;
    transition: background var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-crm-pipeline-board__column-title:hover {
    background: var(--wm-fill-tertiary);
  }

  /* Form de renomear — troca de lugar com o título (nunca os dois juntos).
     Empilhado (campo em cima, ações embaixo): a coluna tem só 288px, e
     campo + "Salvar" + "Cancelar" lado a lado nessa largura vazava para
     fora da coluna — achado no print, não no HTML estático. */
  .wm-crm-pipeline-board__column-rename {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--wm-space-3);
  }
  .wm-crm-pipeline-board__column-rename-field {
    width: 100%;
  }
  .wm-crm-pipeline-board__column-rename-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--wm-space-2);
  }

  .wm-crm-pipeline-board__column-count {
    flex: none;
    min-width: 22px;
    height: 20px;
    padding-inline: var(--wm-space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wm-radius-pill);
    background: var(--wm-fill-tertiary);
    color: var(--wm-label-secondary);
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-semibold);
    font-variant-numeric: tabular-nums;
  }

  .wm-crm-pipeline-board__column-menu-trigger {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wm-control-height-xs);
    height: var(--wm-control-height-xs);
    border: none;
    border-radius: var(--wm-radius-xs);
    background: transparent;
    color: var(--wm-label-tertiary);
    cursor: pointer;
    transition: background var(--wm-duration-fast) var(--wm-ease-standard),
      color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-crm-pipeline-board__column-menu-trigger:hover,
  .wm-crm-pipeline-board__column-menu-trigger[aria-expanded="true"] {
    background: var(--wm-fill-tertiary);
    color: var(--wm-label-secondary);
  }
  .wm-crm-pipeline-board__column-menu-trigger .wm-icon {
    width: var(--wm-icon-sm);
    height: var(--wm-icon-sm);
  }

  /* Valor somado da coluna — segunda linha do cabeçalho, texto puro. */
  .wm-crm-pipeline-board__column-value {
    margin: 0;
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-medium);
    font-variant-numeric: tabular-nums;
    color: var(--wm-label-tertiary);
  }

  /* Lista de cartões — altura mínima para continuar como alvo de drop
     visível mesmo vazia. */
  .wm-crm-pipeline-board__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-4);
    min-height: 64px;
    border-radius: var(--wm-radius-md);
    transition: background var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-crm-pipeline-board__list.is-drop-target {
    background: var(--wm-accent-fill);
    box-shadow: inset 0 0 0 var(--wm-border-width-thin) var(--wm-accent);
  }

  /* ------------------------------------------------------------
     Cartão de negociação.
     ------------------------------------------------------------ */
  .wm-crm-pipeline-board__card {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-3);
    padding: var(--wm-space-5);
    background: var(--wm-surface-primary);
    border-radius: var(--wm-radius-md);
    box-shadow:
      inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1);
    cursor: grab;
  }
  .wm-crm-pipeline-board__card:active {
    cursor: grabbing;
  }
  .wm-crm-pipeline-board__card.is-dragging {
    opacity: 0.55;
    box-shadow: inset 0 0 0 var(--wm-border-width-thin) var(--wm-accent);
  }

  .wm-crm-pipeline-board__card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wm-space-3);
  }
  .wm-crm-pipeline-board__card-title {
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-line-height-relaxed);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-label-primary);
  }
  .wm-crm-pipeline-board__card-value {
    font-size: var(--wm-font-size-body);
    font-weight: var(--wm-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--wm-label-primary);
  }

  .wm-crm-pipeline-board__card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wm-space-3);
  }
  .wm-crm-pipeline-board__card-date {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
  }

  .wm-crm-pipeline-board__card-footer {
    padding-block-start: var(--wm-space-3);
    border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
  }
  .wm-crm-pipeline-board__move {
    width: 100%;
  }

  /* Coluna vazia — convite, nunca "0" sozinho. */
  .wm-crm-pipeline-board__empty {
    padding: var(--wm-space-5);
    border-radius: var(--wm-radius-md);
    border: var(--wm-border-width-thin) dashed var(--wm-separator-strong);
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-line-height-relaxed);
    color: var(--wm-label-tertiary);
    text-align: center;
  }

  /* ------------------------------------------------------------
     Coluna-fantasma "+ Nova coluna" — sempre a última da fileira.
     ------------------------------------------------------------ */
  .wm-crm-pipeline-board__add-column {
    flex: 0 0 288px;
    width: 288px;
    align-self: stretch;
    display: flex;
    align-items: flex-start;
  }
  .wm-crm-pipeline-board__add-column-trigger {
    width: 100%;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wm-space-3);
    padding: var(--wm-space-5);
    border: var(--wm-border-width-thin) dashed var(--wm-separator-strong);
    border-radius: var(--wm-radius-panel);
    background: transparent;
    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),
      border-color var(--wm-duration-fast) var(--wm-ease-standard),
      color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-crm-pipeline-board__add-column-trigger:hover {
    background: var(--wm-fill-quaternary);
    border-color: var(--wm-accent);
    color: var(--wm-accent-text);
  }
  .wm-crm-pipeline-board__add-column-trigger .wm-icon {
    width: var(--wm-icon-sm);
    height: var(--wm-icon-sm);
  }

  .wm-crm-pipeline-board__add-column-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-4);
    padding: var(--wm-space-5);
    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-pipeline-board__add-column-actions {
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
  }
  .wm-crm-pipeline-board__add-column-actions .wm-button {
    flex: 1 1 auto;
  }

  /* [hidden] vence toda classe daqui que define display (lição do ícone
     duplo de 08/08/2026 — icons/icon.css). */
  .wm-crm-pipeline-board__column-title[hidden],
  .wm-crm-pipeline-board__column-rename[hidden],
  .wm-crm-pipeline-board__empty[hidden],
  .wm-crm-pipeline-board__add-column-trigger[hidden],
  .wm-crm-pipeline-board__add-column-form[hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-crm-pipeline-board__column,
    .wm-crm-pipeline-board__list,
    .wm-crm-pipeline-board__column-title,
    .wm-crm-pipeline-board__column-menu-trigger,
    .wm-crm-pipeline-board__add-column-trigger {
      transition: none;
    }
  }
}