/*
 * calendar.css — RoomBooking calendar (Matrix + Timeline)
 *
 * Scoped to .psom-rb-* / [data-psom-rb-*] only so it never leaks into
 * the rest of the page. Plain CSS, no preprocessor — matches the rest
 * of psom's frontend stack. Light-themed to fit the Divi host.
 *
 * Palette
 * -------
 * `#8099a9` is the host theme's chrome colour (footer + header menu).
 * We derive a small ramp from it so the calendar reads as "part of
 * the same site" rather than a generic third-party widget:
 *   slate-50  #eef3f6   tinted page-background
 *   slate-100 #dde6ec   cell tint, room labels
 *   slate-300 #a8bcc8   borders, dividers
 *   slate-500 #8099a9   ← host chrome — primary accent
 *   slate-700 #5f7a8a   active controls, headings
 *   slate-900 #3a4d59   primary text on tints
 *
 * Layout uses CSS Grid rather than <table> for the matrix view: the
 * host theme's table CSS reliably breaks our grid otherwise.
 */

[data-psom-rb-calendar] {
	font-family: inherit;
	color: #1e293b;
	margin: 1rem 0;
	box-sizing: border-box;
}

[data-psom-rb-calendar] *,
[data-psom-rb-calendar] *::before,
[data-psom-rb-calendar] *::after {
	box-sizing: border-box;
}

/* ---------- Toolbar ---------- */

.psom-rb-toolbar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
	padding: 0.5rem 0.75rem;
	background: #eef3f6;
	border: 1px solid #a8bcc8;
	border-radius: 0.5rem;
}

.psom-rb-toolbar .psom-rb-nav,
.psom-rb-toolbar .psom-rb-today,
.psom-rb-toolbar .psom-rb-view-switch button {
	border: 1px solid #a8bcc8;
	background: #fff;
	padding: 0.4rem 0.8rem;
	border-radius: 0.375rem;
	cursor: pointer;
	line-height: 1.2;
	font-size: 0.875rem;
	color: #3a4d59;
	font-family: inherit;
	transition: background 120ms, border-color 120ms, color 120ms;
}

.psom-rb-toolbar .psom-rb-nav:hover,
.psom-rb-toolbar .psom-rb-today:hover,
.psom-rb-toolbar .psom-rb-view-switch button:hover {
	background: #dde6ec;
	border-color: #8099a9;
	color: #1a2832;
}

