/**
 * Shell Rekapos — header putih; sidebar tema logo (navy + sky), flat tanpa gradasi.
 */
:root {
	--rekapos-shell-accent: #4eb6e8;
	--rekapos-shell-accent-soft: rgba(78, 182, 232, 0.14);
	--rekapos-shell-border: rgba(15, 23, 42, 0.1);
	--rekapos-shell-text: #1e293b;
	--rekapos-shell-muted: #64748b;
	--rekapos-shell-hover: #f1f5f9;
	--rekapos-shell-r: 4px;
	/* Warna merek (logo Rekapos) — sidebar */
	--rekapos-brand-navy: #143d62;
	--rekapos-brand-sky: #4eb6e8;
	--rekapos-brand-sky-dim: #3a9bc9;
	--rekapos-sidebar-bg: var(--rekapos-brand-navy);
	--rekapos-sidebar-text: rgba(255, 255, 255, 0.9);
	--rekapos-sidebar-muted: rgba(255, 255, 255, 0.62);
	--rekapos-sidebar-hover-bg: rgba(255, 255, 255, 0.1);
	--rekapos-sidebar-active-bg: var(--rekapos-brand-sky);
	--rekapos-sidebar-active-text: #ffffff;
	--rekapos-sidebar-parent-open-bg: #1a4f78;
	--rekapos-sidebar-tree: rgba(255, 255, 255, 0.16);
	--rekapos-sidebar-r: 10px;
	/* Hirarki menu */
	--menu-l1-fs: 0.9375rem;
	--menu-l2-fs: 0.875rem;
	--menu-l3-fs: 0.8125rem;
}

/* --- Toolbar: satu panel putih, tidak “kebawa” tema gelap --- */
body.rekapos-modern-shell[data-topbar='light'],
body.rekapos-modern-shell[data-topbar='dark'] {
	background-color: #f5f7fa;
}

body.rekapos-modern-shell #page-topbar {
	background-color: #ffffff !important;
	background-image: none !important;
	border-bottom: 1px solid var(--rekapos-shell-border) !important;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

body.rekapos-modern-shell #page-topbar .navbar-header {
	background: #ffffff !important;
	min-height: 68px;
}

/* Logo hanya satu: tema Skote pakai dua <a.logo>; yang dipakai = .logo-dark */
body.rekapos-modern-shell #page-topbar .navbar-brand-box .logo.logo-light {
	display: none !important;
}

body.rekapos-modern-shell #page-topbar .navbar-brand-box .logo.logo-dark {
	display: flex !important;
	align-items: center !important;
	line-height: 1 !important;
	min-height: 68px;
}

body.rekapos-modern-shell #page-topbar .navbar-brand-box .logo-dark .logo-lg img {
	max-height: 40px !important;
	height: auto !important;
	width: auto !important;
}

body.rekapos-modern-shell #page-topbar .navbar-brand-box {
	background: #ffffff !important;
	text-align: left !important;
	display: flex !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	padding: 0 1rem 0 1.15rem !important;
	border-right: 1px solid var(--rekapos-shell-border) !important;
	box-shadow: none !important;
	min-width: 250px !important;
	width: auto !important;
	max-width: min(340px, 42vw) !important;
}

/* Logo + nama toko (toolbar) */
body.rekapos-modern-shell #page-topbar .navbar-brand-box .rekapos-brand-strip {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	min-width: 0 !important;
	flex: 1 1 auto !important;
	gap: 0.35rem !important;
	width: 100% !important;
}

body.rekapos-modern-shell #page-topbar .navbar-brand-box .rekapos-brand-strip .logo {
	flex-shrink: 0 !important;
}

body.rekapos-modern-shell .rekapos-brand-logos {
	min-width: 0 !important;
}

/* Logo toko kecil (toolbar mobile) */
body.rekapos-modern-shell .rekapos-toolbar-store-icon-link {
	flex-shrink: 0 !important;
	text-decoration: none !important;
	line-height: 1 !important;
}

body.rekapos-modern-shell .rekapos-toolbar-store-icon {
	display: block !important;
	width: 28px !important;
	height: 28px !important;
	max-width: 28px !important;
	max-height: 28px !important;
	object-fit: contain !important;
	border-radius: 6px !important;
	background: rgba(15, 23, 42, 0.06) !important;
	padding: 2px !important;
	box-sizing: border-box !important;
}

body.rekapos-modern-shell .rekapos-toolbar-store-icon-link:hover .rekapos-toolbar-store-icon {
	background: rgba(20, 61, 98, 0.1) !important;
}

