/*
  ÁREA TAREFAS — UNICHAT-KANBAN-AGENDA-TAREFAS-VISUAL-ASSISTED-CONVERGENCE-01.

  O arquivo anterior abria dizendo, como decisão de projeto:
  "Reaproveita tokens --crm-* e classes genericas kanban-field/kanban-primary-button/kanban-modal*
   ja definidas em crm-kanban.css".
  Isso é literalmente a proibição 1 do contrato (§7.1: "empréstimo de CSS de outra feature… é a
  causa número um da incoerência do UniChat e é proibido sem exceção"). Os botões, campos e modais
  passaram para a camada canônica; aqui fica só a composição do quadro e da agenda.

  Valores fora da escada que existiam aqui e saíram: 9px, 10px, 10.5px, 11px, 11.5px, 12px, 13.5px,
  14px, 84px, 30px, 5px 9px — mais `--crm-radius-sm` em card (VL-07 manda `lg`) e sombra somada a
  borda num elemento que não flutua (VL-08).
*/

.crm-tasks-page {
    /* Medida de leitura da Lista — a linha corrida e a barra que a filtra terminam na mesma coluna. */
    --crm-tasks-measure: 900px;
}

/* ---------- Faixa de modos (Quadro | Lista | Agenda) ---------- */
.crm-tasks-modes { margin-bottom: var(--uni-space-4); }

.crm-tasks-toolbar { align-items: center; }

.crm-tasks-mode-hint {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
}

/* ---------- Quadro por status ----------
   A geometria do quadro vive na camada da rodada 2 (bloco "Quadro em kanban de verdade"), que
   troca a grade de 4 colunas fixas por trilha rolável. O que sobra aqui é o interior da coluna. */

.crm-tasks-column {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 200px;
    border: 1px solid var(--uni-color-border);
    /* VL-07 — a coluna é um card: raio `lg`. */
    border-radius: var(--uni-radius-lg);
    background: color-mix(in srgb, var(--uni-color-app-bg) 82%, var(--uni-color-surface) 18%);
    overflow: hidden;
}

.crm-tasks-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-3);
    padding: var(--uni-space-3) var(--uni-space-4);
    border-bottom: 1px solid var(--uni-color-border);
    background: var(--uni-color-surface);
}

.crm-tasks-column-header h2 {
    margin: 0;
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    color: var(--uni-color-text);
    user-select: none;
}

/* VL-36 — o contador da coluna é pílula, `2xs`, peso 600. */
.crm-tasks-count {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px var(--uni-space-3);
    border-radius: var(--uni-radius-pill);
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary-soft-text);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

.crm-tasks-column-body {
    display: grid;
    gap: var(--uni-space-2);
    align-content: start;
    padding: var(--uni-space-3);
    overflow-y: auto;
    background: color-mix(in srgb, var(--uni-color-app-bg) 78%, var(--uni-color-surface) 22%);
}

.crm-tasks-column-empty {
    margin: 0;
    padding: var(--uni-space-4);
    border: 1px dashed var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
    text-align: center;
}

.crm-tasks-column-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-2);
    min-height: 42px;
    padding: 0 var(--uni-space-3);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    user-select: none;
}

/* ---------- Card de tarefa ---------- */
.crm-tasks-card {
    display: grid;
    gap: var(--uni-space-2);
    border: 1px solid var(--uni-color-border);
    /* VL-07 — raio interno menor que o da coluna. VL-08 — borda OU sombra. */
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    color: var(--uni-color-text);
    padding: var(--uni-space-3);
}

.crm-tasks-card.is-highlighted {
    border-color: var(--uni-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--uni-color-primary) 22%, transparent);
}

.crm-tasks-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--uni-space-2);
}