.psom-rb-toolbar .psom-rb-date {
	flex: 1 1 auto;
	min-width: 12rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.psom-rb-toolbar .psom-rb-date__label {
	font-weight: 600;
	color: #1a2832;
	cursor: pointer;
	padding: 0.35rem 0.75rem;
	border-radius: 0.375rem;
	/* Button-Look mit sichtbarem Border + heller Default-Background,
	 * damit der Datums-Klick auf Touch-Geräten / ohne Hover als
	 * clickable erkennbar ist. Hover zieht den Kontrast nach. */
	background: #fff;
	border: 1px solid #8099a9;
	transition: background 120ms, border-color 120ms, box-shadow 120ms;
	/* Icon + Text auf eine Zeile, leichter Abstand. */
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	/* Anker für `__input`, das absolute innerhalb von uns liegt.
	 * Picker-Position ankert Safari am Input-Element — Input
	 * füllt genau das Label, also erscheint der Picker exakt
	 * unter dem sichtbaren Datum. */
	position: relative;
}

.psom-rb-toolbar .psom-rb-date__icon {
	font-size: 0.95em;
	color: #5f7a8a;
	flex: 0 0 auto;
}

.psom-rb-toolbar .psom-rb-date__label:hover {
	background: #f1f5f9;
	border-color: #5f7a8a;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.05 );
}

.psom-rb-toolbar .psom-rb-date__input {
	/* Liegt absolute über dem ganzen `.psom-rb-date`-Container:
	 * unsichtbar (opacity 0), aber click-empfangend. Der User sieht
	 * das Label, klickt aber tatsächlich auf das native date-input
	 * → Browser öffnet seinen nativen Picker selbst → schliesst sich
	 * auch selbst (das ging mit `showPicker()` in Safari schief).
	 * `cursor: pointer` damit's beim Hovern wie ein Button aussieht. */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	/* `appearance: none` damit Safari nicht versucht, seine native
	 * Spinner-Buttons über dem unsichtbaren Input zu rendern. */
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	padding: 0;
	background: transparent;
}


.psom-rb-toolbar .psom-rb-view-switch {
	display: inline-flex;
	gap: 2px;
	background: #a8bcc8;
	padding: 2px;
	border-radius: 0.5rem;
}

.psom-rb-toolbar .psom-rb-view-switch button {
	border: 1px solid transparent;
	background: transparent;
	border-radius: 0.375rem;
	padding: 0.35rem 0.85rem;
	color: #3a4d59;
}

.psom-rb-toolbar .psom-rb-view-switch button:hover {
	background: rgba( 255, 255, 255, 0.55 );
	border-color: transparent;
}

.psom-rb-toolbar .psom-rb-view-switch button[aria-selected="true"] {
	background: #5f7a8a;
	color: #fff;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.18 );
}

.psom-rb-toolbar .psom-rb-admin-block {
	border: 1px solid #ef4444;
	background: #fef2f2;
	color: #991b1b;
	padding: 0.4rem 0.85rem;
	border-radius: 0.375rem;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	font-family: inherit;
	transition: background 120ms, border-color 120ms;
}

.psom-rb-toolbar .psom-rb-admin-block:hover {
	background: #fecaca;
	border-color: #dc2626;
}

/* Filter button — neutral / sekundär (kein gefährlicher Look wie der
   Sperrung-Button). Aktiver Filter zeigt ein kleines Badge mit
   Anzahl, klickbar separat zum Reset. */
.psom-rb-toolbar .psom-rb-filter-btn {
	border: 1px solid #cbd5e1;
	background: #f8fafc;
	color: #334155;
	padding: 0.4rem 0.55rem;
	border-radius: 0.375rem;
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	line-height: 1;
	transition: background 120ms, border-color 120ms, color 120ms;
}

.psom-rb-toolbar .psom-rb-filter-btn__icon {
	display: block;
}

.psom-rb-toolbar .psom-rb-filter-btn:hover {
	background: #e2e8f0;
	border-color: #94a3b8;
}

.psom-rb-toolbar .psom-rb-filter-btn--active {
	background: #e0ecf3;
	border-color: #8099a9;
	color: #1f3849;
}

.psom-rb-toolbar .psom-rb-filter-btn__badge {
	background: #8099a9;
	color: #fff;
	font-size: 0.7rem;
	min-width: 1.1rem;
	padding: 0 0.3rem;
	border-radius: 0.6rem;
	line-height: 1.1rem;
	text-align: center;
	cursor: pointer;
}

.psom-rb-toolbar .psom-rb-filter-btn__badge:hover {
	background: #dc2626;
}

.psom-rb-filter-form .psom-rb-filter-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.65rem;
	font-size: 0.9rem;
}

.psom-rb-filter-form .psom-rb-filter-row select,
.psom-rb-filter-form .psom-rb-filter-row input[type="text"] {
	flex: 1;
	padding: 0.3rem 0.5rem;
	border: 1px solid #cbd5e1;
	border-radius: 0.25rem;
	font-family: inherit;
	font-size: 0.9rem;
}

/* Filter-Dimm — analog `--past` aber stärker (0.18 statt 0.45),
   damit der "Im Fokus"-Kontrast deutlich ist. Past + Filter
   kombiniert addiert sich nicht (multiplicativ über opacity), aber
   das Past bleibt durch eigene `cursor: not-allowed` erkennbar. */
.psom-rb-cell--filtered-out,
.psom-rb-cell--self-conflict {
	opacity: 0.18;
	cursor: not-allowed;
	filter: grayscale( 0.6 );
}

