/* Light Theme (Default) */
:root, .theme-light {
	--bg-primary: #ffffff;
	--bg-secondary: #f8f9fa;
	--text-primary: #212529;
	--text-secondary: #6c757d;
	--border-color: #dee2e6;
	--sidebar-bg: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
	--navbar-brand-color: #ffffff;
	--navbar-text-color: #ffffff;
	/* ADD THESE BOOTSTRAP VARIABLES */
	--bs-body-bg: #ffffff;
	--bs-modal-bg: #ffffff;
	--card-bg: #ffffff;
	--modal-bg: #ffffff;
	--modal-header-bg: #f8f9fa;
	--input-bg: #ffffff;
	--input-border: #dee2e6;
	--input-text: #495057;
}

/* Dark Theme */
.theme-dark {
	--bg-primary: #212529;
	--bg-secondary: #343a40;
	--text-primary: #ffffff;
	--text-secondary: #adb5bd;
	--border-color: #495057;
	--sidebar-bg: linear-gradient(180deg, #1a1d29 0%, #2d1b3d 70%);
	--navbar-brand-color: #ffffff;
	--navbar-text-color: #ffffff;
	/* ADD THESE BOOTSTRAP VARIABLES */
	--bs-body-bg: #1a202c;
	--bs-modal-bg: #1a202c;
	--card-bg: #1a202c;
	--modal-bg: #1a202c;
	--modal-header-bg: #2d3748;
	--input-bg: #2d3748;
	--input-border: #4a5568;
	--input-text: #f7fafc;
}

/* Apply theme variables */
body {
	background-color: var(--bg-primary);
	color: var(--text-primary);
	transition: background-color 0.2s, color 0.2s;
}

.card {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
}

/* Navbar/Top row styling */
.top-row, .navbar {
	background: var(--sidebar-bg) !important;
	color: var(--navbar-text-color) !important;
}

.navbar-brand {
	color: var(--navbar-brand-color) !important;
}

.navbar-toggler {
	border-color: rgba(255, 255, 255, 0.3) !important;
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.sidebar {
	background: var(--sidebar-bg) !important;
}

.form-control {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

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

/* Bootstrap btn-close styling for both themes */
.btn-close {
	width: 1em;
	height: 1em;
	padding: 0.25em;
	color: var(--text-primary);
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='m.235.867 4.805 4.805-4.805 4.805.708.708 4.805-4.805 4.805 4.805.708-.708-4.805-4.805 4.805-4.805-.708-.708-4.805 4.805-4.805-4.805z'/%3e%3c/svg%3e") center/1em auto no-repeat;
	border: 0;
	border-radius: 0.375rem;
	opacity: 0.8;
	transition: opacity 0.15s ease-in-out;
}

	.btn-close:hover {
		opacity: 1;
	}

	.btn-close:focus {
		outline: 0;
		box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
		opacity: 1;
	}

	.btn-close:disabled {
		opacity: 0.25;
		pointer-events: none;
	}

/* Dark theme btn-close */
.theme-dark .btn-close {
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='m.235.867 4.805 4.805-4.805 4.805.708.708 4.805-4.805 4.805 4.805.708-.708-4.805-4.805 4.805-4.805-.708-.708-4.805 4.805-4.805-4.805z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

/* Override custom close button classes */
.tabbed-modal-close,
.themed-btn-close {
	width: 1em !important;
	height: 1em !important;
	padding: 0.25em !important;
	color: var(--text-primary) !important;
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='m.235.867 4.805 4.805-4.805 4.805.708.708 4.805-4.805 4.805 4.805.708-.708-4.805-4.805 4.805-4.805-.708-.708-4.805 4.805-4.805-4.805z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
	border: 0 !important;
	border-radius: 0.375rem !important;
	opacity: 0.8 !important;
	transition: opacity 0.15s ease-in-out !important;
	filter: none !important;
}

	.tabbed-modal-close:hover,
	.themed-btn-close:hover {
		opacity: 1 !important;
	}

	.tabbed-modal-close:focus,
	.themed-btn-close:focus {
		outline: 0 !important;
		box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
		opacity: 1 !important;
	}

/* Dark theme overrides for custom classes */
.theme-dark .tabbed-modal-close,
.theme-dark .themed-btn-close {
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='m.235.867 4.805 4.805-4.805 4.805.708.708 4.805-4.805 4.805 4.805.708-.708-4.805-4.805 4.805-4.805-.708-.708-4.805 4.805-4.805-4.805z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
}