.crm-tasks-card-top h3 {
    margin: 0;
    min-width: 0;
    font-size: var(--uni-font-size-md);
    line-height: 1.2;
    font-weight: 600;
    color: var(--uni-color-text);
    /* VL-04 — prévia de duas linhas; o título completo fica no `title`. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.crm-tasks-card-description {
    margin: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.crm-tasks-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uni-space-2);
}

.crm-tasks-card-facts {
    display: grid;
    gap: var(--uni-space-1);
    margin: 0;
}

.crm-tasks-card-facts div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: var(--uni-space-2);
}

.crm-tasks-card-facts dt {
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    user-select: none;
}

.crm-tasks-card-facts dd {
    margin: 0;
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-sm);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* VL-25 — dado é conteúdo: copiar continua permitido. */
    user-select: text;
}

.crm-tasks-link { color: var(--uni-color-primary); text-decoration: none; }
.crm-tasks-link:hover { text-decoration: underline; }

.crm-tasks-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--uni-space-2);
}

.crm-tasks-card-closed {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
}

@media (max-width: 1023px) {
    .crm-tasks-board { display: none; }
}

/* ---------- Composição mobile (UNICHAT-MOBILE-UX-ARCHITECTURE-01 / B5) ---------- */
.crm-tasks-mobile { display: none; }

@media (max-width: 1023px) {
    .crm-tasks-mobile { display: flex; flex-direction: column; gap: var(--uni-space-3); }
    .crm-tasks-mobile .uni-scan-row.is-highlighted {
        border-color: var(--uni-color-primary);
        box-shadow: 0 0 0 2px var(--uni-color-primary-soft);
    }
    .crm-tasks-detail-body { padding: var(--uni-space-3) var(--uni-space-4); display: grid; gap: var(--uni-space-3); }
    .crm-tasks-detail .crm-tasks-card-facts { margin: 0; }
}

/* =====================================================================================
   MODO AGENDA — a mesma `CrmTask` lida por data.
   ===================================================================================== */

.crm-agenda-mode {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
}

.crm-agenda-periodbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--uni-space-3);
}

.crm-agenda-nav {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
}

.crm-agenda-period {
    min-width: 180px;
    text-align: center;
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    user-select: none;
}

.crm-agenda-muted {
    margin: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
}

.crm-agenda-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    /* MEDIDO: sem min-width 0 nos filhos, o min-content do painel do dia estoura a faixa. */
    min-width: 0;
    gap: var(--uni-space-4);
    align-items: start;
}

.crm-agenda-month-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--uni-space-2);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
    padding: var(--uni-space-4);
}

/* VL-03 — micro-label de cabeçalho de coluna. */
.crm-agenda-weekday {
    text-align: center;
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--uni-color-text-muted);
    padding-bottom: var(--uni-space-1);
    user-select: none;
}

.crm-agenda-day-cell {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: var(--uni-space-1);
    min-height: 56px;
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    color: var(--uni-color-text);
    padding: var(--uni-space-2) var(--uni-space-1);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.14s ease, border-color 0.14s ease;
}

.crm-agenda-day-cell:hover {
    border-color: var(--uni-color-primary);
    background: color-mix(in srgb, var(--uni-color-primary-soft) 40%, var(--uni-color-surface));
}

.crm-agenda-day-cell:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

.crm-agenda-day-cell.is-outside-month {
    color: var(--uni-color-text-subtle);
    background: color-mix(in srgb, var(--uni-color-app-bg) 60%, var(--uni-color-surface) 40%);
}

.crm-agenda-day-cell.is-today { border-color: var(--uni-color-primary); }

/* VL-24 — selecionado ≠ hover: marcador persistente. */
.crm-agenda-day-cell.is-selected {
    border-color: var(--uni-color-primary);
    background: var(--uni-color-primary-soft);
    box-shadow: inset 0 -3px 0 0 var(--uni-color-primary);
}

.crm-agenda-day-cell.has-items .crm-agenda-day-number { font-weight: 700; }

.crm-agenda-day-number { font-size: var(--uni-font-size-sm); }

.crm-agenda-day-count {
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--uni-radius-pill);
    background: var(--uni-color-primary);
    color: var(--uni-color-on-primary);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    padding: 0 var(--uni-space-1);
}

.crm-agenda-day-cell.is-selected .crm-agenda-day-count {
    background: var(--uni-color-on-primary);
    color: var(--uni-color-primary);
}

