/* Events: /events and the department hub's Events tab. Both pages sit inside .dhub, so the hub's chips, forms, dialogs,
   empty states and colours (department-hub.css) apply; this file adds the event cards, the day groups and the form extras. */

.evt-groups { display: grid; gap: 1.1rem; }
.evt-group__head { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.55rem; color: var(--dhub-text); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.evt-group__head::after { content: ""; flex: 1; height: 1px; background: var(--dhub-line); }
.evt-group__head--live { color: #fecaca; }
.evt-list { display: grid; gap: 0.6rem; }

.evt-card {
	display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.9rem; padding: 0.8rem;
	border: 1px solid var(--dhub-line); border-radius: var(--radius); background: var(--dhub-raised);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.evt-card:hover { border-color: rgba(255, 255, 255, 0.14); }
.evt-card.is-live { border-color: rgba(248, 113, 113, 0.35); background: linear-gradient(90deg, rgba(239, 68, 68, 0.08), rgba(255, 255, 255, 0.02) 55%); }
.evt-card.is-focused { border-color: var(--analytics-accent-strong); box-shadow: 0 0 0 1px var(--analytics-accent-strong); }
.evt-card__media {
	display: grid; place-items: center; width: 5.5rem; height: 5.5rem; overflow: hidden; border: 1px solid var(--dhub-line);
	border-radius: 0.7rem; background: rgba(var(--analytics-accent), 0.1); color: var(--analytics-accent-strong); font-size: 1.8rem;
}
.evt-card__media img { width: 100%; height: 100%; object-fit: cover; }
.evt-card__body { display: grid; gap: 0.35rem; min-width: 0; }
.evt-card__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.evt-card__title { margin: 0; color: var(--dhub-text); font-size: 1.02rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.evt-card__title a { color: inherit; text-decoration: none; }
.evt-card__title a:hover { text-decoration: underline; }
.evt-card__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; color: var(--dhub-muted); font-size: 0.78rem; }
.evt-card__meta i { color: var(--dhub-faint); }
.evt-card__desc { display: -webkit-box; margin: 0; overflow: hidden; color: var(--dhub-muted); font-size: 0.82rem; line-height: 1.45; white-space: pre-line; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.evt-card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; color: #bae6fd; font-size: 0.72rem; font-weight: 600; }
.evt-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin-top: 0.15rem; }
.evt-card__actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-left: auto; }
.evt-host { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--dhub-text); font-size: 0.78rem; font-weight: 700; }
.evt-host img { width: 1.3rem; height: 1.3rem; border-radius: 0.35rem; object-fit: contain; }
.evt-host .evt-host__avatar { border-radius: 50%; object-fit: cover; }
@media (max-width: 575.98px) {
	.evt-card { grid-template-columns: minmax(0, 1fr); }
	.evt-card__media { width: 100%; height: 8rem; }
	.evt-card__actions { margin-left: 0; }
}

/* Live in the city: pop-up events and World Scenes from the game. */
.evt-live { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.evt-live__item { display: grid; gap: 0.25rem; padding: 0.65rem 0.75rem; border: 1px solid var(--dhub-line); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.025); }
.evt-live__item strong { color: var(--dhub-text); font-size: 0.88rem; overflow-wrap: anywhere; }
.evt-live__item span { color: var(--dhub-muted); font-size: 0.74rem; }

/* The form. */
.evt-form .is-invalid { border-color: rgba(248, 113, 113, 0.7); }
.evt-repeat { display: grid; gap: 0.45rem; margin: 0; padding: 0; border: 0; }
.evt-repeat__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.evt-repeat__row > .form-select { flex: 1 1 12rem; max-width: 16rem; }
.evt-form .evt-repeat__every, .evt-form .evt-repeat__until { flex-direction: row; align-items: center; gap: 0.4rem; color: var(--dhub-muted); font-size: 0.8rem; }
.evt-repeat__every input { width: 4.5rem; }
.evt-repeat__until input { width: 10rem; }
.evt-repeat__days { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.evt-form .evt-day { flex-direction: row; align-items: center; gap: 0.3rem; padding: 0.25rem 0.55rem; border: 1px solid var(--dhub-line); border-radius: 999px; background: var(--dhub-raised); color: var(--dhub-muted); font-size: 0.76rem; cursor: pointer; }
.evt-day:has(input:checked) { border-color: rgba(56, 189, 248, 0.45); background: rgba(14, 165, 233, 0.14); color: #e0f2fe; }
.evt-image__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.evt-image__preview { width: 6rem; height: 4rem; border: 1px solid var(--dhub-line); border-radius: 0.5rem; object-fit: cover; }
.evt-form .evt-check { flex-direction: row; align-items: center; gap: 0.5rem; color: var(--dhub-muted); font-size: 0.82rem; }
.evt-conflicts { padding: 0.7rem 0.85rem; border: 1px solid rgba(250, 204, 21, 0.35); border-radius: var(--radius-sm); background: rgba(234, 179, 8, 0.08); color: #fde68a; font-size: 0.8rem; }
.evt-conflicts ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }

#dhub-event-form-slot:empty { display: none; }
.evt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.evt-toolbar .dhub-search { flex: 1 1 14rem; }
.evt-dialog .dhub-dialog__body { max-height: calc(100vh - 3rem); overflow-y: auto; }