/* Editores de documentos (Movimentos) — layout de 2026-09.
   Começou no EditVendas (desktop); a ideia é estender aos outros editores de movimentos.
   Só usa variáveis do MudBlazor, por isso serve ao tema claro e ao escuro sem regras à parte.
   O mobile (largura <= 800) ainda usa o markup antigo: nada aqui se aplica sem .mov-pagina. */

/* Página à altura da janela: cabeçalho e rodapé fixos, as linhas ficam com o espaço que sobra. */
.mov-pagina { display: flex; flex-direction: column; height: calc(100dvh - 80px); box-sizing: border-box; padding-bottom: 6px; font-variant-numeric: tabular-nums; }
.mov-pagina > .mov-corpo { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.mov-pagina .mov-corpo-linhas { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
/* POS: o corpo está dentro de um EditForm (<form>) */
.mov-pagina > form { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.mov-pagina > form > .mov-corpo { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.mov-pagina-m > form > .mov-corpo { display: flex; flex-direction: column; gap: 10px; }

/* Botões de ícone junto a campos: regra comum em gestao.css ("Botões de ícone junto a campos").
   Barras de ferramentas (.mov-grupo): ícone simples, sem fundo; o grupo já faz de moldura. */

/* Cartão do documento */
.mov-doc { flex: none; }
.mov-anulado { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 12px 12px 0 0;
               background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
               border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
               color: var(--mud-palette-error-darken); font-size: .85rem; font-weight: 600; }
.mov-anulado > span { flex-grow: 1; }
.mov-doc-cab { padding-bottom: 10px; }
.mov-doc-cab h3 { flex-grow: 0; }
.mov-estado { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; white-space: nowrap;
              font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
              background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }
.mov-estado-fechado { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); color: var(--mud-palette-primary-darken); }
.mov-estado-pago { background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); color: var(--mud-palette-success-darken); }
.mov-estado-pendente { background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent); color: var(--mud-palette-warning-darken); }
.mov-estado-anulado { background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent); color: var(--mud-palette-error-darken); }

.mov-ferramentas { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.mov-grupo { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--mud-palette-lines-default);
             border-radius: 10px; background: var(--mud-palette-background); }
.mov-grupo .mud-tooltip-root { display: inline-flex; }
.mov-grupo .mud-icon-button { padding: 7px; }
.mov-grupo .mud-icon-button .mud-icon-size-small { font-size: 1.3rem; }

.mov-doc-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 0 18px 12px; }
.mov-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mov-campo > span:first-child { font-size: .75rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.mov-c-doc { flex: 1 1 200px; max-width: 320px; }
.mov-c-num { flex: 0 0 110px; }
.mov-c-data { flex: 0 0 140px; }
.mov-c-ent { flex: 3 1 380px; }
.mov-c-nif { flex: 0 0 140px; }
.mov-c-check { flex: 0 0 auto; padding-bottom: 8px; }
.mov-c-vend { flex: 0 1 280px; }
.mov-linha { display: flex; align-items: center; gap: 6px; }
/* caixa de texto com botão ao lado (Assistências: problema, diagnóstico...): botão em cima */
.mov-linha-texto { align-items: flex-start; }
.mov-linha-texto > .rz-textarea { flex: 1 1 auto; min-width: 0; }
.mov-grupo-etiq { padding-left: 4px; }
.mov-grupo-etiq .k-numerictextbox { height: 30px; }
.mov-nome { flex: 1 1 auto; min-width: 0; }

/* "Mais dados": os antigos separadores, como pílulas; só o aberto se desenha */
.mov-mais { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 6px 10px; border-top: 1px solid var(--mud-palette-lines-default); }
.mov-mais-tog, .mov-pill { height: 30px; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px;
                           background: transparent; font: inherit; font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-secondary); cursor: pointer; }
.mov-mais-tog { color: var(--mud-palette-primary); padding-left: 6px; }
.mov-mais-tog:hover, .mov-pill:hover { background: var(--mud-palette-action-default-hover); }
.mov-pill-on { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
               color: var(--mud-palette-primary-darken); }
