/* ═══════════════════════════════════════════════════════════════════════
   DIÁLOGOS EM ECRÃ INTEIRO EM TELEMÓVEL E TABLET

   Onde pôr: wwwroot/css/dialogs-fullscreen.css

   Como ligar (no App.razor ou index.html), SEMPRE DEPOIS do CSS do MudBlazor,
   senão as regras dele ganham:

       <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
       <link href="css/dialogs-fullscreen.css" rel="stylesheet" />

   O que faz: abaixo de 960px, os diálogos Medium, Large e ExtraLarge passam a
   ocupar o ecrã todo — sem margens, sem cantos arredondados, com o conteúdo a
   rolar por dentro. Small e ExtraSmall ficam como estão, porque uma confirmação
   de "tem a certeza?" em ecrã inteiro é agressiva e desorienta.

   Vale para TODOS os modais da aplicação de uma vez. Não é preciso trocar
   ShowDialogLargeAsync por ShowDialogFullScreenAsync em lado nenhum, e adapta-se
   sozinho quando se roda o telemóvel — coisa que uma decisão tomada em C# no
   momento da abertura não faz.

   Sobre o risco: isto assenta em classes internas do MudBlazor
   (.mud-dialog-width-lg e companhia). São estáveis há várias versões, mas se
   um dia mudarem, o pior que acontece é os modais voltarem ao aspecto de hoje —
   nada aqui é funcional.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {

    /* ---------- o painel do diálogo ---------- */
    .mud-dialog-container > .mud-dialog.mud-dialog-width-md,
    .mud-dialog-container > .mud-dialog.mud-dialog-width-lg,
    .mud-dialog-container > .mud-dialog.mud-dialog-width-xl {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        /* Coluna, para o cabeçalho e as acções ficarem fixos e só o meio rolar. */
        display: flex !important;
        flex-direction: column !important;
    }

    /* Sem isto, um ecrã com teclado aberto no iOS empurra o diálogo para fora. */
    .mud-dialog-container:not(.mud-dialog-container-fixed) {
        padding: 0 !important;
    }

    /* ---------- cabeçalho ---------- */
    .mud-dialog-container > .mud-dialog.mud-dialog-width-md > .mud-dialog-title,
    .mud-dialog-container > .mud-dialog.mud-dialog-width-lg > .mud-dialog-title,
    .mud-dialog-container > .mud-dialog.mud-dialog-width-xl > .mud-dialog-title {
        flex: 0 0 auto;
        /* iPhone com "notch": o título não fica por baixo da barra de estado. */
        padding-top: calc(16px + env(safe-area-inset-top, 0px));
    }

    /* ---------- conteúdo ---------- */
    /* O max-height que o MudBlazor calcula assume um diálogo centrado com
       margens. Em ecrã inteiro é o flex que manda. */
    .mud-dialog-container > .mud-dialog.mud-dialog-width-md > .mud-dialog-content,
    .mud-dialog-container > .mud-dialog.mud-dialog-width-lg > .mud-dialog-content,
    .mud-dialog-container > .mud-dialog.mud-dialog-width-xl > .mud-dialog-content {
        flex: 1 1 auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        /* O toque não arrasta a página por baixo ao chegar ao fim da lista. */
        overscroll-behavior: contain;
    }

    /* ---------- acções ---------- */
    .mud-dialog-container > .mud-dialog.mud-dialog-width-md > .mud-dialog-actions,
    .mud-dialog-container > .mud-dialog.mud-dialog-width-lg > .mud-dialog-actions,
    .mud-dialog-container > .mud-dialog.mud-dialog-width-xl > .mud-dialog-actions {
        flex: 0 0 auto;
        /* Barra de gestos do iOS e Android: os botões deixam de ficar por baixo dela. */
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   VARIANTES

   1) Quer TODOS os diálogos em ecrã inteiro, incluindo as confirmações?
      Acrescente ao grupo de selectores acima:

          .mud-dialog-container > .mud-dialog.mud-dialog-width-sm,
          .mud-dialog-container > .mud-dialog.mud-dialog-width-xs,

   2) Quer só um diálogo específico em ecrã inteiro, e não todos?
      Então o caminho é outro: no sítio onde o abre, troque
      ShowDialogLargeAsync por ShowDialogFullScreenAsync, que já existe no
      DialogServiceHelper. Só que aí a decisão fica presa ao momento da
      abertura e não reage a rodar o ecrã.

   3) O corte está em 960px por ser onde o layout de duas colunas do pedido
      de financiamento empilha. Se quiser apanhar também tablets grandes em
      modo retrato, suba para 1024px.
   ═══════════════════════════════════════════════════════════════════════ */