.crm-agenda-day-panel {
    min-width: 0;
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
    padding: var(--uni-space-4);
}

.crm-agenda-day-panel h2 {
    margin: 0 0 var(--uni-space-3);
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    color: var(--uni-color-text);
}

.crm-agenda-item-list {
    display: grid;
    /* MEDIDO: sem a faixa explícita, a coluna implícita é `auto` = min-content, e o <li> nasce
       com 484px dentro de um viewport de 390 — o item nunca encolhe e leva a lista junto. */
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: var(--uni-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-agenda-item-list > li { min-width: 0; }

.crm-agenda-group {
    margin: var(--uni-space-4) 0 var(--uni-space-2);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    user-select: none;
}

.crm-agenda-group:first-child { margin-top: 0; }

/* VL-17 — a linha carrega hora, identificação + metadado, e no máximo um indicador. */
.crm-agenda-item {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: var(--uni-space-3);
    width: 100%;
    min-height: 56px;
    text-align: left;
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    color: var(--uni-color-text);
    padding: var(--uni-space-2) var(--uni-space-3);
    cursor: pointer;
    transition: background-color 0.14s ease, border-color 0.14s ease;
}

.crm-agenda-item:hover {
    border-color: var(--uni-color-primary);
    background: color-mix(in srgb, var(--uni-color-primary-soft) 40%, var(--uni-color-surface));
}

.crm-agenda-item:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

.crm-agenda-item-time {
    flex: 0 0 auto;
    min-width: 64px;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.crm-agenda-item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.crm-agenda-item-body strong {
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-agenda-item-body small {
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-agenda-item.is-overdue { border-color: var(--uni-color-danger); }
.crm-agenda-item.is-overdue .crm-agenda-item-time { color: var(--uni-color-danger); }

.crm-agenda-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--uni-space-2);
}

.crm-agenda-week-column {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
    padding: var(--uni-space-3);
    min-height: 160px;
}

.crm-agenda-week-column header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-bottom: var(--uni-space-1);
    border-bottom: 1px solid var(--uni-color-border);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
}

.crm-agenda-week-column header.is-today { color: var(--uni-color-primary); }

.crm-agenda-week-column header strong {
    font-size: var(--uni-font-size-lg);
    color: var(--uni-color-text);
}

.crm-agenda-week-column .crm-agenda-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--uni-space-1);
    min-height: 0;
}

.crm-agenda-week-column .crm-agenda-item-time { min-width: 0; }

.crm-agenda-day-full {
    display: flex;
    flex-direction: column;
    max-width: 720px;
}

@media (max-width: 1023px) {
    .crm-agenda-layout { grid-template-columns: minmax(0, 1fr); }
    .crm-agenda-week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-agenda-periodbar { align-items: stretch; }
    .crm-agenda-nav { justify-content: space-between; width: 100%; }
    /* O rótulo de período era o que estourava a linha: some do mínimo fixo e passa a caber. */
    .crm-agenda-period { min-width: 0; }
    .crm-agenda-period { flex: 1 1 auto; }
}

@media (max-width: 767px) {
    .crm-agenda-week-grid { grid-template-columns: 1fr; }
    .crm-agenda-month-grid { padding: var(--uni-space-2); gap: var(--uni-space-1); }
    /* D-38 / VL-27 — alvo de toque mínimo de 44px no dia do mês. */
    .crm-agenda-day-cell { min-height: 48px; }
    .crm-agenda-item { min-height: 56px; }
}

/* =====================================================================================
   OWNER REVIEW — RODADA 2 · OR-5, OR-7 e OR-8
   ===================================================================================== */

/* ---------- A linha de trabalho, comum aos três modos ---------- */
.crm-task-rows {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--uni-space-2);
    min-width: 0;
}

.crm-task-row {
    display: flex;
    align-items: stretch;
    min-width: 0;
    border: 1px solid var(--uni-color-border);
    border-left: 3px solid var(--stage-color, var(--uni-color-primary));
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    overflow: hidden;
    transition: border-color 0.14s ease, background-color 0.14s ease;
}

