/* Dark Theme Variables */
:root {
	--bg-primary: #212121;
	--bg-primary-rgb: 33, 33, 33;
	--bg-secondary: #171717;
	--bg-secondary-rgb: 23, 23, 23;
	--bg-tertiary: #2a2a2a;
	--bg-tertiary-rgb: 42, 42, 42;
	--border-color: #444654;
	--border-color-rgb: 68, 70, 84;
	--text-primary: #dcdce1;
	--text-primary-rgb: 220, 220, 225;
	--text-secondary: #8e8ea0;
	--text-secondary-rgb: 142, 142, 160;
	--accent-color: #31867e;
	--accent-color-secondary: #089b94;
	--accent-purple: #667eea;
	--accent-purple-dark: #764ba2;
	--card-hover-shadow: rgba(0, 0, 0, 0.3);
	--toggle-shadow: rgba(255, 255, 255, 0.15);
	--logo-theme-primary: #31867e;
	--logo-theme-secondary: #089b94;
	--sidebar-bg: rgba(255, 255, 255, 0.1);
	--sidebar-width: 280px;
	--sidebar-width-collapsed: 80px;
	--logo-theme-primary: #31867e;
	--logo-theme-secondary: #089b94;
	--btn-bg: #31867e;
	--btn-active-bg: #089b94;
	--btn-active-shadown: #31867e;
	--btn-active-shadown-rgb: 49, 134, 126;
	--btn-color: #fff;
	--btn-disabled-bg: #565869;
	--btn-disabled-border: #565869;
	--btn-disabled-color: #aaa;
	--btn-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a4aab0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	--btn-adj-bg: var(--bs-btn-color);
	--btn-adj-border: var(--bs-btn-border);
	--btn-adj-color: var(--bs-btn-color);
	--btn-adj-active-bg: var(--bs-btn-active-color);
	--btn-adj-active-border: var(--bs-btn-active-border);
	--btn-adj-active-color: var(--bs-btn-active-color);
	/* BS light dark */
	--bs-primary: #31867e;
	--bs-body-color: var(--text-primary);
	--bs-body-color-rgb: var(--text-primary-rgb);
	--bs-body-bg: var(--bg-primary);
	--bs-body-bg-rgb: var(--bg-primary-rgb);
	--bs-emphasis-color: #fff;
	--bs-emphasis-color-rgb: 255, 255, 255;
	--bs-secondary-color: rgba(173, 181, 189, 0.75);
	--bs-secondary-color-rgb: 173, 181, 189;
	--bs-secondary-bg: var(--bg-secondary);
	--bs-secondary-bg-rgb: var(--bg-secondary-rgb);
	--bs-tertiary-color: rgba(173, 181, 189, 0.5);
	--bs-tertiary-color-rgb: 173, 181, 189;
	--bs-tertiary-bg: var(--bg-tertiary);
	--bs-tertiary-bg-rgb: var(--bg-tertiary-rgb);
	--bs-primary-text-emphasis: #6ea8fe;
	--bs-secondary-text-emphasis: #a7acb1;
	--bs-success-text-emphasis: #75b798;
	--bs-info-text-emphasis: #6edff6;
	--bs-warning-text-emphasis: #ffda6a;
	--bs-danger-text-emphasis: #ea868f;
	--bs-light-text-emphasis: #f8f9fa;
	--bs-dark-text-emphasis: #dee2e6;
	--bs-primary-bg-subtle: #031633;
	--bs-secondary-bg-subtle: #161719;
	--bs-success-bg-subtle: #051b11;
	--bs-info-bg-subtle: #032830;
	--bs-warning-bg-subtle: #332701;
	--bs-danger-bg-subtle: #2c0b0e;
	--bs-light-bg-subtle: #343a40;
	--bs-dark-bg-subtle: #1a1d20;
	--bs-primary-border-subtle: #084298;
	--bs-secondary-border-subtle: #41464b;
	--bs-success-border-subtle: #0f5132;
	--bs-info-border-subtle: #087990;
	--bs-warning-border-subtle: #997404;
	--bs-danger-border-subtle: #842029;
	--bs-light-border-subtle: #495057;
	--bs-dark-border-subtle: #343a40;
	--bs-heading-color: inherit;
	--bs-link-color: #6ea8fe;
	--bs-link-hover-color: #8bb9fe;
	--bs-link-color-rgb: 110, 168, 254;
	--bs-link-hover-color-rgb: 139, 185, 254;
	--bs-code-color: #e685b5;
	--bs-border-color: #495057;
	--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
	--bs-form-valid-color: #75b798;
	--bs-form-valid-border-color: #75b798;
	--bs-form-invalid-color: #ea868f;
	--bs-form-invalid-border-color: #ea868f;
}