.psom-rb-cell--filtered-out:hover .psom-rb-cell__label,
.psom-rb-cell--filtered-out:hover .psom-rb-cell__cta,
.psom-rb-cell--self-conflict:hover .psom-rb-cell__label,
.psom-rb-cell--self-conflict:hover .psom-rb-cell__cta {
	/* Hover-Swap (label → cta) auf gefilterten/blockierten Zellen
	   unterdrücken, sonst täuscht die UI Klickbarkeit vor. */
	display: revert;
}

.psom-rb-cell--filtered-out .psom-rb-cell__cta,
.psom-rb-cell--self-conflict .psom-rb-cell__cta {
	display: none;
}

.psom-rb-block-form__row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 0.75rem;
}

.psom-rb-block-form__row label {
	font-size: 0.8rem;
	color: #475569;
	font-weight: 500;
}

.psom-rb-block-form__row input,
.psom-rb-block-form__row select {
	padding: 0.4rem 0.55rem;
	border: 1px solid #cbd5e1;
	border-radius: 0.375rem;
	font-size: 0.9rem;
	font-family: inherit;
	background: #fff;
}

.psom-rb-block-form__row input:focus,
.psom-rb-block-form__row select:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 2px rgba( 37, 99, 235, 0.15 );
}

.psom-rb-block-detail {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem 0.85rem;
	margin: 0 0 1rem;
}

.psom-rb-block-detail dt {
	font-weight: 600;
	color: #475569;
	font-size: 0.85rem;
}

.psom-rb-block-detail dd {
	margin: 0;
	color: #0f172a;
	font-size: 0.9rem;
}

.psom-rb-block-detail__prompt {
	margin: 0;
	color: #475569;
	font-size: 0.9rem;
}

.psom-rb-affected-prompt {
	margin: 0 0 0.6rem;
	font-weight: 600;
	color: #92400e;
	font-size: 0.92rem;
}

.psom-rb-affected-list {
	max-height: 320px;
	overflow-y: auto;
	margin: 0 0 0.85rem;
	font-size: 0.88rem;
	color: #1e293b;
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	background: #f8fafc;
	padding: 0.5rem;
}

.psom-rb-affected-group {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 0.375rem;
	padding: 0.6rem 0.85rem;
	margin-bottom: 0.5rem;
}

.psom-rb-affected-group:last-child {
	margin-bottom: 0;
}

.psom-rb-affected-musician {
	font-weight: 600;
	color: #0f172a;
	font-size: 0.92rem;
	margin-bottom: 0.4rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.psom-rb-affected-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: #fde68a;
	color: #92400e;
	font-size: 0.72rem;
	font-weight: 700;
}

.psom-rb-affected-slots {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.psom-rb-affected-slots li {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: #334155;
	padding: 2px 0;
}

.psom-rb-affected-room {
	display: inline-block;
	min-width: 4.5rem;
	font-size: 0.72rem;
	font-weight: 600;
	color: #475569;
	background: #f1f5f9;
	padding: 1px 0.45rem;
	border-radius: 0.25rem;
	text-align: center;
}

.psom-rb-affected-hint {
	margin: 0;
	color: #475569;
	font-size: 0.9rem;
}

/* ---------- Matrix view (rooms × hours, CSS Grid) ---------- */

.psom-rb-matrix {
	display: grid;
	gap: 4px;
	background: #fff;
	padding: 4px;
	border-radius: 0.5rem;
	border: 1px solid #a8bcc8;
	overflow-x: auto;
}

.psom-rb-matrix__corner,
.psom-rb-matrix__head,
.psom-rb-matrix__time {
	background: #fff;
	border-radius: 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6rem;
	padding: 0.4rem 0.5rem;
}

.psom-rb-matrix__head {
	font-weight: 700;
	font-size: 0.92rem;
	color: #fff;
	background: #8099a9;
	padding: 0.55rem 0.5rem;
	letter-spacing: 0.01em;
}

.psom-rb-matrix__corner {
	background: #fff;
}

.psom-rb-matrix__time {
	font-size: 0.82rem;
	color: #fff;
	font-weight: 700;
	background: #8099a9;
	letter-spacing: 0.01em;
}

/* ---------- Cell (shared between matrix + timeline) ---------- */

.psom-rb-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	background: #fff;
	color: #1e293b;
	padding: 0.4rem 0.5rem;
	font-size: 0.82rem;
	line-height: 1.2;
	cursor: pointer;
	min-height: 2.6rem;
	text-align: center;
	border-radius: 0.25rem;
	font-family: inherit;
	font-weight: 500;
	width: 100%;
	transition: background 120ms, border-color 120ms, transform 120ms, box-shadow 120ms;
	/* Touch-action-Hint: erlaubt horizontales Pan auch wenn ein
	 * Click-Handler dran ist. Ohne diesen Hint interpretieren Safari
	 * und Firefox einen Touch über einer klickbaren Zelle konservativ
	 * als „Tap" und blockieren den horizontalen Scroll im
	 * Parent-Container. Chrome ist tolerant — daher Browser-spezifisch
	 * sichtbar nur dort wo's gefehlt hat. */
	touch-action: pan-x;
}

