/* header.css - compact dropdown, centered text, separated dividers + animations */

/* basic header layout */
.app-header {
	width: 100%;
	top: 0;
	left: 0;
	position: sticky;
	z-index: 60;
	background: #ffd74d;
	box-shadow: 0 6px 14px rgba(12, 15, 30, 0.06);
}

.header-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 18px;
}

/* brand & nav */
.brand {
	font-weight: 700;
	font-size: 20px;
}

nav ul {
	display: flex;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

nav a {
	color: #111;
	font-weight: 600;
	padding: 4px 0;
	text-decoration: none;
	position: relative;
}

nav a:hover {
	color: #555;
}

/* visually hidden helper */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	border: 0 !important;
}

/* profile dropdown root */
.profile-dropdown {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* circular profile button */
.profile-button {
	background: #111;
	color: #fff;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease;
	font-size: 16px;
}

.profile-button:active {
	transform: scale(.98);
}

.profile-button:focus {
	outline: 2px solid rgba(0,0,0,0.12);
	transform: scale(1.03);
}

/* compact menu container - animated opening */
.profile-menu {
	position: absolute;
	top: 50px;
	right: 0;
	width: 180px;
               /* smaller width */
	pointer-events: none;
	opacity: 0;
	transform: translateY(-8px) scale(.985);
	transition: opacity .26s cubic-bezier(.2,.9,.28,1), transform .26s cubic-bezier(.2,.9,.28,1);
	z-index: 120;
}

/* open state */
.profile-dropdown[data-open="true"] .profile-menu {
	pointer-events: auto;
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* panel */
.profile-menu .panel {
	position: relative;
	background: #fff;
	border-radius: 10px;
	border: 1px solid rgba(16,20,24,0.06);
	box-shadow: 0 18px 40px rgba(14,18,24,0.12), 0 6px 18px rgba(14,18,24,0.06);
	overflow: hidden;
	padding: 6px;
	text-align: center;
         /* center everything inside panel */;
}

/* caret above panel (slightly adjusted for smaller width) */
.profile-menu .panel::before {
	content: "";
	position: absolute;
	top: -7px;
	right: 20px;
	width: 12px;
	height: 12px;
	background: white;
	transform: rotate(45deg);
	border-left: 1px solid rgba(16,20,24,0.06);
	border-top: 1px solid rgba(16,20,24,0.06);
	box-shadow: 0 -6px 18px rgba(14,18,24,0.06);
	border-radius: 2px;
}

/* greeting area */
.menu-greeting {
	padding: 10px 8px;
	font-weight: 700;
	font-size: 14px;
	color: #111;
	background: #fff;
	border-radius: 6px 6px 4px 4px;
	margin: 0 auto 6px auto;
	width: calc(100% - 8px);
	text-align: center;
}

/* greeting divider */
.greeting-divider {
	height: 1px;
	margin: 0 6px 8px 6px;
	background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
	border-radius: 1px;
}

/* menu rows - centered text and compact padding */
.menu-row {
	display: block;
	width: calc(100% - 12px);
	padding: 8px 6px;
	text-align: center;
        /* CENTERED text */
	background: transparent;
	border: none;
	font-weight: 600;
	font-size: 14px;
	color: #111;
	cursor: pointer;
	border-radius: 6px;
	margin: 6px auto 0 auto;
	transform: translateY(8px);
	opacity: 0;
	transition: transform .26s cubic-bezier(.2,.9,.28,1), opacity .26s cubic-bezier(.2,.9,.28,1), background .18s ease;
}

/* normal hover (profile button etc.) */
.menu-row:hover {
	background: #ffd74d;
	color: #111;
	transform: translateY(0);
}

/* logout divider - separate and centered */
.logout-divider {
	height: 1px;
	margin: 8px 6px 6px 6px;
	background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
	border-radius: 1px;
}

/* logout row: prominent red style */
.menu-row.logout {
	font-weight: 700;
	transition: background .16s ease, color .16s ease;
}

.menu-row.logout:hover {
	background: #dc2626;
        /* bright red on hover */
	color: #ffffff;
}

/* staggered reveal - only affects .menu-row elements (buttons) */
.profile-dropdown[data-open="true"] .menu-row {
	transform: translateY(0);
	opacity: 1;
}

.profile-dropdown[data-open="true"] .menu-row:nth-of-type(1) {
	transition-delay: 0.03s;
}

.profile-dropdown[data-open="true"] .menu-row:nth-of-type(2) {
	transition-delay: 0.08s;
}

.profile-dropdown[data-open="true"] .menu-row:nth-of-type(3) {
	transition-delay: 0.12s;
}

/* responsive: slightly larger on tiny screens to avoid cramped text */
@media (max-width:460px) {
	.profile-menu {
		right: 6px;
		width: 200px;
		top: 52px;
	}

	.profile-menu .panel::before {
		right: 26px;
		top: -8px;
		width: 13px;
		height: 13px;
	}

	.menu-greeting {
		font-size: 15px;
		padding: 12px 10px;
		width: calc(100% - 12px);
	}

	.menu-row {
		font-size: 15px;
		padding: 10px 8px;
		width: calc(100% - 16px);
	}
}