/* ==========================================================================
   IPDS — Info Plus Design System
   File:    ipds.dialog.css
   Version: 1.1.5 (fix overflow horizontal em viewports ultra-wide)
   --------------------------------------------------------------------------
   CSS dedicado ao componente Dialog próprio do IPDS.

   MUDANÇAS DA v1.1.4 → v1.1.5:
     • Adicionado min-width: 0 ao .ui-dialog-content. Sem isso, conteúdo
       com largura intrínseca grande (ex.: jqGrid com muitas colunas)
       fazia o flex item crescer além do wrap do dialog, especialmente
       em viewports ultra-wide. Isso é um padrão conhecido de flexbox:
       flex items têm min-width/min-height: auto por padrão, que pode
       ser maior que o conteúdo do flex container.

   MUDANÇAS DA v1.1.3 → v1.1.4:
     • Padding do .ui-dialog-content voltou de 16px para 0.5em 1em
       (default do jQuery UI Cupertino). Razão: telas legadas calculam
       altura do conteúdo via calc(100% - Xpx) baseadas no padding
       original. Mudar para 16px adicionou ~19px de altura por dialog,
       fazendo cálculos antigos estourarem por alguns pixels e criando
       scrollbar inesperado. Compatibilidade restaurada.

   MUDANÇAS DA v1.1.2 → v1.1.3:
     • Fix botão de ajuda (?) renderizando às vezes com fundo branco
       sólido circular em vez do fundo translúcido navy padrão. Causa:
       conflito de especificidade entre regras .ui-state-default no
       jquery-ui.ipds.theme.css e regras genéricas do .ui-button no
       contexto de .ui-widget-header (que dão fundo branco), versus
       regras específicas do botão no ipds.dialog.css. A solução foi
       aumentar especificidade dos seletores (.ui-dialog > .ui-dialog-
       titlebar > .ui-dialog-titlebar-help) e adicionar !important nas
       propriedades visuais críticas (background, border, dimensões,
       posicionamento). Também removida regra antiga conflitante em
       ipds.css (que definia 20×20px com margens absolutas legadas).

   MUDANÇAS DA v1.1.1 → v1.1.2:
     • Fix drag não funcionar quando o clique era sobre o texto do título
       ou sobre o ícone. Causa: o navegador interpretava o mousedown como
       início de seleção de texto, consumindo o evento antes do handler
       de drag rodar. Solução: user-select:none na titlebar inteira +
       cursor:inherit no filho .ui-dialog-title (e seus descendentes).

   MUDANÇAS DA v1.1.0 → v1.1.1:
     • CRÍTICO: removido !important do z-index do .ipds-overlay E do
       .ui-dialog. O JS (dialogStack._refreshZIndex) define inline o
       z-index correto para cada dialog na pilha (99999, 100009, 100019...)
       e para o overlay (sempre topZ-1). Com !important no CSS, os styles
       inline eram ignorados, todos os dialogs ficavam em 99999 e o
       overlay travado em 99990, causando dois bugs:
       1) Dialog inferior ficava clicável quando overlay estava em 99990
       2) Após meu fix do overlay, ambos dialogs ficavam abaixo do
          overlay e ambos ficavam não-clicáveis
       Solução: !important removido. CSS define apenas o valor inicial,
       JS controla o cálculo real conforme pilha cresce/diminui.

   MUDANÇAS DA v1.0.3 → v1.1.0:
     • BREAKING (interno): seletor do overlay mudou de .ui-widget-overlay
       para .ipds-overlay. Necessário porque a jqGrid (e potencialmente
       outros widgets jQuery UI) usam .ui-widget-overlay para overlays
       internos próprios. Nossa regra com !important + display:block estava
       forçando esses overlays internos a virar fullscreen, tampando o
       próprio dialog.
     • A classe .ui-widget-overlay agora é DESCONSIDERADA pelo nosso CSS
       — fica intocada para os widgets do jQuery UI que dependem dela.

   MUDANÇAS DA v1.0.2 → v1.0.3:
     • z-index do dialog subiu para 99999 (era 1001).
     • z-index do overlay subiu para 99990 (era 1000).
     • Adicionado isolation: isolate no .ui-dialog. Isso cria um stacking
       context isolado, imune a qualquer ancestral com transform/filter/
       opacity/etc que possa criar um stacking context conflitante.
     • Esses três ajustes juntos blindam o dialog contra qualquer regra
       residual ou stacking context confuso vindo de outros CSS.

   MUDANÇAS DA v1.0.1 → v1.0.2:
     • .ui-dialog agora tem z-index: 1001 !important (antes era 1001 sem
       !important, e estava sendo sobrescrito por .ui-front { z-index:100 }
       residual do tema antigo). Resultado anterior: overlay tampava o
       dialog.
     • .ui-dialog também ganhou position: fixed !important pelos mesmos
       motivos defensivos.

   MUDANÇAS DA v1.0.0 → v1.0.1:
     • .ui-widget-overlay agora usa !important em todas as propriedades
       críticas (background-color, opacity, z-index, display) para vencer
       qualquer regra residual do tema Cupertino antigo (que usava sprite
       PNG e opacity: .3).
   --------------------------------------------------------------------------
   CSS dedicado ao componente Dialog próprio do IPDS.

   ESTRATÉGIA DE COMPATIBILIDADE:
     O Dialog do IPDS NÃO depende mais do jQuery UI Dialog widget. Porém,
     mantém os mesmos NOMES de classe (.ui-dialog, .ui-dialog-titlebar etc)
     no DOM gerado, para preservar 100% de compatibilidade com código
     existente que faz seletores como $(el).next().find(".ui-dialog-buttonset").

   Este arquivo:
     • Define overlay modal compartilhado (.ui-widget-overlay)
     • Define keyframes de animação (fade, drop, clip)
     • Sobrescreve regras do jquery-ui.ipds.theme.css que estavam quebradas
       (close button position, help button, titlebar height)
     • É carregado APÓS o theme, prevalecendo onde houver conflito.

   DEPENDE DE: ipds.tokens.css

   ORDEM NO JSP:
     <link rel="stylesheet" href="css/jquery/theme/cupertino/jquery-ui.min.css">
     <link rel="stylesheet" href="css/ipds.tokens.css">
     ...
     <link rel="stylesheet" href="css/ipds.dialog.css">  ← AQUI (depois do theme)
     <link rel="stylesheet" href="css/ipds.css">
     ...
   ========================================================================== */


