:root {
	--sidebar-width: 260px;
	--sidebar-bg: #1e293b;
	--sidebar-hover: #334155;
	--sidebar-active: #3b82f6;
	--topbar-height: 60px;
	--ck-custom-font: 'Inter', sans-serif;
}
body, input, select, textarea, button { font-family: 'Inter', sans-serif; }
body { background: #f1f5f9; }

/* Sidebar */
.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: var(--sidebar-width);
	height: 100vh;
	background: var(--sidebar-bg);
	color: #94a3b8;
	z-index: 1040;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease;
}
.sidebar-brand {
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.sidebar-brand h5 {
	color: #fff;
	margin: 0;
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: -0.02em;
}
.sidebar-brand-icon {
	width: 36px;
	height: 36px;
	background: var(--sidebar-active);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.1rem;
}
.sidebar-nav { flex: 1; overflow-y: auto; padding: 1rem 0; }
.sidebar-section {
	padding: 0.5rem 1.5rem 0.35rem;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #64748b;
	font-weight: 600;
}
.sidebar-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 1.5rem;
	color: #94a3b8;
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 400;
	transition: all 0.15s;
	border-left: 3px solid transparent;
}
.sidebar-link:hover {
	color: #e2e8f0;
	background: var(--sidebar-hover);
}
.sidebar-link.active {
	color: #fff;
	background: rgba(59,130,246,0.12);
	border-left-color: var(--sidebar-active);
	font-weight: 500;
}
.sidebar-link i { font-size: 1.1rem; width: 20px; text-align: center; }

/* Main content */
.main-wrapper {
	margin-left: var(--sidebar-width);
	min-height: 100vh;
}

/* Sidebar Footer */
.sidebar-footer {
	border-top: 1px solid rgba(255,255,255,0.08);
}
.sidebar-footer .text-muted {
	color: #94a3b8 !important; /* Lighter gray for better visibility */
}
.sidebar-footer .hover-white {
	color: #94a3b8 !important;
	transition: color 0.15s ease;
}
.sidebar-footer .hover-white:hover {
	color: #fff !important;
}

/* Mobile top bar */
.mobile-topbar {
	position: sticky;
	top: 0;
	z-index: 1020;
}

/* Content area */
.content-area { padding: 1.5rem; }

/* Mobile sidebar */
.sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 1035;
}

@media (max-width: 991.98px) {
	.sidebar { transform: translateX(-100%); }
	.sidebar.show { transform: translateX(0); }
	.sidebar-overlay.show { display: block; }
	.main-wrapper { margin-left: 0; }
}

/* Flash messages */
.flash-container { margin-bottom: 1rem; }

/* Hover shadow effects for list views */
.hover-shadow {
	transition: all 0.2s ease-in-out;
	cursor: pointer;
}
.hover-shadow:hover {
	box-shadow: 0 2px 5px rgba(0,0,0,0.15);
	transform: translateY(-1px);
	filter: brightness(0.95);
}

/* Hover transitions for card grids */
.transition-hover {
	transition: all 0.2s ease-in-out;
}
.transition-hover:hover {
	transform: translateY(-3px);
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.08)!important;
}

/* Timeline components */
.timeline {
	border-left: 3px solid #e9ecef;
	margin-left: 12px;
	padding-left: 24px;
	position: relative;
}
.timeline-item {
	position: relative;
}
.timeline-marker {
	width: 18px;
	height: 18px;
	background-color: #fff;
	border: 4px solid #0d6efd;
	border-radius: 50%;
	position: absolute;
	left: -33px;
	top: 18px;
	box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
	transition: all 0.2s ease-in-out;
}
.timeline-item:hover .timeline-marker {
	background-color: #0d6efd;
	transform: scale(1.15);
}
.btn-xs {
	padding: 0.2rem 0.4rem;
	font-size: 0.75rem;
	border-radius: 0.25rem;
}

/* CKEditor adjustments */
#template-editor + .ck-editor .ck-editor__editable {
	min-height: 400px;
	max-height: 650px;
	overflow-y: auto !important;
}
#header-editor + .ck-editor .ck-editor__editable,
#footer-editor + .ck-editor .ck-editor__editable {
	min-height: 150px;
	max-height: 300px;
	overflow-y: auto !important;
}
.ck-editor__editable, .ck-editor__editable * {
	font-family: var(--ck-custom-font, "DejaVu Sans", sans-serif) !important;
}
.placeholder-tag:hover {
	background-color: var(--bs-primary-bg-subtle);
	border-radius: 4px;
	transition: background-color 0.15s;
}
.sticky-top {
	transition: top 0.3s ease;
}

/* Sign-in page */
.sign-in-page {
	background: #1e293b;
	min-height: 100vh;
}
.sign-in-card {
	border-radius: 16px;
}
.sign-in-card .btn-outline-dark:hover {
	background-color: #f8f9fa;
	border-color: #dee2e6;
}