.psom-rb-cell:hover {
	transform: translateY( -1px );
	box-shadow: 0 2px 4px rgba( 15, 23, 42, 0.08 );
}

.psom-rb-cell--free {
	background: #ecfdf5;
	color: #047857;
	border-color: #6ee7b7;
}

.psom-rb-cell--free:hover {
	background: #d1fae5;
	border-color: #10b981;
}

/*
 * Hover-text swap: every clickable cell carries an idle label and a
 * hover CTA. Default state shows the idle label; on hover the CTA
 * takes over. Past cells are visually disabled — the swap is
 * suppressed there so they don't tease an action that won't fire.
 */
.psom-rb-cell__cta {
	display: none;
	font-weight: 700;
}

.psom-rb-cell--free:not(.psom-rb-cell--past):hover .psom-rb-cell__label,
.psom-rb-cell--mine:not(.psom-rb-cell--past):hover .psom-rb-cell__label,
.psom-rb--admin .psom-rb-cell--booked:not(.psom-rb-cell--past):not(.psom-rb-cell--blocked):hover .psom-rb-cell__label {
	display: none;
}

.psom-rb-cell--free:not(.psom-rb-cell--past):hover .psom-rb-cell__cta,
.psom-rb-cell--mine:not(.psom-rb-cell--past):hover .psom-rb-cell__cta,
.psom-rb--admin .psom-rb-cell--booked:not(.psom-rb-cell--past):not(.psom-rb-cell--blocked):hover .psom-rb-cell__cta {
	display: inline;
}

.psom-rb-cell--booked {
	background: #cad6dd;
	color: #1a2832;
	border-color: #8099a9;
	cursor: not-allowed;
}

.psom-rb-cell--booked:hover {
	transform: none;
	box-shadow: none;
}

.psom-rb-cell--mine {
	background: #fcd34d;
	color: #78350f;
	border-color: #f59e0b;
	font-weight: 700;
	cursor: pointer;
}

.psom-rb-cell--mine.psom-rb-cell--past {
	cursor: not-allowed;
}

.psom-rb-cell--mine:hover {
	background: #fbbf24;
	border-color: #d97706;
	transform: translateY( -1px );
	box-shadow: 0 2px 6px rgba( 217, 119, 6, 0.25 );
}

.psom-rb-cell--pending {
	opacity: 0.55;
	cursor: progress;
	transform: none !important;
	box-shadow: none !important;
}

.psom-rb-cell--past {
	opacity: 0.45;
	cursor: not-allowed;
	filter: grayscale( 0.6 );
}

.psom-rb-cell--past:hover {
	transform: none;
	box-shadow: none;
}

.psom-rb-cell--blocked {
	background-color: #fee2e2;
	color: #991b1b;
	border-color: #fecaca;
	background-image: linear-gradient( 45deg,
		rgba( 220, 38, 38, 0.15 ) 25%, transparent 25%,
		transparent 50%, rgba( 220, 38, 38, 0.15 ) 50%,
		rgba( 220, 38, 38, 0.15 ) 75%, transparent 75%, transparent );
	background-size: 14px 14px;
	cursor: not-allowed;
	font-weight: 600;
}

