@import url('tokens.css');
@import url('icons.css');

/* ============================================
   MENU GLOBAL — #cssmenu
   Fase 3: modernizado com barra branca, touch-friendly,
   dropdown com shadow, mobile-friendly.
   HTML não pode ser alterado — preservar seletores.
   ============================================ */

/* ========= FONTES LEGADAS (mantidas para fallback) ========= */
/* latin-ext */
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 900;
	src: local('Raleway Black'), local('Raleway-Black'), url(../fonts/snigletRaleway/1Ptrg8zYS_SKggPNwK4vWqhPAMif.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 900;
	src: local('Raleway Black'), local('Raleway-Black'), url(../fonts/snigletRaleway/1Ptrg8zYS_SKggPNwK4vWqZPAA.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Sniglet';
	font-style: normal;
	font-weight: 400;
	src: local('Sniglet Regular'), local('Sniglet-Regular'), url(../fonts/snigletRaleway/cIf9MaFLtkE3UjaJ9CChYVkH.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Sniglet';
	font-style: normal;
	font-weight: 400;
	src: local('Sniglet Regular'), local('Sniglet-Regular'), url(../fonts/snigletRaleway/cIf9MaFLtkE3UjaJ9C6hYQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================
   CONTAINER DO MENU
   ============================================ */
#cssmenu {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	margin: 0;
	padding: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	background: var(--color-teal-700);
	box-shadow: var(--shadow-sm);
	width: 100%;
}

/* ul é o anchor do dropdown — assim o dropdown alinha com a borda
   direita da barra, não com a borda direita do <li> estreito do ícone. */
#cssmenu > ul {
	position: relative;
}

#cssmenu > ul {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	list-style: none;
	margin: 0;
	/* Padding-left reserva espaço para a logo absolute (~160px = 128 img + padding) */
	padding: 0 var(--space-4) 0 170px;
	height: 56px;
	background: transparent;
	gap: 0; /* nome do user + hambúrguer ficam juntos como um único user-menu */
}

/* Items top-level — sem position:relative pra o dropdown ancorar no #cssmenu>ul */
#cssmenu > ul > li {
	list-style: none;
	margin: 0;
	padding: 0;
	float: none;
	display: flex;
	align-items: center;
	height: 100%;
}

/* Link top-level */
#cssmenu > ul > li > a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	height: 40px;
	padding: 0 var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-white);
	text-decoration: none;
	border-radius: var(--radius-md);
	transition: background-color var(--dur-fast) var(--ease-out),
				color var(--dur-fast) var(--ease-out);
	line-height: 1;
	margin: 0;
	text-align: left;
	width: auto;
}

#cssmenu > ul > li > a:hover,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	color: var(--color-white);
	text-decoration: none;
	width: auto; /* anula o bug histórico width:150px */
	outline: none;
}

#cssmenu > ul > li.active > a {
	color: var(--color-white);
}

/* ============================================
   ITEM HAMBÚRGUER (primeiro li — contém img e dropdown)
   ============================================ */
#cssmenu > ul > li.has-sub:first-child {
	order: 99; /* garante que fique no canto direito ao lado do nome do user */
}

#cssmenu > ul > li > img,
#cssmenu > ul > li.has-sub > img {
	display: inline-block;
	width: 24px !important;
	height: 24px !important;
	cursor: pointer;
	padding: var(--space-2);
	filter: brightness(0) invert(1); /* ícone branco */
	box-sizing: content-box;
}

/* Hover: aplica fundo único no conjunto (nome + hambúrguer) usando os <li>
   pais. Cantos arredondados só nas bordas externas pra parecer um pill único. */
#cssmenu > ul > li {
	transition: background-color var(--dur-fast) var(--ease-out);
}
/* Hover só no hambúrguer (.has-sub) — nome do usuário fica estático */
#cssmenu > ul > li.has-sub:hover,
#cssmenu > ul > li.has-sub:focus-within {
	background: rgba(255, 255, 255, 0.12);
	border-top-right-radius: var(--radius-md);
}

/* ============================================
   USUÁRIO (segundo li — div com nome)
   Visualmente colado ao hambúrguer (gap 0), forma um "user-menu" único.
   ============================================ */
#cssmenu > ul > li > div {
	font-family: var(--font-sans) !important;
	font-size: var(--fs-sm) !important;
	font-weight: var(--fw-medium) !important;
	color: var(--color-white) !important;
	text-shadow: none !important;
	padding: 0 var(--space-2) 0 var(--space-3) !important;
	line-height: 1 !important;
	display: flex !important;
	align-items: center;
	height: 40px;
	border-radius: var(--radius-md);
}

/* Padding uniforme no hambúrguer pra que o background de hover fique
   simétrico e bem arredondado em vez de quadrado de um lado. */
#cssmenu > ul > li.has-sub:first-child > img,
#cssmenu > ul > li.active.has-sub > img {
	padding: var(--space-2) !important;
	margin-left: 0;
}

/* ============================================
   DROPDOWN
   ============================================ */
/* Dropdown ancora no #cssmenu>ul (a barra inteira), não no <li> estreito.
   Resultado: borda direita do dropdown alinha com padding-right da barra.
   margin-top cria gap real entre trigger e dropdown.
   box-shadow com spread negativo evita "sangra" da sombra pra cima do ícone. */