/* ==========================================================================
   1. OVERLAY MODAL (.ipds-overlay)
   --------------------------------------------------------------------------
   Fundo escurecido por trás do dialog modal. Compartilhado entre dialogs
   empilhados — quando há vários abertos, fica um único overlay com z-index
   abaixo do dialog do topo.

   IMPORTANTE: namespace .ipds-overlay (não .ui-widget-overlay!).

   Antes usávamos .ui-widget-overlay assumindo ser exclusivo, mas DESCOBRIU-SE
   que a jqGrid usa essa MESMÍSSIMA classe para o overlay de loading dela
   (<div class="ui-widget-overlay jqgrid-overlay">), e nossas regras com
   !important estavam forçando o overlay da grid a virar fullscreen e
   tampar o dialog.

   Outros widgets jQuery UI (datepicker, autocomplete, etc) também podem
   usar .ui-widget-overlay. Por isso usamos um nome próprio.
   ========================================================================== */
.ipds-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background-color: rgba(10, 22, 40, 0.45) !important;
	background-image: none !important;
	opacity: 1 !important;
	/* z-index gerenciado pelo JS (dialogStack._refreshZIndex) — não usar
	   !important aqui, senão o style inline do JS é ignorado e o overlay
	   fica fixo em 99990 mesmo com dialogs aninhados em z-index maior,
	   causando o dialog inferior a ficar clicável acima do overlay. */
	z-index: 99990;
	pointer-events: auto !important;
	display: block !important;
	animation: ipds-dlg-fade-in 200ms ease-out forwards;
}

.ipds-overlay.ipds-dlg-fading-out {
	animation: ipds-dlg-fade-out 200ms ease-in forwards;
}


/* ==========================================================================
   2. WRAP DO DIALOG (.ui-dialog)
   --------------------------------------------------------------------------
   Container externo do dialog. Posicionado em fixed, recebe drag,
   contém titlebar + content + buttonpane.
   ========================================================================== */
.ui-dialog {
	position: fixed !important;
	background: var(--ipds-dialog-bg, var(--ipds-bg-surface));
	border: 1px solid var(--ipds-border-default);
	border-radius: var(--ipds-dialog-radius, var(--ipds-radius-lg));
	box-shadow: var(--ipds-dialog-shadow, var(--ipds-shadow-xl));
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/* z-index gerenciado pelo JS (dialogStack._refreshZIndex) — não usar
	   !important aqui pelo mesmo motivo do .ipds-overlay: precisamos que
	   cada dialog na pilha receba seu z-index inline calculado, senão
	   dialogs aninhados ficariam todos no mesmo nível. */
	z-index: 99999;
	max-width: 100vw;
	max-height: 100vh;
	min-width: 200px;
	min-height: 80px;
	/* isolation: isolate cria stacking context isolado para o dialog,
	   imune a qualquer ancestral com transform/filter/etc que possa
	   bagunçar a ordem de pintura. */
	isolation: isolate;
}

