/* =============================================================================
   fancy-accordeon.css
   Better-Bites "Mensaauslastung": mobiles Akkordion + wiederverwendbare
   LED-Leiste. Gehört zusammen mit fancy-accordeon.js.
   ============================================================================= */

/* Better-Bites Auslastung: Akkordion nur in der mobilen Ansicht – STRUKTUR.
   Das projektspezifische Aussehen (Rahmen, Farbe, Font, Abstände) ist
   Custom-CSS und liegt beim einbindenden Projekt (hier: css/project.css). */
.mensa-auslastung__toggle,
.mensa-auslastung__preview {
	display: none; /* Desktop: kein Toggle, keine LED-Vorschau (Smileys immer sichtbar) */
}

/* Location ohne Better-Bites-Daten: Container bleibt (fuer AJAX-Ortswechsel)
   im DOM, wird aber komplett ausgeblendet. */
.mensa-auslastung.mensa-auslastung--empty {
	display: none;
}

@media (max-width: 480px) {
	.mensa-auslastung__toggle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin: 1em 0;
		padding: 0 0;
		background: transparent;
		border: none;
		border-radius: 8px;
		font-family: inherit;
		font-size: 1.25rem;
		color: inherit;
		cursor: pointer;
	}
	.mensa-auslastung__icon {
		line-height: 1;
	}
	.mensa-auslastung__content {
		display: none;
	}
	.mensa-auslastung.is-open .mensa-auslastung__content {
		display: block;
	}
	/* LED-Vorschau: nur im eingeklappten Zustand sichtbar */
	.mensa-auslastung__preview {
		display: block;
	}
	.mensa-auslastung.is-open .mensa-auslastung__preview {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Better-Bites LED-Leiste – wiederverwendbare Komponente
   Erzeugt von fancy-accordeon.js aus dem Standard-Widget-Markup.
   [Startzeit] ▮▮▮▮▮ [Endzeit] – eine LED je Slot, Farbe aus der Level-Klasse.
   ------------------------------------------------------------------------- */
.bb-ledbar {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}
.bb-ledbar__time {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 600;
	color: #0b1730;
	white-space: nowrap;
}
.bb-ledbar__leds {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 3px;
	min-width: 0;
}
.bb-ledbar__led {
	flex: 1 1 0;
	height: 12px;
	border-radius: 3px;
	background: #c8cdd8; /* neutral, falls ein Slot keine Level-Klasse hat */
}
/* Farbe nach Level (stabile Quelle: die Level-Klasse am Slot) */
.bb-ledbar__led.level-low    { background: #2f8a3e; }
.bb-ledbar__led.level-medium { background: #2563d9; }
.bb-ledbar__led.level-high   { background: #e89a13; }
.bb-ledbar__led.level-peak   { background: #c8362e; }

/* -------------------------------------------------------------------------
   Icon-Varianten (per data-bb-preview):
   'icons'       -> Smiley in Level-Farbe (Stroke), transparent
   'icons-solid' -> gleiche Geometrie, aber Smiley weiß auf Level-Farbe (Kreis)
   Die Geometrie ist für beide identisch; nur die Farbgebung unterscheidet sich.
   ------------------------------------------------------------------------- */
.bb-ledbar__icon {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bb-ledbar__icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* --- Gemeinsame Geometrie beider Icon-Varianten --- */
.bb-ledbar--icons .bb-ledbar__icon,
.bb-ledbar--solid .bb-ledbar__icon {
	aspect-ratio: 1;
}
.bb-ledbar--icons .bb-ledbar__icon svg,
.bb-ledbar--solid .bb-ledbar__icon svg {
	width: 100%;
	height: auto;           /* Layout-Box quadratisch -> nicht eirig */
	transform: scale(1.17); /* Gesicht vergrößert, aus der Mitte */
}
/* Linienstärke: inline stroke-width="4" am <svg> wird vererbt; direkt auf die
   Formen setzen, um es zuverlässig zu überschreiben. */
.bb-ledbar--icons .bb-ledbar__icon svg *,
.bb-ledbar--solid .bb-ledbar__icon svg * {
	stroke-width: 6;
}
/* Augen (gefüllte Kreise) kräftiger: einfach den Radius erhöhen. */
.bb-ledbar--icons .bb-ledbar__icon svg circle,
.bb-ledbar--solid .bb-ledbar__icon svg circle {
	r: 4;
}

/* --- Icon-Variante: heller Farb-Kreis + Smiley in Level-Farbe (wie Desktop) --- */
.bb-ledbar--icons .bb-ledbar__icon {
	border-radius: 50%;
	overflow: hidden;
}
.bb-ledbar--icons .bb-ledbar__leds { gap: 6px; }
.bb-ledbar--icons .bb-ledbar__icon.level-low    { color: #2f8a3e; background: #e6f3e7; }
.bb-ledbar--icons .bb-ledbar__icon.level-medium { color: #2563d9; background: #e5edfb; }
.bb-ledbar--icons .bb-ledbar__icon.level-high   { color: #e89a13; background: #fdf1d8; }
.bb-ledbar--icons .bb-ledbar__icon.level-peak   { color: #c8362e; background: #fbe4e2; }

/* --- Solid-Variante: runder Button, Smiley weiß auf Level-Farbe --- */
.bb-ledbar--solid .bb-ledbar__icon {
	color: #fff;      /* stroke via currentColor -> weiß */
	border-radius: 50%;
	overflow: hidden; /* vergrößertes Gesicht am runden Rand clippen */
	box-shadow: 0 0 0 1px rgba(0,0,0,0.2); /* Kontur, damit helle Kreise sichtbar sind */
}
.bb-ledbar--solid .bb-ledbar__icon.level-low    { background: #2f8a3e; }
.bb-ledbar--solid .bb-ledbar__icon.level-medium { background: #2563d9; }
.bb-ledbar--solid .bb-ledbar__icon.level-high   { background: #e89a13; }
.bb-ledbar--solid .bb-ledbar__icon.level-peak   { background: #c8362e; }

/* -------------------------------------------------------------------------
   Vollstunden-Variante (data-bb-preview="led-full"):
   erste Zeile nur die LEDs, darunter eine Stunden-Skala. Die Skala hat je
   Slot eine Zelle mit derselben Flex-Aufteilung und demselben gap wie
   .bb-ledbar__leds – jede Stundenbeschriftung sitzt dadurch exakt mittig
   unter ihrer LED.
   ------------------------------------------------------------------------- */
.bb-ledbar--full {
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
}
.bb-ledbar__scale {
	display: flex;
	gap: 3px; /* muss dem gap von .bb-ledbar__leds entsprechen */
	height: 15px;
}
.bb-ledbar__scale-slot {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
}
.bb-ledbar__scale-label {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-size: 11px;
	font-weight: 600;
	color: #0b1730;
	white-space: nowrap;
}