@media (max-width: 767.98px) {
	body.rekapos-modern-shell #page-topbar .navbar-header {
		min-height: 56px;
		height: 56px;
		padding-right: 6px;
	}

	body.rekapos-modern-shell #page-topbar .navbar-brand-box {
		min-width: 0 !important;
		max-width: none !important;
		width: auto !important;
		flex: 0 0 auto !important;
		padding-left: 0.5rem !important;
		padding-right: 0.15rem !important;
		align-items: center !important;
		height: 56px !important;
	}

	body.rekapos-modern-shell #page-topbar .navbar-brand-box .logo.logo-dark,
	body.rekapos-modern-shell #page-topbar .navbar-brand-box .logo.logo-light {
		min-height: 0 !important;
		line-height: 1 !important;
	}

	body.rekapos-modern-shell .rekapos-toolbar-store-icon {
		width: 26px !important;
		height: 26px !important;
		max-width: 26px !important;
		max-height: 26px !important;
	}

	body.rekapos-modern-shell #page-topbar .header-item,
	body.rekapos-modern-shell #vertical-menu-btn {
		height: 36px !important;
		min-height: 36px !important;
	}

	body.rekapos-modern-shell #vertical-menu-btn {
		width: 36px !important;
		min-width: 36px !important;
		padding: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex-shrink: 0 !important;
	}
}

body.rekapos-modern-shell .rekapos-toolbar-store-link {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	max-width: 11.5rem;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	line-height: 1.25 !important;
	color: var(--rekapos-shell-text) !important;
	text-decoration: none !important;
	border-left: 1px solid rgba(15, 23, 42, 0.12) !important;
	padding-left: 0.65rem !important;
	margin-left: 0.2rem !important;
}

body.rekapos-modern-shell .rekapos-toolbar-store-link:hover {
	color: #143d62 !important;
}

body.rekapos-modern-shell .rekapos-toolbar-store-name {
	display: block !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

body.rekapos-modern-shell.vertical-collpsed .rekapos-toolbar-store-link {
	display: none !important;
}

body.rekapos-modern-shell.vertical-collpsed .rekapos-toolbar-store-icon-link {
	display: none !important;
}

body.rekapos-modern-shell.vertical-collpsed .rekapos-brand-logos.d-none.d-md-flex {
	display: flex !important;
}

/* Tombol menu: sudut sangat halus */
body.rekapos-modern-shell #vertical-menu-btn {
	border-radius: var(--rekapos-shell-r) !important;
	border: 1px solid var(--rekapos-shell-border) !important;
	background: #ffffff !important;
	color: var(--rekapos-shell-text) !important;
	transition: border-color 0.12s ease, background 0.12s ease;
}

body.rekapos-modern-shell #vertical-menu-btn:hover {
	background: var(--rekapos-shell-hover) !important;
	box-shadow: none !important;
}

body.rekapos-modern-shell #page-topbar .header-item.noti-icon {
	border-radius: var(--rekapos-shell-r) !important;
	border: 1px solid transparent !important;
}

body.rekapos-modern-shell #page-topbar .header-item.noti-icon:hover {
	background: var(--rekapos-shell-hover) !important;
	border-color: var(--rekapos-shell-border) !important;
}

/* User: bukan pil penuh */
body.rekapos-modern-shell #page-header-user-dropdown {
	border-radius: 8px !important;
	padding: 4px 10px !important;
}

body.rekapos-modern-shell .header-profile-user {
	box-shadow: none !important;
	border: 1px solid var(--rekapos-shell-border) !important;
}

body.rekapos-modern-shell #page-header-user-dropdown span {
	color: var(--rekapos-shell-text) !important;
}

body.rekapos-modern-shell #page-header-user-dropdown sup {
	color: var(--rekapos-shell-muted) !important;
	font-size: 0.72rem !important;
}

/* Sidebar — tema logo (scoped ke .rekapos-sidebar-with-foot supaya kena walau body tanpa .rekapos-modern-shell / deploy parsial) */
.vertical-menu.rekapos-sidebar-with-foot {
	background: var(--rekapos-sidebar-bg) !important;
	border-right: 1px solid rgba(0, 0, 0, 0.2) !important;
	box-shadow: none !important;
}

