/* =====================================================================================
   EFICÁCIA CRM — mod-bo-atividades.css · Backoffice ▸ Atividades

   MOBILE-FIRST A SÉRIO, e não «desktop com uma media query no fim». As regras base são
   as do telemóvel; o que vem depois só ACRESCENTA espaço quando há espaço. É a ordem que
   evita o defeito habitual — um ecrã que fica bem a 1280 e depois se remenda a 390.

   TRÊS COISAS QUE ESTE FICHEIRO RESOLVE E QUE NÃO SÃO ÓBVIAS:

   1. A LINHA INTEIRA É O BOTÃO. Não há um «ver» de 24px ao canto: o alvo é a linha toda,
      com 44px de altura mínima. Num registo de auditoria percorre-se a lista com o
      polegar, e um alvo pequeno numa lista longa é um convite a abrir a linha errada.

   2. NADA TRANSBORDA PARA O LADO. A tabela do antes/depois tem valores de comprimento
      imprevisível (um caminho, um JSON, um texto de 400 caracteres). Fica dentro do seu
      próprio contentor com `overflow-x: auto` e as células quebram por palavra — a
      página nunca ganha barra horizontal, que é violação crítica na auditoria responsiva.

   3. O ANTES E O DEPOIS SÃO LEGÍVEIS SEM COR. O «antes» leva um risco e o «depois» leva
      peso; a cor é reforço, não o sinal. Quem não distingue vermelho de verde tem de
      conseguir ler a diferença — e num ecrã que serve para investigar, ler mal é pior do
      que não ler.
   ===================================================================================== */

.au-raiz {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.au-intro {
    margin: 0;
}

/* ---------- Filtros ---------------------------------------------------------------
   Um <details> e não um painel feito à mão: o navegador já sabe abrir, fechar, anunciar
   o estado aos leitores de ecrã e responder ao teclado. Fechado no telemóvel, aberto no
   computador — decidido no `init`, porque o estado inicial é comportamento, não estilo. */

.au-filtros {
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    background: var(--neutral-0);
}

.au-filtros-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--ds-touch, 44px);
    padding: 0 14px;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold, 600);
    color: var(--neutral-700);
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.au-filtros-cab::-webkit-details-marker {
    display: none;
}

.au-filtros-cab::after {
    content: '';
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid var(--neutral-400);
    border-bottom: 2px solid var(--neutral-400);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
}

.au-filtros[open] .au-filtros-cab::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.au-filtros-cab:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: -2px;
    border-radius: var(--radius-md);
}

/* Quantos filtros estão activos. Sem isto, um filtro esquecido dentro de um painel
   fechado faz a lista parecer vazia sem explicação nenhuma.

   O `[hidden]` TEM de estar aqui. O atributo `hidden` vale `display: none` na folha do
   navegador — e qualquer `display` que nós declaremos ganha-lhe, porque a nossa folha vem
   depois. Apanhado no ensaio a 320px: com zero filtros activos, o contador estava
   escondido em JavaScript e continuava a desenhar-se, uma bola vermelha vazia ao lado da
   palavra «Filtros». Vale para todos os elementos deste ficheiro que se escondem por
   atributo (`.au-det`, `.au-pag`). */
.au-filtros-conta[hidden] {
    display: none;
}

.au-filtros-conta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full, 999px);
    background: var(--primary-600);
    color: #fff;
    /* 12px é o mínimo do gate responsivo abaixo de 768px, e não é um número
       arbitrário: por baixo disso lê-se mal num telemóvel na rua. Encolhe para 11px
       só onde o ecrã é grande — ver o bloco de >=768px no fim do ficheiro. */
    font-size: 12px;
    font-weight: var(--fw-bold, 700);
    font-variant-numeric: tabular-nums;
}

.au-filtros-corpo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 4px 14px 14px;
    border-top: 1px solid var(--neutral-100);
}

.au-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.au-campo .ds-input {
    width: 100%;
    /* 16px é a fronteira do zoom automático do Safari em iOS: abaixo disto, tocar num
       campo faz a página saltar e o utilizador tem de voltar a enquadrá-la à mão. */
    font-size: 16px;
    min-height: var(--ds-touch, 44px);
}

