/* Header & menu utama (app/Views/layout/menu.php), dimuat di semua halaman lewat main.php.
   --hdr-h = tinggi header, diisi assets/js/menu.js; dipakai elemen sticky di halaman lain supaya tidak tertutup header. */

:root {
	--hdr-h: 72px;
	--mn-green: #72c02c;
	--mn-green-dark: #4c8a1e;
	--mn-forest: #1f3a2a;
	--mn-ink: #1f2d24;
	--mn-text: #374151;
	--mn-muted: #6b7280;
	--mn-line: #e6e8eb;
}

/* ---------- Header sticky ---------- */
html { scroll-padding-top: calc(var(--hdr-h) + 12px); }
#js-header { position: sticky; top: 0; z-index: 1030; }
#js-header .u-header__section { transition: padding .2s, box-shadow .2s; border-bottom: 1px solid transparent; }
#js-header.mn-scroll .u-header__section { padding-top: 4px !important; padding-bottom: 4px !important; box-shadow: 0 4px 18px rgba(20,35,25,.08); border-bottom-color: var(--mn-line); }
.mn-logo { display: block; height: 50px; width: auto; transition: height .2s; }
#js-header.mn-scroll .mn-logo { height: 38px; }

/* ---------- Menu utama: hierarki ---------- */
.mn-nav > .nav-item > .nav-link { position: relative; font-size: 15px; font-weight: 500; color: var(--mn-text); }
.mn-nav > .nav-item > .nav-link:hover { color: var(--mn-forest); }
.mn-nav > .nav-item > .mn-induk::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
/* penanda halaman aktif */
.mn-nav > .nav-item > .nav-link.mn-aktif { color: var(--mn-forest); font-weight: 700; }
.mn-nav > .nav-item > .nav-link.mn-aktif::before { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 3px; background: var(--mn-green); }
.mn-nav > .nav-item > .mn-induk.mn-aktif::before { right: 13px; }
/* AI Saham ditonjolkan */
.mn-nav > .nav-item > .mn-ai { color: var(--mn-green-dark); font-weight: 700; }
.mn-nav > .nav-item > .mn-ai i { margin-right: 3px; }
.mn-nav > .nav-item > .mn-ai:hover { color: var(--mn-forest); }
/* tombol login */
.mn-nav .mn-login { background: var(--mn-green); color: #fff !important; border-radius: 10px; padding: 8px 20px !important; font-weight: 700; font-size: 15px; }
.mn-nav .mn-login:hover { background: var(--mn-green-dark); }

/* ---------- Dropdown modern ---------- */
.mn-nav .hs-sub-menu.mn-sub, .mn-user-menu {
	min-width: 230px; padding: 6px; margin-top: 8px; background: #fff; border: 1px solid var(--mn-line); border-radius: 12px;
	box-shadow: 0 16px 40px rgba(20,35,25,.14);
}
.mn-nav .hs-sub-menu.mn-sub .hs-sub-menu.mn-sub { margin-top: -7px; margin-left: 4px; max-height: 70vh; overflow-y: auto; }
.mn-nav .mn-sub .dropdown-item { padding: 0; background: none; }
.mn-nav .mn-sub .dropdown-item > .nav-link, .mn-user-menu .dropdown-item {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px !important; border-radius: 8px;
	font-size: 14px; font-weight: 500; color: var(--mn-text); white-space: nowrap; transition: background .15s, color .15s;
}
.mn-nav .mn-sub .dropdown-item > .nav-link:hover, .mn-nav .mn-sub .dropdown-item.hs-sub-menu-opened > .nav-link, .mn-user-menu .dropdown-item:hover {
	background: #f1f7ec; color: var(--mn-forest);
}
.mn-nav .mn-sub .dropdown-item > .nav-link[aria-current="page"], .mn-user-menu .dropdown-item[aria-current="page"] { background: #eef6e8; color: var(--mn-green-dark); font-weight: 700; }
/* panah item yang punya submenu lagi */
.mn-nav .mn-sub .hs-has-sub-menu > .nav-link::after { content: ""; position: static !important; display: block; width: 6px; height: 6px; margin: 0 !important; align-self: center; border: 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg) !important; opacity: .5; flex-shrink: 0; }
.mn-nav .mn-sub .hs-has-sub-menu > .nav-link::before { display: none; }
/* unify.min.css menyembunyikan semua [aria-labelledby] di header (opacity 0, dibuka plugin mega menu);
   dropdown akun dibuka Bootstrap, jadi tampilkan saat .show */
.u-header .mn-user-menu.show { opacity: 1; }
.mn-user-menu .dropdown-divider { margin: 6px 4px; border-color: var(--mn-line); }
.mn-user-menu .dropdown-item.text-danger { color: #b42318 !important; }
.mn-user-menu .dropdown-item.text-danger:hover { background: #fdecec; }

/* ---------- Tombol akun: avatar + nama pendek ---------- */
.mn-user-btn { display: flex; align-items: center; gap: 8px; max-width: 190px; border: 1px solid var(--mn-line); background: #fff; border-radius: 999px; padding: 4px 12px 4px 4px; color: var(--mn-ink); font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.mn-user-btn:hover, .mn-user-btn[aria-expanded="true"] { border-color: var(--mn-green); box-shadow: 0 0 0 3px rgba(114,192,44,.15); }
.mn-user-btn.mn-aktif { border-color: var(--mn-green); }
.mn-user-btn::after { margin-left: 2px; }
.mn-avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.mn-avatar-teks { display: flex; align-items: center; justify-content: center; background: var(--mn-green); color: #fff; font-size: 14px; font-weight: 700; }
.mn-user-nama { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-user-head { display: flex; flex-direction: column; padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--mn-line); max-width: 260px; }
.mn-user-head b { color: var(--mn-ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-user-head small { color: var(--mn-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Mobile (menu collapse) ---------- */
@media (max-width: 991px) {
	.mn-logo { height: 40px; }
	#js-header.mn-scroll .mn-logo { height: 34px; }
	#navBar { max-height: calc(100vh - var(--hdr-h)); overflow-y: auto; }
	.mn-nav { padding: 8px 0 12px; }
	.mn-nav > .nav-item > .nav-link { padding: 10px 2px !important; border-bottom: 1px solid #f1f3f5; }
	.mn-nav > .nav-item > .nav-link.mn-aktif::before { top: 10px; bottom: 10px; left: -10px; right: auto; width: 3px; height: auto; }
	.mn-nav .hs-sub-menu.mn-sub, .mn-nav .hs-sub-menu.mn-sub .hs-sub-menu.mn-sub { margin: 4px 0 8px; box-shadow: none; border-color: #f1f3f5; max-height: none; }
	.mn-nav .mn-sub .dropdown-item > .nav-link { white-space: normal; }
	.mn-user { padding-top: 10px; }
	.mn-user-btn { max-width: 100%; }
	.mn-user-menu { box-shadow: none; }
	.mn-nav .mn-login { display: inline-block; margin-top: 10px; }
}