.kanban-page {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scrollbars finas e discretas (board horizontal, colunas, modais, drawer) - nunca a barra
   grossa/cinza padrao do navegador. Firefox via scrollbar-width/-color, Chrome/Edge/Safari
   via pseudo-elementos -webkit-scrollbar. */
.kanban-board-scroll,
.kanban-stage-dropzone,
.kanban-modal-body,
.kanban-drawer-body {
}

.kanban-board-scroll::-webkit-scrollbar,
.kanban-stage-dropzone::-webkit-scrollbar,
.kanban-modal-body::-webkit-scrollbar,
.kanban-drawer-body::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.kanban-board-scroll::-webkit-scrollbar-track,
.kanban-stage-dropzone::-webkit-scrollbar-track,
.kanban-modal-body::-webkit-scrollbar-track,
.kanban-drawer-body::-webkit-scrollbar-track {
    background: transparent;
}

.kanban-board-scroll::-webkit-scrollbar-thumb,
.kanban-stage-dropzone::-webkit-scrollbar-thumb,
.kanban-modal-body::-webkit-scrollbar-thumb,
.kanban-drawer-body::-webkit-scrollbar-thumb {
    background: var(--crm-color-border);
    border-radius: 999px;
}

.kanban-board-scroll::-webkit-scrollbar-thumb:hover,
.kanban-stage-dropzone::-webkit-scrollbar-thumb:hover,
.kanban-modal-body::-webkit-scrollbar-thumb:hover,
.kanban-drawer-body::-webkit-scrollbar-thumb:hover {
    background: var(--crm-color-text-muted);
}

.kanban-board-header-controls .kanban-field {
    display: flex;
    align-items: center;
    min-width: 0;
}

.kanban-board-header-controls .kanban-field > span:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.kanban-board-header-controls .kanban-field input,
.kanban-board-header-controls .kanban-field select {
    min-height: 34px;
    padding: 6px 10px;
}

.kanban-stage-title-row,
.kanban-stage-meta,
.kanban-stage-actions,
.kanban-deal-topline,
.kanban-deal-footer,
.kanban-search-box,
.kanban-move-actions,
.kanban-stage-row-actions {
    display: flex;
    align-items: center;
}

.kanban-count-chip,
.kanban-status,
.kanban-priority,
.kanban-deal-tags span {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--crm-radius-sm);
    padding: 2px 8px;
    line-height: 1;
}

.kanban-field {
    display: grid;
    gap: 6px;
    min-width: 150px;
    color: var(--crm-color-text);
    font-size: 12px;
    font-weight: 500;
}

.kanban-field span {
    color: var(--crm-color-text-muted);
}

.kanban-field input,
.kanban-field select,
.kanban-field textarea {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    padding: 8px 10px;
    outline: none;
    transition: border-color var(--crm-transition-fast), box-shadow var(--crm-transition-fast);
}

.kanban-field textarea {
    resize: vertical;
}

.kanban-field input:focus,
.kanban-field select:focus,
.kanban-field textarea:focus {
    border-color: var(--crm-color-primary);
    box-shadow: 0 0 0 3px var(--crm-color-focus-ring);
}

.kanban-search-box {
    gap: 8px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-surface);
    padding-left: 10px;
}

.kanban-search-box .crm-icon {
    width: 16px;
    height: 16px;
    color: var(--crm-color-text-muted);
}

.kanban-search-box input {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.kanban-primary-button,
.kanban-secondary-button,
.kanban-danger-button,
.kanban-icon-button,
.kanban-round-button,
.kanban-close-button {
    border: 0;
    border-radius: var(--crm-radius-sm);
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: background var(--crm-transition-fast), border-color var(--crm-transition-fast), color var(--crm-transition-fast), transform var(--crm-transition-fast);
}

.kanban-primary-button {
    background: var(--crm-color-primary);
    color: var(--crm-color-on-primary);
}

.kanban-primary-button:hover {
    background: var(--crm-color-primary-hover);
}

.kanban-secondary-button,
.kanban-icon-button {
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    border: 1px solid var(--crm-color-border);
}

.kanban-secondary-button:hover,
.kanban-icon-button:hover,
.kanban-round-button:hover {
    border-color: var(--crm-color-primary-border);
    color: var(--crm-color-primary);
}

.kanban-primary-button:disabled,
.kanban-secondary-button:disabled,
.kanban-danger-button:disabled,
.kanban-icon-button:disabled,
.kanban-round-button:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.kanban-icon-button .crm-icon,
.kanban-round-button .crm-icon {
    width: 16px;
    height: 16px;
}

.kanban-board-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding-bottom: 10px;
    overscroll-behavior-x: contain;
}

.kanban-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 320px);
    gap: 12px;
    align-items: stretch;
    height: 100%;
    min-height: 360px;
    width: max-content;
    max-width: none;
}

.kanban-stage-column {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 360px;
    border: 1px solid var(--crm-color-border-strong);
    border-radius: var(--crm-radius-sm);
    background: color-mix(in srgb, var(--crm-color-app-bg) 82%, var(--crm-color-surface) 18%);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--crm-color-text) 10%, transparent);
    overflow: hidden;
    transition: border-color var(--crm-transition-fast), box-shadow var(--crm-transition-fast);
}

