:root,
[data-theme="light"] {
	--bg-body: #f4f7f6;
	--bg-card: #ffffff;
	--bg-input: #ffffff;
	--text-primary: #333333;
	--text-muted: #6c757d;
	--border-color: #f7f7f7;
	--nav-bg: #343a40;
	--footer-bg: #343a40;
}

[data-theme="dark"] {
	--bg-body: #121212;
	--bg-card: #1e1e1e;
	--bg-input: #2d2d2d;
	--text-primary: #e8e8e8;
	--text-muted: #aaaaaa;
	--border-color: #333333;
	--nav-bg: #0d0d0d;
	--footer-bg: #0d0d0d;
	--brand-primary: #5cb85c;
	--brand-primary-dark: #1e7e34;
	--brand-primary-light: #7dd87d;
	--brand-primary-rgb: 92, 184, 92;
}

.site-header.navbar.bg-dark {
	background-color: var(--nav-bg, #343a40) !important;
	transition: background-color 0.25s ease;
}

.site-footer.bg-dark {
	background-color: var(--footer-bg, #343a40) !important;
	transition: background-color 0.25s ease;
}

[data-theme="dark"] .site-header.navbar.bg-dark,
[data-theme="dark"] .site-footer.bg-dark {
	background-color: #0d0d0d !important;
}

[data-theme="dark"] .site-footer-inner {
	background-color: rgba(0, 0, 0, 0.25);
}

html {
	scrollbar-gutter: stable;
	overflow-y: scroll;
	overflow-x: hidden;
}

body {
	background-color: var(--bg-body) !important;
	color: var(--text-primary);
	min-height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.site-header {
	margin-bottom: 10px;
	flex-shrink: 0;
}

.site-footer-inner {
	background-color: rgba(0, 0, 0, 0.2);
}

.site-footer {
	margin-top: auto;
}

.site-main,
.shell-grid,
.contact-page,
.shell-detail,
.file_manager,
.tools-page {
	padding: 24px 0 40px;
}

#snippetContent {
	min-height: 60vh;
	flex: 1 0 auto;
	width: 100%;
}

.shell-detail,
.contact-page {
	flex: 1 0 auto;
	width: 100%;
}

.tools-page {
	flex: 1 0 auto;
	width: 100%;
}

[data-theme="dark"] .card,
[data-theme="dark"] .decor-default,
[data-theme="dark"] .contact {
	background-color: var(--bg-card) !important;
	color: var(--text-primary);
}

[data-theme="dark"] .text-muted {
	color: var(--text-muted) !important;
}

[data-theme="dark"] .file_manager .file .file-name {
	border-top-color: var(--border-color);
}

[data-theme="dark"] .shell-heading,
[data-theme="dark"] .content-title,
[data-theme="dark"] .contact-description,
[data-theme="dark"] .download-link a {
	color: var(--text-primary);
}

[data-theme="dark"] .alert-success {
	background-color: #1a3d1f;
	color: #b8ddb9;
	border-color: #2d6a30;
}

[data-theme="dark"] .alert-info {
	background-color: #1a3340;
	color: #b8dce8;
	border-color: #2c5282;
}

[data-theme="dark"] .form-control {
	background-color: var(--bg-input);
	border-color: #444;
	color: var(--text-primary);
}

[data-theme="dark"] .form-control::placeholder {
	color: #888;
}

.theme-toggle-btn {
	color: #fff !important;
	font-size: 18px;
	padding: 0.4rem 0.65rem;
	border: none;
	background: none;
	cursor: pointer;
	line-height: 1;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus {
	color: #ffc107 !important;
	outline: none;
	box-shadow: none;
}

[data-theme="light"] .theme-icon-sun {
	display: none;
}

[data-theme="light"] .theme-icon-moon {
	display: inline;
}

[data-theme="dark"] .theme-icon-sun {
	display: inline;
}

[data-theme="dark"] .theme-icon-moon {
	display: none;
}

/* Header layout */
.site-header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.site-header-brand {
	flex-shrink: 0;
	margin-right: 1rem;
	font-weight: 800;
	font-size: 1.35rem;
	letter-spacing: 0.02em;
}

.site-header-brand i {
	margin-right: 8px;
}

.site-header-nav .nav-link {
	white-space: nowrap;
}

.site-header-nav .nav-link i {
	margin-right: 6px;
	width: 16px;
	text-align: center;
}

.site-header-theme {
	flex-shrink: 0;
}

@media (min-width: 992px) {
	.site-header-inner {
		flex-wrap: nowrap;
	}

	.site-header-collapse {
		flex: 1 1 auto;
		justify-content: center;
	}

	.site-header-nav {
		flex-direction: row;
		justify-content: center;
		width: 100%;
	}

	.site-header-theme {
		margin-left: auto;
	}
}

@media (max-width: 991.98px) {
	.site-header-brand {
		order: 1;
	}

	.site-header-theme {
		order: 2;
		margin-left: auto;
	}

	.site-header-toggler {
		order: 3;
		margin-left: 0.5rem;
	}

	.site-header-collapse {
		order: 4;
		width: 100%;
		flex-basis: 100%;
	}

	.site-header-nav {
		align-items: center;
		text-align: center;
		padding-top: 0.5rem;
	}
}