/* Projetos (mod-projetos). Prefixo prj-.

   ⚠️ Aqui só vive o que é MESMO deste módulo. O cabeçalho, a modal, os campos, a
   tabela e os estados vazios vêm do design system (ds-listagem.css, design-system.css)
   e não se re-escrevem: a auditoria de 28/08 apanhou uma `.prj-cab-acoes` privada a
   imitar a `.ds-lst-cab-acoes` — com `margin-left:auto` e `flex-shrink:0`, que são
   propriedades de flex e o `.ds-lst-cab` é GRID (não faziam nada), e sem o
   `grid-column:1/-1` que em mobile manda os botões para a linha de baixo. Resultado:
   título esmagado a 7px de largura a 390px e botões assimétricos. A classe foi
   apagada, não corrigida. */

.prj-zona { min-width: 0; }

.prj-tabela { width: 100%; }
.prj-tabela tbody tr[data-prj-abrir] { cursor: pointer; }
.prj-tabela tbody tr[data-prj-abrir]:hover { background: var(--paper-50, #F7F8FA); }
.prj-tabela tbody tr[data-prj-abrir]:focus-visible {
    outline: 2px solid var(--primary-500, #DA0A0D);
    outline-offset: -2px;
}

.prj-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Segundo nível da célula-título (cliente do projeto, fornecedor do movimento).
   Em cartão de telemóvel a célula é flex e o `display:block` mantém-no como um item
   próprio, à direita do nome — o mesmo desenho do `.mme-peca-obs`. */
.prj-nome { display: block; font-weight: 600; color: var(--neutral-800, #2B2426); }
.prj-sub { display: block; font-size: 12px; color: var(--ink-500, #6E6668); }

.prj-vazio-cel { padding: 0; }
.prj-excedido { color: var(--brand-500, #DA0A0D); font-weight: 800; }

.prj-celbarra { min-width: 160px; }
.prj-barra { height: 8px; border-radius: 9999px; background: var(--paper-100, #EFEDEE); overflow: hidden; margin-bottom: 3px; }
.prj-barra i { display: block; height: 100%; background: var(--success-500, #15803D); border-radius: 9999px; }
.prj-barra--excedida i { background: var(--brand-500, #DA0A0D); }

.prj-det-meta { font-weight: 600; color: var(--ink-700, #4A4245); margin: 0 0 10px; }

/* ---------- modal (ds-modal) ---------- */
.prj-modal-head-txt { min-width: 0; flex: 1 1 auto; }
body.prj-modal-aberto { overflow: hidden; }

/* Paisagem em telemóvel: o cabeçalho e o rodapé têm de continuar visíveis. */
@media (max-height: 520px) and (orientation: landscape) {
    .prj-modal-overlay .ds-modal { max-height: 96vh; }
    .prj-modal-overlay .ds-modal-body { max-height: calc(96vh - 118px); overflow-y: auto; }
}

/* A barra de execução dentro do cartão de telemóvel: a célula é flex e a barra
   precisa da largura toda para dizer alguma coisa. */
@media (max-width: 767px) {
    .prj-tabela tbody td.prj-celbarra { flex-wrap: wrap; }
    .prj-tabela tbody td.prj-celbarra .prj-barra { flex: 1 0 100%; }
}