.kanban-stage-column.is-drag-over,
.kanban-stage-column.crm-kanban-drag-over {
    border-color: var(--crm-color-primary);
    box-shadow: 0 0 0 3px var(--crm-color-focus-ring);
}

.kanban-stage-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--crm-color-border);
    background: var(--crm-color-surface);
}

.kanban-stage-title-row {
    gap: 8px;
    min-width: 0;
}

.kanban-stage-title-row h2 {
    margin: 0;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--crm-color-text);
}

.kanban-stage-color {
    width: 10px;
    height: 28px;
    border-radius: var(--crm-radius-xs);
    background: var(--crm-color-primary);
    flex: 0 0 auto;
}

.kanban-stage-meta {
    justify-content: end;
    gap: 6px;
    color: var(--crm-color-text-muted);
    font-size: 11px;
}

.kanban-count-chip {
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text);
    font-weight: 600;
}

.kanban-stage-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 6px;
}

.kanban-stage-dropzone {
    display: grid;
    gap: 8px;
    align-content: start;
    overflow-y: auto;
    padding: 9px;
    background: color-mix(in srgb, var(--crm-color-app-bg) 78%, var(--crm-color-surface) 22%);
}

.kanban-stage-empty {
    min-height: 84px;
    display: grid;
    place-items: center;
    text-align: center;
    border: 1px dashed var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    color: var(--crm-color-text-muted);
    font-size: 12px;
    padding: 14px;
}

.kanban-stage-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    color: var(--crm-color-text-muted);
    font-size: 11.5px;
}

.kanban-deal-card {
    display: grid;
    gap: 6px;
    border: 1px solid var(--crm-color-border-strong);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    padding: 9px 10px;
    cursor: grab;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--crm-color-text) 12%, transparent);
    transition: border-color var(--crm-transition-fast), transform var(--crm-transition-fast), box-shadow var(--crm-transition-fast);
}

.kanban-deal-card:hover,
.kanban-deal-card:focus-visible {
    border-color: var(--crm-color-primary-border);
    box-shadow: var(--crm-shadow-md);
    transform: translateY(-1px);
    outline: none;
}

.kanban-deal-card.is-drop-target {
    border-top: 2px solid var(--crm-color-primary);
    box-shadow: 0 0 0 3px var(--crm-color-focus-ring);
}

.kanban-deal-card h3 {
    margin: 0;
    color: var(--crm-color-text);
    font-size: 13.5px;
    line-height: 1.2;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kanban-deal-topline,
.kanban-deal-footer {
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.kanban-deal-code {
    color: var(--crm-color-text-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
}

.kanban-deal-contact,
.kanban-deal-facts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    color: var(--crm-color-text-muted);
    font-size: 12px;
}

.kanban-deal-contact strong,
.kanban-deal-facts strong,
.kanban-deal-contact span,
.kanban-deal-facts span,
.kanban-deal-footer span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-deal-contact strong {
    color: var(--crm-color-text);
    font-size: 13px;
    font-weight: 600;
}

.kanban-deal-facts {
    font-size: 11.5px;
}

.kanban-deal-facts strong {
    color: var(--crm-color-text);
    font-size: 12px;
}

.kanban-deal-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.kanban-deal-tags span {
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text);
    font-size: 10.5px;
    min-height: 20px;
    padding: 2px 7px;
}

.kanban-status {
    font-size: 11px;
    font-weight: 600;
}

.kanban-status-open {
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text);
}

.kanban-status-won {
    background: color-mix(in srgb, var(--crm-color-success) 14%, var(--crm-color-surface));
    color: var(--crm-color-success);
}

.kanban-status-lost,
.kanban-status-archived {
    background: color-mix(in srgb, var(--crm-color-danger) 12%, var(--crm-color-surface));
    color: var(--crm-color-danger);
}

.kanban-priority {
    border: 1px solid var(--crm-color-border);
    color: var(--crm-color-text-muted);
    font-size: 11px;
}

.kanban-deal-footer {
    color: var(--crm-color-text-muted);
    font-size: 11px;
}

.kanban-deal-footer .kanban-priority {
    min-height: 20px;
    padding: 2px 7px;
}

.kanban-priority-high,
.kanban-priority-urgent {
    border-color: color-mix(in srgb, var(--crm-color-warning) 40%, var(--crm-color-border));
    color: var(--crm-color-warning);
}

:root[data-crm-theme="dark"] .kanban-stage-column {
    background: color-mix(in srgb, var(--crm-color-surface-elevated) 84%, var(--crm-color-app-bg));
}

:root[data-crm-theme="dark"] .kanban-stage-header,
:root[data-crm-theme="dark"] .kanban-deal-card {
    background: var(--crm-color-surface);
}

:root[data-crm-theme="dark"] .kanban-stage-dropzone {
    background: color-mix(in srgb, var(--crm-color-surface-elevated) 72%, var(--crm-color-app-bg));
}

.kanban-loading,
.kanban-empty-state {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 240px;
    text-align: center;
    color: var(--crm-color-text-muted);
}

.kanban-loading,
.kanban-empty-state.kanban-empty-state-fill {
    flex: 1 1 auto;
    min-height: 0;
}

.kanban-loading {
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-surface);
}

.kanban-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--crm-color-border);
    border-top-color: var(--crm-color-primary);
    border-radius: 50%;
    animation: kanban-spin 900ms linear infinite;
}

