/* ===================================================================
 * CONTEXT MENU DO MAPA (botao direito) -- MapService.Control.ContextMenu
 * (include/mapservice/src/MapService/Control/ContextMenu.js) +
 * app/overrides/ContextMenuOverride.js
 *
 * Reescrito do zero (US #3928): a versao anterior usava estilos 100%
 * inline (nenhuma classe CSS), hover controlado via JS, setas de submenu
 * em GIF base64, e um bug de submenu DUPLICADO (a classe base e o
 * override construiam cada um seu proprio painel flutuante pro mesmo
 * item). Esta reescrita move tudo pra classes CSS e deixa o override
 * como unico responsavel por submenu -- ver os comentarios nos .js.
 *
 * Reusa os design tokens de app-shell.css (--geo-radius e --geo-purple).
 * =================================================================== */

.ctx-menu-root {
	position: absolute;
	display: none;
	/* So' ordena DENTRO do mapa (acima de camadas, popups e controles do
	 * OpenLayers): o container do mapa (div.olMap, z-index 0) e' um contexto
	 * de empilhamento, entao Windows, paleta e zoom ficam sempre por cima --
	 * o JS desvia deles (MEL-24, ContextMenuOverride.js#areaVisivel). */
	z-index: 3100;
}
.ctx-menu-root.ctx-menu-open {
	display: block;
}

