/* ==========================================================================
   Cartões, listas e avatares

   .card é o ÚNICO contêiner de conteúdo do portal. Não existe .dashboard-card
   nem variação por tela: quem precisa de outra densidade usa um modificador
   de .card__body.
   ========================================================================== */

/* ==========================================================================
   Cartão
   ========================================================================== */

.card {
    min-width: 0;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-box);
    background: var(--color-body);
    overflow: hidden;
}

.card__head {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-width) solid var(--color-border);
}

.card__title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--color-title);
    letter-spacing: var(--tracking-card);
}

.card__sub { font-size: var(--fs-xs); color: var(--color-text-secondary); margin-top: var(--space-1); }

.card__body { padding: var(--space-4) var(--space-5) var(--space-5); }

/* Denso — quando o corpo já é uma lista com padding próprio. */
.card__body--tight { padding: var(--space-2) var(--space-3) var(--space-3); }

.card__body--list { padding: var(--space-2) var(--space-5) var(--space-4); }

.card__body--stack { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }

/* Formulário sem .card__head: o respiro do topo é o mesmo dos lados, senão os
   campos encostam na borda da caixa. Igual ao padding do corpo do drawer. */
.card__body--form { padding: var(--space-6); }

.card__body--flush-bottom { padding-bottom: 0; }

.card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    border-top: var(--border-width) solid var(--color-border);
    flex-wrap: wrap;
}

.card--detail { margin-top: var(--space-5); text-align: left; }

/* ==========================================================================
   Item de lista dentro de cartão
   ========================================================================== */

.row-item {
    width: 100%;
    display: grid;
    grid-template-columns: var(--border-width-emphasis) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border: 0;
    border-radius: var(--radius-box);
    background: transparent;
    font-family: inherit;
    text-align: left;
    transition: background var(--transition-fast);
}

.row-item:hover { background: var(--color-body-secondary); }

.row-item:focus-visible {
    outline: var(--focus-outline);
    outline-offset: calc(var(--focus-offset) * -1);
}

.row-item--plain { grid-template-columns: minmax(0, 1fr) auto; }

.row-item__title {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-title);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row-item__meta {
    display: block;
    font-size: var(--fs-xs);
    color: var(--color-text-secondary);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lista de relatórios / documentos com ícone à esquerda. */
.report-list__row {
    grid-template-columns: 20px 36px minmax(0, 1fr) auto;
    border-radius: 0;
    border-bottom: var(--border-width) solid var(--color-border);
    transition: none;
}

.report-list { padding: var(--space-4); }
.report-list__row:hover { background: transparent; }
.report-list__row:last-child { border-bottom: 0; }
.report-list__row.is-dragging { opacity: .45; }

.report-list__drag {
    display: grid;
    width: 20px;
    height: 32px;
    place-items: center;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: grab;
}

.report-list__drag:active { cursor: grabbing; }
.report-list__drag:hover { color: var(--color-text); }
.report-list__drag .ui-icon { width: 16px; height: 16px; }

.report-list__icon {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: var(--radius-control);
    background: var(--color-primary-surface);
    color: var(--color-primary-700);
}

.report-list__icon .ui-icon { width: 19px; height: 19px; }

/* O título abre o painel do Power BI. É botão, não link: o destino é um
   diálogo na mesma página, não um endereço. */
.report-list__open {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.report-list__open:hover { color: var(--color-text-link); text-decoration: underline; }

.report-list__open:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }

/* ==========================================================================
   Par chave/valor
   ========================================================================== */

.key-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: var(--border-width) solid var(--color-border-soft);
}

.key-value:last-child { border-bottom: 0; }

/* inline-flex para a chave poder levar um .dot antes do texto sem que ele
   escorregue da linha de base. Chave só de texto não muda de aparência. */
.key-value__key {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
}

/* Medium, não semibold. Numa ficha com dezesseis linhas, todo valor em negrito
   deixa de destacar: se tudo pesa, nada pesa. O peso agora separa o valor do
   rótulo (que é regular e secundário), e sobra ênfase para os modificadores de
   tom abaixo, que são os que realmente precisam saltar.
   `margin-left: auto` porque `text-align` sozinho não empurra a caixa num
   flex — o valor curto ficava colado no rótulo em vez de alinhar à direita. */
.key-value__val {
    margin-left: auto;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-title);
    text-align: right;
}

/* Os modificadores usam o token `-text` de cada tom. Usar o `-solid` aqui
   derrubava o contraste para 1.68:1 (warning) e 2.59:1 (success). */
.key-value__val--warning { color: var(--color-warning-text); }
.key-value__val--danger  { color: var(--color-danger-text); }
.key-value__val--success { color: var(--color-success-text); }

/* ==========================================================================
   Linha do tempo
   ========================================================================== */