.psom-rb-cell--blocked:hover {
	transform: none;
	box-shadow: none;
}

/*
 * Admin affordances — admins can click cells musicians can't (cancel
 * any booking, release any blocking). Override the not-allowed cursor
 * + restore the lift-on-hover so the cell visibly invites the click.
 * Excluded: past cells — admins can't act on them either, so the
 * pointer/lift would be a misleading invite.
 */
.psom-rb--admin .psom-rb-cell--booked:not(.psom-rb-cell--past),
.psom-rb--admin .psom-rb-cell--blocked:not(.psom-rb-cell--past) {
	cursor: pointer;
}

.psom-rb--admin .psom-rb-cell--booked:not(.psom-rb-cell--past):hover,
.psom-rb--admin .psom-rb-cell--blocked:not(.psom-rb-cell--past):hover {
	transform: translateY( -1px );
	box-shadow: 0 2px 4px rgba( 15, 23, 42, 0.08 );
}

.psom-rb-matrix__time--past {
	opacity: 0.5;
}

[data-psom-rb-grid] {
	position: relative;
	transition: opacity 180ms;
}

[data-psom-rb-grid].psom-rb-grid--loading {
	opacity: 0.55;
	pointer-events: none;
}

/* ---------- Timeline view (rooms as floating cards, shared scroll) ---------- */

.psom-rb-timeline {
	/* No outer chrome — let the per-room cards float on the host
	 * page background. */
	background: transparent;
}

/*
 * `__scroll` is the only horizontal scroll container. Every
 * `__room` lives inside it, so dragging the scrollbar moves every
 * room in lock-step. The vertical stack underneath uses flex-column
 * with a generous gap so each card looks visually independent.
 */
.psom-rb-timeline__scroll {
	overflow-x: auto;
	padding: 4px 4px 8px;
}

.psom-rb-timeline__rooms {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	min-width: max-content;
}

.psom-rb-timeline__room {
	display: flex;
	align-items: stretch;
	min-width: max-content;
	background: #fff;
	border: 1px solid #a8bcc8;
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba( 60, 78, 89, 0.12 );
	/* `overflow: clip` (not hidden) so we still clip visually against
	 * the rounded corners but DON'T turn the room into a scroll
	 * container — otherwise the label's `position: sticky` would
	 * try to stick against this card instead of the outer scroll
	 * surface, defeating the purpose. */
	overflow: clip;
}

.psom-rb-timeline__label {
	position: sticky;
	left: 0;
	z-index: 1;
	flex: 0 0 9rem;
	background: #8099a9;
	font-weight: 700;
	padding: 0.7rem 0.85rem;
	font-size: 0.95rem;
	color: #fff;
	display: flex;
	align-items: center;
	border-right: 1px solid #5f7a8a;
	box-shadow: 4px 0 8px -4px rgba( 60, 78, 89, 0.18 );
	min-height: 4.4rem;
	letter-spacing: 0.01em;
}

.psom-rb-timeline__cells {
	display: flex;
	gap: 3px;
	padding: 4px;
	/* `flex-shrink: 0` damit Safari/FF nicht den ganzen Cells-Block
	 * komprimieren wenn das Viewport schmaler als die Summe aller
	 * Zellen ist. Plus `min-width: max-content` damit die Cells-Box
	 * ihre natürliche Breite beansprucht, auch wenn der Parent-Room
	 * `min-width: max-content` in flex-direction:column-Konstellation
	 * in Webkit/Gecko nicht zuverlässig propagiert. Chrome akzeptiert
	 * das implizit, Webkit/Gecko nicht — Folge dort: Cells > 18 Uhr
	 * existieren im DOM, werden aber vom `overflow: clip` auf
	 * `.psom-rb-timeline__room` unsichtbar geclippt. */
	flex: 0 0 auto;
	min-width: max-content;
}

