/**
 * Header dropdowns — chat & notifications
 */
:root {
	--whd-primary: #4f46e5;
	--whd-primary-soft: rgba(79, 70, 229, 0.12);
	--whd-border: #e8ecf4;
	--whd-radius: 14px;
	--whd-shadow: 0 12px 40px rgba(15, 23, 42, 0.14);
}

/* Trigger icons */
.header-cart > .nav-link.icon,
.header-message > .nav-link.icon,
.header-notify > .nav-link.icon {
	position: relative;
	border-radius: 10px;
	transition: background 0.15s ease, color 0.15s ease;
}

.header-cart > .nav-link.icon:hover,
.header-message > .nav-link.icon:hover,
.header-notify > .nav-link.icon:hover,
.header-cart.show > .nav-link.icon,
.header-message.show > .nav-link.icon,
.header-notify.show > .nav-link.icon {
	background: var(--whd-primary-soft);
	color: var(--whd-primary) !important;
}

.header-message.show > .nav-link.icon {
	color: #059669 !important;
	background: rgba(5, 150, 105, 0.12);
}

/* Compact count pills — cart / chat / notifications */
.whd-header-count {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(30%, -18%);
	min-width: 1.125rem;
	height: 1.125rem;
	padding: 0 0.28rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-size: 0.5625rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: #fff;
	border-radius: 999px;
	border: 2px solid #fff;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.12),
		0 2px 8px rgba(15, 23, 42, 0.14);
	z-index: 2;
	pointer-events: none;
	-webkit-font-smoothing: antialiased;
}