.crm-task-row:hover {
    border-color: var(--uni-color-primary);
    background: color-mix(in srgb, var(--uni-color-primary-soft) 40%, var(--uni-color-surface));
}

.crm-task-row.is-closed { opacity: 0.7; }

.crm-task-row-main {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
    flex: 1 1 auto;
    /* OR-5 — sem `min-width: 0` o botão nunca encolhe abaixo do min-content do título, e o texto
       estoura a coluna. Foi exatamente o que aconteceu na visão de semana. */
    min-width: 0;
    padding: var(--uni-space-2) var(--uni-space-3);
    border: 0;
    background: transparent;
    color: var(--uni-color-text);
    text-align: left;
    cursor: pointer;
    font-family: var(--uni-font-family);
}

.crm-task-row-main:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: -2px;
}

.crm-task-row-time {
    flex: 0 0 auto;
    min-width: 46px;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.crm-task-row.is-overdue .crm-task-row-time { color: var(--uni-color-danger); }

.crm-task-row-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* VL-04 — identificação em uma linha, com `title` para o valor completo. */
.crm-task-row-body strong {
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    line-height: 1.35;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-task-row-body small {
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-task-row .app-badge { flex: 0 0 auto; }

.crm-task-row-actions {
    display: flex;
    align-items: center;
    gap: var(--uni-space-1);
    flex: 0 0 auto;
    padding-right: var(--uni-space-2);
}

/* Variante de célula: o que cabe em 1/7 da largura — VL-27. */
.crm-task-row.is-compact {
    border-left-width: 3px;
    border-radius: var(--uni-radius-sm);
}

.crm-task-row.is-compact .crm-task-row-main {
    gap: var(--uni-space-2);
    padding: var(--uni-space-1) var(--uni-space-2);
}

.crm-task-row.is-compact .crm-task-row-time {
    min-width: 0;
    font-size: var(--uni-font-size-2xs);
}

.crm-task-row.is-compact .crm-task-row-body strong { font-size: var(--uni-font-size-xs); }
.crm-task-row.is-compact .app-badge { display: none; }

/* ---------- Modo LISTA (OR-7) ---------- */
.crm-tasks-listview {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-5);
    max-width: var(--crm-tasks-measure);
}

/* A lista tem medida de leitura; a barra acima dela precisa terminar na mesma coluna, senão a
   borda direita fica serrilhada — busca em 1275px sobre linhas em 1004px. */
.crm-tasks-toolbar.is-measure { max-width: var(--crm-tasks-measure); }

.crm-tasks-daygroup {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    min-width: 0;
}

.crm-tasks-daygroup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-3);
    padding-bottom: var(--uni-space-2);
    border-bottom: 1px solid var(--uni-color-border);
}

.crm-tasks-daygroup-head h3 {
    margin: 0;
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    color: var(--uni-color-text);
}

.crm-tasks-daygroup-eyebrow {
    margin: 0 0 2px;
    color: var(--uni-color-primary);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    user-select: none;
}

.crm-tasks-daygroup-count {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px var(--uni-space-3);
    border-radius: var(--uni-radius-pill);
    background: var(--uni-color-neutral-soft);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    user-select: none;
}

.crm-tasks-list-foot {
    display: flex;
    justify-content: center;
    margin-top: var(--uni-space-4);
}

/* ---------- Modo QUADRO: kanban de verdade (OR-7) ---------- */
.crm-tasks-board-scroll {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: var(--uni-space-3);
}

.crm-tasks-board {
    display: grid;
    /* Trilha implícita: sem isto, qualquer `grid-template-columns` herdado casa com `width:
       max-content` e a coluna `1fr` estica até caber o título mais longo (medi 600px). */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, 340px);
    gap: var(--uni-space-4);
    align-items: start;
    width: max-content;
    min-width: 100%;
}

