/* Hub Projects — layout do canal, seletor de quadro e chips de catálogo.
   Publicado só na instalação que seleciona o domínio (marcador {{DOMAIN_STYLES}} do
   index.html); por isso não entra no grafo de @import de assets/app.css.
   Tokens de cor e espaçamento vêm de assets/css/00-tokens.css (design.md).

   CHIP DE CATÁLOGO: o banco guarda NOME DE TOKEN M3 (`primary`, `tertiary`,
   `primary-container`…), nunca hex — hex gravado furaria, por outro caminho, a mesma regra
   que o design-audit cobra aqui. O JS transforma esse nome em `projects-chip--<token>` e as
   classes abaixo são o único lugar que resolve nome de token em cor. Token de catálogo sem
   classe correspondente cai no neutro de `.projects-chip`.

   Contrato: docs/projects-contracts.md §1 (Design System), §4.1 e §7.1. */

.projects-channel {
    display: flex;
    flex-direction: column;
    gap: var(--chat-space-3);
    height: 100%;
    min-height: 0;
    padding: var(--chat-space-6);
    color: var(--chat-color-text-primary);
}

.projects-titulo {
    margin: 0;
    font-size: 1.25rem;
}

.projects-descricao,
.projects-vazio,
.projects-erro {
    margin: 0;
    color: var(--chat-color-text-secondary);
}

.projects-erro {
    color: var(--md-sys-color-error);
}

/* ---- Seletor de quadro ---- */

.projects-boards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chat-space-2);
}

.projects-board-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--chat-space-2) var(--chat-space-3);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--chat-radius-sm);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.projects-board-chip--ativo {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.projects-board-chip-workspace {
    font-size: 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
}

/* ---- Cabeçalho e resumo do quadro ---- */

.projects-workspace-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--chat-space-4);
    padding-bottom: var(--chat-space-3);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.projects-workspace-header > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--chat-space-1);
}

.projects-quadro-titulo {
    margin: 0;
    font-size: 1.05rem;
}

.projects-quadro-descricao {
    margin: 0;
    color: var(--chat-color-text-secondary);
}

.projects-resumo {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--chat-space-1) var(--chat-space-4);
    margin: 0;
    color: var(--chat-color-text-secondary);
    font-size: 0.8125rem;
}

.projects-resumo dt {
    font-weight: 600;
}

.projects-resumo dt::after {
    content: ':';
}

.projects-resumo dd {
    margin: 0 var(--chat-space-3) 0 0;
}

/* ---- Visão analítica: cartões e agrupamentos da mesma página da tabela ---- */

.projects-analytics {
    display: flex;
    flex-direction: column;
    gap: var(--chat-space-2);
    padding: var(--chat-space-3);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--chat-radius-md);
    background: var(--md-sys-color-surface-container-low);
}

.projects-analytics h4,
.projects-analytics h5 {
    margin: 0;
}

.projects-analytics h4 {
    font-size: 0.9375rem;
}

.projects-analytics h5 {
    font-size: 0.8125rem;
}

.projects-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--chat-space-2);
}

.projects-metric-card,
.projects-analytics-grouping {
    padding: var(--chat-space-2);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--chat-radius-sm);
    background: var(--md-sys-color-surface-container-low);
}

.projects-metric-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.projects-metric-card > span,
.projects-metric-card small,
.projects-analytics-grouping > p,
.projects-analytics-buckets small {
    color: var(--chat-color-text-secondary);
    font-size: 0.75rem;
}

