:root{--mm-green:#1bb07a;--mm-bg:#f6f7fb;}
body{background:var(--mm-bg);}
.btn-mm{background:var(--mm-green);border-color:var(--mm-green);color:#fff;}
.btn-mm:hover{background:#149565;border-color:#149565;color:#fff;}
.mm-card{border:0;border-radius:16px;}
.mm-chip{border-radius:999px;}
.mm-icon{width:18px;height:18px;color:inherit}

/* Modern Sidebar */
#mmSidebar.mm-sidebar { 
	width: 240px;
	position: fixed;
	top: 56px; /* below navbar */
	bottom: 0;
	left: 0;
	padding: 14px 12px;
	background: linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
	border-right: 1px solid rgba(13,110,253,0.06);
	z-index: 1100; /* above overlay */
	transition: none;
	box-shadow: 0 8px 30px rgba(18,38,63,0.05);
	display: flex;
	flex-direction: column;
	height: calc(100vh - 56px);
}

/* Hidden state: fully disappear - collapse width and remove visual footprint */
#mmSidebar.mm-sidebar.hidden {
	transform: translateX(-100%);
	opacity: 0;
	pointer-events: none;
	width: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	border-right: 0 !important;
}


/* Search */
.mm-search { margin-top:10px; }
.mm-search input { width:100%; border-radius:12px; border:1px solid rgba(13,110,253,0.06); padding:8px 10px; }

/* Nav */
.mm-nav { margin-top:12px; }
.mm-sidebar ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.mm-nav { flex: 1 1 auto; overflow: auto; padding-bottom: 12px; }
.mm-nav ul { list-style:none; padding:0; margin:0; }
.mm-nav li { margin-bottom:6px; }
.mm-nav-link { display:flex; align-items:center; gap:12px; padding:10px 12px; color:#163a88; border-radius:10px; text-decoration:none; font-weight:600; transition: background .12s ease, color .12s ease; }
.mm-nav-link i { color: #163a88; }
.mm-nav-link:hover { background: rgba(22,58,136,0.06); color:#0b5ed7; }
.mm-nav-link.active { background: rgba(11,94,215,0.12); color:#0b5ed7; }

/* Submenu */
.has-sub > .chev { margin-left: auto; width:18px; height:18px; opacity: .7; transition: transform .18s ease; }
.sub-menu { max-height: 0; overflow: hidden; transition: max-height .22s ease, padding .18s ease; padding-left: 12px; }
.has-sub.open > .sub-menu { max-height: 480px; padding-top: 6px; }
.mm-sub-link { display:block; padding:8px 12px; color:#42526e; text-decoration:none; border-radius:8px; margin-bottom:4px; }
.mm-sub-link:hover { background: rgba(22,58,136,0.03); }
.has-sub.open > .mm-nav-link > .chev { transform: rotate(180deg); }

/* Bottom */
.mm-sidebar-bottom { margin-top: 12px; }
.mm-sidebar-bottom ul { list-style:none; padding:0; margin:0; }
.mm-profile { margin-top:8px; }
.avatar { width:42px; height:42px; border-radius:10px; background:#f1f5f9; display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#0b5ed7; }
.profile-meta .name { font-weight:700; }
.profile-meta .role { color: rgba(13,110,253,0.6); font-size:12px; }

/* Collapsed compact state */
#mmSidebar.collapsed { width: 72px; }
#mmSidebar.collapsed .brand-name, #mmSidebar.collapsed .mm-search, #mmSidebar.collapsed .mm-sidebar-bottom ul { display:none; }
#mmSidebar.collapsed .mm-nav-link { justify-content:center; padding-left:0; padding-right:0; }
#mmSidebar.collapsed .mm-nav-link i { margin:0; }
#mmSidebar.collapsed .has-sub > .sub-menu { display:none !important; }
#mmSidebar.collapsed .has-sub > .mm-nav-link > .chev { display:none; }

/* When sidebar hidden, main expands to full width */
.main-with-sidebar.hidden { margin-left: 0 !important; }

/* Add a document-level class for fallback styling when sidebar is hidden */
html.mm-sidebar-hidden .main-with-sidebar { margin-left: 0 !important; }

/* Tooltip for collapsed sidebar (floating modern label) */
.mm-tooltip {
	position: fixed;
	pointer-events: none;
	background: #0b5ed7;
	color: #fff;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 13px;
	box-shadow: 0 8px 24px rgba(11,94,215,0.12);
	transform-origin: left center;
	transition: opacity .12s ease, transform .12s ease;
	opacity: 0;
	z-index: 1200;
}
.mm-tooltip.show { opacity: 1; transform: translateX(6px); }

@media (max-width: 768px) {
	/* Default on small screens: hidden. Use .open to show */
	#mmSidebar.mm-sidebar { transform: translateX(-100%); position: fixed; left: 0; }
	#mmSidebar.mm-sidebar.open { transform: translateX(0); }
	#mmSidebar.mm-sidebar.collapsed { transform: translateX(-100%); width: 257px; }
	.main-with-sidebar { margin-left: 0; }
}

/* Main content spacing */
.main-with-sidebar { margin-left: 240px; padding-top: 1.5rem; transition: margin-left .18s ease; }
.main-with-sidebar > .container { max-width: 1180px; margin-left: 0; }
.main-with-sidebar.full { margin-left: 72px; }

/* Overlay for mobile */
.mm-sidebar-overlay { position: fixed; inset: 0; background: rgba(3,10,25,0.4); opacity: 0; visibility: hidden; transition: opacity .18s ease; z-index: 1050; pointer-events: none; }
.mm-sidebar-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }

/* Slide animation for sidebar on desktop too */
#mmSidebar.mm-sidebar { transform: translateX(0); transition: none; }
#mmSidebar.mm-sidebar.collapsed { transform: translateX(0); }

/* Prevent body scroll when overlay open */
.mm-noscroll { overflow: hidden; }

/* Toggle button */
#sidebarToggle { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; }

/* Fixes for sidebar being clipped on some layouts */
#mmSidebar.mm-sidebar {
		box-sizing: border-box;
		overflow: visible; /* allow tooltips / children to be visible */
	z-index: 1200; /* ensure sidebar is above other layout elements */
}
.mm-nav { -webkit-overflow-scrolling: touch; overflow: auto; }

/* Ensure collapsed state doesn't visually cut off content in some browsers */
#mmSidebar.collapsed { width: 72px; min-width: 72px; overflow: visible; }

/* On narrow screens, make sure the sidebar can slide fully into view */
@media (max-width: 768px) {
	#mmSidebar.mm-sidebar { left: 0; transform: translateX(-100%); }
	#mmSidebar.mm-sidebar.open { transform: translateX(0); z-index: 1300; }
}

/* Stronger stacking to avoid main content covering sidebar in some browsers */
body { overflow-x: visible; }
#mmSidebar.mm-sidebar { z-index: 9999 !important; }
.main-with-sidebar { position: relative; z-index: 1; }

/* Invoice button inline style */
.invoice-btn { margin-left: 8px; vertical-align: middle; padding: 0.25rem 0.5rem; font-size: 0.8rem; }
.invoice-btn:hover { text-decoration: none; }

/* Footer Styling */
.mm-footer {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	border-top: 2px solid var(--mm-green);
	margin-top: auto;
}

.mm-footer h6 {
	color: #fff;
	border-bottom: 2px solid var(--mm-green);
	padding-bottom: 10px;
	display: inline-block;
}

.mm-footer a {
	transition: color 0.3s ease;
}

.mm-footer a:hover {
	color: var(--mm-green) !important;
}

.mm-footer ul li {
	margin-bottom: 8px;
}

.mm-footer .text-muted {
	color: #9ca3af !important;
}

.mm-footer hr {
	border-color: rgba(255, 255, 255, 0.1) !important;
}

.mm-footer .mm-icon {
	vertical-align: middle;
	margin-right: 4px;
}

/* Ensure footer stays at bottom */
html, body {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
}

main {
	flex: 1;
}