.crm-tasks-column {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 320px;
    max-height: calc(100vh - 320px);
    border: 0;
    /* VL-08 — mesma decisão do board de Oportunidades: sombra em vez de borda. */
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
    box-shadow: var(--uni-shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.16s ease;
}

.crm-tasks-column.is-drag-over {
    box-shadow: 0 0 0 2px var(--status-color, var(--uni-color-primary)), var(--uni-shadow-md);
}

.crm-tasks-column-header {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
    padding: var(--uni-space-3) var(--uni-space-4);
    border-bottom: 1px solid var(--uni-color-border);
}

.crm-tasks-column-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-color, var(--uni-color-primary));
    flex: 0 0 auto;
}

.crm-tasks-column-header h2 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    color: var(--uni-color-text);
    user-select: none;
}

.crm-tasks-count {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px var(--uni-space-3);
    border-radius: var(--uni-radius-pill);
    background: color-mix(in srgb, var(--status-color, var(--uni-color-primary)) 14%, var(--uni-color-surface));
    color: var(--status-color, var(--uni-color-primary));
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

.crm-tasks-column-body {
    display: grid;
    gap: var(--uni-space-2);
    align-content: start;
    padding: var(--uni-space-3);
    overflow-y: auto;
    background: color-mix(in srgb, var(--uni-color-app-bg) 55%, var(--uni-color-surface) 45%);
}

.crm-tasks-column-empty {
    margin: 0;
    padding: var(--uni-space-4);
    border: 1px dashed var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
    text-align: center;
}

.crm-tasks-column-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-2);
    padding-top: var(--uni-space-1);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    user-select: none;
}

/* ---------- Card do quadro ---------- */
.crm-tasks-card {
    display: grid;
    gap: var(--uni-space-2);
    border: 1px solid var(--uni-color-border);
    border-left: 3px solid var(--status-color, var(--uni-color-primary));
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    color: var(--uni-color-text);
    padding: var(--uni-space-3);
    cursor: grab;
    transition: border-color 0.14s ease, background-color 0.14s ease;
}

.crm-tasks-card:hover {
    border-color: var(--uni-color-primary);
    background: color-mix(in srgb, var(--uni-color-primary-soft) 40%, var(--uni-color-surface));
}

.crm-tasks-card:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

.crm-tasks-card.is-dragging { opacity: 0.45; }

.crm-tasks-card.is-highlighted {
    border-color: var(--uni-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--uni-color-primary) 22%, transparent);
}

.crm-tasks-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--uni-space-2);
}

.crm-tasks-card-top h3 {
    margin: 0;
    min-width: 0;
    font-size: var(--uni-font-size-md);
    line-height: 1.3;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.crm-tasks-card-when {
    display: flex;
    align-items: center;
    gap: var(--uni-space-1);
    margin: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
}

.crm-tasks-card-when .crm-icon { width: 14px; height: 14px; flex: 0 0 auto; }

.crm-tasks-card-meta {
    margin: 0;
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-sm);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: text;
}

.crm-tasks-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-2);
    min-width: 0;
}

.crm-tasks-card-owner {
    min-width: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-tasks-card-actions { display: flex; align-items: center; gap: var(--uni-space-1); flex: 0 0 auto; }

@media (max-width: 1023px) {
    .crm-tasks-board-scroll { display: none; }
}

/* ---------- Detalhe do item (OR-6) ---------- */
.crm-task-detail-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-3);
    margin-bottom: var(--uni-space-4);
}

.crm-task-detail-state { display: inline-flex; align-items: center; gap: var(--uni-space-2); }

.crm-task-detail-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-3);
    width: 100%;
    min-height: 56px;
    padding: var(--uni-space-2) var(--uni-space-3);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    color: var(--uni-color-text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.14s ease, background-color 0.14s ease;
}

.crm-task-detail-link:hover:not(:disabled) {
    border-color: var(--uni-color-primary);
    background: color-mix(in srgb, var(--uni-color-primary-soft) 40%, var(--uni-color-surface));
}

.crm-task-detail-link:disabled { opacity: 0.5; cursor: not-allowed; }
.crm-task-detail-link:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: 2px; }