.mov-painel { padding: 4px 18px 14px; }
.mov-painel > div { min-height: 0 !important; }
/* Painéis do desktop: 12 colunas à largura do cartão; os botões alinham pela base dos campos */
.mov-painel-grelha { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px 14px; align-items: end; }
.mov-painel-grelha .mov-linha > .rz-textbox, .mov-painel-grelha .mov-linha > .rz-dropdown, .mov-cresce { flex: 1 1 auto; min-width: 0; }
.mov-campo-acao { justify-content: flex-end; }
.mov-campo-acao .mud-button-root { height: 36px; }
.mov-rodape-painel { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 24px; }
@media (max-width: 1200px) {
    .mov-painel-grelha { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .mov-painel-grelha > * { grid-column: span 3 !important; }
    .mov-painel-grelha > [style*="1 / -1"] { grid-column: 1 / -1 !important; }
}

/* Cartão das linhas: a grelha (Height="100%") fica em absoluto dentro de um contentor flexível */
.mov-linhas { flex: 1 1 0; min-height: 240px; display: flex; flex-direction: column; overflow: hidden; }
.mov-linhas-cab { display: flex; align-items: center; gap: 8px; padding: 10px 14px 6px; }
.mov-linhas-cab h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.mov-entrada { padding: 10px 10px 8px; }
.mov-descricao { position: relative; }
.mov-descricao .rz-textbox { padding-right: 150px; }
.mov-stock { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); pointer-events: none; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.mov-entrada-tabela { width: 100%; border: none; border-spacing: 0; }
.mov-entrada-tabela td { border: none; padding: 0 2px; }
/* campos de 2-3 caracteres (Uni., Arm., IVA): menos margem interior para o texto caber */
.mov-entrada-tabela .rz-textbox { padding-left: 6px; padding-right: 6px; }
/* Até ~1100px (iPad ao alto, portátil pequeno) a linha de entrada não cabe numa só linha: a tabela
   passa a flex com quebra — a célula sem largura fixa (a Descrição) estica e fica com pelo menos
   260px; o que não couber (Uni., Arm., IVA, preço, quantidade, Insere) desce, encostado à direita. */
@media (max-width: 1100px) {
    .mov-pagina .mov-entrada-tabela, .mov-pagina .mov-entrada-tabela > tbody { display: block; }
    .mov-pagina .mov-entrada-tabela tr { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; row-gap: 6px; }
    .mov-pagina .mov-entrada-tabela td { flex: 0 0 auto; }
    .mov-pagina .mov-entrada-tabela td:not([style*="width"]) { flex: 1 0 260px; }
}
.mov-grelha { flex: 1 1 0; min-height: 0; position: relative; border-top: 1px solid var(--mud-palette-lines-default); }
.mov-grelha > .k-grid { position: absolute; inset: 0; border: 0; border-radius: 0 0 12px 12px; }
/* colunas de 2-3 caracteres (Uni., Arm., IVA, descontos) cabem em ~44px com menos margem interior */
.mov-grelha .k-grid td, .mov-grelha .k-grid th { padding-left: 6px; padding-right: 6px; }

/* Rodapé em duas linhas: totais em cima (à direita); Anular/Novo à esquerda e ações à direita
   por baixo. Só em ecrãs muito largos cabe tudo numa linha. */
.mov-rodape { flex: none; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "tot tot" "esq acoes";
              align-items: center; gap: 8px 12px; margin-top: 10px; padding: 10px 14px;
              background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; }
.mov-rodape-esq { grid-area: esq; display: flex; align-items: center; gap: 8px; }
.mov-totais { grid-area: tot; display: flex; flex-direction: row; justify-content: flex-end; flex-wrap: wrap; row-gap: 6px;
              padding-bottom: 8px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.mov-rodape .mov-acoes { grid-area: acoes; justify-self: end; }
/* Sempre duas linhas, em qualquer largura: numa só linha, a ~1400px de página o Total já caía
   para baixo dos outros totais. Os totais nunca partem de linha. */
.mov-totais { flex-wrap: nowrap; overflow-x: auto; }
.mov-total { display: flex; flex-direction: column; gap: 1px; padding: 0 16px; border-left: 1px solid var(--mud-palette-lines-default); min-width: 0; }
.mov-total span { font-size: .72rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.mov-total b { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.mov-total-final b { font-size: 1.45rem; color: var(--mud-palette-primary-darken); }
.mov-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.mov-acoes .mud-button-root { white-space: nowrap; }
/* Entre 801 e ~1100px (iPad ao alto, portátil pequeno) as ações não cabem numa linha: partem para
   baixo, encostadas à direita, em vez de empurrarem o rodapé (e o Total) para fora do ecrã. */
@media (max-width: 1100px) {
    .mov-rodape .mov-acoes { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; min-width: 0; }
    .mov-rodape-esq { align-self: start; }
    .mov-total { padding: 0 10px; }
}
/* Lançamento simplificado (EditCompras2 / EditMoviment2): o documento arquivado ocupa o resto da
   página, com a lista de anexos à direita; o rodapé só tem uma linha (não há totais calculados). */
.mov-arquivo { flex: 1 1 0; min-height: 260px; margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr) 300px;
               grid-template-rows: minmax(0, 1fr); overflow: hidden; }
/* o documento em absoluto: a altura vem do espaço que sobra na página, nunca do PDF */
.mov-arquivo-doc { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
                   background: var(--mud-palette-background-gray); border-right: 1px solid var(--mud-palette-lines-default); }
.mov-arquivo-doc > iframe, .mov-arquivo-doc > img { position: absolute; inset: 0; width: 100%; height: 100% !important; }
.mov-arquivo-doc > img { object-fit: contain; }
.mov-arquivo-lista { min-height: 0; display: flex; flex-direction: column; }
.mov-rodape-simples { grid-template-columns: auto 1fr; grid-template-areas: "esq acoes"; }
.mov-campo-total .k-input-inner { font-weight: 700; }
.mov-pagina-m .mov-arquivo { flex: none; grid-template-columns: 1fr; grid-template-rows: 60vh 220px; }
.mov-pagina-m .mov-arquivo-doc { border-right: 0; border-bottom: 1px solid var(--mud-palette-lines-default); }

/* Fichas (EditAvencas): campo obrigatório, abas no topo do cartão, observações à altura do cartão */
.mov-obrigatorio { color: var(--mud-palette-error); }
.mov-mais-abas { border-top: 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.mov-obs-aba { flex: 1 1 0; min-height: 0; display: flex; padding-top: 12px; }
.mov-obs-aba > .rz-textarea { flex: 1 1 auto; }

/* Painel lateral dos anexos (Shared/PainelAnexos): mais largo que os da Gestão, para o PDF */
.ges-lateral.pax-lateral { width: min(960px, 100vw); }
.pax-zona { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.pax-encaixe { display: flex; align-items: center; }
.pax-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 22px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.pax-barra .mov-pill { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pax-corpo { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
             background: var(--mud-palette-background-gray); }
.pax-vazio { padding: 24px; text-align: center; color: var(--mud-palette-text-secondary); font-size: .9rem; }
@media (max-width: 700px) { .pax-barra { padding: 8px 14px; } }

/* ------------------------------------------------------------------ Mobile (largura <= 800) */
.mov-pagina-m { padding-bottom: 76px; }
.mov-pagina-m > .mov-corpo { display: flex; flex-direction: column; gap: 10px; }
.mov-doc-m .ges-cartao-cab { padding: 12px 14px 6px; }
.mov-doc-m .ges-cartao-cab h3 { font-size: .95rem; }
.mov-campos-m { padding: 0 14px 10px; }
.mov-campos-m label { font-size: .75rem; font-weight: 600; color: var(--mud-palette-text-secondary); margin: 6px 0 2px; }
.mov-ferramentas-m { display: flex; align-items: center; gap: 8px; padding-top: 8px; }
.mov-doc-m .mov-mais { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.mov-doc-m .mov-mais > * { flex: none; }
.mov-doc-m .mov-painel { padding: 4px 14px 12px; }
.mov-linhas-m { overflow: hidden; }
.mov-linhas-m .mov-linhas-cab { padding: 10px 12px; }
.mov-linhas-m .k-grid { border: 0; border-top: 1px solid var(--mud-palette-lines-default); }
.mov-lm { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px; }
.mov-lm-t { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; font-weight: 600; white-space: normal; }
.mov-lm-t b { white-space: nowrap; }
.mov-lm-s { font-size: .78rem; color: var(--mud-palette-text-secondary); white-space: normal; }
.mov-rodape-m { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; display: flex; align-items: center; gap: 8px;
                padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--mud-palette-surface);
                border-top: 1px solid var(--mud-palette-lines-default); box-shadow: 0 -4px 14px rgba(20, 30, 45, .08); }
/* Ecrãs tácteis: enquanto se escreve num campo, o teclado ocupa metade do ecrã e o rodapé fixo
   tapava o campo — sai de cena até o foco sair. */
@media (pointer: coarse) {
    body:has(.mov-pagina-m :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]), textarea):focus) .mov-rodape-m { display: none; }
}
/* os botões do rodapé não encolhem (o texto "Recibo" ficava cortado); quem cede é a coluna dos totais */
.mov-rodape-m > .mud-button-root, .mov-rodape-m > .mud-menu, .mov-rodape-m > .mud-tooltip-root { flex: none; }
.mov-rodape-m-tot { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mov-rodape-m-tot span { font-size: .7rem; font-weight: 600; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov-rodape-m-tot b { font-size: 1.35rem; font-weight: 700; color: var(--mud-palette-primary-darken); white-space: nowrap; }

/* Marca de água "ANULADO" (mobile, EditVendas/EditCompras/EditPos): só decoração — não pode
   apanhar toques nem ficar por cima do rodapé fixo, menus ou diálogos. */
.mov-marca-anulado { position: fixed; left: 10%; width: 80%; top: 50%; z-index: 5; pointer-events: none; text-align: center;
                     font-size: 48px; font-weight: bold; color: red; opacity: .55; transform: translateY(-50%) rotate(-25deg); }

/* Telemóvel deitado (largura > 800 mas pouca altura): o layout de desktop não cabe à altura da
   janela (~310px) — o rodapé ficava por cima do cartão do documento. Aqui a página cresce com o
   conteúdo, as linhas ficam com altura própria e o rodapé vem a seguir, com scroll da página. */
@media (max-height: 500px) and (min-width: 801px) {
    .mov-pagina { height: auto; }
    .mov-pagina > .mov-corpo, .mov-pagina > form, .mov-pagina > form > .mov-corpo, .mov-pagina .mov-corpo-linhas { flex: none; }
    .mov-pagina .mov-linhas { flex: none; height: 85dvh; min-height: 0; }
    .mov-pagina .mov-arquivo { flex: none; height: 85dvh; }
    .mov-pagina .mov-obs-aba, .mov-pagina .loja-conf, .mov-pagina .loja-acoes { flex: none; }
    .mov-rodape { margin-bottom: 8px; }
}

.mov-imp { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; min-width: 300px; }
.mov-imp-cab { display: flex; align-items: center; justify-content: space-between; }

/* ------------------------------------------------------------------ Lojas online (Ctt, Shopkit, Jump, Shopify)
   Um cartão com separadores em pílulas: Encomendas (barra de filtros + grelha à altura da janela),
   Configurações (formulário em secções) e Atualizações (grupos de botões; o que apaga fica à parte). */
.loja-barra { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 12px 14px; }
.loja-barra > .mov-campo { flex: 0 0 140px; }
.loja-barra .mov-campo-acao .mud-button-root, .loja-barra > .mud-button-root { height: 36px; }
.loja-barra-fim { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.loja-barra-fim .mov-total { padding: 0 0 0 14px; }
.loja-conf, .loja-acoes { padding: 16px 18px; }
.mov-pagina .loja-conf, .mov-pagina .loja-acoes { flex: 1 1 0; min-height: 0; overflow: auto; }
.loja-sec { max-width: 760px; margin-bottom: 20px; }
.loja-sec h4, .loja-grupo h4 { margin: 0 0 10px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
                               color: var(--mud-palette-text-secondary); }
.loja-sec .mov-campo { margin-bottom: 10px; }
.loja-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 16px; }
.loja-checks label { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font-size: .9rem; }
.loja-conf-fim { max-width: 760px; display: flex; justify-content: flex-end; padding-top: 4px; }
.loja-acoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-content: start; }
.loja-grupo { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; }
.loja-grupo .mud-button-root { justify-content: flex-start; }
.loja-perigo { border-color: color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
               background: color-mix(in srgb, var(--mud-palette-error) 4%, transparent); }
.loja-perigo h4 { color: var(--mud-palette-error-darken); }
.loja-sync { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .85rem; }
.loja-sync-prog { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.mov-pagina-m .loja-barra > .mov-campo { flex: 1 1 120px; }

/* Recebimentos / Pagamentos: Débitos e Créditos repartem a altura (os créditos costumam ser poucos) */
.mov-corpo-ccr { gap: 12px; }
.mov-corpo-ccr > .mov-linhas { min-height: 170px; }
.mov-corpo-ccr > .mov-linhas-creditos { flex-grow: .6; }
.mov-pagina-m .mov-linhas-m + .mov-linhas-m { margin-top: 10px; }