.ctx-menu {
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: var(--geo-radius-md, 6px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
	/* O JS limita max-height/max-width a area do mapa (MEL-24) e mede com
	 * offsetHeight: border-box garante que borda e padding entram na conta
	 * (o Bootstrap ja aplica em *, aqui so' nao depende dele). */
	box-sizing: border-box;
	padding: 4px;
	min-width: 200px;
	max-height: 356px;
	overflow-y: auto;
	overflow-x: hidden;
	font: normal 13px/1.4 arial, tahoma, sans-serif;
	color: #222;
}

/* Painel flutuante de submenu (contentSubMenu, criado em
 * ContextMenuOverride.js#createItem) -- reusa .ctx-menu, so' muda o
 * posicionamento pra fixed (calculado via getBoundingClientRect no JS,
 * necessario pra nao vazar pra fora da viewport) e comeca escondido. */
.ctx-menu-submenu {
	position: fixed;
	display: none;
	z-index: 3101;
	/* MEL-24: a roda dentro do submenu rola so' ele -- se encadeasse no
	 * painel principal, o submenu (fixed) ficaria desalinhado do item. */
	overscroll-behavior: contain;
}
.ctx-menu-submenu.ctx-menu-open {
	display: block;
}

.ctx-menu-sep {
	height: 1px;
	display: block;
	background-color: #e5e5e5;
	margin: 3px 6px;
}

.ctx-menu-item-box {
	display: block;
	position: relative;
	white-space: nowrap;
}

.ctx-menu-item {
	display: flex;
	align-items: center;
	position: relative;
	/* Reduzido de 6px pra 3px vertical (pedido de UX: menos altura por
	 * item = menos vezes o menu precisa de scroll -- e a barra de rolagem
	 * arrastada e' justamente o que fechava o menu sem querer antes desta
	 * revisao, ver fix do mouseup em ContextMenu.js#draw). */
	padding: 3px 10px;
	border-radius: var(--geo-radius-sm, 4px);
	color: #222;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .1s ease-in-out;
}
.ctx-menu-item:hover,
.ctx-menu-item:focus {
	background-color: var(--geo-purple-soft, rgba(83, 62, 118, .1));
	color: var(--geo-purple, rgb(83, 62, 118));
	text-decoration: none;
}

.ctx-menu-item-label {
	flex: 1 1 auto;
}

/* Seta de submenu -- SVG lucide chevron-right via mask+currentColor
 * (mesmo padrao usado nos outros icones desta sessao), no lugar do GIF
 * base64 de seta antigo. Herda a cor do texto do item (roxo no hover). */
.ctx-menu-chevron {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-left: 8px;
	background-color: currentColor;
	-webkit-mask: url(../../include/icones/images/lucide/chevron-right.svg?v=1) no-repeat center / contain;
	mask: url(../../include/icones/images/lucide/chevron-right.svg?v=1) no-repeat center / contain;
}

.ctx-menu-sub-icon {
	width: 16px;
	height: 16px;
	margin-right: 6px;
	flex: 0 0 auto;
}

/* Scrollbar fina -- so' aparece quando o menu tem muitos itens (mesmo
 * padrao de .menu-scroll em app-shell.css). Antes disso era um hack em
 * JS (RTL + overflow condicional so' quando > 18 filhos, injetado via
 * <style> toda vez que o menu abria) -- agora e' uma regra CSS permanente,
 * sem RTL (nunca fez sentido pro conteudo, que e' LTR). */
.ctx-menu {
	scrollbar-width: thin;
	scrollbar-color: #c4c4cc #ffffff;
}
.ctx-menu::-webkit-scrollbar {
	width: 10px;
}
.ctx-menu::-webkit-scrollbar-track {
	background: #ffffff;
}
.ctx-menu::-webkit-scrollbar-thumb {
	background: #c4c4cc;
	border-radius: 6px;
	border: 2px solid #ffffff;
	background-clip: padding-box;
}
.ctx-menu::-webkit-scrollbar-thumb:hover {
	background: #a8a8b2;
	background-clip: padding-box;
}

/* ---------- Entradas tipadas (System.reorganizaMenuContexto) ---------- */
.ctx-menu-root > .ctx-menu {
	min-width: 250px;
}
.ctx-menu-cabecalho {
	padding: 6px 10px 2px;
	font-size: 9px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8e86a3;
	user-select: none;
}
.ctx-menu-coord {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px 6px;
	margin: -4px -4px 4px;
	background: #faf9fc;
	border-bottom: 1px solid #ebe7f2;
	border-radius: var(--geo-radius-md, 6px) var(--geo-radius-md, 6px) 0 0;
	font: 500 11px/1.3 Consolas, "Courier New", monospace;
	color: #555;
}
.ctx-menu-coord-valor {
	flex: 1 1 auto;
	white-space: nowrap;
}
.ctx-menu-coord-acao {
	font: 500 11px arial, tahoma, sans-serif;
	color: var(--geo-purple, rgb(83, 62, 118));
	text-decoration: none;
	cursor: pointer;
	padding: 2px 6px;
	border-radius: var(--geo-radius-sm, 4px);
}
.ctx-menu-coord-acao:hover {
	background: var(--geo-purple-soft, rgba(83, 62, 118, .1));
	text-decoration: none;
}
.ctx-menu-acoes {
	display: flex;
	gap: 4px;
	padding: 2px 2px 4px;
}
.ctx-menu-acao {
	flex: 1 1 0;
	text-align: center;
	padding: 6px 4px;
	border: 1px solid #ebe7f2;
	border-radius: var(--geo-radius-sm, 4px);
	font-size: 11.5px;
	color: #333;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.ctx-menu-acao:hover {
	background: var(--geo-purple-soft, rgba(83, 62, 118, .1));
	color: var(--geo-purple, rgb(83, 62, 118));
	text-decoration: none;
}
.ctx-menu-atalho {
	flex: 0 0 auto;
	margin-left: 14px;
	font: 10px Consolas, "Courier New", monospace;
	color: #8e86a3;
}

/* 27/10: aberto, o menu mora no body (ContextMenuOverride.js#show) para nao
 * ficar por baixo do painel Propriedades fixo, das janelas e da barra de
 * atalhos. Acima das janelas (3000) e da lista do clique (3190), abaixo dos
 * tooltips (3200). */
.ctx-menu-root.ctx-menu-fixo {
	position: fixed;
	z-index: 3195;
}