.crm-task-detail-link-body { display: flex; flex-direction: column; min-width: 0; }
.crm-task-detail-link-body strong { font-size: var(--uni-font-size-md); font-weight: 600; }
.crm-task-detail-link-body small { font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); }

.crm-task-detail-note {
    margin: var(--uni-space-4) 0 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
    line-height: 1.45;
}

/* =====================================================================================
   OR-8 — CALENDÁRIO

   A referência citada pelo proprietário é o `CoursesCalendarMonthView` do UniCursos: grade de
   1px sobre o fundo da borda (hairline sem borda dupla), célula alta o bastante para mostrar os
   compromissos, e "+N" quando não cabem. O que este calendário faz a mais: pílula por item com
   hora e título, tom semântico por estado, e o painel do dia que abre no clique e fecha no `×`.
   ===================================================================================== */

.crm-agenda-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--uni-space-4);
    align-items: start;
    min-width: 0;
}

.crm-agenda-layout.has-panel {
    /* Duas linhas: o cabeçalho dos dias da semana e a grade. O painel do dia mora na linha da
       GRADE, e não em 1/-1 — senão sua borda superior nasce na altura de "DOM/SEG", ~37px acima
       do primeiro dia do mês, e as duas superfícies não se leem como uma. */
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    grid-template-rows: auto 1fr;
}

.crm-agenda-layout .crm-agenda-weekdays { grid-column: 1; grid-row: 1; }
.crm-agenda-layout .crm-agenda-month-grid { grid-column: 1; grid-row: 2; }
.crm-agenda-layout.has-panel .crm-agenda-day-panel { grid-column: 2; grid-row: 2; align-self: start; }

.crm-agenda-month { min-width: 0; }

.crm-agenda-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: var(--uni-space-2);
    padding: 0 var(--uni-space-1);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    user-select: none;
}

/* O `gap: 1px` sobre o fundo da borda desenha a régua sem somar bordas — é o truque do
   calendário do UniCursos, e evita a borda dupla que VL-06 proíbe. */
.crm-agenda-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    min-width: 0;
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-border);
    box-shadow: var(--uni-shadow-sm);
    overflow: hidden;
}

.crm-agenda-day-cell {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    align-items: stretch;
    min-width: 0;
    min-height: 118px;
    padding: var(--uni-space-2);
    border: 0;
    background: var(--uni-color-surface);
    color: var(--uni-color-text);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.14s ease;
}

.crm-agenda-day-cell:hover {
    background: color-mix(in srgb, var(--uni-color-primary-soft) 45%, var(--uni-color-surface));
}

.crm-agenda-day-cell:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: -2px;
}

.crm-agenda-day-cell.is-outside-month {
    background: color-mix(in srgb, var(--uni-color-app-bg) 70%, var(--uni-color-surface));
    color: var(--uni-color-text-subtle);
}

.crm-agenda-day-cell.is-today { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--uni-color-primary) 45%, transparent); }

/* VL-24 — selecionado ≠ hover: marcador persistente. */
.crm-agenda-day-cell.is-selected {
    background: var(--uni-color-primary-soft);
    box-shadow: inset 0 0 0 2px var(--uni-color-primary);
}

.crm-agenda-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-1);
    min-width: 0;
}

.crm-agenda-day-number {
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.crm-agenda-today {
    padding: 1px var(--uni-space-2);
    border-radius: var(--uni-radius-pill);
    background: var(--uni-color-primary);
    color: var(--uni-color-on-primary);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    line-height: 1.4;
}

.crm-agenda-day-more {
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
}

.crm-agenda-day-items {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* A pílula é a menor unidade de leitura do mês: hora + título, tom pelo estado. */
.crm-agenda-pill {
    display: flex;
    align-items: baseline;
    gap: var(--uni-space-1);
    min-width: 0;
    padding: 2px var(--uni-space-2);
    border-radius: var(--uni-radius-sm);
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary-soft-text);
    font-size: var(--uni-font-size-2xs);
    line-height: 1.4;
}

.crm-agenda-pill.is-activity { background: var(--uni-color-info-soft); color: var(--uni-color-info); }
.crm-agenda-pill.is-overdue { background: var(--uni-color-danger-soft); color: var(--uni-color-danger); }
.crm-agenda-pill.is-closed { background: var(--uni-color-success-soft); color: var(--uni-color-success); }

.crm-agenda-pill-time { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }

.crm-agenda-pill-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Painel do dia (OR-8) ---------- */
.crm-agenda-day-panel {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
    min-width: 0;
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
    box-shadow: var(--uni-shadow-sm);
    padding: var(--uni-space-4);
}

.crm-agenda-day-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--uni-space-3);
}

