/*
 * [mhub-my-meetings]: a member's upcoming sessions and bookings.
 *
 * It sits inside someone else's theme (a member dashboard built in Bricks, a
 * block theme, Elementor), so selectors stay at one or two classes: enough to
 * beat a theme's bare `ul` and `a:hover` rules, which would bring the bullets
 * back and turn the Join label into the theme's link colour, and still low
 * enough that a builder's own element styles win. (`` weighs nothing
 * and lost to exactly those bare element rules.) Text keeps the theme's font
 * and colour; lines and washes are mixed from currentColor, so a dark theme
 * gets light lines without a second palette. The one colour of
 * its own is the Join button, the plugin accent (#5536E8, white on it 6.82:1),
 * which a site can change with --mhub-mm-accent.
 */

.mhub-my-meetings {
	--mhub-mm-accent: #5536e8;
	--mhub-mm-accent-hover: #4a2dd6;
	--mhub-mm-accent-active: #3f25b8;
	--mhub-mm-line: color-mix(in srgb, currentColor 14%, transparent);
	margin: 0 0 1.5em;
}

.mhub-my-meetings .mhub-my-meetings__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--mhub-mm-line);
	border-radius: 12px;
	overflow: hidden;
}

.mhub-my-meetings__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "title join" "meta join";
	align-items: center;
	column-gap: 16px;
	row-gap: 2px;
	margin: 0;
	padding: 14px 18px;
}

.mhub-my-meetings__item + .mhub-my-meetings__item {
	border-top: 1px solid var(--mhub-mm-line);
}

.mhub-my-meetings__item--live {
	background: color-mix(in srgb, var(--mhub-mm-accent) 6%, transparent);
}

.mhub-my-meetings__title {
	grid-area: title;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.mhub-my-meetings__meta {
	grid-area: meta;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 12px;
	font-size: 0.875em;
	line-height: 1.5;
}

.mhub-my-meetings__when {
	font-variant-numeric: tabular-nums;
}

/* State is a 6px dot plus plain words, the same convention as the admin lists. */
.mhub-my-meetings__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

.mhub-my-meetings__status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #64748b;
	flex: none;
}

.mhub-my-meetings__item--live .mhub-my-meetings__status::before {
	background: var(--mhub-mm-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mhub-mm-accent) 22%, transparent);
}

.mhub-my-meetings__item--pending .mhub-my-meetings__status::before {
	background: #d97706;
}

.mhub-my-meetings .mhub-my-meetings__join {
	grid-area: join;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 88px;
	padding: 0 18px;
	border-radius: 8px;
	background: var(--mhub-mm-accent);
	color: #fff;
	font-size: 0.9375em;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 150ms ease, box-shadow 150ms ease;
}

/* Colour restated on every state: theme link rules (a:hover, a:visited) outrank a plain class. */
.mhub-my-meetings .mhub-my-meetings__join:visited {
	color: #fff;
}

.mhub-my-meetings .mhub-my-meetings__join:hover {
	background: var(--mhub-mm-accent-hover);
	color: #fff;
	text-decoration: none;
}

.mhub-my-meetings .mhub-my-meetings__join:focus-visible {
	outline: 2px solid var(--mhub-mm-accent);
	outline-offset: 2px;
	color: #fff;
}

.mhub-my-meetings .mhub-my-meetings__join:active {
	background: var(--mhub-mm-accent-active);
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.25);
	color: #fff;
}

/* The "next" layout is one row: a little more room, a little more weight. */
.mhub-my-meetings--next .mhub-my-meetings__item {
	padding: 18px 20px;
}

.mhub-my-meetings--next .mhub-my-meetings__title {
	font-size: 1.125em;
}

.mhub-my-meetings--empty p {
	margin: 0;
	padding: 14px 18px;
	border: 1px dashed var(--mhub-mm-line);
	border-radius: 12px;
}

@media (max-width: 480px) {
	.mhub-my-meetings__item {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "title" "meta" "join";
		row-gap: 4px;
		padding: 14px 16px;
	}

	.mhub-my-meetings .mhub-my-meetings__join {
		justify-self: start;
		margin-top: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mhub-my-meetings .mhub-my-meetings__join {
		transition: none;
	}
}