.au-campo--acoes {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.au-campo--acoes .ds-btn {
    min-height: var(--ds-touch, 44px);
    flex: 1 1 auto;
}

/* ---------- Lista ------------------------------------------------------------------ */

.au-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.au-item {
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    overflow: hidden;
}

.au-h {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.au-linha {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        'accao texto seta'
        'accao quando seta';
    align-items: center;
    gap: 4px 10px;
    width: 100%;
    min-height: var(--ds-touch, 44px);
    padding: 10px 12px;
    border: 0;
    background: transparent;
    font-family: var(--font-family);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.au-linha:hover {
    background: var(--neutral-25, #fafafa);
}

.au-linha:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: -2px;
}

.au-accao {
    grid-area: accao;
    align-self: start;
    white-space: nowrap;
}

.au-txt {
    grid-area: texto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.au-resumo {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold, 600);
    color: var(--neutral-800);
    /* Duas linhas e corta. O resumo traz a lista dos campos alterados e pode ser longo;
       sem limite, uma linha de auditoria ocupava meio ecrã de telemóvel. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.au-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: var(--text-xs);
    color: var(--neutral-500);
    min-width: 0;
}

.au-meta>span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.au-quando {
    grid-area: quando;
    font-size: var(--text-xs);
    color: var(--neutral-500);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.au-seta {
    grid-area: seta;
    display: inline-flex;
    align-items: center;
    color: var(--neutral-400);
    transition: transform .15s ease;
}

.au-linha[aria-expanded='true'] .au-seta {
    transform: rotate(180deg);
}

.au-linha[aria-expanded='true'] {
    background: var(--primary-50, #eff6ff);
}

/* ---------- Detalhe ---------------------------------------------------------------- */

.au-det {
    padding: 12px;
    border-top: 1px solid var(--neutral-200);
    background: var(--neutral-25, #fafafa);
    min-width: 0;
}

.au-det[hidden] {
    display: none;
}

.au-ficha {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 0 0 12px;
}

.au-ficha-l {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 8px;
    align-items: baseline;
    min-width: 0;
}

.au-ficha dt {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold, 600);
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.au-ficha dd {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--neutral-800);
    overflow-wrap: anywhere;
}

/* A tabela do antes/depois. O contentor é que rola — nunca a página.
   Ver o ponto 2 do cabeçalho. */
.au-diff-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    background: var(--neutral-0);
    max-width: 100%;
}

.au-diff {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
    table-layout: fixed;
}

.au-diff th,
.au-diff td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--neutral-100);
    overflow-wrap: anywhere;
}

.au-diff thead th {
    font-size: 12px;
    font-weight: var(--fw-semibold, 600);
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: .02em;
    background: var(--neutral-50);
    white-space: nowrap;
}

.au-diff tbody tr:last-child th,
.au-diff tbody tr:last-child td {
    border-bottom: 0;
}

/* Duas colunas quando só há um lado (criação ou remoção) — ver a nota no `htmlDetalhe`. */
.au-diff--simples .au-campo-nome {
    width: 34%;
}

.au-campo-nome {
    width: 30%;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-weight: var(--fw-semibold, 600);
    color: var(--neutral-700);
}

/* O sinal é a FORMA (risco / peso); a cor só reforça. Ponto 3 do cabeçalho. */
.au-de .au-v {
    color: var(--neutral-500);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.au-para .au-v {
    color: var(--success-700, #047857);
    font-weight: var(--fw-semibold, 600);
}

.au-nulo {
    color: var(--neutral-400);
    font-style: italic;
}

.au-sem-diff {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--neutral-500);
}

.au-aviso {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 10px;
    font-size: var(--text-xs);
    color: var(--warning-700, #b45309);
}

.au-bruto {
    margin: 10px 0 0;
    padding: 10px;
    max-height: 240px;
    overflow: auto;
    border-radius: var(--radius-sm);
    background: var(--neutral-100);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---------- Paginação -------------------------------------------------------------- */

.au-pag {
    padding-top: 4px;
}

/* O `.ds-select--sm` do design system tem 36px de altura — desenhado para uma barra de
   ferramentas de computador. Aqui está numa barra que se usa com o polegar, e 36px falha
   o mínimo de 44. Sobe-se no telemóvel e deixa-se o compacto onde há rato (>=768px). */
.au-pag .ds-pagesize .ds-select {
    min-height: var(--ds-touch, 44px);
    height: auto;
}

.au-pag[hidden] {
    display: none;
}

.au-total {
    margin-left: 8px;
    font-size: var(--text-xs);
    color: var(--neutral-500);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Abaixo de 480px a janela de números não cabe ao lado das setas: ficam as setas e a
   página actual, que é o que se usa com uma mão. */
@media (max-width: 479px) {
    .au-pag .ds-page-btn--num:not(.is-active) {
        display: none;
    }

    .au-total {
        width: 100%;
        margin: 6px 0 0;
    }
}

/* ---------- Ecrãs com espaço ------------------------------------------------------- */

@media (min-width: 640px) {
    .au-filtros-corpo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .au-campo--largo {
        grid-column: 1 / -1;
    }

    .au-campo .ds-input {
        font-size: var(--text-sm);
    }

    .au-linha {
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas: 'accao texto quando seta';
        gap: 12px;
        padding: 10px 14px;
    }

    .au-accao {
        align-self: center;
    }

    .au-ficha {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 20px;
    }

    .au-diff {
        font-size: var(--text-sm);
    }
}

/* A partir daqui há rato e o ecrã lê-se de mais perto: os rótulos secundários voltam a
   11px, que é a escala do resto do design system em ecrãs grandes, e a barra de
   paginação volta ao compacto. O bloco de `pointer: coarse`, mais abaixo, desfaz isto
   num tablet — porque lá o dedo continua a ser o dedo. */
@media (min-width: 768px) {

    .au-filtros-conta,
    .au-diff thead th,
    .au-bruto {
        font-size: 11px;
    }

    .au-pag .ds-pagesize .ds-select {
        min-height: 0;
        height: var(--ds-control-h-sm, 34px);
    }
}

@media (min-width: 1024px) {
    .au-filtros-corpo {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .au-campo--largo {
        grid-column: span 2;
    }

    .au-campo--acoes {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .au-campo--acoes .ds-btn {
        flex: 0 0 auto;
        min-height: 34px;
    }

    .au-ficha {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .au-campo-nome {
        width: 22%;
    }
}

/* Em ecrãs de toque o alvo é sempre o alvo, largura nenhuma o dispensa: um tablet de
   1024px continua a ser usado com o dedo. */
@media (pointer: coarse) {

    .au-linha,
    .au-filtros-cab,
    .au-campo--acoes .ds-btn,
    .au-pag .ds-page-btn {
        min-height: var(--ds-touch, 44px);
    }

    .au-pag .ds-page-btn {
        min-width: var(--ds-touch, 44px);
    }

    .au-pag .ds-pagesize .ds-select {
        min-height: var(--ds-touch, 44px);
        height: auto;
    }

    /* E o texto também. Um tablet de 1024px cai nas regras de ecrã grande e voltava aos
       11px — mas está a ser lido à distância de um braço, com o dedo, como um telemóvel.
       O gate de responsividade tem uma opção (`--toque-por-ponteiro`) que corre os checks
       de toque e de fonte em QUALQUER largura quando o ponteiro é grosseiro; esta regra é
       o outro lado dessa opção. */
    .au-filtros-conta,
    .au-diff thead th,
    .au-bruto {
        font-size: 12px;
    }
}

/* Modo escuro: a app segue `prefers-color-scheme` através dos tokens, e as poucas cores
   fixas aqui têm de o acompanhar — senão o painel de detalhe fica branco no meio de uma
   página escura. */
@media (prefers-color-scheme: dark) {
    .au-linha:hover {
        background: var(--neutral-100);
    }

    .au-det {
        background: var(--neutral-50);
    }
}