.crm-agenda-day-panel-head h2 {
    margin: 0;
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    color: var(--uni-color-text);
}

.crm-agenda-day-panel-eyebrow {
    margin: 0 0 2px;
    color: var(--uni-color-primary);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    user-select: none;
}

/* ---------- Semana ---------- */
.crm-agenda-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--uni-space-2);
    min-width: 0;
}

.crm-agenda-week-column {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    min-width: 0;
    min-height: 180px;
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
    box-shadow: var(--uni-shadow-sm);
    padding: var(--uni-space-2);
}

.crm-agenda-week-column > header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-bottom: var(--uni-space-2);
    border-bottom: 1px solid var(--uni-color-border);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    user-select: none;
}

.crm-agenda-week-column > header strong {
    font-size: var(--uni-font-size-lg);
    color: var(--uni-color-text);
    font-variant-numeric: tabular-nums;
}

.crm-agenda-week-column.is-today > header { color: var(--uni-color-primary); }
.crm-agenda-week-column.is-today > header strong { color: var(--uni-color-primary); }
.crm-agenda-week-column.is-today { box-shadow: 0 0 0 2px color-mix(in srgb, var(--uni-color-primary) 40%, transparent), var(--uni-shadow-sm); }

.crm-agenda-week-empty {
    margin: auto 0;
    text-align: center;
    color: var(--uni-color-text-subtle);
}

/* ---------- Dia ---------- */
.crm-agenda-day-full {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    max-width: 900px;
    min-width: 0;
}

.crm-agenda-group {
    margin: var(--uni-space-4) 0 var(--uni-space-1);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    user-select: none;
}

.crm-agenda-group:first-child { margin-top: 0; }

@media (max-width: 1023px) {
    /* Coluna única: o painel do dia desce para baixo da grade. É preciso desfazer o `grid-column: 2`
       do desktop — senão o painel abre uma coluna implícita `auto`, que come a largura toda e
       espreme o mês para uma tira de ~20px. */
    .crm-agenda-layout.has-panel {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
    }

    .crm-agenda-layout.has-panel .crm-agenda-day-panel { grid-column: 1; grid-row: 3; }
    .crm-agenda-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-agenda-day-cell { min-height: 92px; }
}

/* Marcador de densidade do celular: um ponto por compromisso (até 3), no mesmo tom da pílula. */
.crm-agenda-day-dots { display: none; }

.crm-agenda-day-dot {
    width: 5px;
    height: 5px;
    border-radius: var(--uni-radius-pill);
    background: var(--uni-color-primary);
}

.crm-agenda-day-dot.is-activity { background: var(--uni-color-info); }
.crm-agenda-day-dot.is-overdue { background: var(--uni-color-danger); }
.crm-agenda-day-dot.is-closed { background: var(--uni-color-success); }

@media (max-width: 767px) {
    .crm-agenda-week { grid-template-columns: minmax(0, 1fr); }
    /* No celular a célula não comporta pílula nem o selo "Hoje" (que vazava a borda da célula):
       o dia fica sendo número + pontos, e o anel `is-today` continua marcando hoje. */
    .crm-agenda-day-cell { min-height: 56px; }
    .crm-agenda-day-items { display: none; }
    .crm-agenda-today { display: none; }
    .crm-agenda-day-dots { display: flex; gap: 3px; align-items: center; }
    .crm-agenda-month-grid { gap: 1px; }
}