/* Modern sidebar-inspired styling */
:root {
	--sidebar-bg: #eaf7e6;
	--sidebar-accent: #7ac143;
	--sidebar-text: #2f4b2f;
	--sidebar-hover: #d9f2cf;
	--sidebar-border: #cfe7c6;
	--body-bg: #f6f9fc;
	--text-main: #1f2937;
	--text-sub: #6b7280;
	--primary: #22c55e; /* emerald green */
	--primary-contrast: #0f5132;
	--primary-soft: #e8f7ee;
	--border: #e5e7eb;
}

.container-fluid { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
body { background: var(--body-bg); color: var(--text-main); }

/* Navbar */
.app-navbar { background: #ffffff; border-bottom: 1px solid var(--border); }
.app-navbar .navbar-brand { font-weight: 700; }
.app-navbar .nav-link { color: var(--text-main); }
.app-navbar .nav-link:hover { color: var(--primary-contrast); }

.app-sidebar {
	background: var(--sidebar-bg);
	border: 1px solid var(--sidebar-border);
	border-radius: 0.75rem;
	padding: 1rem;
	min-height: calc(100vh - 8rem);
	position: sticky;
	top: 1rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.app-sidebar .brand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}
.app-sidebar .brand-name {
	font-weight: 700;
	color: var(--sidebar-text);
}
.menu {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.menu-item {
	display: block;
	width: 100%;
	background: transparent;
	color: var(--sidebar-text);
	text-decoration: none;
	padding: 0.6rem 0.75rem;
	border-radius: 0.5rem;
	border: 1px solid transparent;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.menu-item:hover,
.menu-item.active {
	background: var(--sidebar-hover);
	border-color: var(--sidebar-border);
}
.menu-item.has-children {
	border: 1px solid var(--sidebar-border);
	background: #fff;
	color: var(--sidebar-text);
	cursor: pointer;
	text-align: left;
}
.submenu {
	display: none;
	margin-top: 0.25rem;
	margin-left: 0.25rem;
	padding-left: 0.25rem;
	border-left: 2px solid var(--sidebar-border);
}
.submenu.show { display: block; }
.submenu-item {
	display: block;
	text-decoration: none;
	color: var(--sidebar-text);
	padding: 0.45rem 0.5rem;
	border-radius: 0.4rem;
}
.submenu-item:hover {
	background: var(--sidebar-hover);
}

/* Content spacing to feel airy like the reference */
.card.shadow-sm {
	box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;
}
.fc .fc-toolbar-title { color: var(--primary); }

@media (max-width: 991.98px) {
	.app-sidebar { position: relative; min-height: auto; }
}

/* Buttons */
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: #16a34a; border-color: #16a34a; }
.btn-outline-primary { color: var(--primary-contrast); border-color: var(--border); }
.btn-outline-primary:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }

/* Cards */
.card { border: 1px solid var(--border); border-radius: 0.75rem; }
.card .card-header { background: #fff; border-bottom: 1px solid var(--border); }

/* Tables */
.table { border-color: var(--border); }
.table thead th { background: #f9fafb; font-weight: 600; }
.table-bordered > :not(caption) > * { border-color: var(--border); }

/* Forms */
.form-control, .form-select { border-color: var(--border); border-radius: 0.6rem; }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.15); border-color: var(--primary); }

/* Modals */
.modal-content { border-radius: 0.75rem; }
.modal-header { border-bottom-color: var(--border); }
.modal-footer { border-top-color: var(--border); }

/* Utility */
.text-muted { color: var(--text-sub) !important; }

/* Page Header */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.page-title { font-size: 1.75rem; font-weight: 700; color: var(--text-main); }
.page-subtitle { font-size: 0.98rem; color: var(--text-sub); margin-top: 4px; }
.breadcrumbs ol { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; }
.breadcrumb-item a, .breadcrumb-item span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-sub); text-decoration: none; padding: 4px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--border); }
.breadcrumb-item a:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.breadcrumb-item.active span { color: var(--primary-contrast); background: var(--primary-soft); border-color: var(--primary); }