@keyframes kanban-spin {
    to {
        transform: rotate(360deg);
    }
}

.kanban-empty-icon .crm-icon {
    width: 22px;
    height: 22px;
}

.kanban-error {
    border: 1px solid color-mix(in srgb, var(--crm-color-danger) 35%, var(--crm-color-border));
    background: color-mix(in srgb, var(--crm-color-danger) 10%, var(--crm-color-surface));
    color: var(--crm-color-danger);
    border-radius: var(--crm-radius-sm);
    padding: 10px 12px;
    margin-bottom: 12px;
    flex: 0 0 auto;
    font-weight: 600;
}

.kanban-stage-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-surface);
    padding: 8px;
    cursor: grab;
    transition: border-color var(--crm-transition-fast), box-shadow var(--crm-transition-fast), opacity var(--crm-transition-fast), transform var(--crm-transition-fast);
}

.kanban-stage-row:active {
    cursor: grabbing;
}

.kanban-stage-row.is-selected {
    border-color: var(--crm-color-primary);
    box-shadow: 0 0 0 3px var(--crm-color-focus-ring);
}

.kanban-stage-row.is-dragging {
    opacity: .58;
    transform: scale(.99);
}

.kanban-stage-row.is-drop-target {
    border-color: var(--crm-color-primary);
    box-shadow: inset 3px 0 0 var(--crm-color-primary), 0 0 0 3px var(--crm-color-focus-ring);
}

.kanban-stage-row strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.kanban-stage-row > div span {
    color: var(--crm-color-text-muted);
    font-size: 11px;
}

.kanban-detail-section {
    display: grid;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid var(--crm-color-border);
}

.kanban-detail-section:first-child {
    padding-top: 0;
}

.kanban-detail-section h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--crm-color-text);
}

.kanban-detail-section p {
    margin: 0;
    color: var(--crm-color-text-muted);
}

.kanban-detail-list {
    display: grid;
    gap: 8px;
    margin: 0;
}

.kanban-detail-list div {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
}

.kanban-detail-list dt {
    color: var(--crm-color-text-muted);
    font-size: 12px;
}

.kanban-detail-list dd {
    margin: 0;
    color: var(--crm-color-text);
    font-size: 13px;
}

.kanban-history {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 18px;
}

.kanban-history li::marker {
    color: var(--crm-color-primary);
}

.kanban-history strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.kanban-history span,
.kanban-muted {
    color: var(--crm-color-text-muted);
    font-size: 12px;
}

/* §10 — aviso de permissão comercial: discreto, nunca com o peso de um erro. */
.kanban-opportunities-denied {
    margin: 2px 0 0;
    font-weight: 400;
    line-height: 1.45;
}

.kanban-notes-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kanban-notes-list li {
    display: grid;
    gap: 4px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-surface);
    padding: 10px;
}

.kanban-notes-list p {
    margin: 0;
    color: var(--crm-color-text);
    font-size: 13px;
    white-space: pre-wrap;
}

.kanban-activities-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kanban-activities-list li {
    display: grid;
    gap: 6px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-surface);
    padding: 10px;
}

.kanban-activities-list li.is-completed {
    opacity: .68;
}

.kanban-activities-list p {
    margin: 0;
    color: var(--crm-color-text-muted);
    font-size: 12px;
}

.kanban-activity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.kanban-activity-row > div {
    display: grid;
    gap: 3px;
}

.kanban-activity-row strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--crm-color-text);
}

.kanban-suggestion-banner {
    display: grid;
    gap: 8px;
    border: 1px solid var(--crm-color-primary-border);
    background: var(--crm-color-primary-soft);
    border-radius: var(--crm-radius-sm);
    padding: 10px;
}

.kanban-suggestion-banner p {
    margin: 0;
    color: var(--crm-color-primary-soft-text);
    font-size: 13px;
    font-weight: 500;
}

.kanban-suggestion-candidates {
    display: grid;
    gap: 6px;
}

.kanban-suggestion-candidate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--crm-color-surface);
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    padding: 6px 8px;
    font-size: 12px;
}

.kanban-commercial-stage {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    color: var(--crm-color-text-muted);
    font-size: 11.5px;
    line-height: 1.4;
}

.kanban-commercial-stage .kanban-status {
    min-height: 20px;
    padding: 2px 7px;
}

.kanban-opportunities-panel {
    display: grid;
    gap: 10px;
}

.kanban-opportunities-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kanban-opportunities-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-surface);
    padding: 8px 10px;
}

.kanban-opportunities-item-info {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.kanban-opportunities-item-info strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--crm-color-text);
}

.kanban-opportunities-actions {
    flex: 0 0 auto;
}

.kanban-next-section {
    border-bottom: 0;
}

/* UNICHAT-MOBILE-UX-CONFORMANCE-01 (Phase B) — breakpoints canônicos.
   Tablet (<=1023): toolbar/formulários empilham; o board continua (colunas do desktop).
   Mobile (<=767): o board horizontal SAI de cena e a composição mobile (OD-1 Opção B)
   assume — chips de etapa + resumo do funil + lista vertical. */
