:root {
	--accent: #ffc107;
	--bg-1: #121212;
	--bg-2: #1b1b1b;
	--text-1: #f1f3f5;
	--muted: #9aa0a6;
}

body {
	background: var(--bg-1);
	color: var(--text-1);
}

.navbar {
	background: linear-gradient(180deg, #0e0e0e, #151515);
	border-bottom: 1px solid #222;
}

#mainNav .input-group {
	width: 160px;
}

.brand-accent {
	color: var(--accent);
}

.card {
	background: var(--bg-2);
	border: 1px solid #2a2a2a;
	box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.form-label i {
	color: var(--accent);
	margin-right: .25rem;
}

.btn-warning:hover {
	filter: brightness(0.7);
	color: #000;
}

.table thead th {
	position: sticky;
	top: 0;
	background: #1f1f1f;
	z-index: 1;
}

#nameList li:nth-of-type(odd) {
	--bs-table-color-type: var(--bs-table-striped-color);
	--bs-table-bg-type: var(--bs-table-striped-bg);
}

#nameList li:nth-of-type(even) {
	background-color: #141414 !important;
}

.table-dark.table-striped tbody tr:nth-of-type(odd) {
	background-color: #181818;
}

.table-dark.table-striped tbody tr:nth-of-type(even) {
	background-color: #141414;
}

#peopleTable thead tr:not(:first-child) th,
#peopleBody td:not(:first-child),
#peopleTable tfoot td:not(:first-child),
#sum-table thead th:not(:first-child),
#sum-table td:not(:first-child) {
	text-align: right;
}

#peopleBody td.sum-costs {
	--bs-table-bg-type: auto;
	background-color: #dc3545 !important;
}

.input-number {
	max-width:8rem;
}

.input-number.sm {
	max-width:6rem;
}

.small-muted {
	color:var(--muted);
	font-size:.85rem;
}

.rounded-xl {
	border-radius:1rem;
}

.card-body hr {
	margin: 0;
}

#btnCopyQ1ToAll {
	display: inline-block;
	white-space: nowrap;
}

.bg-dark-subtle {
	background-color: #1f1f1f !important;
}

.toast-container {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	z-index: 1080;
	pointer-events: none;
}

.toast.ecr-toast {
	background: #111;
	border: 1px solid #333;
	color: var(--text-1);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	pointer-events: auto;
	animation: slideUpFade 250ms ease-out;
}

.toast.ecr-toast .icon {
	color: var(--accent);
}

@keyframes slideUpFade {
	from {
		transform: translateY(12px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

#peopleTable span.cons-val::after,
#tAbgQ1::after,
#tAbgQ2::after,
#tAbgQ3::after,
#tAbgQ4::after {
	content: " kWh";
	color: #ffffff;
	font-size: 0.85em;
}

#peopleTable span.cost::after,
#tAbgCostQ1::after,
#tAbgCostQ2::after,
#tAbgCostQ3::after,
#tAbgCostQ4::after {
	content: " €";
	color: #ffffff;
	font-size: 1em;
}

#sumAbgQ1::after,
#sumAbgQ2::after,
#sumAbgQ3::after,
#sumAbgQ4::after,
#sumHzQ1::after,
#sumHzQ2::after,
#sumHzQ3::after,
#sumHzQ4::after {
	content: " kWh";
	color: #ffffff;
	font-size: 0.85em;
}

#sumAbgCostQ1::after,
#sumAbgCostQ2::after,
#sumAbgCostQ3::after,
#sumAbgCostQ4::after,
#sumHzCostQ1::after,
#sumHzCostQ2::after,
#sumHzCostQ3::after,
#sumHzCostQ4::after {
	content: " €";
	color: #ffffff;
	font-size: 1em;
}

/* Optional: kleine Optik fürs Names-Modal (Unterzähler-Dropdown) */
#namesModal .list-group-item {
	border-color: #222;
}
#namesModal .form-select-sm {
	background-color: #111;
	border-color: #333;
	color: #fff;
}

@media (min-width: 576px) {
	.modal-sm {
		--bs-modal-width: 400px;
	}
}

@media (min-width: 768px) {
	#btnCopyQ1ToAll {
		vertical-align: top;
	}

	.text-body-secondary {
		display: inline-block;
		max-width: 490px;
	}
}

@media (max-width: 768px) {
	#btnCopyQ1ToAll {
		width: 100%;
	}

	.bg-dark-subtle small {
		display: block;
	}
}

@media (min-width: 992px) {
	.text-body-secondary {
		max-width: none;
	}

	.card-settings .input-number {
		max-width: 12rem;
	}
}

@media (max-width: 991.98px) {
	.navbar .btn,
	.navbar .btn + .btn,
	.navbar .btn + label.btn,
	.navbar label.btn {
		width: 100%;
	}

	#metersBody .input-number {
		min-width: 5rem;
	}
}