/* Aba «Faturação» da ficha do contrato (MOD.contratoFaturas). Prefixo cfat-.

   O que este ficheiro NÃO tem, de propósito: molduras de tabela, botões, badges,
   modais e estados vazios. Tudo isso é do design system (`ds-table`, `ds-btn`,
   `ds-badge`, `ds-modal`, `ds-lst-vazio`) — a versão anterior clonava-os aqui com
   nomes próprios e era por isso que a aba destoava do resto da app. Fica só o que é
   mesmo desta aba: a barra do topo e o alinhamento das colunas de número. */

/* O contentor de montagem. `min-width: 0` porque o corpo da secção da ficha é uma
   grelha: sem isto a largura intrínseca da tabela estoura a célula e a ficha inteira
   ganha scroll lateral (a mesma regra que as células com combobox já seguem). */
.cfat,
.cfat-corpo {
    min-width: 0;
}

/* Barra do topo: chip do Moloni + resumo + ações.
   Em ecrã estreito as ações passam para baixo, à largura toda — são alvos de toque,
   não enfeites de canto (a mesma regra do `.ds-lst-cab-acoes` do design system). */
.cfat-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2, 8px);
    margin-bottom: var(--sp-3, 12px);
}

.cfat-resumo {
    font-size: var(--txt-sm, 13px);
    color: var(--text-3, #5B5355);
    min-width: 0;
}

.cfat-barra-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2, 8px);
    width: 100%;
}

.cfat-barra-acoes>* {
    flex: 1 1 auto;
}

@media (min-width: 640px) {
    .cfat-barra-acoes {
        width: auto;
        margin-left: auto;
        flex-wrap: nowrap;
    }

    .cfat-barra-acoes>* {
        flex: 0 0 auto;
    }
}

/* Números alinhados à direita e com algarismos de largura fixa — uma coluna de
   valores só se lê de relance se as unidades ficarem umas por cima das outras. */
.cfat-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cfat-mono {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cfat-c-acoes {
    width: 1%;
    white-space: nowrap;
}

.cfat-sub {
    font-size: var(--txt-xs, 12px);
    color: var(--text-3, #6E6668);
}

/* Em ecrã estreito a `ds-table` vira cartões (design system, via `data-label`): a
   coluna de ações deixa de ser coluna e a largura de 1% passaria a espremer os botões
   contra a margem do cartão. */
@media (max-width: 767px) {
    .cfat-tabela .cfat-c-acoes {
        width: auto;
        white-space: normal;
    }
}

/* ---------- modal (a casca é a `ds-modal`; só o que é nosso) ---------- */
body.cfat-modal-aberto {
    overflow: hidden;
}

.cfat-modal-head-txt {
    min-width: 0;
}