@media (max-width: 1023px) {
    /* Toolbar real do board (KanbanToolbar): empilha e cada controle ocupa a linha. */
    .kanban-board-header {
        flex-direction: column;
        align-items: stretch;
    }

    .kanban-board-header-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .kanban-board-header-controls > *,
    .kanban-board-header-controls .kanban-field,
    .kanban-board-header-controls select,
    .kanban-board-header-controls .kanban-search-box,
    .kanban-board-header-controls .kanban-search-box input {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Em coluna, flex-basis vira ALTURA: os basis de largura do desktop (220px da busca)
       criavam vãos verticais gigantes. Zera para auto no empilhado. */
    .kanban-board-header-controls .kanban-search-field,
    .kanban-board-header-controls .kanban-pipeline-selector,
    .kanban-board-header-controls .kanban-field {
        flex: 0 0 auto;
    }

    .kanban-board-header-controls .kanban-icon-button,
    .kanban-board-header-controls .kanban-primary-button,
    .kanban-board-header-controls .kanban-secondary-button {
        width: 100%;
        justify-content: center;
        min-height: 42px;
    }

    .kanban-toolbar,
    .kanban-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .kanban-toolbar-actions {
        justify-content: stretch;
        flex-wrap: wrap;
    }

    .kanban-toolbar-actions > *,
    .kanban-primary-button,
    .kanban-danger-button {
        width: 100%;
    }

    .kanban-form-grid,
    .kanban-stage-editor-layout {
        grid-template-columns: 1fr;
    }
}

/* ---------- Composição mobile (OD-1 Opção B) ---------- */

.kanban-mobile {
    display: none;
}

@media (max-width: 767px) {
    .kanban-board-scroll {
        display: none;
    }

    .kanban-mobile {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: 0;
        overflow-y: auto;
        /* Full-bleed: assume o padding lateral da página para que a faixa de etapas possa
           sangrar até a borda da tela; o clipe horizontal evita rolagem lateral parasita. */
        overflow-x: hidden;
        margin-inline: calc(-1 * var(--uni-page-pad-x));
        padding-inline: var(--uni-page-pad-x);
        padding-bottom: 8px;
    }

    /* A faixa de etapas entra alinhada à margem e termina cortada na borda direita — o chip
       cortado é a affordance de "tem mais etapa para o lado". O respiro final vem do
       último item (uni-mobile-ux.css, bloco 10). */
    .kanban-mobile-chips.uni-edge-scroll {
        padding: 2px 0 2px var(--uni-page-pad-x);
    }

    .kanban-mobile-chips {
        gap: 8px;
        padding: 2px;
        flex: 0 0 auto;
    }

    .kanban-mobile-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 0 14px;
        border: 1px solid var(--crm-color-border);
        border-radius: 999px;
        background: var(--crm-color-surface);
        color: var(--crm-color-text);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
    }

    .kanban-mobile-chip-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--stage-color, var(--crm-color-primary));
    }

    .kanban-mobile-chip-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--crm-color-app-bg);
        color: var(--crm-color-text-muted);
        font-size: 11px;
    }

    .kanban-mobile-chip.active {
        border-color: var(--stage-color, var(--crm-color-primary));
        background: color-mix(in srgb, var(--stage-color, var(--crm-color-primary)) 10%, var(--crm-color-surface));
        color: var(--crm-color-text);
    }

    .kanban-mobile-chip.active .kanban-mobile-chip-count {
        background: var(--stage-color, var(--crm-color-primary));
        color: #ffffff;
    }

    .kanban-mobile-summary {
        flex: 0 0 auto;
        border: 1px solid var(--crm-color-border);
        border-radius: var(--crm-radius-md);
        background: var(--crm-color-surface);
    }

    .kanban-mobile-summary summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 44px;
        padding: 6px 14px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        list-style: none;
    }

    .kanban-mobile-summary summary::-webkit-details-marker { display: none; }

    .kanban-mobile-summary-total {
        color: var(--crm-color-text-muted);
        font-size: 12px;
        font-weight: 500;
        text-align: right;
    }

    .kanban-mobile-summary-rows {
        display: grid;
        gap: 4px;
        padding: 4px 10px 12px;
    }

    .kanban-mobile-summary-row {
        display: grid;
        grid-template-columns: minmax(72px, 0.6fr) minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        min-height: 34px;
        padding: 2px 4px;
        border: 0;
        background: transparent;
        color: var(--crm-color-text);
        font-size: 12.5px;
        cursor: pointer;
        text-align: left;
    }

    .kanban-mobile-summary-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .kanban-mobile-summary-bar {
        height: 8px;
        border-radius: 999px;
        background: var(--crm-color-app-bg);
        overflow: hidden;
    }

    .kanban-mobile-summary-bar > span {
        display: block;
        height: 100%;
        border-radius: 999px;
    }

    .kanban-mobile-summary-meta {
        color: var(--crm-color-text-muted);
        font-size: 11.5px;
        white-space: nowrap;
    }

    .kanban-mobile-stage-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex: 0 0 auto;
    }

    .kanban-mobile-stage-head strong {
        font-size: 14px;
    }

    .kanban-mobile-stage-head .kanban-secondary-button {
        width: auto;
        min-height: 40px;
    }

    .kanban-mobile-deals {
        display: grid;
        gap: 10px;
    }

    .kanban-mobile-deal {
        display: grid;
        gap: 0;
        border: 1px solid var(--crm-color-border);
        border-radius: var(--crm-radius-md);
        background: var(--crm-color-surface);
        overflow: hidden;
    }

    /* O card compartilhado (KanbanDealCard) entra sem a própria borda para não duplicar chrome. */
    .kanban-mobile-deal .kanban-deal-card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        width: 100%;
    }

    .kanban-mobile-move {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-top: 1px solid var(--crm-color-border);
        background: var(--crm-color-app-bg);
        font-size: 12px;
        color: var(--crm-color-text-muted);
    }

    .kanban-mobile-move select {
        flex: 1 1 auto;
        min-height: 40px;
        min-width: 0;
        border: 1px solid var(--crm-color-border);
        border-radius: var(--crm-radius-sm);
        background: var(--crm-color-surface);
        color: var(--crm-color-text);
        font-size: 13px;
        padding: 0 8px;
    }
}