/* Stable row height — sized to swallow a long "Vorname Nachname N." in
 * two lines without bumping the row taller. Covers ~95% of name
 * lengths in the philharmoniesalzburg roster; the rare 3-line outlier
 * still wraps gracefully without expanding past this height. */
.psom-rb-timeline__cell {
	flex: 0 0 6rem;
	min-height: 4.2rem;
	font-size: 0.78rem;
}

/* ---------- Loading + toast ---------- */

.psom-rb-loading {
	grid-column: 1 / -1;
	padding: 2rem;
	text-align: center;
	color: #64748b;
	font-style: italic;
	background: #fff;
	border-radius: 0.25rem;
}

.psom-rb-toast {
	position: fixed;
	top: 30vh;
	left: 50%;
	transform: translateX( -50% );
	background: #0f172a;
	color: #fff;
	padding: 1rem 1.5rem;
	border-radius: 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	box-shadow: 0 12px 32px rgba( 15, 23, 42, 0.4 );
	z-index: 100000;
	max-width: calc( 100vw - 2rem );
	min-width: 18rem;
	text-align: center;
	border: 2px solid #8099a9;
	animation: psom-rb-toast-in 220ms ease-out;
}

.psom-rb-toast--error {
	background: #7f1d1d;
	border-color: #fca5a5;
	color: #fff;
	box-shadow: 0 12px 36px rgba( 127, 29, 29, 0.5 );
}

/* Inline ⚠ glyph + text — pure CSS, no extra DOM. */
.psom-rb-toast--error::before {
	content: "⚠ ";
	font-size: 1.15rem;
	margin-right: 0.35rem;
}

/* Info-Variante (Erfolgs-Bestätigungen wie "Sperrung erstellt.") —
   neutraler Slate-Look, kein Warn-Glyph. */
.psom-rb-toast--info {
	background: #1f3849;
	border-color: #8099a9;
	color: #fff;
	box-shadow: 0 12px 36px rgba( 31, 56, 73, 0.4 );
}

@keyframes psom-rb-toast-in {
	from { opacity: 0; transform: translate( -50%, -1rem ); }
	to   { opacity: 1; transform: translate( -50%, 0 ); }
}

/* ---------- Responsive: stack toolbar on small screens ---------- */

@media ( max-width: 540px ) {
	/* Toolbar-Items zentrieren — Date-Zeile ist eh `flex: 1 1 100%`,
	   die zwei darunterliegenden Reihen (Navigation + View-Switch)
	   landen sonst links angedockt. `justify-content: center` zieht
	   sie in die Mitte und rahmt die Toolbar optisch klarer. */
	.psom-rb-toolbar {
		justify-content: center;
		text-align: center;
	}

	/* jquery-confirm-Modal auf Phone:
	   - `boxWidth` ist fix in JS (für Desktop sinnvoll), schießt
	     aber unter 540px über den Viewport — `max-width: 94vw`
	     zwingt das Modal in die Bildschirmbreite.
	   - Die Button-Reihe (oft 3 Buttons mit langen DE-Labels)
	     hat sonst kein flex-wrap; auf 2 Reihen wrappen statt am
	     rechten Rand abgeschnitten zu werden. */
	.jconfirm .jconfirm-box {
		max-width: 94vw;
	}

	.jconfirm .jconfirm-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 0.35rem;
	}

	.psom-rb-toolbar .psom-rb-date {
		flex: 1 1 100%;
		order: -1;
		min-width: 0;
	}

	/* Timeline-Raum-Label nimmt auf dem Desktop ~9rem ein, das ist
	   auf einem 360px-Phone fast 40% Bildschirmbreite. Schrumpfen auf
	   ~6rem (= ca. 1/4 der Breite) und Padding/Schrift moderat
	   reduzieren — der Raumname passt weiter, aber die Daten kriegen
	   den Platz, den sie wirklich brauchen. */
	.psom-rb-timeline__label {
		flex: 0 0 6rem;
		padding: 0.55rem 0.55rem;
		font-size: 0.85rem;
	}
}