.projects-metric-card > strong {
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.projects-analytics-grouping {
    display: flex;
    flex-direction: column;
    gap: var(--chat-space-1);
}

.projects-analytics-grouping > p {
    margin: 0;
}

.projects-analytics-buckets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--chat-space-1) var(--chat-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.projects-analytics-buckets li {
    display: flex;
    justify-content: space-between;
    gap: var(--chat-space-2);
    font-size: 0.8125rem;
}

.projects-analytics-buckets strong {
    font-variant-numeric: tabular-nums;
}

/* A tabela ocupa o que sobrar da altura do canal; quem rola é o
   `.tabulator-tableholder`, não a página. */
.projects-tabela {
    flex: 1 1 auto;
    min-height: 240px;
}

/* ---- Célula ---- */

.projects-celula-vazia {
    color: var(--md-sys-color-on-surface-variant);
}

.projects-celula-codigo {
    margin-right: var(--chat-space-1);
    color: var(--md-sys-color-on-surface-variant);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.projects-celula-url {
    color: var(--md-sys-color-primary);
}

/* ---- Chips de catálogo (status, prioridade e `select` dinâmico) ---- */

.projects-chip {
    display: inline-block;
    max-width: 100%;
    padding: 2px var(--chat-space-2);
    border-radius: var(--chat-radius-full);
    background: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
    font-size: 0.8125rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.projects-chip--primary {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.projects-chip--primary-container {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.projects-chip--secondary {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

/* `tertiary` não tem par próprio no mapa M3 do Hub (assets/css/00-tokens.css): o fallback
   do var() é o token do papel vizinho, não uma cor literal. */
.projects-chip--tertiary {
    background: var(--md-sys-color-tertiary-container, var(--md-sys-color-surface-container-highest));
    color: var(--md-sys-color-on-tertiary-container, var(--md-sys-color-on-surface));
}

.projects-chip--error {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error);
}

.projects-chip--surface-variant {
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
}

@media (max-width: 600px) {
    .projects-channel {
        padding: var(--chat-space-4);
    }

    .projects-resumo {
        font-size: 0.75rem;
    }
}

/* ---- Corpo do canal: tabela e drawer lado a lado ---- */

.projects-corpo {
    display: flex;
    flex: 1;
    gap: var(--chat-space-3);
    min-height: 0;
}

.projects-corpo .projects-tabela {
    flex: 1;
    min-width: 0;
}

/* ---- Ações e botões ---- */

.projects-acoes,
.projects-command-bar,
.projects-command-bar-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--chat-space-2);
}

.projects-command-bar {
    min-height: 40px;
}

.projects-visoes {
    display: flex;
    gap: var(--chat-space-2);
}

.projects-botao--ativo {
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-primary);
}

/* ---- Kanban: grupos continuam no modelo, SortableJS so traduz o gesto de arrastar ---- */

.projects-kanban {
    flex: 1;
    min-width: 0;
    overflow: auto;
}

.projects-kanban-board {
    display: flex;
    align-items: flex-start;
    gap: var(--chat-space-3);
    min-width: max-content;
}

.projects-kanban-group {
    width: 280px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--chat-radius-md);
    background: var(--md-sys-color-surface-container-low);
}

.projects-kanban-group-header {
    padding: var(--chat-space-2);
}

.projects-kanban-collapse {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.projects-kanban-collapse span,
.projects-kanban-code {
    color: var(--chat-color-text-secondary);
    font-size: 0.75rem;
}

.projects-kanban-list {
    display: flex;
    min-height: 56px;
    flex-direction: column;
    gap: var(--chat-space-2);
    padding: 0 var(--chat-space-2) var(--chat-space-2);
}

.projects-kanban-group--collapsed .projects-kanban-list {
    display: none;
}

.projects-kanban-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--chat-space-3);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--chat-radius-sm);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    cursor: grab;
}

.projects-kanban-card:active {
    cursor: grabbing;
}

.projects-kanban-card.sortable-ghost {
    opacity: 0.5;
}

.projects-botao {
    padding: var(--chat-space-2) var(--chat-space-3);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--chat-radius-sm);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    font: inherit;
    cursor: pointer;
}

.projects-botao:hover {
    background: var(--md-sys-color-surface-container-high);
}

.projects-botao[disabled] {
    opacity: 0.6;
    cursor: default;
}

.projects-botao--primario {
    border-color: transparent;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

/* ---- Drawer do item (painel lateral M3) ---- */

.projects-drawer {
    display: flex;
    flex-direction: column;
    gap: var(--chat-space-3);
    width: 380px;
    max-width: 100%;
    min-height: 0;
    padding: var(--chat-space-4);
    overflow-y: auto;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--chat-radius-md);
    background: var(--md-sys-color-surface-container-low);
}

.projects-drawer-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--chat-space-2);
}

.projects-drawer-titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.projects-formulario {
    display: flex;
    flex-direction: column;
    gap: var(--chat-space-3);
}

.projects-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.projects-campo-rotulo {
    font-size: 0.8125rem;
    color: var(--chat-color-text-secondary);
}