.whd-header-count--cart {
	background: linear-gradient(145deg, #fb7185 0%, #e11d48 45%, #be123c 100%);
	box-shadow:
		0 1px 2px rgba(190, 18, 60, 0.35),
		0 2px 8px rgba(225, 29, 72, 0.35);
}

.whd-header-count--message {
	background: linear-gradient(145deg, #6ee7b7 0%, #10b981 40%, #047857 100%);
	box-shadow:
		0 1px 2px rgba(4, 120, 87, 0.35),
		0 2px 8px rgba(16, 185, 129, 0.35);
}

.header-notify .notification-badge {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(30%, -18%);
	min-width: 1.125rem;
	height: 1.125rem;
	padding: 0 0.28rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-radius: 999px;
	font-size: 0.5625rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: #fff;
	border: 2px solid #fff;
	background: linear-gradient(145deg, #f87171 0%, #ef4444 45%, #dc2626 100%);
	box-shadow:
		0 1px 2px rgba(220, 38, 38, 0.35),
		0 2px 8px rgba(239, 68, 68, 0.3);
	z-index: 2;
	pointer-events: none;
	-webkit-font-smoothing: antialiased;
}

/* Shared panel */
.whd-panel.dropdown-menu {
	width: 360px;
	max-width: calc(100vw - 24px) !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin-top: 0.5rem;
	border: 1px solid var(--whd-border);
	border-radius: var(--whd-radius);
	box-shadow: var(--whd-shadow);
	overflow: hidden;
	box-sizing: border-box;
}

.whd-panel .dropdown-header {
	display: none;
}

.whd-panel .header-dropdown-list {
	padding: 0;
	margin: 0;
}

.header-notify.show .whd-panel.header-notify-dropdown,
.header-message.show .whd-panel.header-message-dropdown {
	left: auto !important;
	right: 0 !important;
}

.header-notify .whd-panel.dropdown-menu-arrow.dropdown-menu-right:before,
.header-notify .whd-panel.dropdown-menu-arrow.dropdown-menu-right:after,
.header-message .whd-panel.dropdown-menu-arrow.dropdown-menu-right:before,
.header-message .whd-panel.dropdown-menu-arrow.dropdown-menu-right:after {
	left: auto;
	right: 14px;
}

.whd-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.9rem 1rem;
	background: linear-gradient(135deg, #312e81 0%, #4f46e5 55%, #6366f1 100%);
	color: #fff;
}

.whd-panel__head h6 {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.whd-panel__head-sub {
	font-size: 0.7rem;
	opacity: 0.88;
	margin-top: 0.15rem;
}

.whd-panel__head-actions {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex-shrink: 0;
}

.whd-panel__link {
	font-size: 0.7rem;
	font-weight: 600;
	color: #fff !important;
	background: rgba(255, 255, 255, 0.18);
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	text-decoration: none !important;
	white-space: nowrap;
}

.whd-panel__link:hover {
	background: rgba(255, 255, 255, 0.28);
	color: #fff !important;
}

.whd-panel__toolbar {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--whd-border);
	background: #f8fafc;
}

.whd-panel__toolbar .btn {
	border-radius: 8px;
	font-size: 0.75rem;
	font-weight: 600;
}

.whd-panel__scroll {
	max-height: min(70vh, 420px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.whd-panel__scroll::-webkit-scrollbar {
	width: 5px;
}

.whd-panel__scroll::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

.whd-panel__foot {
	padding: 0.65rem 1rem;
	border-top: 1px solid var(--whd-border);
	background: #fafbfc;
	text-align: center;
}

.whd-panel__foot a {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--whd-primary) !important;
	text-decoration: none !important;
}

.whd-panel__foot a:hover {
	text-decoration: underline !important;
}

.whd-empty {
	text-align: center;
	padding: 2.25rem 1rem;
	color: #9ca3af;
}

.whd-empty i {
	font-size: 2rem;
	display: block;
	margin-bottom: 0.5rem;
	opacity: 0.5;
}

/* Notification items */
.whd-notify-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem 1rem !important;
	border-bottom: 1px solid #f1f5f9 !important;
	text-decoration: none !important;
	color: inherit;
	white-space: normal;
	transition: background 0.12s ease;
}

.whd-notify-item:hover {
	background: #f8fafc;
}

.whd-notify-item.is-unread {
	background: linear-gradient(90deg, var(--whd-primary-soft) 0%, transparent 85%);
	border-left: 3px solid var(--whd-primary) !important;
	padding-left: calc(1rem - 3px) !important;
}

.whd-notify-item__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 1rem;
}

.whd-notify-item__icon.icon-primary {
	background: rgba(79, 70, 229, 0.12);
	color: #4f46e5;
}

.whd-notify-item__icon.icon-success {
	background: rgba(16, 185, 129, 0.12);
	color: #059669;
}

.whd-notify-item__icon.icon-warning {
	background: rgba(245, 158, 11, 0.12);
	color: #d97706;
}

.whd-notify-item__icon.icon-info {
	background: rgba(14, 165, 233, 0.12);
	color: #0284c7;
}

.whd-notify-item__body {
	flex: 1;
	min-width: 0;
}

.whd-notify-item__title {
	font-weight: 600;
	font-size: 0.8125rem;
	color: #111827;
	line-height: 1.35;
}

.whd-notify-item__text {
	font-size: 0.75rem;
	color: #6b7280;
	margin-top: 0.15rem;
	line-height: 1.4;
	word-break: break-word;
}

.whd-notify-item__time {
	font-size: 0.6875rem;
	color: #9ca3af;
	margin-top: 0.25rem;
}

.whd-notify-badge {
	font-size: 0.6rem;
	font-weight: 700;
	padding: 0.15rem 0.4rem;
	border-radius: 4px;
	background: var(--whd-primary);
	color: #fff;
	flex-shrink: 0;
}

/* Chat items */
.whd-chat-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem 1rem !important;
	border-bottom: 1px solid #f1f5f9 !important;
	text-decoration: none !important;
	color: inherit;
	transition: background 0.12s ease;
}

.whd-chat-item:hover {
	background: #f8fafc;
}

.whd-chat-item.is-unread {
	background: linear-gradient(90deg, rgba(5, 150, 105, 0.08) 0%, transparent 85%);
}

.whd-chat-item__avatar {
	position: relative;
	flex-shrink: 0;
}

.whd-chat-item__avatar .avatar {
	width: 44px;
	height: 44px;
	border: 2px solid #fff;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

.whd-chat-item__dot {
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 10px;
	height: 10px;
	background: #059669;
	border: 2px solid #fff;
	border-radius: 50%;
}

.whd-chat-item__body {
	flex: 1;
	min-width: 0;
}

.whd-chat-item__name {
	font-weight: 600;
	font-size: 0.875rem;
	color: #111827;
	margin: 0 0 0.2rem;
	line-height: 1.3;
}

.whd-chat-item__preview {
	font-size: 0.75rem;
	color: #6b7280;
	margin: 0 0 0.25rem;
	line-height: 1.4;
}

.whd-chat-item__time {
	font-size: 0.6875rem;
	color: #9ca3af;
}

/* Profile dropdown menu */
.whd-profile-menu.dropdown-menu {
	min-width: 220px;
	padding: 0;
	border-radius: var(--whd-radius);
	overflow: hidden;
}

.whd-profile-menu .user-semi-title {
	font-size: 0.75rem;
	color: #6b7280;
}

.whd-profile-menu > .border-bottom {
	background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}

.whd-profile-menu .dropdown-item {
	padding: 0.65rem 1rem;
	font-size: 0.875rem;
}

.whd-profile-menu .dropdown-item:hover {
	background: #f8fafc;
}

body.wms-ui .profile-dropdown > .dropdown-toggle::after {
	display: none;
}

/* Override tema Admitro: posisi dropdown header */
body.wms-ui .header-notify.show .dropdown-menu.header-notify-dropdown,
body.wms-ui .header-message.show .dropdown-menu.header-message-dropdown,
body.wms-ui .profile-dropdown.show .dropdown-menu.header-profile-dropdown {
	left: auto !important;
	right: 0 !important;
}

body.wms-ui .header-notify.show .dropdown-menu,
body.wms-ui .header-message.show .dropdown-menu,
body.wms-ui .profile-dropdown.show .dropdown-menu {
	transform: none !important;
}

/* Tampilkan chat di mobile (tema menyembunyikan .header-message ≤480px) */
body.wms-ui .app-header .header-message {
	display: block !important;
}

/* Backdrop klik untuk tutup panel (mobile) */
.whd-header-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1055;
	border: 0;
	padding: 0;
	margin: 0;
	background: rgba(15, 23, 42, 0.35);
	cursor: pointer;
}

.whd-header-backdrop.is-visible {
	display: block;
}

/* ─── Mobile / tablet sempit (≤992px): panel fixed ─── */
@media (max-width: 991.98px) {
	body.wms-ui .app-content,
	body.wms-ui .app-content .side-app {
		overflow: visible !important;
	}

	body.wms-ui .app-header,
	body.wms-ui .app-header .container-fluid,
	body.wms-ui .app-header .container-fluid > .d-flex,
	body.wms-ui .app-header .order-lg-2 {
		overflow: visible !important;
	}

	body.wms-ui .header-notify,
	body.wms-ui .header-message,
	body.wms-ui .profile-dropdown {
		position: static;
	}

	body.wms-ui .header-notify > .nav-link.icon,
	body.wms-ui .header-message > .nav-link.icon {
		width: 36px;
		height: 36px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}

	/* Panel notifikasi, chat & profil — fixed di bawah header */
	body.wms-ui .header-notify.show .whd-panel,
	body.wms-ui .header-message.show .whd-panel,
	body.wms-ui .profile-dropdown.show .whd-panel,
	body.wms-ui .app-header .dropdown-menu.whd-panel.show,
	body.wms-ui .dropdown-menu.whd-panel.whd-panel--portal.show,
	body.wms-ui .dropdown-menu.whd-panel.whd-panel--open {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: fixed !important;
		top: calc(56px + env(safe-area-inset-top, 0px)) !important;
		left: 0.5rem !important;
		right: 0.5rem !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		z-index: 1060 !important;
		transform: none !important;
		pointer-events: auto !important;
	}

	/* Override tema: left negatif di portrait */
	body.wms-ui .header-notify.show .dropdown-menu,
	body.wms-ui .header-message.show .dropdown-menu,
	body.wms-ui .profile-dropdown.show .dropdown-menu,
	body.wms-ui .dropdown-menu.whd-panel--portal.show,
	body.wms-ui .dropdown-menu.whd-panel--open {
		left: 0.5rem !important;
		right: 0.5rem !important;
	}

	body.wms-ui .header-notify .whd-panel.dropdown-menu-arrow:before,
	body.wms-ui .header-notify .whd-panel.dropdown-menu-arrow:after,
	body.wms-ui .header-message .whd-panel.dropdown-menu-arrow:before,
	body.wms-ui .header-message .whd-panel.dropdown-menu-arrow:after,
	body.wms-ui .profile-dropdown .whd-panel.dropdown-menu-arrow:before,
	body.wms-ui .profile-dropdown .whd-panel.dropdown-menu-arrow:after {
		display: none;
	}

	body.wms-ui .whd-panel__head {
		flex-wrap: wrap;
		padding: 0.75rem 0.85rem;
	}

	body.wms-ui .whd-panel__head h6 {
		font-size: 0.875rem;
	}

	body.wms-ui .whd-panel__head-actions {
		width: 100%;
		justify-content: flex-end;
		margin-top: 0.35rem;
	}

	body.wms-ui .whd-panel__scroll {
		max-height: min(55vh, 360px);
	}

	body.wms-ui .whd-notify-item__title {
		font-size: 0.8125rem;
	}

	body.wms-ui .profile-dropdown .nav-link {
		padding: 0;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		cursor: pointer;
	}

	body.wms-ui .profile-dropdown .avatar {
		width: 36px;
		height: 36px;
	}

	/* Backdrop ringan saat dropdown header terbuka */
	body.wms-ui.whd-header-open::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(15, 23, 42, 0.35);
		z-index: 1055;
		pointer-events: none;
	}
}