/* Light Theme Variables */
:root[data-theme="light"] {
	--bg-primary: #ffffff;
	--bg-secondary: #f8f9fa;
	--bg-tertiary: #f0f2f5;
	--border-color: #c1c5c9;
	--border-color-rgb: 193, 197, 201;
	--text-primary: #1a1a1a;
	--text-secondary: #6c757d;
	--accent-color: #6cc3c0;
	--accent-purple: #667eea;
	--accent-purple-dark: #764ba2;
	--card-hover-shadow: rgba(0, 0, 0, 0.1);
	--toggle-shadow: rgba(0, 0, 0, 0.15);
	--logo-theme-primary: #07514a;
	--logo-theme-secondary: #31867e;
	--sidebar-bg: rgba(0, 0, 0, 0.1);
	--sidebar-width: 280px;
	--sidebar-width-collapsed: 80px;
	--btn-bg: #07514a;
	--btn-active-bg: #31867e;
	--btn-active-shadown: #07514a;
	--btn-active-shadown-rgb: 7, 81, 74;
	--btn-color: #fff;
	--btn-disabled-bg: #565869;
	--btn-disabled-border: #565869;
	--btn-disabled-color: #aaa;
	--btn-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	--btn-adj-bg: var(--bs-btn-active-color);
	--btn-adj-border: var(--bs-btn-active-border);
	--btn-adj-color: var(--bs-btn-active-color);
	--btn-adj-active-bg: var(--bs-btn-color);
	--btn-adj-active-border: var(--bs-btn-border);
	--btn-adj-active-color: var(--bs-btn-color);
	/* BS theme light */
	--bs-primary: #07514a;
	--bs-secondary: #6c757d;
	--bs-success: #198754;
	--bs-info: #0dcaf0;
	--bs-warning: #ffc107;
	--bs-danger: #dc3545;
	--bs-light: #f8f9fa;
	--bs-dark: #212529;
	--bs-primary-rgb: 13, 110, 253;
	--bs-secondary-rgb: 108, 117, 125;
	--bs-success-rgb: 25, 135, 84;
	--bs-info-rgb: 13, 202, 240;
	--bs-warning-rgb: 255, 193, 7;
	--bs-danger-rgb: 220, 53, 69;
	--bs-light-rgb: 248, 249, 250;
	--bs-dark-rgb: 33, 37, 41;
	--bs-primary-text-emphasis: #052c65;
	--bs-secondary-text-emphasis: #2b2f32;
	--bs-success-text-emphasis: #0a3622;
	--bs-info-text-emphasis: #055160;
	--bs-warning-text-emphasis: #664d03;
	--bs-danger-text-emphasis: #58151c;
	--bs-light-text-emphasis: #495057;
	--bs-dark-text-emphasis: #495057;
	--bs-primary-bg-subtle: #cfe2ff;
	--bs-secondary-bg-subtle: #e2e3e5;
	--bs-success-bg-subtle: #d1e7dd;
	--bs-info-bg-subtle: #cff4fc;
	--bs-warning-bg-subtle: #fff3cd;
	--bs-danger-bg-subtle: #f8d7da;
	--bs-light-bg-subtle: #fcfcfd;
	--bs-dark-bg-subtle: #ced4da;
	--bs-primary-border-subtle: #9ec5fe;
	--bs-secondary-border-subtle: #c4c8cb;
	--bs-success-border-subtle: #a3cfbb;
	--bs-info-border-subtle: #9eeaf9;
	--bs-warning-border-subtle: #ffe69c;
	--bs-danger-border-subtle: #f1aeb5;
	--bs-light-border-subtle: #e9ecef;
	--bs-dark-border-subtle: #adb5bd;
	--bs-body-color: #212529;
	--bs-body-color-rgb: 33, 37, 41;
	--bs-body-bg: #fff;
	--bs-body-bg-rgb: 255, 255, 255;
	--bs-emphasis-color: #000;
	--bs-emphasis-color-rgb: 0, 0, 0;
	--bs-secondary-color: rgba(33, 37, 41, 0.75);
	--bs-secondary-color-rgb: 33, 37, 41;
	--bs-secondary-bg: #e9ecef;
	--bs-secondary-bg-rgb: 233, 236, 239;
	--bs-tertiary-color: rgba(33, 37, 41, 0.5);
	--bs-tertiary-color-rgb: 33, 37, 41;
	--bs-tertiary-bg: #f8f9fa;
	--bs-tertiary-bg-rgb: 248, 249, 250;
	--bs-heading-color: inherit;
	--bs-link-color: #0d6efd;
	--bs-link-color-rgb: 13, 110, 253;
	--bs-link-decoration: underline;
	--bs-link-hover-color: #0a58ca;
	--bs-link-hover-color-rgb: 10, 88, 202;
	--bs-code-color: #d63384;
	--bs-highlight-bg: #fff3cd;
	--bs-border-width: 1px;
	--bs-border-style: solid;
	--bs-border-color: #dee2e6;
	--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
	--bs-border-radius: 0.375rem;
	--bs-border-radius-sm: 0.25rem;
	--bs-border-radius-lg: 0.5rem;
	--bs-border-radius-xl: 1rem;
	--bs-border-radius-xxl: 2rem;
	--bs-border-radius-2xl: var(--bs-border-radius-xxl);
	--bs-border-radius-pill: 50rem;
	--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
	--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
	--bs-focus-ring-width: 0.25rem;
	--bs-focus-ring-opacity: 0.25;
	--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
	--bs-form-valid-color: #198754;
	--bs-form-valid-border-color: #198754;
	--bs-form-invalid-color: #dc3545;
	--bs-form-invalid-border-color: #dc3545;
}

