/* Editores de documentos (Movimentos) — layout de 2026-10, porta do marvin_blazor (movimentos.css).
   Começou no EditVendas; 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.
   Desktop: .mov-pagina (à altura da janela); mobile (largura <= 800): .mov-pagina-m com rodapé fixo. */

/* Página à altura da janela: cabeçalho e rodapé fixos, as linhas ficam com o espaço que sobra.
   No EditVendas o corpo e o rodapé estão dentro do EditForm (<form>). */
.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; }
.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 (procurar, gerar referência...): preenchidos e quadrados, da altura
   dos campos (36px). No marvin esta regra está no gestao.css (comum à Gestão); aqui só os Movimentos
   a usam. As barras de ferramentas (.mov-grupo) usam botões sem fundo, que esta regra não apanha. */
.mov-pagina .mud-icon-button.mud-button-filled,
.mov-pagina-m .mud-icon-button.mud-button-filled { width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: 6px; flex: none; }
.mov-pagina .mud-icon-button.mud-button-filled .mud-icon-root,
.mov-pagina-m .mud-icon-button.mud-button-filled .mud-icon-root { font-size: 1.3rem; }

/* 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-saldo { flex: 0 0 120px; }
.mov-c-nif { flex: 0 0 140px; }
.mov-c-motivo { flex: 1 1 220px; max-width: 320px; }
.mov-linha { display: flex; align-items: center; gap: 6px; }
.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; }
/* 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-switch { height: 36px; }
.mov-switch label { margin: 0; }
.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-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; }
.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. */
.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: nowrap; overflow-x: auto; 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; }
.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); white-space: nowrap; }
.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; }

/* EditVendas (clinicas), 2026-10-06: entidade, nº de beneficiário, pack, campanha e talão numa 2.ª linha do
   cartão do documento; no rodapé só o desconto global (€ / %) à esquerda dos totais, tudo numa linha. */
.mov-doc-campos2 { padding-top: 0; }
/* a linha ocupa a largura toda: a entidade cresce mais (nomes longos), a campanha a seguir */
.mov-c-entidade { flex: 3 1 260px; }
.mov-c-benef { flex: 1 1 150px; max-width: 220px; }
.mov-c-pack { flex: 0 0 150px; }
.mov-c-campanha { flex: 2 1 220px; }
.mov-c-talao { flex: 0 0 120px; }
.mov-rodape-vnd { grid-template-areas: "cima cima" "esq acoes"; }
.mov-rodape-cima { grid-area: cima; display: flex; align-items: center; gap: 8px 16px; padding-bottom: 10px;
                   border-bottom: 1px solid var(--mud-palette-lines-default); min-width: 0; }
.mov-ajustes { flex: none; display: flex; align-items: flex-end; gap: 10px; }
.mov-rodape-cima > .mov-totais { flex: 1 1 auto; padding-bottom: 0; border-bottom: 0; }
.mov-c-desc { flex: 0 0 120px; }
/* Campos desativados: o Telerik ficava branco ao lado dos Radzen cinzentos (documento fechado) */
.mov-pagina .k-input.k-disabled, .mov-pagina .k-numerictextbox.k-disabled { background: var(--mud-palette-action-disabled-background); opacity: 1; }
.mov-pagina .k-input.k-disabled .k-input-inner { color: var(--mud-palette-text-secondary); }
@media (max-width: 1100px) {
    .mov-rodape-cima { flex-direction: column; align-items: stretch; }
    .mov-rodape-cima > .mov-totais { justify-content: flex-end; padding-top: 6px; border-top: 1px dashed var(--mud-palette-lines-default); }
}

.mov-imp { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; min-width: 260px; }
.mov-imp-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ------------------------------------------------------------------ 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; flex-wrap: wrap; 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-ajustes-m { margin-top: 10px; padding-top: 6px; }
.mov-totais-m { display: flex; flex-wrap: wrap; row-gap: 8px; padding: 10px 0 12px; border-top: 1px solid var(--mud-palette-lines-default); }
.mov-totais-m .mov-total { flex: 1 1 45%; }
.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; }

/* EditVendasEnt (clinicas), 2026-10-06: código da entidade (texto) ao lado da pesquisa e do nome, como o nº de utente no EditVendas. */
.mov-vndent-cod { flex: 0 0 110px; min-width: 0; }

/* EditCompras (clinicas), 2026-10-06: fornecedor = código (numérico, 100px) + pesquisa + nome na 1.ª linha do cartão;
   centro de custos e nº do documento do fornecedor numa 2.ª linha (.mov-doc-campos2) à largura toda. */
.mov-cmp-forn { flex: 0 0 100px; min-width: 0; }
.mov-cmp-rub { flex: 2 1 260px; min-width: 0; }
.mov-cmp-ext { flex: 1 1 180px; max-width: 320px; } /* 1.ª linha, a seguir à data (2026-10-06) */
.mov-pagina .mov-cmp-doc { flex: 3 1 260px; max-width: none; } /* o documento cresce com o espaço livre da 1.ª linha */

/* Recibos / Pagamentos (porta do marvin): Débitos e Créditos repartem a altura (os créditos costumam ser poucos);
   rodapé de uma só linha quando não há totais calculados. */
.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; }
.mov-rodape-simples { grid-template-columns: auto 1fr; grid-template-areas: "esq acoes"; }

/* Extratos das contas correntes (Ccr*, 2026-10-06): uma linha por movimento — datas e valores não partem;
   o texto que não couber termina em "…". */
.mov-grelha-ccr .k-grid td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
