/* Editores de documentos (Movimentos) — layout de 2026-10, portado do marvin_blazor (2026-09).
   Só usa variáveis do MudBlazor. Desktop: .mov-pagina (à altura da janela); mobile (largura <= 800): .mov-pagina-m. */

/* 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-mat { flex: 0 1 190px; }
.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; }
.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; }
/* 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; }

/* ------------------------------------------------------------------ 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); }
.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; }

.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; }

/* 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; }

/* Contas correntes (CcrCli/For/Out/Ban): barra de filtros (Todos/Pendentes, datas, Excel) numa linha;
   cada data com largura fixa, o resto empurrado para a direita */
.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-fim { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.mov-pagina-m .loja-barra > .mov-campo { flex: 1 1 120px; }

/* Oficina: quebra de linha no cabeçalho (Documento..Estado | Matrícula, Cliente, Kms) e aba Descrição em duas colunas */
.mov-quebra { flex-basis: 100%; height: 0; margin-top: -10px; }
.mov-ofi-desc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 14px 40px; align-items: start; }
.mov-ofi-desc-m { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1200px) { .mov-ofi-desc { grid-template-columns: minmax(0, 1fr); } }

/* Checkbox Telerik numa .mov-linha: o tema põe .k-checkbox-wrap com align-self:flex-start, que a prende ao topo
   quando a linha tem altura (ex.: height:36px para alinhar com os campos) — centrar com o texto ao lado */
.mov-linha > .k-checkbox-wrap { align-self: center; }