/* ==========================================================================
   baukloetze-lagerbestand.css
   Visualisiert 5 Lagerbestaende als gestapelte Bauklötze. Nutzt dieselben
   Farb-Variablen wie tangle-style.css (Dark Mode automatisch korrekt).
   ========================================================================== */

.brick-yard {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-around;
	gap: clamp(0.75rem, 3vw, 2rem);
	padding-top: 1.5rem;
	padding-bottom: 2.5rem; /* Platz fuer die Filialen-Beschriftung unterhalb der Stapel */
	overflow-x: auto;
}

.brick-stack {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	gap: 0.75rem;
	height: 380px;
	flex-shrink: 0;
}

.brick-stack-value {
	/* Ziehbare Kisten-Anzahl; Basisdarstellung kommt von .TKAdjustableNumber
	   in tangle-style.css, hier nur die Ausrichtung ueber dem Stapel. */
	text-align: center;
}

.brick-stack-name {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 0.65rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--text-muted);
	white-space: nowrap;
}

.brick-stack-units {
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 4px;
	width: 76px;
	height: 300px;
}

.brick-unit {
	position: relative;
	width: 100%;
	height: 26px;
	flex-shrink: 0;
	border-radius: 4px;
	background: var(--brick-color, var(--primary));
	box-shadow:
		inset 0 -5px 0 rgba(0, 0, 0, 0.2),
		inset 0 2px 0 rgba(255, 255, 255, 0.28),
		0 2px 3px rgba(0, 0, 0, 0.25);
}

.brick-stud {
	position: absolute;
	top: -7px;
	width: 18px;
	height: 9px;
	border-radius: 50% 50% 3px 3px / 65% 65% 3px 3px;
	background: var(--brick-color, var(--primary));
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}

.brick-stud.stud-1 {
	left: 12px;
}

.brick-stud.stud-2 {
	right: 12px;
}

/* "Durchschnitt veranschaulichen": statt einer durchgehenden Flaeche einzelne,
   als Bausteine erkennbare Bloecke (mit Abstand + abgerundeten Ecken wie ein
   echter Baustein). Kariert = liegt ueber dem Durchschnitt (zu viel).
   Schraffiert = fehlt noch bis zum Durchschnitt (zu wenig). Nur der jeweils
   grenznahe Baustein wird exakt bis zur Durchschnittslinie zugeschnitten. */

.brick-overlay-unit {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	border-radius: 4px;
	pointer-events: none;
	z-index: 6;
	box-sizing: border-box;
}

.brick-overlay-unit--surplus {
	background-color: var(--brick-color, var(--primary));
	background-image:
		linear-gradient(45deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.5) 75%),
		linear-gradient(45deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.5) 75%);
	background-size: 10px 10px;
	background-position: 0 0, 5px 5px;
	box-shadow:
		inset 0 -3px 0 rgba(0, 0, 0, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.brick-overlay-unit--deficit {
	background-color: var(--surface-alt);
	background-image: repeating-linear-gradient(45deg, var(--brick-color, var(--primary)) 0px, var(--brick-color, var(--primary)) 3px, transparent 3px, transparent 8px);
	opacity: 0.55;
	border: 2px dashed var(--brick-color, var(--primary));
}

.brick-overlay-unit--deficit .brick-stud {
	background: none;
	border: 2px dashed var(--brick-color, var(--primary));
	box-shadow: none;
}

.brick-floor {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	border-top: 3px solid var(--border);
}

.brick-avg-line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	border-top: 3px dashed var(--text);
	z-index: 7;
	transition: bottom 0.35s ease;
}

.brick-avg-tag {
	position: absolute;
	right: 0;
	top: -1.5rem;
	background: var(--text);
	color: var(--surface);
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.brick-stack-units {
		width: 56px;
	}
}