/* Auto Theme Detection */
@media (prefers-color-scheme: light) {
	:root:not([data-theme]) {
		--bg-primary: #ffffff;
		--bg-secondary: #f8f9fa;
		--bg-tertiary: #f0f2f5;
		--border-color: #c1c5c9;
		--border-color-rgb: 193, 197, 201;
		--text-primary: #1a1a1a;
		--text-secondary: #6c757d;
		--card-hover-shadow: rgba(0, 0, 0, 0.1);
		--toggle-shadow: rgba(0, 0, 0, 0.15);
		--logo-theme-primary: #07514a;
		--logo-theme-secondary: #31867e;
		--sidebar-bg: rgba(0, 0, 0, 0.1);
		--sidebar-width: 280px;
		--sidebar-width-collapsed: 80px;
		--btn-bg: #07514a;
		--btn-active-bg: #31867e;
		--btn-active-shadown: #07514a;
		--btn-active-shadown-rgb: 7, 81, 74;
		--btn-color: #fff;
		--btn-adj-bg: var(--bs-btn-active-color);
		--btn-adj-border: var(--bs-btn-active-border);
		--btn-adj-color: var(--bs-btn-active-color);
		--btn-adj-active-bg: var(--bs-btn-color);
		--btn-adj-active-border: var(--bs-btn-border);
		--btn-adj-active-color: var(--bs-btn-color);
	}
}

body {
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
		"Cantarell", sans-serif;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	height: 100vh;
	overflow: hidden;
}

/* Custom Bootstrap overrides */
.bg-dark-custom {
	background-color: var(--bg-secondary) !important;
}

.bg-dark-tertiary {
	background-color: var(--bg-tertiary) !important;
}

.border-dark-custom {
	border-color: var(--border-color) !important;
}

.text-light-custom {
	color: var(--text-primary) !important;
}

.text-muted-custom {
	color: var(--text-secondary) !important;
}

/* Common modules stytles */
.module-title {
	font-size: 2rem;
	font-weight: 300;
	color: var(--text-primary);
}

.module-nav-title {
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--text-primary);
	margin-bottom: 0;
}

/* Input Styles */
.form-control {
	background-color: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	resize: vertical;
}

.form-control:focus {
	border-color: var(--accent-color);
	box-shadow: 0 0 0 0.2rem rgba(25, 195, 125, 0.25);
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
}

.form-control::placeholder {
	color: var(--text-secondary);
}

.form-control:autofill {
	background-clip: text !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: var(--text-primary) !important;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: var(--text-primary) !important;
}

/* Select */
.form-select {
	background-image: var(--btn-form-select-bg-img);
	background-color: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	resize: vertical;
}