@media (max-width: 380px) {
	body.wms-ui .header-notify.show .whd-panel,
	body.wms-ui .header-message.show .whd-panel,
	body.wms-ui .profile-dropdown.show .whd-panel {
		left: 0.35rem !important;
		right: 0.35rem !important;
	}
}

/* Profile panel — item menu (selaras notifikasi/chat) */
.whd-profile-panel__avatar {
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
	flex-shrink: 0;
}

.whd-profile-panel__head h6 {
	color: #fff;
	font-weight: 700;
}

.whd-profile-panel__menu {
	padding: 0.25rem 0;
}

.whd-profile-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.75rem 1rem;
	border: 0;
	background: transparent;
	text-align: left;
	font-size: 0.875rem;
	font-weight: 500;
	color: #111827;
	text-decoration: none !important;
	cursor: pointer;
	border-bottom: 1px solid #f1f5f9;
}

.whd-profile-item:last-child {
	border-bottom: 0;
}

.whd-profile-item:hover,
.whd-profile-item:focus {
	background: #f8fafc;
	color: #111827;
	outline: none;
}

.whd-profile-item__icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--whd-primary-soft);
	color: var(--whd-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 1rem;
}

.whd-profile-item--danger {
	color: #dc2626;
}

.whd-profile-item--danger .whd-profile-item__icon {
	background: rgba(220, 38, 38, 0.1);
	color: #dc2626;
}