/*
 * Staff dashboard layout.
 *
 * Everything here used to be injected by JavaScript at runtime, which meant a
 * single script error left the page unstyled and the calendar invisible. It is
 * a real stylesheet now: if the JavaScript fails, the layout still holds.
 */

/* ---------------------------------------------------------------- layout */

/*
 * Break out of the theme's content column.
 *
 * Most themes constrain content to 650-800px, which is nowhere near enough for
 * a month grid with three shows a night beside an event form. This widens the
 * dashboard to the viewport regardless of what the theme does, without the
 * plugin having to know anything about the theme's markup.
 *
 * The 18px allowance keeps a vertical scrollbar from causing sideways scroll.
 */
.vy-dashboard,
.vy-dashboard__door {
	/*
	 * Block themes already provide a full-width escape hatch via .alignfull,
	 * which the wrapper carries. This just makes sure the rule lands even in
	 * classic themes that do not define it, without the viewport-width and
	 * transform trickery that fights the theme's own layout.
	 */
	width: 100%;
	max-width: none !important;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	padding: 0 15px;
}

.vy-dashboard {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	align-items: flex-start;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/*
 * Independent scrolling columns.
 *
 * The calendar and the event form are each taller than the viewport but get
 * used together: you pick a date on one and fill in the other. Scrolling the
 * page as one column means constantly losing your place. Each column sticks
 * to the top and scrolls its own overflow, so whichever one you are not
 * touching stays where you left it.
 */
@media (min-width: 1024px) {
	.vy-dashboard__calendar,
	.vy-dashboard__editor {
		position: sticky;
		top: 20px;
		max-height: calc(100vh - 40px);
		overflow-y: auto;
		overflow-x: hidden;
		align-self: flex-start;
		scrollbar-width: thin;
	}
	.vy-dashboard__calendar::-webkit-scrollbar,
	.vy-dashboard__editor::-webkit-scrollbar { width: 10px; }
	.vy-dashboard__calendar::-webkit-scrollbar-thumb,
	.vy-dashboard__editor::-webkit-scrollbar-thumb {
		background: var(--vy-border, #3f3f46);
		border-radius: 5px;
	}
	.vy-dashboard__calendar::-webkit-scrollbar-track,
	.vy-dashboard__editor::-webkit-scrollbar-track { background: transparent; }
}

/* Kiosk mode: dashboard takes the whole screen, theme chrome hidden. */
body.vy-kiosk #wpadminbar,
body.vy-kiosk header,
body.vy-kiosk footer,
body.vy-kiosk .site-header,
body.vy-kiosk .site-footer,
body.vy-kiosk .wp-block-template-part,
body.vy-kiosk .wp-block-post-title,
body.vy-kiosk .entry-title,
body.vy-kiosk #header,
body.vy-kiosk .header-wrapper,
body.vy-kiosk #masthead,
body.vy-kiosk #footer,
body.vy-kiosk .footer-wrapper,
body.vy-kiosk #colophon,
body.vy-kiosk .page-title,
body.vy-kiosk .page-header,
body.vy-kiosk .mobile-sidebar,
body.vy-kiosk .back-to-top {
	display: none !important;
}

/* Classic themes (Flatsome, Astra, GeneratePress…) box the content too. */
body.vy-kiosk #content,
body.vy-kiosk #main,
body.vy-kiosk .page-wrapper,
body.vy-kiosk .container,
body.vy-kiosk .row,
body.vy-kiosk .col,
body.vy-kiosk .large-12,
body.vy-kiosk .entry-content,
body.vy-kiosk .page-inner {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
body.vy-kiosk.admin-bar { margin-top: 0 !important; }
body.vy-kiosk { padding-top: 0 !important; }

body.vy-kiosk {
	margin: 0 !important;
	padding-top: 0 !important;
}

/*
 * Block themes wrap content in layout containers with their own max-width and
 * margins. In kiosk mode those are exactly what leaves a gap at the top and
 * stops the editor reaching the right edge, so they are neutralised here
 * rather than fought selector by selector.
 */
body.vy-kiosk .wp-site-blocks,
body.vy-kiosk .wp-site-blocks > *,
body.vy-kiosk .entry-content,
body.vy-kiosk .site-content,
body.vy-kiosk main,
body.vy-kiosk #main,
body.vy-kiosk #content,
body.vy-kiosk .is-layout-constrained,
body.vy-kiosk .is-layout-flow {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.vy-kiosk .vy-dashboard,
body.vy-kiosk .vy-dashboard__door {
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 12px;
	padding-right: 12px;
	margin: 0 !important;
}

body.vy-kiosk .vy-dashboard__calendar,
body.vy-kiosk .vy-dashboard__editor {
	top: 12px;
	max-height: calc(100vh - 24px);
}


/*
 * Calendar takes everything left over.
 *
 * flex-basis must be 0, not auto: with auto the column sizes to its content,
 * and the calendar element is empty until JavaScript fills it, so the column
 * collapses to nothing and never recovers.
 */
.vy-dashboard__calendar {
	flex: 1 1 0;
	min-width: 0;
}

/* Event form is a fixed sidebar, roughly a quarter of a normal laptop screen. */
.vy-dashboard__editor {
	flex: 0 0 340px;
	min-width: 0;
}

.vy-dashboard__door {
	margin-top: 10px;
}

/* Some themes clip anything wider than their content column. */
body.vy-dashboard-active {
	overflow-x: clip;
}

/* The calendar box itself. min-height matters: without it an empty calendar
   collapses to nothing and looks broken rather than empty. */
#staff-calendar {
	background: #18181b;
	padding: 24px 20px;
	border-radius: 12px;
	border: 1px solid #27272a;
	color: #e4e4e7;
	box-sizing: border-box;
	min-height: 560px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

#staff-event-form {
	margin: 0 !important;
	box-sizing: border-box;
}

/* --------------------------------------------------------- calendar chrome */

.vy-dashboard .fc-theme-standard td,
.vy-dashboard .fc-theme-standard th,
.vy-dashboard .fc-scrollgrid {
	border-color: #27272a !important;
}

.vy-dashboard .fc-toolbar-title {
	font-size: 1.6em !important;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff !important;
}

.vy-dashboard .fc-col-header-cell-cushion {
	color: #a1a1aa !important;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 12px !important;
	text-decoration: none;
}

.vy-dashboard .fc-daygrid-day-number {
	font-weight: 600;
	padding: 8px !important;
	text-decoration: none;
}

.vy-dashboard .fc-event {
	cursor: pointer;
	border-radius: 4px;
	border: none !important;
	margin: 3px 5px !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: transform 0.1s;
}
.vy-dashboard .fc-event:hover { transform: scale(1.02); }

.vy-dashboard .fc-event-main {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* Past nights recede; tonight and the selected night stand out. */
.vy-dashboard .fc-day-past { background-color: #09090b !important; }
.vy-dashboard .fc-day-past .fc-daygrid-day-number { color: #52525b !important; }
.vy-dashboard .fc-event-past { opacity: 0.5 !important; filter: grayscale(40%); }

.vy-dashboard .fc-day-future { background-color: #18181b !important; }
.vy-dashboard .fc-day-future .fc-daygrid-day-number { color: #d4d4d8 !important; }

.vy-dashboard .fc-day-today {
	background-color: rgba(217, 35, 35, 0.05) !important;
	box-shadow: inset 0 0 0 2px #d92323 !important;
}
.vy-dashboard .fc-day-today .fc-daygrid-day-number {
	background: #d92323 !important;
	color: #fff !important;
	border-radius: 50%;
	width: 26px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	padding: 0 !important;
	margin: 4px;
	display: inline-block;
}

.vy-dashboard .fc-day-selected {
	background-color: rgba(16, 185, 129, 0.15) !important;
	box-shadow: inset 0 0 0 2px #10b981 !important;
}
.vy-dashboard .fc-day-selected .fc-daygrid-day-number {
	background: #10b981 !important;
	color: #fff !important;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	padding: 0 !important;
	margin: 4px;
	display: inline-block;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.vy-dashboard .fc .fc-button-primary {
	background-color: #27272a !important;
	border-color: #3f3f46 !important;
	color: #fff !important;
	text-transform: uppercase;
	font-weight: bold;
	transition: 0.2s;
	border-radius: 6px;
	padding: 10px 18px;
}
.vy-dashboard .fc .fc-button-primary:hover,
.vy-dashboard .fc .fc-button-primary:not(:disabled):active,
.vy-dashboard .fc .fc-button-primary:not(:disabled).fc-button-active {
	background-color: #d92323 !important;
	border-color: #d92323 !important;
}

/* ------------------------------------------------------------ search field */

.vy-calendar-search {
	width: 100%;
	padding: 13px 15px;
	margin-bottom: 20px;
	background: #121214;
	color: #fff;
	border: 1px solid #3f3f46;
	border-radius: 8px;
	font-size: 1rem;
	box-sizing: border-box;
	outline: none;
	transition: 0.2s;
}
.vy-calendar-search:focus { border-color: #3b82f6; }

/* Search results dropdown: every matching show on any date. */
.vy-search-results {
	display: none;
	position: absolute;
	left: 0;
	top: calc(100% + 6px);
	width: min(640px, 100%);
	max-height: 60vh;
	overflow: auto;
	background: #161616;
	border: 1px solid #333;
	border-radius: 8px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
	z-index: 50000;
}
.vy-search-group {
	padding: 8px 14px 6px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #888;
	background: #1e1e1e;
	position: sticky;
	top: 0;
}
.vy-search-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 10px 14px;
	border-left: 4px solid transparent;
	border-bottom: 1px solid #262626;
	text-decoration: none;
	color: #fff;
}
.vy-search-row:hover { background: #222; }
.vy-search-row.is-upcoming { border-left-color: #10b981; }
.vy-search-row.is-upcoming .vy-search-date { color: #10b981; }
.vy-search-row.is-past { border-left-color: #d92323; }
.vy-search-row.is-past .vy-search-title { color: #bbb; }
.vy-search-row.is-past .vy-search-date { color: #f87171; }
.vy-search-title { font-weight: 600; font-size: 0.95rem; }
.vy-search-date { font-size: 0.8rem; white-space: nowrap; }
.vy-search-empty { padding: 16px; color: #888; font-style: italic; }

/* ------------------------------------------------------- door button strip */

.vy-door-launch {
	text-align: center;
	margin: 30px 0 10px;
}

.vy-door-launch button {
	background: #10b981;
	color: #fff;
	border: none;
	padding: 16px 34px;
	border-radius: 8px;
	font-size: 1.1rem;
	font-weight: bold;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 0 4px 18px rgba(16, 185, 129, 0.35);
	transition: transform 0.15s;
}
.vy-door-launch button:hover { transform: scale(1.02); }

/* --------------------------------------------------------- mobile day sheet */

.mobile-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 999999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.mobile-modal-overlay.active { opacity: 1; pointer-events: auto; }

.mobile-modal-content {
	background: #1e1e1e;
	width: 100%;
	max-height: 85vh;
	border-radius: 20px 20px 0 0;
	border-top: 1px solid #333;
	box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.9);
	display: flex;
	flex-direction: column;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}
.mobile-modal-overlay.active .mobile-modal-content { transform: translateY(0); }

.mobile-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid #333;
}
.mobile-modal-header h3 {
	margin: 0;
	color: #fff;
	font-size: 1.35rem;
	text-transform: uppercase;
}
.mobile-modal-close {
	background: #333;
	color: #fff;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-weight: bold;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mobile-modal-body {
	padding: 0 20px 20px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.mobile-event-poster {
	width: 70px;
	height: 70px;
	object-fit: cover;
	border-radius: 6px;
	margin-right: 15px;
	background: #111;
	border: 1px solid #333;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------ mobile */

@media (min-width: 1024px) and (max-width: 1400px) {
	.vy-dashboard__editor { flex: 0 0 300px; }
}

@media (max-width: 1023px) {

	.vy-dashboard,
	.vy-dashboard__door { padding: 0; }
	.vy-dashboard { flex-direction: column; flex-wrap: wrap; gap: 16px; }
	.vy-dashboard__calendar,
	.vy-dashboard__editor { flex: 1 1 100%; width: 100%; }

	#staff-calendar { padding: 15px !important; min-height: 0; }

	.vy-dashboard .fc .fc-toolbar { display: flex; flex-direction: column; gap: 14px; }
	.vy-dashboard .fc .fc-toolbar-title { font-size: 1.35em !important; text-align: center; }
	.vy-dashboard .fc-header-toolbar .fc-toolbar-chunk:first-child {
		display: flex;
		justify-content: center;
		width: 100%;
		gap: 10px;
	}

	/* Shrink events to colored dots so a phone-width month still reads. */
	.vy-dashboard .fc-event-main { display: none !important; }
	.vy-dashboard .fc-event {
		width: 10px !important;
		height: 10px !important;
		border-radius: 50% !important;
		display: inline-block !important;
		margin: 2px !important;
		border: none !important;
	}
	.vy-dashboard .fc-daygrid-day-events {
		text-align: center !important;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding-bottom: 5px !important;
	}
	.vy-dashboard .fc-daygrid-event-harness { display: inline-block !important; margin: 0 !important; }
}

/* ---------------------------------------------------- event editor panel */

/*
 * The two link cards hold long URLs in a flex row. A flex item defaults to
 * min-width:auto, meaning it refuses to shrink below its content - so a long
 * URL pushes the card wider than the sidebar and drags everything below it
 * off the side of the screen. min-width:0 lets them shrink and ellipsis.
 */
.vy-dashboard__editor,
.vy-dashboard__editor * {
	box-sizing: border-box;
}

/*
 * Every card is a plain block in a vertical stack. Nothing floats, nothing
 * flexes at this level, so a card cannot end up beside or inside another one.
 */
.vy-dashboard__editor #staff-event-form {
	display: block;
	width: 100%;
}

.vy-dashboard__editor .form-card {
	display: block !important;
	position: static !important;
	float: none !important;
	width: 100% !important;
	max-width: 100%;
	clear: both;
}

/* --- the share card: public link, band portal link, and the combined copy --- */

.vy-link-card {
	padding: 14px 16px !important;
	border-color: #3f3f46 !important;
}

.vy-link-card__label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #8e44ad;
	margin-bottom: 6px;
}

/* The URL wraps instead of forcing the panel wider. */
.vy-link-card__url {
	display: block;
	width: 100% !important;
	border: none !important;
	background: #111 !important;
	color: #93c5fd !important;
	font-family: monospace;
	font-size: 12px !important;
	padding: 8px 10px !important;
	margin: 0 0 10px !important;
	border-radius: 4px;
	outline: none;
	cursor: text;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vy-link-card__copy {
	display: block;
	width: 100%;
	padding: 8px 12px !important;
	font-size: 12px !important;
	margin: 0 !important;
}

.vy-link-card__copy--portal {
	background: #8e44ad !important;
}

/* Each link sits in its own labelled row inside the one card. */
.vy-link-card__row + .vy-link-card__row {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #3f3f46;
}

.vy-link-card__label--public {
	color: #93c5fd;
}

.vy-link-card__label--portal {
	color: #c084fc;
}

.vy-link-card__actions {
	display: flex;
	gap: 8px;
}

.vy-link-card__actions .vy-link-card__copy {
	flex: 1;
}

/* An <a> styled as a button needs the text centred by hand. */
.vy-link-card__open {
	flex: 0 0 auto !important;
	width: auto !important;
	text-align: center;
	text-decoration: none;
	line-height: 1.6;
}

.vy-link-card__share {
	display: block;
	width: 100%;
	margin: 18px 0 0 !important;
	padding: 11px 12px !important;
	font-size: 13px !important;
}

.vy-link-card__hint {
	display: block;
	margin-top: 8px;
	color: #a1a1aa;
	font-size: 11px;
	line-height: 1.5;
}

/*
 * Off-screen rather than display:none - a hidden element cannot be selected,
 * and the clipboard fallback needs to select this to copy it.
 */
.vy-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.vy-dashboard__editor input,
.vy-dashboard__editor select,
.vy-dashboard__editor textarea {
	max-width: 100%;
}

/* ------------------------------------------------------------ attribution */

.vy-powered-by {
	text-align: center;
	margin: 22px 0 6px;
	font-size: 11px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--vy-text-muted, #a1a1aa);
	opacity: 0.65;
}
.vy-powered-by a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.vy-powered-by a:hover { opacity: 1; }

/* --------------------------------------------------- staff theme toggle */

.vy-calendar-toolbar {
	display: flex;
	gap: 10px;
	align-items: stretch;
	margin-bottom: 20px;
}
.vy-calendar-toolbar .vy-calendar-search { margin-bottom: 0; flex: 1 1 auto; }

.vy-theme-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
	background: var(--vy-surface-alt, #232327);
	color: var(--vy-text, #e4e4e7);
	border: 1px solid var(--vy-border, #3f3f46);
	border-radius: 8px;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	white-space: nowrap;
	transition: filter 0.15s;
}
.vy-theme-toggle:hover { filter: brightness(1.25); }
.vy-theme-toggle:disabled { opacity: 0.5; cursor: wait; }

.vy-theme-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--vy-accent, #d92323);
	box-shadow: 0 0 0 2px var(--vy-surface, #18181b);
	flex: 0 0 auto;
}

@media (max-width: 640px) {
	.vy-calendar-toolbar { flex-wrap: wrap; }
	.vy-theme-toggle { width: 100%; justify-content: center; padding: 12px; }
}