.timeline__item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; }

/* Item que leva a algum lugar tem alvo de clique inteiro, não só o título. O
   respiro lateral é negativo para o realce sangrar até a borda do card. */
a.timeline__item {
    padding-inline: var(--space-2);
    margin-inline: calc(var(--space-2) * -1);
    border-radius: var(--radius-box);
    transition: background var(--transition-fast);
}

a.timeline__item:hover { background: var(--color-body-secondary); }

a.timeline__item:focus-visible { outline: var(--focus-outline); outline-offset: calc(var(--focus-offset) * -1); }

.timeline__rail { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }

.timeline__rail .dot { margin-top: 5px; }

.timeline__line { flex: 1 1 0; width: 1px; background: var(--color-border); }

/* Variante de feed — traço contínuo.

   Com o padding vertical no item, o rail parava 12px antes da borda e a linha
   saía picotada a cada registro. Aqui o respiro migra para o corpo e o traço
   vira pseudo-elemento do rail: ele percorre a linha inteira, de borda a
   borda, e emenda no item seguinte sem sobrepor nada. */
.timeline__item--feed { padding-block: 0; }

.timeline__item--feed .timeline__rail { position: relative; padding-top: var(--space-2); }

.timeline__item--feed .timeline__rail::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: var(--color-border);
}

/* O marcador é posicionado para cobrir o traço — é ele que interrompe a linha. */
.timeline__item--feed .timeline__mark { position: relative; }

/* Nada acima do primeiro: o traço começa escondido atrás do marcador.
   Nada abaixo do último: o traço morre dentro do marcador dele. */
.timeline__item--feed:first-child .timeline__rail::before { top: var(--space-3); }

.timeline__item--feed:last-child .timeline__rail::before { bottom: auto; height: var(--space-4); }

/* Marcador com ícone: diz o TIPO da atividade. O ponto sozinho não dizia —
   documento novo e atualização de projeto saíam idênticos na lista. */
.timeline__mark {
    width: 26px; height: 26px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--color-neutral-surface);
    color: var(--color-neutral-text);
}

.timeline__mark .ui-icon { width: 14px; height: 14px; }

.timeline__mark--info    { background: var(--color-info-surface);    color: var(--color-info-text); }
.timeline__mark--success { background: var(--color-success-surface); color: var(--color-success-text); }
.timeline__mark--warning { background: var(--color-warning-surface); color: var(--color-warning-text); }
.timeline__mark--danger  { background: var(--color-danger-surface);  color: var(--color-danger-text); }

.timeline__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-block: var(--space-3);
}

/* Título e carimbo na mesma linha: a data é apoio e não pode empurrar o
   assunto para baixo. */
.timeline__top { display: flex; align-items: center; gap: var(--space-3); }

.timeline__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-title);
    line-height: var(--lh-base);
}

.timeline__stamp {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.timeline__stamp .ui-icon { width: 13px; height: 13px; flex: 0 0 auto; color: var(--color-text-tertiary); }

.timeline__meta { font-size: var(--fs-xs); color: var(--color-text-secondary); }

.timeline__text { font-size: var(--fs-sm); color: var(--color-title); line-height: var(--lh-base); }

.timeline__text strong { font-weight: var(--fw-semibold); }

.timeline__time { font-size: var(--fs-xs); color: var(--color-text-secondary); margin-top: var(--space-1); }

/* Separador de dia do feed. Sem ele, doze eventos com o carimbo completo em
   cada linha viram uma coluna de datas repetidas; com ele, a data aparece uma
   vez por dia e o carimbo de cada item pode ficar só com a hora. */
/* ==========================================================================
   Atualização — card de evento e de compromisso

   Substitui o uso do `.timeline` dentro da ficha do negócio. O trilho vertical
   de marcos serve a um histórico contínuo, onde a linha entre um evento e o
   seguinte É a informação (o dashboard e o histórico do cliente usam assim).
   Na ficha, cada atualização é uma unidade que se lê inteira — quem escreveu, o
   quê, quando —, e o trilho só empurrava todo o conteúdo 26px para a direita
   sem ligar nada.

   O mesmo card serve às atividades: são o mesmo objeto em tempos diferentes —
   o que aconteceu e o que vai acontecer. Dois desenhos para isso obrigariam a
   pessoa a reaprender a leitura ao trocar de aba.
   ========================================================================== */

/* Linha do tempo, não pilha de cards.

   Cada evento era uma caixa com borda, 16px de respiro e o autor num chip no
   rodapé: 150px de altura para dizer "Diego ligou às 07:39 e o escopo foi
   confirmado". Com três eventos, a aba já rolava.

   Agora o evento é uma linha: marca à esquerda, cabeçalho de uma linha só
   (tipo · hora · autor) e o texto abaixo. O que segura visualmente os eventos
   juntos deixou de ser a moldura de cada um e passou a ser o filete vertical
   que liga uma marca à seguinte — que é o desenho de uma cronologia, e não o
   de uma lista de fichas. */
.update-list { display: flex; flex-direction: column; gap: var(--space-5); }

.update {
    position: relative;
    display: grid;
    grid-template-columns: var(--space-8) minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
    align-items: start;
}

/* O filete que liga um evento ao próximo. `:has(+ .update)` e não
   `:not(:last-child)` porque a quebra de dia entra no meio da lista: sem o
   teste do vizinho, o filete continuaria para dentro da data. */
.update:has(+ .update)::before {
    content: "";
    position: absolute;
    left: calc(var(--space-8) / 2);
    top: var(--space-8);
    bottom: calc(var(--space-5) * -1);
    width: var(--border-width);
    background: var(--color-border);
}

.update__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

/* Tipo, hora e autor na MESMA linha. Empilhados, o nome e o carimbo ocupavam
   duas linhas para dizer o que cabe folgado em uma — e a linha do tempo
   inteira dobrava de altura por causa disso. */
.update__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    min-width: 0;
}