/* ============================================================================
   UNICHAT-MOBILE-UX-ARCHITECTURE-01 (Phase B / B3) — o pipeline domina o viewport.
   <=1023: toolbar do board some (app bar de página assume), resumo do funil vai para sheet,
   "Mover" vira sheet, detalhe vira superfície de tela cheia. Desktop (>=1024) intocado.
   ============================================================================ */

.kanban-mobile-deal-actions {
    display: none;
}

@media (max-width: 1023px) {
    .kanban-page > .uni-appbar {
        flex: 0 0 auto;
    }

    .kanban-page > .uni-search-row,
    .kanban-page > .uni-filter-chips {
        flex: 0 0 auto;
    }

    /* Tablet mantém o board de colunas, mas sem a toolbar empilhada de 7 linhas. */
    .kanban-board-scroll {
        margin-top: 4px;
    }

    .kanban-drawer-backdrop {
        padding: 0;
        z-index: var(--uni-z-modal);
    }

    .kanban-drawer.uni-detail-surface .kanban-drawer-body {
        padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .kanban-move-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .kanban-move-actions .kanban-secondary-button {
        min-height: 44px;
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .kanban-mobile {
        gap: 8px;
        padding-top: 2px;
    }

    .kanban-mobile-chips {
        gap: 6px;
    }

    .kanban-mobile-chip {
        min-height: 36px;
        padding: 0 12px;
    }

    .kanban-mobile-stage-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        min-height: 28px;
        padding: 2px 2px 0;
    }

    .kanban-mobile-stage-head strong {
        font-size: 14px;
    }

    .kanban-mobile-stage-meta {
        font-size: 12px;
        color: var(--crm-color-text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kanban-mobile-deal {
        display: grid;
        gap: 0;
    }

    .kanban-mobile-deal-actions {
        display: flex;
        justify-content: flex-end;
        padding: 6px 4px 0;
    }

    .kanban-mobile-summary {
        display: none;
    }
}

/* =====================================================================================
   UNICHAT-KANBAN-AGENDA-TAREFAS-VISUAL-ASSISTED-CONVERGENCE-01

   Camada de convergência do BOARD. Fica no fim do arquivo de propósito: as fichas acima
   continuam servindo Chat Interno, Configurações, Dashboard e o painel de oportunidades do
   Atendimento (kanban-field, kanban-primary-button, kanban-search-box, kanban-modal-*),
   que NÃO estão neste corte. Apagá-las regrediria superfícies já aceitas; o que este corte faz é
   parar de usá-las no Kanban, em Tarefas e na Agenda.

   Só o que é legitimamente do board sobrevive como gramática própria: coluna, dropzone, card,
   estados de arraste e a composição mobile. Todo o resto passou para a camada canônica.
   ===================================================================================== */

/* ---------- Barra da superfície (VL-21) ---------- */
.kanban-toolbar { margin-bottom: var(--uni-space-4); }

/* ---------- Board ---------- */
.kanban-board-scroll { padding-bottom: var(--uni-space-3); }

.kanban-board {
    /* VL-05 — gap entre cards de uma grade: 16px. */
    gap: var(--uni-space-4);
}

.kanban-stage-column {
    /* VL-07 — a coluna é um card: raio lg. VL-08 — borda OU sombra, nunca as duas num
       elemento que não flutua. */
    border-radius: var(--uni-radius-lg);
    border-color: var(--uni-color-border);
    box-shadow: none;
}

.kanban-stage-column.is-drag-over,
.kanban-stage-column.crm-kanban-drag-over {
    border-color: var(--uni-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--uni-color-primary) 22%, transparent);
}

.kanban-stage-header {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    padding: var(--uni-space-3) var(--uni-space-4);
}

.kanban-stage-title-row {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
}

.kanban-stage-title-row h2 {
    /* VL-01 — numa coluna de 280px o degrau md é o que cabe sem truncar nomes reais de etapa
       ("Contato realizado"). VL-04: uma linha, com title. */
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--uni-font-size-md);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
}

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

.kanban-stage-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--uni-space-1);
    margin: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
    line-height: 1.4;
    user-select: none;
}

.kanban-stage-meta strong { color: var(--uni-color-text); font-weight: 600; }

.kanban-stage-dropzone {
    gap: var(--uni-space-2);
    padding: var(--uni-space-3);
}

.kanban-stage-empty {
    margin: 0;
    border-radius: var(--uni-radius-md);
    border-color: var(--uni-color-border);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
    padding: var(--uni-space-4);
}

