@import url('app.css');
html, body {
	/*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
	background-color: #121212; /* dark background */
	color: #eeeeee; /* light text */
	min-height: 100dvh;
	overflow-x: auto;
	font-family: 'Segoe UI', sans-serif;
	font-weight: 600;
}

/* Links */
a, .btn-link {
	color: #006bb7;
}
/* Hide default spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield; /* Firefox */
}

/* ================================
   Buttons
================================ */
button.form-control:disabled {
	background-color: #1f1f1f !important;
	color: #777 !important;
	border-color: #444 !important;
	cursor: not-allowed;
}

.btn-primary {
	color: #f0fdfa;
	background-color: #1a7373;
	border: 1px solid #1a7373;
	border-radius: 0.375rem;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-tap-highlight-color: transparent; /* remove blue flash on mobile */
	-webkit-user-select: none;
	user-select: none;
	background-clip: padding-box; /* prevent inner highlight */
}

	/* Hover: slightly lighter teal */
	.btn-primary:hover {
		background-color: #1fc0bb;
		border-color: #1fc0bb;
	}

	/* Focus: teal glow */
	.btn-primary:focus,
	.btn-primary:active:focus {
		box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(31,192,187,0.4);
		outline: none;
	}

	/* Active: pressed effect */
	.btn-primary:active {
		background-color: #166363 !important;
		border-color: #166363 !important;
		box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(31,192,187,0.4) !important;
		-webkit-appearance: none !important;
	}

/* Remove Firefox inner border */
button::-moz-focus-inner {
	border: 0;
}

/* ================================
   Headings & Content
================================ */
.content {
	padding-top: 1.1rem;
}

h1:focus {
	outline: none;
}

/* ================================
   Validation
================================ */
.valid.modified:not([type=checkbox]) {
	outline: 1px solid #26b050;
}

.invalid {
	outline: 1px solid #e50000;
}

.validation-message {
	color: #e50000;
}

/* ================================
   Blazor Error Boundary
================================ */
.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,...) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

	.blazor-error-boundary::after {
		content: "An error has occurred.";
	}

/* ================================
   Navbar & Sidebar
================================ */
.navbar, .navbar-dark {
	background-color: #1f1f1f !important;
}

.nav-scrollable {
	background-color: #1f1f1f !important;
}

.nav-link {
	color: #ddd !important;
}

	.nav-link.active {
		background-color: #333 !important;
		color: #20b2aa !important;
		/*color: #fff !important;*/
	}

	.nav-link:hover {
		background-color: #444 !important;
		color: #20b2aa !important;
		/*color: #ddd !important;*/
	}

/* ================================
   Form Controls (Dark Theme)
================================ */

input.form-control:disabled,
select.form-select:disabled,
textarea.form-control:disabled {
	background-color: #1f1f1f; /* slightly darker than active */
	color: #777; /* muted gray for text */
	border-color: #444; /* softer border */
	cursor: not-allowed;
	opacity: 1; /* keep full opacity for clarity */
}

	/* Disabled placeholder styling */
	input.form-control:disabled::placeholder,
	textarea.form-control:disabled::placeholder {
		color: #777 !important; /* match disabled text color */
		opacity: 1 !important; /* ensure visibility */
	}

