/* Pop-ups redimensionáveis e movíveis do Sourcing (Services/Sourcing/SourcingDialogExtensions.cs + js/sourcing-dialogs.js).
   O JS põe no host (.sr-dialog) o tamanho por omissão como mínimo (--sr-min-w/--sr-min-h), o tamanho escolhido
   (--sr-w/--sr-h, com a classe sr-sized), a posição (--sr-dx/--sr-dy, deslocamento face ao centro) e, depois de
   redimensionar, o quanto a caixa cresceu (--sr-extra-w/--sr-extra-h). Uma região com scroll de um pop-up só cresce com
   ele se a sua altura máxima somar --sr-extra-h (ex.: max-height: calc(65vh + var(--sr-extra-h, 0px))); este ficheiro não
   faz isso por ela. O conteúdo de nível de bloco acompanha a largura da caixa. */

/* A caixa do pop-up (.rz-dialog do Radzen, ou .sr-box nos modais próprios) dentro do host .sr-dialog: tamanho mínimo, limites do ecrã e deslocamento. */
.sr-dialog > .rz-dialog,
.sr-dialog > .sr-box {
    overflow: hidden; /* o que passa da caixa é cortado, por isso o scroll tem de existir em regiões internas do pop-up */
    resize: none !important; /* as pegas do JS substituem a alça nativa */
    min-width: min(var(--sr-min-w, 0px), 100vw); /* nunca mais estreito do que abriu (--sr-min-w medida pelo JS), mas nunca maior do que o ecrã */
    min-height: min(var(--sr-min-h, 0px), 100%); /* idem na altura, limitada à altura do host */
    max-width: 100vw; /* nunca mais largo do que a janela do browser */
    max-height: 100%; /* nunca mais alto do que o host */
    /* Mover = deslocar a partir do centro, com a propriedade "translate" (separada de "transform", que não é usada aqui). */
    translate: var(--sr-dx, 0px) var(--sr-dy, 0px);
}

/* Tamanho escolhido pelo utilizador (a classe sr-sized é posta pelo JS no primeiro redimensionar); o !important sobrepõe-se a width/height que venham em style inline. */
.sr-dialog.sr-sized > .rz-dialog,
.sr-dialog.sr-sized > .sr-box {
    width: var(--sr-w) !important; /* largura escolhida (px) escrita pelo JS no host */
    height: var(--sr-h) !important; /* altura escolhida (px) */
    max-width: calc(100vw - 16px); /* deixa 8px de folga de cada lado do ecrã */
    max-height: calc(100vh - 16px); /* idem na vertical */
}

/* Área de conteúdo de um pop-up do Radzen dentro do host: pode crescer e encolher (flex), mas só tem efeito se a caixa for um contentor flex. */
.sr-dialog .rz-dialog-content {
    flex: 1 1 auto; /* cresce e encolhe com tamanho base automático (só conta se o pai for um contentor flex; este ficheiro só torna flex a caixa .sr-box) */
    min-height: 0; /* permite encolher abaixo do conteúdo, para um scroll interno poder aparecer em vez de a caixa esticar */
}

/* Modal próprio (não Radzen): o fundo é o host e o painel é a caixa. */
.sr-dialog > .sr-box {
    display: flex; /* a caixa é uma coluna flex (cabeçalho, corpo, rodapé) */
    flex-direction: column; /* empilha verticalmente os filhos */
}

/* O título move o pop-up. */
.sr-drag-title {
    cursor: move; /* cursor de mover sobre o título */
    user-select: none; /* evita selecionar o texto do título ao arrastar */
}

/* Pegas de redimensionar, à volta da caixa (criadas e posicionadas pelo JS). */
.sr-handle {
    position: absolute; /* posicionada pelo JS (left/top/width/height) dentro do host */
    z-index: calc(var(--rz-dialog-zindex, 1000) + 1); /* um nível acima do valor de --rz-dialog-zindex (1000 se a variável não existir) */
    touch-action: none; /* em ecrãs tácteis o gesto vai para o JS e não faz scroll da página */
}
.sr-handle-n, .sr-handle-s { cursor: ns-resize; } /* bordas de cima/baixo: seta vertical */
.sr-handle-e, .sr-handle-w { cursor: ew-resize; } /* bordas esquerda/direita: seta horizontal */
.sr-handle-ne, .sr-handle-sw { cursor: nesw-resize; } /* cantos na diagonal "/" */
.sr-handle-nw, .sr-handle-se { cursor: nwse-resize; } /* cantos na diagonal "\" */

/* Marca no canto inferior direito, para o utilizador perceber que dá para redimensionar. */
.sr-handle-se::after {
    content: ""; /* pseudo-elemento vazio, só desenha o fundo */
    position: absolute; /* relativo à pega do canto */
    right: 6px; /* afastamento do canto direito */
    bottom: 6px; /* afastamento do fundo */
    width: 9px; /* tamanho da marca */
    height: 9px;
    background: linear-gradient(135deg, transparent 0 45%, var(--rz-text-disabled-color, #9aa0a6) 45% 55%, transparent 55% 70%, var(--rz-text-disabled-color, #9aa0a6) 70% 80%, transparent 80%); /* duas riscas diagonais (estilo "alça") na cor de texto desativado do tema */
    pointer-events: none; /* a marca não apanha cliques: quem os recebe é a pega */
}

/* Enquanto se redimensiona, o pop-up inteiro deixa de permitir seleção de texto (só isto; o cursor não é alterado aqui). */
.sr-dialog.sr-active {
    user-select: none; /* bloqueia a seleção de texto (classe sr-active posta pelo JS no início de um redimensionar e retirada no fim; o arrasto do título não a põe) */
}