.kanban-stage-pagination {
    gap: var(--uni-space-2);
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
    user-select: none;
}

/* ---------- Card de oportunidade ---------- */
.kanban-deal-card {
    gap: var(--uni-space-2);
    /* VL-07 — raio interno nunca maior que o externo: card md dentro de coluna lg. */
    border-radius: var(--uni-radius-md);
    border-color: var(--uni-color-border);
    padding: var(--uni-space-3);
    box-shadow: none;
}

.kanban-deal-card:hover,
.kanban-deal-card:focus-visible {
    /* VL-15 — hover de card é border-color primary + primary-soft. O translateY + sombra
       é exatamente o "lift" que UI-03A rejeitou. */
    border-color: var(--uni-color-primary);
    background: color-mix(in srgb, var(--uni-color-primary-soft) 40%, var(--uni-color-surface));
    box-shadow: none;
    transform: none;
}

/* VL-24 — o card é alcançável por teclado (role=button/tabindex=0); o foco precisa aparecer. */
.kanban-deal-card:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

.kanban-deal-card.is-drop-target {
    border-top: 2px solid var(--uni-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--uni-color-primary) 22%, transparent);
}

.kanban-deal-card h3 { font-size: var(--uni-font-size-md); }

.kanban-deal-topline,
.kanban-deal-footer {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
}

.kanban-deal-code {
    font-size: var(--uni-font-size-2xs);
    /* VL-25 — o código é DADO: copiar é operação rotineira. */
    user-select: text;
}

.kanban-deal-contact strong { font-size: var(--uni-font-size-sm); }
.kanban-deal-facts { font-size: var(--uni-font-size-xs); }
.kanban-deal-facts strong { font-size: var(--uni-font-size-sm); }
.kanban-deal-footer { font-size: var(--uni-font-size-2xs); }

.kanban-deal-tags { gap: var(--uni-space-1); }

/* VL-36 — badge é pílula, 2xs, peso 600. Valia para o chip de contagem, o status, a
   prioridade e as etiquetas: as quatro fichas usavam radius-sm retangular. */
.kanban-count-chip,
.kanban-status,
.kanban-priority,
.kanban-deal-tags span {
    border-radius: var(--uni-radius-pill);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    padding: 2px var(--uni-space-3);
    user-select: none;
}

/* ---------- Editores (etapas e funis) ---------- */
.kanban-editor-layout {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: var(--uni-space-5);
    align-items: start;
}

.kanban-editor-list {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    min-width: 0;
}

.kanban-editor-form {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
    min-width: 0;
}

.kanban-stage-row {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
    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);
    cursor: pointer;
    min-width: 0;
    transition: background-color 0.14s ease, border-color 0.14s ease;
}

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

/* VL-24 — selecionado nao e hover: marcador persistente à esquerda. */
.kanban-stage-row.is-selected {
    border-color: var(--uni-color-primary);
    background: var(--uni-color-primary-soft);
    box-shadow: inset 3px 0 0 0 var(--uni-color-primary);
}

.kanban-stage-row.is-dragging { opacity: 0.5; }
.kanban-stage-row.is-drop-target { border-color: var(--uni-color-primary); }

.kanban-editor-drag {
    display: inline-flex;
    color: var(--uni-color-text-subtle);
    cursor: grab;
    flex: 0 0 auto;
}

.kanban-editor-drag .crm-icon { width: 16px; height: 16px; }

.kanban-editor-row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.kanban-editor-row-text strong {
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    color: var(--uni-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-editor-row-text small {
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
}

.kanban-editor-section {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
    /* VL-18 — seções de modal separadas por 24px, sem borda entre elas: o espaço já separa. */
    margin-top: var(--uni-space-5);
}

.kanban-editor-section h3 {
    margin: 0;
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    color: var(--uni-color-text);
}

.kanban-editor-or {
    margin: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
}

/* VL-45/D-04 — o resumo de validação fica JUNTO do botão que o disparou, à esquerda do rodapé. */
.kanban-footer-error {
    flex: 1 1 auto;
    margin: 0;
    align-self: center;
}

.kanban-footer-actions {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
    margin-left: auto;
}

.kanban-section-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--uni-space-3);
}

.kanban-loss-newreason-row {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
}

.kanban-loss-newreason-row .app-control { flex: 1 1 auto; min-width: 0; }

/* ---------- Destinos de movimentação, no drawer ---------- */
.kanban-move-options {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
}

.kanban-move-option {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
    width: 100%;
    min-height: 42px;
    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: background-color 0.14s ease, border-color 0.14s ease;
}

.kanban-move-option:hover:not(:disabled) {
    border-color: var(--uni-color-primary);
    background: color-mix(in srgb, var(--uni-color-primary-soft) 40%, var(--uni-color-surface));
}

.kanban-move-option:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

.kanban-move-option:disabled { opacity: 0.5; cursor: not-allowed; }

.kanban-move-option-dot {
    width: 10px;
    height: 24px;
    border-radius: var(--uni-radius-xs);
    background: var(--stage-color, var(--uni-color-primary));
    flex: 0 0 auto;
}

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

/* ---------- Detalhe do drawer ---------- */
.kanban-detail-section h3 {
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
}

.kanban-activity-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--uni-space-3);
}