input.form-control,
select.form-select,
textarea.form-control {
	background-color: #2c2c2c; /* original dark slate */
	color: #eee;
	border: 1px solid #555;
	border-radius: 0.375rem;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

	/* Placeholder text */
	input.form-control::placeholder,
	textarea.form-control::placeholder,
	select.form-select option[disabled][selected] {
		color: #bbbbbb;
		opacity: 1;
	}

	/* Focused input */
	input.form-control:focus,
	textarea.form-control:focus,
	select.form-select:focus {
		background-color: #2c2c2c; /* same as unfocused */
		color: #eee;
		border-color: #2dd4bf; /* teal accent */
		box-shadow: 0 0 0 0.2rem rgba(45,212,191,0.25);
		outline: none;
	}

/* ================================
   Dropdown / List Groups
================================ */

/* Disabled list group items */
.list-group-item:disabled {
	background-color: #1f1f1f;
	color: #777;
	cursor: not-allowed;
}

/* Disabled select (InputSelect) */
select.form-select:disabled {
	background-color: #1f1f1f;
	color: #777;
	border-color: #444;
	cursor: not-allowed;
}

/* Disabled dropdown toggle */
.dropdown-toggle:disabled {
	background-color: #1f1f1f;
	color: #777;
	border-color: #444;
	cursor: not-allowed;
}

/* Disabled button styled as form-control */
button.form-control:disabled {
	background-color: #1f1f1f;
	color: #777;
	border-color: #444;
	cursor: not-allowed;
}

.list-group {
	background-color: #2c2c2c;
	color: #eee;
	border: 1px solid #555;
	scrollbar-width: thin; /* Firefox */
	scrollbar-color: #475569 transparent;
}

	.list-group::-webkit-scrollbar {
		width: 6px;
	}

	.list-group::-webkit-scrollbar-thumb {
		background-color: #475569;
		border-radius: 3px;
	}

		.list-group::-webkit-scrollbar-thumb:hover {
			background-color: #64748b;
		}

	.list-group::-webkit-scrollbar-track {
		background: transparent;
	}

.list-group-item {
	background-color: #2c2c2c;
	color: #eee;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	border: none; /* remove default white borders */
	border-bottom: 1px solid #444; /* optional subtle divider */
}
	.list-group-item:last-child {
		border-bottom: none; /* no divider on last item */
	}

	.list-group-item:hover {
		background-color: rgba(45,212,191,0.12); /* teal hover overlay */
		color: #fff;
	}

	.list-group-item:active {
		background-color: rgba(45,212,191,0.25); /* teal active overlay */
	}

/* InputSelect (Blazor) */
select.form-select {
	background-color: #2c2c2c; /* dark unfocused background */
	color: #eee; /* text color */
	border: 1px solid #555; /* subtle border */
	border-radius: 0.375rem; /* rounded corners */
	padding: 0.375rem 0.75rem; /* match Bootstrap default */
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	appearance: none; /* remove native arrow for custom styling if desired */
}

	/* Focused InputSelect */
	select.form-select:focus {
		background-color: #2c2c2c; /* keep dark background */
		color: #eee;
		border-color: #2dd4bf; /* teal accent border */
		box-shadow: 0 0 0 0.2rem rgba(45,212,191,0.25);
		outline: none;
	}

	/* Placeholder / dummy option for InputSelect */
	select.form-select option[disabled][selected] {
		color: #bbbbbb;
	}

.dropdown-toggle {
	position: relative;
	padding-right: 2rem; /* make room for arrow */
}

	.dropdown-toggle::after {
		content: "";
		position: absolute;
		right: 0.75rem; /* distance from right edge */
		top: 50%; /* vertical center */
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-left: 0.35rem solid transparent;
		border-right: 0.35rem solid transparent;
		border-top: 0.35rem solid #eee; /* color of arrow */
		pointer-events: none;
	}

.dropdown-input-wrapper input {
	padding-right: 2rem; /* space for arrow */
}

.dropdown-input-wrapper::after {
	content: "";
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 0.35rem solid transparent;
	border-right: 0.35rem solid transparent;
	border-top: 0.35rem solid #eee;
	pointer-events: none;
}

button.form-control {
	-webkit-appearance: none; /* Chrome/Safari */
	-moz-appearance: none; /* Firefox */
	appearance: none; /* all browsers */
	background-color: #2c2c2c; /* match inputs */
	color: #eee;
	border: 1px solid #555;
	border-radius: 0.375rem;
	padding: 0.375rem 0.75rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

	/* Focus state to match other inputs */
	button.form-control:focus {
		background-color: #2c2c2c;
		color: #eee;
		border-color: #2dd4bf; /* teal border */
		box-shadow: 0 0 0 0.1rem #2dd4bf, 0 0 0 0.25rem rgba(45,212,191,0.25);
		outline: none;
	}