/* =====================================================================================
   EFICÁCIA CRM — mod-posicoes.css · Extras do módulo Posições Identificadas
   Só o que o design-system.css NÃO cobre. Prefixo: mps-
   Depende de: design-system.css, ds-listagem.css (`.ds-lst-*`, `.ds-lst-kpi*`)
   Mobile-first: as regras base servem <768px; @media (min-width:…) acrescenta desktop.
   ===================================================================================== */

/* ---------- página / listagem ---------- */
.mps-page { min-width: 0; overflow-x: clip; }
.mps-page :where(img, svg, video) { max-width: 100%; }

.mps-procurar-wrap { position: relative; }
.mps-procurar-wrap > svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--neutral-400);
    pointer-events: none;
}
.mps-procurar-wrap .ds-input { padding-left: 38px; }

/* Números de página só a partir de 640px (em mobile fica "x / y") */
.mps-pager-nums { display: none; }
@media (min-width: 640px) {
    .mps-pager-nums { display: inline-flex; gap: 4px; }
}

/* FAB mobile — criar sempre ao alcance do polegar */
.mps-fab {
    position: fixed;
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    padding: 0;
    box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) {
    .mps-fab { display: none; }
}

/* --- cartão (< 1024 px): Referência | Situação · Nome · Categoria · Sub · Concelho ---
   ⚠️ `--codigo` e `--estado` são classes da MOLDURA e vivem em TODAS as listagens da
   app. Esta folha é global e sem camada, por isso um `.ds-lst-c--codigo { grid-row }`
   solto empurrava o código de todos os outros módulos. O escopo
   `[data-lista="posicoes"]` é obrigatório sempre que se toca numa classe que não é
   nossa — a lição está escrita, com o mesmo aviso, no mod-equipamentos.css. */
[data-lista="posicoes"] .ds-lst-c--codigo { grid-row: 1; }
[data-lista="posicoes"] .ds-lst-c--estado { grid-row: 1; }
.ds-lst-c--mpsnome { grid-column: 1 / -1; grid-row: 2; }
.ds-lst-c--mpscategoria { grid-column: 1 / -1; grid-row: 3; }
.ds-lst-c--mpssub { grid-column: 1 / -1; grid-row: 4; }
.ds-lst-c--mpslocal { grid-column: 1 / -1; grid-row: 5; }

/* O nome é o herói do cartão logo a seguir à referência: dispensa eyebrow. */
.ds-lst-c--mpsnome[data-rot]::before { content: none; }

@media (min-width: 1024px) {
    .ds-lst-h--mpsnome { width: auto; }
    .ds-lst-h--mpscategoria { width: 180px; }
    .ds-lst-h--mpssub { width: 150px; }
    .ds-lst-h--mpslocal { width: 150px; }
    .ds-lst-c--mpsnome,
    .ds-lst-c--mpscategoria,
    .ds-lst-c--mpssub,
    .ds-lst-c--mpslocal { overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- ficha (detalhe) ----------
   Grelha de rótulo/valor. Não é o `MOD.ficha`: são doze campos e nenhuma sub-colecção
   (ver o cabeçalho do mod-posicoes.js). O desenho segue o das secções da ficha —
   rótulo pequeno por cima, valor a seguir — para não parecer outro produto. */
.mps-kvs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 20px;
}
@media (min-width: 640px) {
    .mps-kvs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .mps-kvs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mps-kv { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mps-kv--largo { grid-column: 1 / -1; }

.mps-kv-rot {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.mps-kv-val {
    font-size: var(--text-sm);
    color: var(--neutral-800);
    overflow-wrap: anywhere;
}

/* Observações: texto livre, com as quebras de linha do utilizador preservadas.
   `pre-wrap` e não `pre`: o texto tem de continuar a dobrar no telemóvel. */
.mps-obs {
    white-space: pre-wrap;
    font-size: var(--text-sm);
    color: var(--neutral-700);
    overflow-wrap: anywhere;
}

.mps-promovida { margin-bottom: 16px; }
/* «Adjudicada — falta montar»: o mesmo espaçamento do aviso irmão. Só isso — a cor e a
   forma são as do `ds-alert--warning`, e um estilo próprio fazia dele um aviso parecido
   em vez do mesmo. */
.mps-adjudicada { margin-bottom: 16px; }
.mps-prom-nota { margin-bottom: 16px; }

/* ---------- modal ---------- */
body.mps-modal-aberto { overflow: hidden; }
.mps-modal-head-txt { min-width: 0; }

/* Paisagem baixa (844x390): o modal cabe e faz scroll interno */
@media (max-height: 480px) {
    .mps-modal-overlay .ds-modal { max-height: 96vh; }
    .mps-modal-overlay .ds-modal-body { max-height: calc(96vh - 118px); overflow-y: auto; }
}

/* Alvos de toque de 44 px nos controlos pequenos, também dentro do modal. */
@media (pointer: coarse) {
    .mps-modal-overlay .ds-modal-close { min-width: 44px; min-height: 44px; }
}

/* Código do suporte que a posição originou, por baixo da referência na listagem
   «já promovidas». Bloco próprio para não ficar colado à referência na mesma linha. */
.mps-cod-suporte {
    display: block;
    white-space: nowrap;
}

/* Marca de «adjudicada por montar», debaixo da referência. Linha própria pela mesma razão
   do código do suporte acima — e não na coluna Situação, onde um segundo crachá empurrava
   o primeiro para fora da célula. */
.mps-adj-marca {
    display: block;
    margin-top: 2px;
    white-space: nowrap;
}