@media (max-width: 767px) {
    .kanban-editor-layout { grid-template-columns: 1fr; }
    .kanban-loss-newreason-row { flex-direction: column; align-items: stretch; }
}

/* VL-10 (pareamento) — o gatilho do CrmColorPicker é `inline-flex` e nasce com a largura do
   conteúdo. Numa grade de campos, ao lado de um select de largura total, os dois medem 42px de
   altura mas parecem descasados. Dentro do editor do Kanban o campo ocupa a coluna inteira, como
   qualquer outro controle da grade. Escopado: Configurações usa o mesmo componente e está aceita. */
.kanban-editor-form .crm-color-picker,
.kanban-editor-form .crm-color-picker-trigger {
    width: 100%;
    justify-content: flex-start;
}

/* =====================================================================================
   OWNER REVIEW — RODADA 1 · OR-3

   *"Acho que essas colunas e cards também podem ficar mais elegantes. Talvez uma sombra nas
   colunas, algum detalhe minimalista que deixe sofisticado e um pouco mais destacado. Os cards
   podem ter um detalhe (um ponto ou uma linha na cor do funil) destacando a diferença entre uma
   oportunidade e outra."*

   CONFLITO DE AUTHORITY RESOLVIDO SEM EMENDA (classe D do §2). VL-08 diz "um elemento tem borda
   OU sombra, nunca as duas", e reserva `--uni-shadow-sm` justamente para "card que precisa se
   destacar do fundo" — que é o pedido. Então a coluna TROCA a borda pela sombra em vez de
   acumular as duas. O resultado é o destaque pedido, e a regra continua valendo.
   ===================================================================================== */

.kanban-stage-column {
    border: 0;
    /* VL-08 — a coluna passa a ser um card que se destaca do fundo. */
    box-shadow: var(--uni-shadow-sm);
    background: var(--uni-color-surface);
}

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

.kanban-stage-header {
    border-bottom: 1px solid var(--uni-color-border);
    background: transparent;
}

/* O detalhe minimalista: a faixa vertical de 10x28 vira um ponto. Menos chrome, mesma leitura —
   e o mesmo ponto reaparece como acento do card, o que amarra card e coluna. */
.kanban-stage-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.kanban-stage-dropzone {
    background: color-mix(in srgb, var(--uni-color-app-bg) 55%, var(--uni-color-surface) 45%);
}

:root[data-crm-theme="dark"] .kanban-stage-column {
    background: var(--uni-color-surface);
}

:root[data-crm-theme="dark"] .kanban-stage-dropzone {
    background: color-mix(in srgb, var(--uni-color-app-bg) 60%, var(--uni-color-surface) 40%);
}

/* ---------- Card: a linha na cor do funil ---------- */
.kanban-deal-card {
    /* `--stage-color` chega inline, do componente. O acento é a única coisa que separa
       visualmente um card do outro dentro da coluna — é o pedido literal do proprietário. */
    border-left: 3px solid var(--stage-color, var(--uni-color-primary));
}

.kanban-deal-card:hover,
.kanban-deal-card:focus-visible {
    /* O acento continua na cor da etapa no hover: o realce é o fundo, não a troca da identidade. */
    border-left-color: var(--stage-color, var(--uni-color-primary));
}

.kanban-deal-age {
    flex: 0 0 auto;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* =====================================================================================
   Chip de PROCEDÊNCIA (OR-3)

   Não é badge de estado (VL-36 continua valendo para status/prioridade): é de onde a
   oportunidade veio. Canal com identidade própria usa a identidade; origem interna usa o pastel
   neutro. As cores de marca são literais de propósito — marca não muda com o tema — e por isso
   ficam declaradas aqui, num bloco nomeado, em vez de espalhadas.
   ===================================================================================== */
.kanban-source {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-1);
    min-height: 20px;
    max-width: 60%;
    padding: 2px var(--uni-space-2);
    border-radius: var(--uni-radius-pill);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
}

.kanban-source .crm-icon { width: 12px; height: 12px; flex: 0 0 auto; }
.kanban-source > span { overflow: hidden; text-overflow: ellipsis; }

/* Origem interna — pastel semântico, o mesmo vocabulário do resto do app. */
.kanban-source.is-neutral {
    background: var(--uni-color-neutral-soft);
    color: var(--uni-color-text-muted);
}

.kanban-source.is-campaign {
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary-soft-text);
}

.kanban-source.is-form {
    background: var(--uni-color-info-soft);
    color: var(--uni-color-info);
}

.kanban-source.is-referral {
    background: var(--uni-color-success-soft);
    color: var(--uni-color-success);
}

/* Canal — identidade da marca. Texto branco em todos, medido contra o degradê/preenchimento. */
.kanban-source.is-instagram,
.kanban-source.is-whatsapp,
.kanban-source.is-facebook {
    color: #ffffff;
    border: 0;
}

.kanban-source.is-instagram {
    /* Degradê do Instagram, na direção que a própria marca usa. */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.kanban-source.is-whatsapp { background: #25d366; color: #0b3d1f; }
.kanban-source.is-facebook { background: #1877f2; }

@media (prefers-reduced-motion: no-preference) {
    .kanban-stage-column { transition: box-shadow 0.16s ease; }
}

/* =====================================================================================
   OWNER REVIEW — RODADA 1 · OR-4 · anatomia do drawer da oportunidade
   ===================================================================================== */

/* VL-19 — faixa de ações primárias logo abaixo do cabeçalho. */
.kanban-drawer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-3);
    margin-bottom: var(--uni-space-4);
}

.kanban-drawer-stage {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-2);
    min-width: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
    font-weight: 500;
    user-select: none;
}