.projects-campo-controle {
    padding: var(--chat-space-2);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--chat-radius-sm);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: inherit;
}

.projects-campo-controle[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.projects-campo-controle:disabled {
    opacity: 0.7;
}

/* ---- Editor Quill: a base já carrega a lib; aqui só o tema em tokens M3 ---- */

.projects-quill {
    min-height: 96px;
    border-radius: var(--chat-radius-sm);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.projects-quill .ql-toolbar,
.projects-quill .ql-container {
    border-color: var(--md-sys-color-outline-variant);
}

.projects-quill .ql-editor {
    min-height: 72px;
    color: var(--md-sys-color-on-surface);
}

.projects-quill .ql-stroke {
    stroke: var(--md-sys-color-on-surface-variant);
}

.projects-quill .ql-fill {
    fill: var(--md-sys-color-on-surface-variant);
}

/* ---- Feed: comentário humano e auditoria de mudança na mesma lista ---- */

.projects-feed {
    display: flex;
    flex-direction: column;
    gap: var(--chat-space-2);
}

.projects-feed-titulo {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.projects-comentario {
    display: flex;
    flex-direction: column;
    gap: var(--chat-space-2);
}

.projects-feed-lista {
    display: flex;
    flex-direction: column;
    gap: var(--chat-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.projects-feed-item {
    padding: var(--chat-space-2);
    border-left: 3px solid var(--md-sys-color-outline-variant);
    border-radius: var(--chat-radius-sm);
    background: var(--md-sys-color-surface-container);
}

/* A auditoria de mudança de estado se distingue do comentário pela borda, não por lista
   separada: o item tem UM feed (contrato §3). */
.projects-feed-item--status_change {
    border-left-color: var(--md-sys-color-primary);
}

.projects-feed-item--assignment {
    border-left-color: var(--md-sys-color-secondary);
}

.projects-feed-item--field_change,
.projects-feed-item--move {
    border-left-color: var(--md-sys-color-tertiary);
}

.projects-feed-topo {
    display: flex;
    justify-content: space-between;
    gap: var(--chat-space-2);
    font-size: 0.75rem;
    color: var(--chat-color-text-secondary);
}

.projects-feed-conteudo {
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.projects-feed-conteudo p {
    margin: 0 0 4px;
}

/* ---- Configuração estrutural: painel denso para quem governa o quadro ---- */

.projects-config {
    display: flex;
    flex-direction: column;
    gap: var(--chat-space-3);
    width: min(440px, 100%);
    min-width: 0;
    padding: var(--chat-space-4);
    overflow-y: auto;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--chat-radius-md);
    background: var(--md-sys-color-surface-container-low);
}

.projects-config-section {
    display: flex;
    flex-direction: column;
    gap: var(--chat-space-3);
}

.projects-config-section > h4,
.projects-config-form > h4 {
    margin: 0;
    font-size: 0.875rem;
}

.projects-config-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--chat-space-2);
    padding: var(--chat-space-3);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--chat-radius-sm);
    background: var(--md-sys-color-surface);
}

.projects-config-form > h4,
.projects-config-form > .projects-acoes,
.projects-config-settings,
.projects-config-chave {
    grid-column: 1 / -1;
}

.projects-config-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--chat-color-text-secondary);
    font-size: 0.75rem;
}

.projects-config-form input,
.projects-config-form select,
.projects-config-form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: var(--chat-space-2);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--chat-radius-sm);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    font: inherit;
}

.projects-config-form textarea {
    min-height: 80px;
    resize: vertical;
}

.projects-config-chave {
    margin: 0;
    color: var(--chat-color-text-secondary);
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.projects-config-form label.projects-config-check {
    flex-direction: row;
    align-items: center;
}

.projects-config-check input {
    width: auto;
}

.projects-config details {
    padding: var(--chat-space-2);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--chat-radius-sm);
}

.projects-config summary {
    cursor: pointer;
    color: var(--md-sys-color-primary);
    font-weight: 600;
}

@media (max-width: 600px) {
    .projects-workspace-header,
    .projects-command-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .projects-resumo,
    .projects-command-bar-acoes {
        justify-content: flex-start;
    }

    .projects-corpo {
        flex-direction: column;
    }

    .projects-config,
    .projects-drawer {
        width: auto;
    }

    .projects-config-form {
        grid-template-columns: 1fr;
    }
}