.ui-dialog.ipds-dlg-dragging {
	user-select: none;
	cursor: grabbing;
	transition: none !important;
}


/* ==========================================================================
   3. TITLEBAR (.ui-dialog-titlebar)
   --------------------------------------------------------------------------
   Cabeçalho do dialog. Cursor de drag, position relative para botões absolute.
   ========================================================================== */
.ui-dialog .ui-dialog-titlebar {
	background: var(--ipds-dialog-header-bg, var(--ipds-gradient-navy));
	color: var(--ipds-dialog-header-text, var(--ipds-color-white));
	border: none;
	border-radius: 0;
	border-bottom: 2px solid var(--ipds-color-gold-500);
	padding: 10px 90px 10px 16px;
	position: relative;
	flex-shrink: 0;
	cursor: grab;
	min-height: 44px;
	display: flex;
	align-items: center;
	/* Bloqueia seleção de texto no título — sem isso, clicar no texto/
	   ícone inicia seleção de texto e impede o drag. */
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.ui-dialog .ui-dialog-titlebar:active {
	cursor: grabbing;
}

/* Filhos da titlebar (texto, ícone) herdam cursor de drag.
   Botões dentro da titlebar (.ui-button, button, a) sobrescrevem com
   cursor:pointer naturalmente. */
.ui-dialog .ui-dialog-title,
.ui-dialog .ui-dialog-title * {
	cursor: inherit;
}

.ui-dialog .ui-dialog-title {
	color: var(--ipds-dialog-header-text, var(--ipds-color-white));
	font-weight: var(--ipds-font-weight-semibold);
	font-size: var(--ipds-font-size-md);
	line-height: 1.4;
	display: flex;
	align-items: center;
	gap: var(--ipds-space-2);
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* ==========================================================================
   4. BOTÕES DO TITLEBAR (close, help)
   --------------------------------------------------------------------------
   Botões com position: absolute, à direita. Sem texto vazado de
   acessibilidade (o aria-label substitui — o JS não injeta text node).
   ========================================================================== */
/* ==========================================================================
   3.5. BOTÕES DA TITLEBAR (close + help)
   --------------------------------------------------------------------------
   Ambos os botões compartilham visual: fundo translúcido branco sobre o
   navy do header, borda sutil branca, hover gold.

   IMPORTANTE: especificidade alta + !important porque tanto o tema do
   jQuery UI quanto o legado do ipds.css definem regras conflitantes para
   .ui-button no contexto de .ui-widget-header. Sem !important, o
   background branco genérico de .ui-state-default vencia (empate de
   especificidade resolvido por ordem de carregamento). */
.ui-dialog > .ui-dialog-titlebar > .ui-dialog-titlebar-close,
.ui-dialog > .ui-dialog-titlebar > .ui-dialog-titlebar-help {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: var(--ipds-radius-sm) !important;
	color: var(--ipds-text-on-dark) !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	padding: 0 !important;
	margin: 0 !important;
	transition: var(--ipds-transition-fast);
	cursor: pointer;
}

.ui-dialog > .ui-dialog-titlebar > .ui-dialog-titlebar-close { right: 12px !important; }
.ui-dialog > .ui-dialog-titlebar > .ui-dialog-titlebar-help  { right: 48px !important; }

.ui-dialog > .ui-dialog-titlebar > .ui-dialog-titlebar-close:hover,
.ui-dialog > .ui-dialog-titlebar > .ui-dialog-titlebar-help:hover {
	background: rgba(212, 162, 76, 0.20) !important;
	border-color: var(--ipds-color-gold-500) !important;
	color: var(--ipds-color-gold-500) !important;
}

.ui-dialog > .ui-dialog-titlebar > .ui-dialog-titlebar-close:focus,
.ui-dialog > .ui-dialog-titlebar > .ui-dialog-titlebar-help:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(212, 162, 76, 0.50) !important;
}

/* Ícone interno dos botões da titlebar — Material Symbols via ::before */
.ui-dialog > .ui-dialog-titlebar > .ui-dialog-titlebar-close .ui-icon,
.ui-dialog > .ui-dialog-titlebar > .ui-dialog-titlebar-help .ui-icon {
	width: 18px !important;
	height: 18px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	min-width: 0;
	min-height: 0;
}


/* ==========================================================================
   5. CONTEÚDO (.ui-dialog-content)
   ========================================================================== */
.ui-dialog .ui-dialog-content {
	background: var(--ipds-bg-surface);
	color: var(--ipds-text-primary);
	/* Padding compatível com o default do jQuery UI Cupertino (0.5em 1em).
	   Mudar este valor quebra cálculos em telas legadas que usam
	   calc(100% - Xpx) baseados no padding original. */
	padding: 0.5em 1em;
	flex: 1;
	overflow: auto;
	/* min-width: 0 e min-height: 0 são CRÍTICOS em flex items: sem eles, o
	   item cresce para acomodar conteúdo intrínseco maior (ex.: jqGrid
	   com muitas colunas), excedendo o flex container. Resultado típico:
	   em viewports largos (ultra-wide), o content estoura o maxWidth do
	   wrap do dialog. */
	min-width: 0;
	min-height: 0;
	position: relative;
}


/* ==========================================================================
   6. BUTTONPANE (.ui-dialog-buttonpane)
   ========================================================================== */
.ui-dialog .ui-dialog-buttonpane {
	background: var(--ipds-bg-subtle);
	border-top: 1px solid var(--ipds-border-subtle);
	padding: 12px 16px;
	margin: 0;
	flex-shrink: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset-extra {
	margin-left: auto;
}

.ui-dialog .ui-dialog-buttonpane button {
	min-height: 32px;
	padding: 6px 14px;
	border-radius: var(--ipds-button-radius, var(--ipds-radius-sm));
	font-weight: var(--ipds-font-weight-semibold);
	cursor: pointer;
	transition: var(--ipds-transition-fast);
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}


/* ==========================================================================
   7. ANIMAÇÕES DE ABERTURA E FECHAMENTO
   --------------------------------------------------------------------------
   Replicam os efeitos do jQuery UI sem depender dele. JS aplica via
   inline animation-name + animation-duration ao abrir/fechar.
   ========================================================================== */

/* fade */
@keyframes ipds-dlg-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes ipds-dlg-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

/* drop — desce do topo ao abrir, sobe ao fechar */
@keyframes ipds-dlg-drop-in {
	from { opacity: 0; transform: translateY(-30px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ipds-dlg-drop-out {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(30px); }
}

/* clip — escala vertical do centro */
@keyframes ipds-dlg-clip-in {
	from { opacity: 0; transform: scaleY(0); }
	to   { opacity: 1; transform: scaleY(1); }
}

@keyframes ipds-dlg-clip-out {
	from { opacity: 1; transform: scaleY(1); }
	to   { opacity: 0; transform: scaleY(0); }
}

/* slide — desliza da direita */
@keyframes ipds-dlg-slide-in {
	from { opacity: 0; transform: translateX(40px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes ipds-dlg-slide-out {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(40px); }
}

/* scale — diminui ao fechar */
@keyframes ipds-dlg-scale-in {
	from { opacity: 0; transform: scale(0.85); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes ipds-dlg-scale-out {
	from { opacity: 1; transform: scale(1); }
	to   { opacity: 0; transform: scale(0.85); }
}


/* ==========================================================================
   8. RESPONSIVO (mobile)
   --------------------------------------------------------------------------
   Em mobile, dialogs tendem a ocupar a tela inteira. Esses estilos foram
   migrados do ipds.css para ficarem ao lado das demais regras de dialog.
   ========================================================================== */
@media (max-width: 768px) {
	.ui-dialog {
		max-width: 100vw !important;
		max-height: 100vh !important;
	}

	.ui-dialog .ui-dialog-titlebar {
		padding: 8px 76px 8px 12px;
		min-height: 40px;
	}

	.ui-dialog .ui-dialog-title {
		font-size: var(--ipds-font-size-sm);
	}

	.ui-dialog .ui-dialog-titlebar-close,
	.ui-dialog .ui-dialog-titlebar-help {
		width: 24px;
		height: 24px;
	}

	.ui-dialog .ui-dialog-titlebar-close { right: 8px; }
	.ui-dialog .ui-dialog-titlebar-help  { right: 38px; }

	.ui-dialog .ui-dialog-content {
		padding: 12px;
	}

	.ui-dialog .ui-dialog-buttonpane {
		padding: 10px 12px;
	}
}