.kanban-drawer-stage-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--stage-color, var(--uni-color-primary));
    flex: 0 0 auto;
}

.kanban-drawer-tabs { margin-bottom: var(--uni-space-4); }

.kanban-drawer-block {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    margin-top: var(--uni-space-5);
}

.kanban-drawer-block h3 {
    margin: 0;
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    color: var(--uni-color-text);
}

.kanban-drawer-block p {
    margin: 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-md);
    line-height: 1.45;
}

/* A ação de criar fica no topo da aba, alinhada à direita: a aba é leitura, criar é ação. */
.kanban-drawer-block-head {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--uni-space-3);
}

/* ---------- Ficha do resumo ---------- */
.kanban-detail-list {
    display: grid;
    gap: var(--uni-space-2);
    margin: 0;
}

.kanban-detail-list > div {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: var(--uni-space-3);
    align-items: center;
}

.kanban-detail-list dt {
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
    user-select: none;
}

.kanban-detail-list dd {
    margin: 0;
    min-width: 0;
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-md);
    /* VL-25 — telefone, e-mail e nome são DADO: copiar continua permitido. */
    user-select: text;
    overflow-wrap: anywhere;
}

/* ---------- Listas das abas ---------- */
.kanban-activities-list,
.kanban-notes-list,
.kanban-history {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kanban-activities-list > li,
.kanban-notes-list > li,
.kanban-history > li {
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    padding: var(--uni-space-3);
}

.kanban-activities-list > li.is-completed { opacity: 0.65; }

.kanban-activity-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--uni-space-3);
}

.kanban-activity-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kanban-activity-body strong {
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    color: var(--uni-color-text);
}

.kanban-activity-body small,
.kanban-notes-list > li > span {
    display: flex;
    align-items: center;
    gap: var(--uni-space-1);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
}

.kanban-activity-body p,
.kanban-notes-list > li > p {
    margin: var(--uni-space-1) 0 0;
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-sm);
    line-height: 1.45;
    white-space: pre-wrap;
    user-select: text;
}

.kanban-notes-list > li > span { margin-top: var(--uni-space-2); }

.kanban-history > li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kanban-history strong {
    font-size: var(--uni-font-size-md);
    font-weight: 600;
}

.kanban-history span {
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-xs);
}

.kanban-history p {
    margin: var(--uni-space-1) 0 0;
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-sm);
}

.kanban-move-hint {
    margin: 0 0 var(--uni-space-3);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
}

.kanban-note-field { min-height: 140px; }

@media (max-width: 767px) {
    .kanban-drawer-actions { flex-direction: column; align-items: stretch; }
    .kanban-detail-list > div { grid-template-columns: 1fr; gap: 2px; }
}

/* VL-27 — "Componentes de dado respondem à largura útil do CONTAINER, não ao viewport — porque
   dentro de um modal de 560px e de um drawer de 440px o viewport mente."

   MEDIDO: as quatro abas na geometria de VL-16 (padding 16px, `md`) somam mais que os 392px úteis
   do drawer, e "Histórico" era cortado pela borda direita. Dentro do drawer a aba usa o degrau
   menor da escada — `sm` e padding `--uni-space-3` — e o trilho ganha a máscara de borda que
   VL-16 já pede para o caso de overflow. O alvo de toque de 44px no mobile agora vem da ficha
   base de `.uni-tab`, não mais da variante de tamanho. */
.kanban-drawer-tabs {
    max-width: 100%;
    width: 100%;
}

.kanban-drawer-tabs .uni-tab {
    padding: 0 var(--uni-space-3);
    font-size: var(--uni-font-size-sm);
}

.kanban-drawer-tabs .uni-tab-count {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
}

/* CUT 5I (§32) — bloco "Conversas" no resumo da oportunidade: oportunidade → conversa. */
.kanban-deal-conversation-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--uni-space-2); }
.kanban-deal-conversation { display: flex; align-items: center; justify-content: space-between; gap: var(--uni-space-3); padding: var(--uni-space-2) var(--uni-space-3); border: 1px solid var(--crm-color-border); border-radius: var(--uni-radius-md, 10px); background: var(--crm-color-surface); }
.kanban-deal-conversation-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kanban-deal-conversation-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-deal-conversation-info small { color: var(--crm-color-text-muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.kanban-deal-conversation .kanban-secondary-button { flex: 0 0 auto; text-decoration: none; }
.kanban-deal-conversation-footer { margin-top: var(--uni-space-1); }
.kanban-link { color: var(--crm-color-primary); text-decoration: none; font-size: var(--uni-font-size-sm); }
.kanban-link:hover { text-decoration: underline; }
@media (max-width: 767px) {
    .kanban-deal-conversation { flex-direction: column; align-items: stretch; }
    .kanban-deal-conversation .kanban-secondary-button { text-align: center; }
}
.kanban-deal-conversation-info small > span + span:not(.kanban-count-chip)::before { content: "· "; color: var(--crm-color-text-muted); }