/* ===================================================================
 * 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;
	z-index: 3100; /* acima das Windows (3000+), abaixo de nada relevante no mapa */
}
.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);
	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;
}
.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;
}