/* Quadrado com canto de controle, não círculo: círculo nesta posição lê como
   avatar, e o autor do evento é dito por extenso no cabeçalho ao lado. */
.update__mark {
    width: var(--space-8); height: var(--space-8);
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: var(--radius-control);
    background: var(--color-neutral-surface);
    color: var(--color-neutral-text);
}

.update__mark .ui-icon { width: 16px; height: 16px; }

.update__mark--info    { background: var(--color-info-surface);    color: var(--color-info-text); }
.update__mark--success { background: var(--color-success-surface); color: var(--color-success-text); }
.update__mark--warning { background: var(--color-warning-surface); color: var(--color-warning-text); }
.update__mark--danger  { background: var(--color-danger-surface);  color: var(--color-danger-text); }

.update__name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-title);
}

.update__time { font-size: var(--fs-xs); color: var(--color-text-secondary); }

.update__text {
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--color-text);
    text-wrap: pretty;
}

/* Etiqueta de situação, à direita do cabeçalho do evento. Só a aba de
   atividades a usa — no histórico o tipo já é o próprio rótulo. */
.update__badge { margin-left: auto; }

/* Quebra de dia — carimbo à esquerda, no eixo dos eventos.

   Era uma pílula centrada com um filete atravessando por trás, e ela cortava a
   coluna em duas metades: numa linha do tempo em que tudo se lê da esquerda
   para a direita, o único elemento centralizado era a data. Encostada à
   esquerda, ela vira o cabeçalho do trecho que vem abaixo. */
.update-day {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.update-day::after {
    content: "";
    flex: 1 1 auto;
    height: var(--border-width);
    background: var(--color-border);
}

.update-day span {
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Autor do evento. O `.chip` já existe para metadado; aqui ele ganha só o
   tamanho do avatar, que por padrão é maior que a altura do chip. */


/* ==========================================================================
   Avatar
   ========================================================================== */

/* Sem foto, o avatar é a inicial sobre fundo claro da marca — o mesmo par em
   qualquer fundo, do card branco à sidebar escura. Com foto, a imagem cobre
   tudo e o fundo só aparece enquanto ela carrega. */
.avatar {
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    font-weight: var(--fw-semibold);
    background: var(--color-avatar-surface);
    color: var(--color-avatar-text);
    text-transform: uppercase;
    line-height: 1;
    overflow: hidden;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar--xs { width: 22px; height: 22px; font-size: var(--fs-xs); }
.avatar--sm {
    width: var(--avatar-size-sm);
    height: var(--avatar-size-sm);
    font-size: var(--avatar-font-sm);
}
.avatar--md { width: 30px; height: 30px; font-size: var(--fs-xs); }
.avatar--lg { width: var(--control-h); height: var(--control-h); font-size: var(--fs-sm); }

/* Sem responsável definido. */
.avatar--empty {
    background: var(--color-body-tertiary);
    color: var(--color-text-secondary);
    border: var(--border-width) dashed var(--color-border-strong);
}

/* ==========================================================================
   Conteúdo incorporado e galeria
   ========================================================================== */

.embed { aspect-ratio: 16 / 9; }
.embed__frame { width: 100%; height: 100%; border: 0; display: block; }

/* Dentro do drawer o painel ocupa a altura disponível: com 16/9 sobraria
   faixa vazia embaixo e o relatório ficaria pequeno demais para ler. */
.embed--fill { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }

.photo__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.photo__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo__full { display: block; width: 100%; }

.photo__actions {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: var(--z-raised);
    display: inline-flex;
}

@media print {
    .card { break-inside: avoid; }
}