.form-select:focus {
	border-color: var(--accent-color);
	box-shadow: 0 0 0 0.2rem rgba(25, 195, 125, 0.25);
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
}

.form-select:disabled {
	background-image: var(--btn-form-select-bg-img);
	background-color: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
	resize: vertical;
}

/* Checkbox */
.form-check-input:checked {
	background-color: var(--btn-bg);
	border-color: var(--btn-bg);
}

.form-check-input:focus {
	border-color: var(--btn-active-shadown);
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(var(--btn-active-shadown-rgb), 0.25);
}

/* Range */
input[type="range"]::-moz-range-thumb {
	background-color: var(--btn-bg);
}

input[type="range"]::-webkit-slider-thumb {
	background-color: var(--btn-bg);
}

input[type="range"]::-moz-range-track {
	background: rgba(var(--text-primary-rgb), 0.2);
}

input[type="range"]::-webkit-slider-runnable-track {
	background: rgba(var(--text-primary-rgb), 0.2);
}

/* textarea */
textarea.resize-none {
	resize: none;
}

/* anchor */
a {
	text-decoration: none;
	color: var(--btn-bg);
}

a:hover {
	text-decoration: none;
	color: var(--btn-active-bg);
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
	width: 6px;
	height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
	background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
	background: var(--border-color);
	border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background: #565869;
}

/* Custom nav links */
.nav-link.active {
	color: var(--text-primary) !important;
	border-bottom: 2px solid var(--accent-color) !important;
	background-color: transparent !important;
}

.nav-link:hover {
	color: var(--text-primary) !important;
}

/* Transformers */
.rotate-90 {
	transform: rotate(90deg);
}
.rotate-180 {
	transform: rotate(180deg);
}
.rotate-270 {
	transform: rotate(270deg);
}

/* Adjust Bootstrap theme */
.btn-primary {
	--bs-btn-color: var(--btn-color);
	--bs-btn-bg: var(--btn-bg);
	--bs-btn-border-color: var(--btn-bg);
	--bs-btn-hover-color: var(--btn-color);
	--bs-btn-hover-bg: var(--btn-active-bg);
	--bs-btn-hover-border-color: var(--btn-active-bg);
	--bs-btn-focus-shadow-rgb: var(--btn-active-shadown-rgb);
	--bs-btn-active-color: var(--btn-color);
	--bs-btn-active-bg: var(--btn-active-bg);
	--bs-btn-active-border-color: var(--btn-active-bg);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: var(--btn-disabled-colorc);
	--bs-btn-disabled-bg: var(--btn-disabled-bg);
	--bs-btn-disabled-border-color: var(--btn-disabled-border);
}

.btn-outline-primary {
	--bs-btn-color: var(--border-color);
	--bs-btn-border-color: var(--border-color);
	--bs-btn-hover-color: var(--btn-color);
	--bs-btn-hover-bg: var(--border-color);
	--bs-btn-hover-border-color: var(--border-color);
	--bs-btn-focus-shadow-rgb: var(--border-color-rgb);
	--bs-btn-active-color: var(--btn-color);
	--bs-btn-active-bg: var(--border-color);
	--bs-btn-active-border-color: var(--border-color);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: var(--border-color);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--border-color);
	--bs-gradient: none;
}

.btn-outline-secondary {
	--bs-btn-color: var(--border-color);
	--bs-btn-border-color: var(--border-color);
	--bs-btn-hover-color: var(--btn-color);
	--bs-btn-hover-bg: var(--border-color);
	--bs-btn-hover-border-color: var(--border-color);
	--bs-btn-focus-shadow-rgb: var(--border-color-rgb);
	--bs-btn-active-color: var(--btn-color);
	--bs-btn-active-bg: var(--border-color);
	--bs-btn-active-border-color: var(--border-color);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: var(--border-color);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--border-color);
	--bs-gradient: none;
}

.btn-outline-light {
	background-color: var(--btn-adj-bg);
	border-color: var(--btn-adj-border);
	color: var(--btn-adj-color);
}

.btn-outline-light:disabled {
	opacity: 0.45;
	background-color: var(--btn-adj-bg);
	border-color: var(--btn-adj-border);
	color: var(--btn-adj-color);
}

.btn-outline-light.disabled {
	opacity: 0.45;
	background-color: var(--btn-adj-bg);
	border-color: var(--btn-adj-border);
	color: var(--btn-adj-color);
}