#cssmenu li ul {
	position: absolute;
	top: 100%;
	right: var(--space-4);
	left: auto;
	margin-top: 0;
	min-width: 220px;
	width: auto;
	height: auto;
	background: var(--color-white);
	border: 1px solid var(--color-gray-100);
	border-top: none;
	border-radius: 0 0 12px 12px;
	box-shadow:
		0 4px 6px -2px rgba(15, 36, 34, 0.05),
		0 12px 24px -4px rgba(15, 36, 34, 0.12);
	padding: var(--space-2);
	background-clip: padding-box;
	list-style: none;
	z-index: 200;
	display: none;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--dur) var(--ease-out),
				transform var(--dur) var(--ease-out);
	pointer-events: auto;
}

#cssmenu li.has-sub:hover > ul,
#cssmenu li.has-sub:focus-within > ul {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

/* Bridge invisível: cobre o gap de 8px entre trigger e dropdown
   pra hover não quebrar quando o mouse atravessa o espaço vazio. */
#cssmenu li ul::before {
	content: '';
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	height: 8px;
	background: transparent;
}

#cssmenu li li {
	display: block;
	position: relative;
	float: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
}

#cssmenu li ul a,
#cssmenu li ul a:link,
#cssmenu li ul a:visited,
#cssmenu ul ul a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
	height: auto;
	min-height: 40px;
	padding: var(--space-2) var(--space-4);
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-gray-700) !important;
	text-shadow: none !important;
	text-align: left;
	text-decoration: none;
	border-radius: var(--radius-md);
	transition: background-color var(--dur-fast) var(--ease-out),
				color var(--dur-fast) var(--ease-out);
	box-sizing: border-box;
}

#cssmenu li ul a:hover,
#cssmenu ul ul li:hover > a,
#cssmenu li ul a:focus-visible {
	background: var(--color-gray-50);
	color: var(--color-teal-700) !important;
	text-decoration: none;
	width: 100%;
	outline: none;
}

#cssmenu li ul a > span {
	display: inline-block;
	line-height: 1.3;
}

/* Separador visual antes do Logout (último item) */
#cssmenu li ul li:last-child {
	margin-top: var(--space-1);
	padding-top: var(--space-1);
	border-top: 1px solid var(--color-gray-100);
}
#cssmenu li ul li:last-child > a {
	color: #c0392b !important;
}
#cssmenu li ul li:last-child > a:hover {
	background: #fdecea !important;
	color: #a93226 !important;
}

/* ============================================
   LOGO PEIMAGE (div absolute irmão do #cssmenu)

   HTML (não pode ser alterado):
     <div id="cssmenu">...</div>
     <div style="position:absolute; top:6px; left:5px;">
       <a href="index.php"><img src="logoPeimage.png" width="128" height="24"></a>
     </div>

   Estratégia:
   - Derrotar o inline "position: absolute; top: 6px; left: 5px"
     com position: fixed + !important.
   - Não usar pointer-events: none (estava matando o clique).
   - z-index acima do #cssmenu.
   - Tamanho normal do logo sobre o fundo teal.
   ============================================ */
#cssmenu + div {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	bottom: auto !important;
	height: 56px;
	display: flex;
	align-items: center;
	padding: 0 var(--space-4);
	z-index: 101; /* acima do #cssmenu (100) */
	background: transparent;
}

/* Mostra apenas o peixe do logoPeimage.png (250x47).
   Estratégia: container 40x40 com overflow hidden + img absoluta deslocada
   pra esquerda mostrando só os últimos ~40px (peixe).

   Por que NÃO background-image: o caminho ../images/logoPeimage.png no CSS
   relativo a /css/ funciona em qualquer URL, MAS em algumas telas (editor)
   o cache pode estar antigo OU o reset.css pode estar interferindo.
   Imagem direta no DOM é mais confiável. */
#cssmenu + div {
	background: transparent !important;
	overflow: visible !important;
}

#cssmenu + div > a {
	display: block !important;
	position: relative;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border-radius: var(--radius-md);
	text-decoration: none;
	background-color: transparent;
	transition: background-color var(--dur-fast) var(--ease-out);
	overflow: hidden;
	box-sizing: border-box;
}

#cssmenu + div > a:hover {
	background-color: rgba(255, 255, 255, 0.15);
	text-decoration: none;
}

#cssmenu + div > a > img {
	display: block !important;
	position: absolute !important;
	top: 50% !important;
	left: auto !important;
	right: 0 !important;
	height: 28px !important;
	width: auto !important;
	max-width: none !important;
	max-height: none !important;
	transform: translateY(-50%) !important;
}

/* Mobile */
@media (max-width: 600px) {
	#cssmenu + div {
		padding: 0 var(--space-3);
	}
	#cssmenu + div > a {
		width: 36px;
		height: 36px;
		background-size: auto 24px;
	}
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 600px) {
	#cssmenu > ul {
		padding: 0 var(--space-3);
		height: 56px;
	}

	#cssmenu > ul > li > div {
		max-width: 120px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	#cssmenu li ul {
		right: 0;
		left: auto;
		min-width: 260px;
		max-width: calc(100vw - var(--space-4));
	}
}

/* ============================================
   PREFERS-REDUCED-MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
	#cssmenu li ul,
	#cssmenu > ul > li > a,
	#cssmenu li ul a {
		transition: none;
	}
}