/**
 * bridge-booking.css
 * Restaurant Events Booking Bridge — corner triangle markers + info panel
 *
 * Targets pickadate.js day cells (.picker__table [data-pick])
 * and the injected #rebb-event-info panel.
 */

/* ── Corner triangle markers ───────────────────────────────────────────────── */

/*
 * Each event day gets a <span class="rebb-corner rebb-corner--{state}">
 * injected inside the picker__day div.  The CSS border trick renders a
 * right-angle triangle in the top-right corner — the same pattern pickadate
 * uses for its "today" marker.
 *
 * The parent div needs position:relative (added below) and overflow:visible
 * so the corner span is not clipped by the table cell.
 */

.picker__table .picker__day {
	position: relative;
	overflow: visible;
}

/* Ensure the parent <td> also doesn't clip the corner */
.picker__table td {
	overflow: visible;
}

.rebb-corner {
	position:      absolute;
	top:           0;
	right:         0;
	width:         0;
	height:        0;
	border-style:  solid;
	border-width:  0 9px 9px 0;
	/* default transparent — overridden per-state below */
	border-color:  transparent transparent transparent transparent;
	pointer-events: none;
}

/* Geschlossene Gesellschaft — red */
.rebb-corner--geschlossene-gesellschaft {
	border-color: transparent #dc3545 transparent transparent;
}

/* Kein à la Carte — amber */
.rebb-corner--kein-ala-carte {
	border-color: transparent #ff9800 transparent transparent;
}

/* Eingeschränkte Karte — yellow / olive */
.rebb-corner--eingeschraenkte-karte {
	border-color: transparent #d4a800 transparent transparent;
}

/* Event — teal */
.rebb-corner--event {
	border-color: transparent #009688 transparent transparent;
}

/* ── Hover tooltip ─────────────────────────────────────────────────────────── */

/*
 * Tooltip text is stored in data-rebb-tip on the picker__day div.
 * CSS ::after reads it and fades in on hover.
 * z-index 9999 keeps it above the picker frame.
 */

.picker__table [data-rebb-tip] {
	cursor: pointer;
}

.picker__table [data-rebb-tip]::after {
	content:        attr( data-rebb-tip );
	position:       absolute;
	bottom:         calc( 100% + 6px );
	left:           50%;
	transform:      translateX( -50% );
	white-space:    nowrap;
	background:     rgba( 30, 30, 30, 0.88 );
	color:          #fff;
	font-size:      0.72em;
	line-height:    1.4;
	padding:        4px 8px;
	border-radius:  4px;
	pointer-events: none;
	opacity:        0;
	transition:     opacity 0.15s ease;
	z-index:        9999;
}

.picker__table [data-rebb-tip]:hover::after {
	opacity: 1;
}

/* ── Info panel ────────────────────────────────────────────────────────────── */

#rebb-event-info.rebb-event-info {
	display:           block;
	width:             100%;
	box-sizing:        border-box;
	padding:           10px 14px;
	border-radius:     4px;
	margin-top:        8px;
	margin-bottom:     4px;
	font-size:         0.875em;
	line-height:       1.5;
	border-left-width: 4px;
	border-left-style: solid;
}

#rebb-event-info .rebb-time {
	display:     block;
	margin-top:  3px;
	font-size:   0.85em;
	opacity:     0.8;
}

#rebb-event-info .rebb-event-link {
	display:        inline-block;
	margin-top:     4px;
	font-size:      0.9em;
	font-weight:    600;
	text-decoration: none;
	white-space:    nowrap;
}

#rebb-event-info.rebb-info-kein-ala-carte .rebb-event-link         { color: #c44d00; }
#rebb-event-info.rebb-info-eingeschraenkte-karte .rebb-event-link  { color: #6d5c00; }
#rebb-event-info.rebb-info-event .rebb-event-link                  { color: #00534a; }
#rebb-event-info.rebb-info-geschlossene-gesellschaft .rebb-event-link { color: #721c24; }

#rebb-event-info .rebb-event-link:hover {
	text-decoration: underline;
}

/* State-specific colours */

#rebb-event-info.rebb-info-geschlossene-gesellschaft {
	background-color:  rgba( 220, 53, 69, 0.08 );
	border-left-color: #dc3545;
	color:             #721c24;
}

#rebb-event-info.rebb-info-kein-ala-carte {
	background-color:  rgba( 255, 152, 0, 0.10 );
	border-left-color: #ff9800;
	color:             #6d3200;
}

#rebb-event-info.rebb-info-eingeschraenkte-karte {
	background-color:  rgba( 251, 192, 45, 0.15 );
	border-left-color: #d4a800;
	color:             #4a3f00;
}

#rebb-event-info.rebb-info-event {
	background-color:  rgba( 0, 150, 136, 0.08 );
	border-left-color: #009688;
	color:             #003d36;
}