.vertical-menu.rekapos-sidebar-with-foot .rekapos-sidebar-scroll .simplebar-scrollbar:before {
	background: rgba(255, 255, 255, 0.35);
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu {
	padding: 10px 0 1rem 0;
}

/* --- Tingkat 1 (semua item langsung di #side-menu) --- */
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu > li > a {
	border-radius: var(--rekapos-sidebar-r) !important;
	margin: 3px 10px !important;
	padding: 0.58rem 0.95rem !important;
	font-size: var(--menu-l1-fs) !important;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--rekapos-sidebar-text) !important;
	transition: background 0.14s ease, color 0.14s ease;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu > li > a i {
	font-size: 1.12rem !important;
	width: 1.25rem;
	text-align: center;
	margin-right: 10px !important;
	vertical-align: -2px;
	opacity: 0.95;
	color: inherit !important;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu > li > a:hover {
	background: var(--rekapos-sidebar-hover-bg) !important;
	color: #ffffff !important;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu > li > a:hover i {
	color: #ffffff !important;
}

/* Aktif: halaman tunjuk langsung (tanpa submenu) — blok sky + teks putih (kontras tinggi) */
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu > li.mm-active > a:not(.has-arrow) {
	background: var(--rekapos-sidebar-active-bg) !important;
	color: var(--rekapos-sidebar-active-text) !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu > li.mm-active > a:not(.has-arrow) i {
	color: var(--rekapos-sidebar-active-text) !important;
}

/* Induk bertingkat sedang terbuka / ada anak aktif — beda dari leaf: navy lebih terang + garis sky */
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu > li.mm-active > a.has-arrow {
	background: var(--rekapos-sidebar-parent-open-bg) !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	box-shadow: inset 4px 0 0 var(--rekapos-brand-sky) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu > li.mm-active > a.has-arrow i {
	color: #ffffff !important;
}

/* Kontainer submenu level 2 */
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu ul.menu-content {
	position: relative;
	margin-left: 0.35rem !important;
	padding: 6px 0 8px 0 !important;
	border-left: 2px solid var(--rekapos-sidebar-tree);
	margin-right: 6px !important;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu ul.menu-content > li > a {
	display: flex !important;
	align-items: center !important;
	border-radius: var(--rekapos-sidebar-r) !important;
	margin: 2px 4px 2px 6px !important;
	padding: 0.42rem 0.65rem 0.42rem 0.95rem !important;
	font-size: var(--menu-l2-fs) !important;
	font-weight: 500;
	color: var(--rekapos-sidebar-muted) !important;
	line-height: 1.35;
	transition: background 0.12s ease, color 0.12s ease;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu ul.menu-content > li > a i {
	font-size: 0.92rem !important;
	margin-right: 8px !important;
	opacity: 0.9;
	color: var(--rekapos-sidebar-muted) !important;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu ul.menu-content > li > a:hover {
	background: var(--rekapos-sidebar-hover-bg) !important;
	color: #ffffff !important;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu ul.menu-content > li > a:hover i {
	opacity: 1;
	color: #ffffff !important;
}

/* Aktif dalam submenu L2 */
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu ul.menu-content > li.mm-active > a:not(.has-arrow),
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu ul.menu-content > li.nav-item.mm-active > a:not(.has-arrow) {
	background: var(--rekapos-sidebar-active-bg) !important;
	color: var(--rekapos-sidebar-active-text) !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu ul.menu-content > li.mm-active > a:not(.has-arrow) i {
	color: var(--rekapos-sidebar-active-text) !important;
	opacity: 1 !important;
}

/* Folder L2 dengan anak */
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu ul.menu-content > li.mm-active > a.has-arrow {
	background: var(--rekapos-sidebar-parent-open-bg) !important;
	box-shadow: inset 3px 0 0 var(--rekapos-brand-sky) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: #ffffff !important;
	padding-left: 0.8rem !important;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu ul.menu-content > li.mm-active > a.has-arrow i {
	color: #ffffff !important;
}

/* Sub-submenu (nested menu-content — level 3) */
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu ul.menu-content ul.menu-content {
	margin-left: 0.85rem !important;
	padding-left: 0 !important;
	margin-top: 4px !important;
	margin-bottom: 4px !important;
	padding-top: 2px !important;
	padding-bottom: 4px !important;
	border-left: 2px solid var(--rekapos-sidebar-tree) !important;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu ul.menu-content ul.menu-content > li > a {
	padding-left: 1.85rem !important;
	font-size: var(--menu-l3-fs) !important;
	padding-top: 0.38rem !important;
	padding-bottom: 0.38rem !important;
	color: var(--rekapos-sidebar-muted) !important;
	font-weight: 500;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu ul.menu-content ul.menu-content > li.mm-active > a {
	background: var(--rekapos-sidebar-active-bg) !important;
	font-weight: 600 !important;
	color: var(--rekapos-sidebar-active-text) !important;
	box-shadow: none !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu ul.menu-content ul.menu-content > li > a:hover {
	background: var(--rekapos-sidebar-hover-bg) !important;
	color: #ffffff !important;
}

/* Heading “has-arrow” tier-2 dalam menu-content — parent kecil */
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu ul.menu-content > li > a.has-arrow {
	font-weight: 550 !important;
	color: rgba(255, 255, 255, 0.82) !important;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu ul.menu-content > li.mm-active > a.has-arrow {
	font-weight: 600 !important;
	color: #ffffff !important;
}

/* Chevron metismenu */
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu #side-menu .has-arrow::after {
	border-width: 0 1px 1px 0 !important;
	border-color: rgba(255, 255, 255, 0.45) !important;
	transition: opacity 0.15s ease, transform 0.2s ease, border-color 0.15s ease;
	opacity: 0.85;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu .has-arrow:hover::after {
	border-color: #ffffff !important;
	opacity: 1;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu li.mm-active > a.has-arrow::after {
	border-color: #ffffff !important;
	opacity: 1;
}

/* MetisMenu: <a class="active"> — kalahkan .mm-active .active dari app.min */
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu li.mm-active > a.active:not(.has-arrow),
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu ul li a.active:not(.has-arrow),
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu .mm-active a.active:not(.has-arrow),
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu a.active:not(.has-arrow) {
	background: var(--rekapos-sidebar-active-bg) !important;
	color: var(--rekapos-sidebar-active-text) !important;
	font-weight: 600 !important;
	box-shadow: inset 3px 0 0 var(--rekapos-brand-sky-dim) !important;
}

.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu li.mm-active > a.active:not(.has-arrow) i,
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu li.mm-active > a.active:not(.has-arrow) .bx,
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu li.mm-active > a.active:not(.has-arrow) span,
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu ul li a.active:not(.has-arrow) i,
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu ul li a.active:not(.has-arrow) .bx,
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu ul li a.active:not(.has-arrow) span,
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu a.active:not(.has-arrow) i,
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu a.active:not(.has-arrow) .bx,
.vertical-menu.rekapos-sidebar-with-foot #sidebar-menu a.active:not(.has-arrow) span {
	color: var(--rekapos-sidebar-active-text) !important;
	opacity: 1 !important;
}

/* Sidebar kolaps: hover baris ikon — sky solid */
body.vertical-collpsed .vertical-menu.rekapos-sidebar-with-foot #sidebar-menu > ul > li:hover > a {
	background: var(--rekapos-brand-sky-dim) !important;
	color: #ffffff !important;
}

body.vertical-collpsed .vertical-menu.rekapos-sidebar-with-foot #sidebar-menu > ul > li:hover > a i {
	color: #ffffff !important;
}

body.vertical-collpsed .vertical-menu.rekapos-sidebar-with-foot #sidebar-menu > ul > li.mm-active > a:not(.has-arrow),
body.vertical-collpsed .vertical-menu.rekapos-sidebar-with-foot #sidebar-menu > ul > li > a.active:not(.has-arrow) {
	background: var(--rekapos-sidebar-active-bg) !important;
	color: #ffffff !important;
}

/* Kolaps: panel submenu melayang — sama navy, teks terang (bawaan tema = putih) */
body.vertical-collpsed .vertical-menu.rekapos-sidebar-with-foot #sidebar-menu > ul ul {
	background-color: var(--rekapos-sidebar-bg) !important;
}

body.vertical-collpsed .vertical-menu.rekapos-sidebar-with-foot #sidebar-menu > ul > li:hover > ul a {
	color: rgba(255, 255, 255, 0.88) !important;
}

body.vertical-collpsed .vertical-menu.rekapos-sidebar-with-foot #sidebar-menu > ul > li:hover > ul a:hover {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.08) !important;
}

body.vertical-collpsed .vertical-menu.rekapos-sidebar-with-foot #sidebar-menu ul li.mm-active > a:not(.has-arrow),
body.vertical-collpsed .vertical-menu.rekapos-sidebar-with-foot #sidebar-menu ul a.active:not(.has-arrow) {
	background: var(--rekapos-sidebar-active-bg) !important;
	color: #ffffff !important;
}

body.vertical-collpsed .vertical-menu.rekapos-sidebar-with-foot #sidebar-menu ul li.mm-active > a:not(.has-arrow) i,
body.vertical-collpsed .vertical-menu.rekapos-sidebar-with-foot #sidebar-menu ul li.mm-active > a:not(.has-arrow) .bx,
body.vertical-collpsed .vertical-menu.rekapos-sidebar-with-foot #sidebar-menu ul li.mm-active > a:not(.has-arrow) span,
body.vertical-collpsed .vertical-menu.rekapos-sidebar-with-foot #sidebar-menu ul a.active:not(.has-arrow) i,
body.vertical-collpsed .vertical-menu.rekapos-sidebar-with-foot #sidebar-menu ul a.active:not(.has-arrow) .bx,
body.vertical-collpsed .vertical-menu.rekapos-sidebar-with-foot #sidebar-menu ul a.active:not(.has-arrow) span {
	color: #ffffff !important;
}