/*
 * Answermail concert admin interface.
 *
 * Loaded after main.css and deliberately restyles the class names the
 * existing pages already use -- .screen-block, .display-row,
 * .display-cell, #field-editor, .red-button -- so all 45 pages pick up the
 * new look without each being rewritten. New work should prefer the iv-*
 * components below.
 */

:root {
	--iv-bg:          #f4f6f8;
	--iv-surface:     #ffffff;
	--iv-border:      #dfe3e8;
	--iv-border-soft: #eceff1;

	--iv-text:        #1f2933;
	--iv-text-soft:   #616e7c;
	--iv-text-faint:  #9aa5b1;

	--iv-accent:      #a6192e;   /* the red already used through the app */
	--iv-accent-dark: #85141f;
	--iv-accent-soft: #fdf2f3;

	--iv-ok:          #1b7f4f;
	--iv-ok-soft:     #eaf6ef;
	--iv-warn:        #8a5a00;
	--iv-warn-soft:   #fdf5e5;
	--iv-error:       #b3261e;
	--iv-error-soft:  #fdeceb;
	--iv-info:        #1f5f9e;
	--iv-info-soft:   #eaf2fb;

	--iv-radius:      6px;
	--iv-radius-lg:   10px;
	--iv-gap:         16px;
	--iv-shadow:      0 1px 2px rgba(31,41,51,.06), 0 2px 8px rgba(31,41,51,.06);
	--iv-shadow-lg:   0 8px 32px rgba(31,41,51,.18);
	--iv-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/*
 * Nothing in reset.css or main.css sets box-sizing, and main.css gives
 * #content width:100%. Adding horizontal padding to that made the box
 * 100% + 40px, so page content ran past the right edge while the left
 * stayed put. Border-box makes padding sit inside the declared width.
 */
*, *::before, *::after { box-sizing: border-box; }

body.body {
	background: var(--iv-bg);
	color: var(--iv-text);
	font-family: var(--iv-font);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

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

#header {
	background: var(--iv-surface);
	border-bottom: 1px solid var(--iv-border);
	box-shadow: var(--iv-shadow);
	position: sticky;
	top: 0;
	z-index: 200;
}

.iv-header-inner {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 52px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}

.iv-brand {
	display: flex;
	align-items: center;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	color: var(--iv-accent);
	white-space: nowrap;
	padding: 0;
}

#header-links { flex: 1; min-width: 0; }

#header-links ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	white-space: normal;
}

#header-links a { text-decoration: none; }

#header-links li {
	display: flex;
	align-items: center;
	height: 32px;
	list-style: none;
	line-height: 1;
	margin: 0;
	padding: 0 11px;
	border-radius: var(--iv-radius);
	font-size: 13px;
	font-weight: 500;
	color: var(--iv-text-soft);
	white-space: nowrap;
	transition: background .12s ease, color .12s ease;
}

#header-links li:hover {
	background: var(--iv-accent-soft);
	color: var(--iv-accent);
}

#header-links a.is-current li {
	background: var(--iv-accent);
	color: #fff;
}

/* Grouped navigation: the bar holds a few dropdowns instead of a link
   per page. The group <li> is only a positioning shell; the button
   inside it looks and behaves like the old links did. */
#header-links li.iv-nav-group {
	position: relative;
	padding: 0;
}

#header-links li.iv-nav-group:hover { background: none; }

.iv-nav-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 11px;
	border: none;
	background: none;
	border-radius: var(--iv-radius);
	font-size: 13px;
	font-weight: 500;
	font-family: inherit;
	color: var(--iv-text-soft);
	white-space: nowrap;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}

.iv-nav-toggle:hover,
.iv-nav-toggle[aria-expanded="true"] {
	background: var(--iv-accent-soft);
	color: var(--iv-accent);
}

.iv-nav-caret {
	font-size: 8px;
	opacity: .65;
}

.iv-nav-menu {
	left: 0;
	right: auto;
	min-width: 185px;
}

/* Where you are: the entry for the open page, and its group's button. */
.iv-nav-menu .iv-menu-item.is-current {
	background: var(--iv-accent);
	color: #fff;
}

.iv-nav-toggle.is-current {
	color: var(--iv-accent);
	font-weight: 600;
}

.iv-user { position: relative; white-space: nowrap; }

.iv-user-button {
	display: flex;
	align-items: center;
	height: 32px;
	gap: 8px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--iv-radius);
	padding: 6px 10px;
	font-size: 13px;
	color: var(--iv-text);
	cursor: pointer;
}

.iv-user-button:hover { background: var(--iv-border-soft); border-color: var(--iv-border); }
.iv-user-caret { color: var(--iv-text-faint); font-size: 10px; }

.iv-menu {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	min-width: 230px;
	background: var(--iv-surface);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius);
	box-shadow: var(--iv-shadow-lg);
	padding: 6px;
	z-index: 300;
}

.iv-menu.is-open { display: block; }

.iv-menu-head {
	padding: 8px 10px 10px;
	border-bottom: 1px solid var(--iv-border-soft);
	margin-bottom: 6px;
}

.iv-menu-name { font-weight: 600; font-size: 13px; }
.iv-menu-meta { font-size: 12px; color: var(--iv-text-faint); margin-top: 2px; }

.iv-menu-item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 8px 10px;
	border: none;
	background: none;
	border-radius: var(--iv-radius);
	font-size: 13px;
	color: var(--iv-text);
	text-decoration: none;
	cursor: pointer;
}

.iv-menu-item:hover { background: var(--iv-accent-soft); color: var(--iv-accent); }

/* A narrower panel than the record editor, for short forms. */
#iv-account-modal {
	display: none;
	position: fixed;
	z-index: 500;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(420px, calc(100vw - 40px));
	background: var(--iv-surface);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius-lg);
	box-shadow: var(--iv-shadow-lg);
	padding: 24px;
}

#iv-account-modal.is-open { display: block; }

#content {
	width: auto;          /* main.css sets 100%, which overflowed the padding */
	max-width: 1400px;
	margin: 0 auto;
	padding: 24px 20px 64px;
}

.screen-block {
	background: var(--iv-surface);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius-lg);
	box-shadow: var(--iv-shadow);
	padding: 22px 24px;
	margin-bottom: 22px;
}

.screen-block h2 {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 650;
	letter-spacing: -.01em;
}

.screen-block h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.screen-block h4 { margin: 22px 0 8px; font-size: 14px; font-weight: 650;
                   color: var(--iv-text); }

.iv-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 14px 0 18px;
}

.iv-spacer { flex: 1; }

/* --------------------------------------------------------- media library */

.iv-media-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
	margin: 8px 0 16px;
	max-height: 320px;
	overflow-y: auto;
}

.iv-media-item {
	border: 2px solid var(--iv-border);
	border-radius: var(--iv-radius);
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 4 / 3;
	background: var(--iv-bg);
}

.iv-media-item:hover { border-color: var(--iv-accent); }

.iv-media-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------------- dashboard */

.iv-stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--iv-gap);
	margin: 6px 0 24px;
}

.iv-stat {
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius-lg);
	background: var(--iv-surface);
	box-shadow: var(--iv-shadow);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.iv-stat-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--iv-text-faint);
}

.iv-stat-value {
	font-size: 26px;
	font-weight: 700;
	color: var(--iv-text);
	font-variant-numeric: tabular-nums;
}

.iv-stat-delta { font-size: 12px; color: var(--iv-text-faint); }
.iv-stat-up   { color: var(--iv-ok); }
.iv-stat-down { color: var(--iv-error); }

.iv-dash-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 28px;
}

/* Money asked for but not collected yet: loud enough to act on. */
.iv-dash-awaiting {
	margin: 14px 0;
	padding: 10px 14px;
	background: var(--iv-warn-soft);
	color: var(--iv-warn);
	border-left: 4px solid var(--iv-warn);
	border-radius: 6px;
	font-size: 13px;
}
.iv-dash-awaiting a { color: inherit; font-weight: 600; }

/* The reservation a deep link pointed at: lit on arrival, then it
   settles back into the list. */
.iv-res-focus {
	animation: iv-res-focus-fade 3s ease-out forwards;
}

@keyframes iv-res-focus-fade {
	0%   { background: var(--iv-warn-soft); box-shadow: inset 3px 0 0 var(--iv-warn); }
	70%  { background: var(--iv-warn-soft); box-shadow: inset 3px 0 0 var(--iv-warn); }
	100% { background: transparent; box-shadow: none; }
}

/* Fulfillment work rather than missing money: same shape, calmer color. */
.iv-dash-todo {
	background: var(--iv-border-soft);
	color: var(--iv-text);
	border-left-color: var(--iv-text-faint);
}

/* ---------------------------------------------------------------------
   The reservation-map modal (customer-edit.php): a dimmed backdrop with
   a large dialog, since it holds an entire hall map. Sized to nearly
   the viewport; the map pane scrolls on its own if a hall outgrows it.
   --------------------------------------------------------------------- */

#customer-reservation-map-wrapper {
	position: fixed;
	inset: 0;
	z-index: 800;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(20, 20, 20, 0.55);
	padding: 24px;
}

#customer-reservation-map-wrapper.is-open {
	display: flex;
}

/* The concert editor popup sits BELOW the field editor (500) and its
   backdrop, because the showing and media dialogs open on top of it. */
#concert-editor-wrapper {
	position: fixed;
	inset: 0;
	z-index: 450;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(20, 20, 20, 0.55);
	padding: 24px;
}

#concert-editor-wrapper.is-open {
	display: flex;
}

#concert-editor-body {
	flex: 1 1 auto;
	overflow: auto;
	padding: 12px 20px 20px;
}

/* Inside the popup the tab bar carries the action buttons and stays
   pinned while the form scrolls under it. The negative top offsets the
   body's own padding so nothing peeks through above the bar. */
#concert-editor-body .iv-tabs {
	position: sticky;
	top: -12px;
	margin-top: 0;
	padding-top: 10px;
	background: var(--iv-surface);
	z-index: 5;
}

/* Same idea for the dialogs in #field-editor: the heading row holds the
   buttons and stays pinned while the dialog scrolls. */
.iv-editor-actions {
	position: sticky;
	top: -24px;
	margin: 0 0 14px;
	padding: 10px 0;
	background: var(--iv-surface);
	border-bottom: 1px solid var(--iv-border-soft);
	z-index: 5;
}

.iv-map-modal {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
	width: min(1240px, 100%);
	max-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.iv-map-modal-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--iv-border, #ddd);
	flex: 0 0 auto;
}

.iv-map-modal-head strong {
	font-size: 15px;
}

.iv-map-modal-close {
	margin-left: auto;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 6px;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	color: #666;
	cursor: pointer;
}

.iv-map-modal-close:hover {
	background: var(--iv-border-soft, #eee);
	color: #000;
}

.iv-context-menu {
	position: fixed;
	z-index: 650;
	display: none;
	min-width: 210px;
	padding: 6px;
	background: var(--iv-surface);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius);
	box-shadow: var(--iv-shadow-lg);
	font-size: 13px;
}

.iv-context-menu.is-open {
	display: block;
}

.iv-context-head {
	padding: 6px 10px 8px;
	font-weight: 600;
	color: var(--iv-text-soft);
	border-bottom: 1px solid var(--iv-border-soft);
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 260px;
}

.iv-context-item {
	position: relative;
	padding: 8px 10px;
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
}

.iv-context-item:hover {
	background: var(--iv-accent-soft);
	color: var(--iv-accent-dark);
}

.iv-context-rule {
	height: 1px;
	background: var(--iv-border-soft);
	margin: 4px 0;
}

.iv-context-caret {
	float: right;
	color: var(--iv-text-faint);
}

.iv-context-submenu {
	display: none;
	position: absolute;
	left: calc(100% - 4px);
	top: -6px;
	min-width: 150px;
	padding: 6px;
	background: var(--iv-surface);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius);
	box-shadow: var(--iv-shadow-lg);
}

.iv-context-parent:hover > .iv-context-submenu {
	display: block;
}

#customer-map-tickets {
	margin-top: 14px;
}

.iv-map-tickets-head {
	font-size: 13px;
	color: var(--iv-text-soft);
	margin-bottom: 8px;
}

.iv-map-ticket {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid var(--iv-border);
	border-left: 4px solid var(--iv-accent);
	border-radius: var(--iv-radius);
	background: var(--iv-surface);
	padding: 10px 14px;
	margin-bottom: 8px;
	font-size: 13px;
}

.iv-map-ticket-seat {
	font-weight: 600;
}

.iv-map-ticket-meta {
	color: var(--iv-text-soft);
}

#customer-reservation-map {
	flex: 1 1 auto;
	overflow: auto;
	padding: 12px 16px 16px;
	min-height: 200px;
}

/* Inside the modal the map can afford to be tall. */
#customer-reservation-map .seatmap-viewport {
	height: min(66vh, 760px);
}

/* The seat card floats over the seat-info map (wrapper is 800). */
#seat-customer-popup {
	position: fixed;
	inset: 0;
	z-index: 850;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(20, 20, 20, 0.45);
	padding: 24px;
}

#seat-customer-popup.is-open {
	display: flex;
}

#seat-customer-popup .iv-seat-customer-modal {
	width: min(440px, 100%);
}

#seat-customer-content {
	flex: 1 1 auto;
	overflow: auto;
	padding: 14px 16px 16px;
}

#seat-customer-content .iv-seatinfo-res {
	border: 1px solid var(--iv-border-soft, #eee);
	border-radius: 8px;
	padding: 10px 12px;
	margin: 0 0 10px;
	line-height: 1.6;
}

#seat-customer-content .iv-seatinfo-res:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 900px) {
	#customer-reservation-map-wrapper { padding: 8px; }
	#seat-customer-popup { padding: 8px; }
	#concert-editor-wrapper { padding: 8px; }
	.iv-map-modal { max-height: calc(100vh - 16px); }
}

/* What a logged request carried, kept to one quiet line; the full JSON
   rides in the title attribute. */
.iv-log-detail {
	font-family: ui-monospace, "SF Mono", Consolas, monospace;
	font-size: 11px;
	color: var(--iv-text-soft);
	word-break: break-all;
}

.iv-dash-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--iv-border-soft);
	font-size: 13px;
}

.iv-dash-row:last-child { border-bottom: none; }

.iv-dash-link { cursor: pointer; }
.iv-dash-link:hover .iv-dash-main { color: var(--iv-accent); }

.iv-dash-num {
	color: var(--iv-text-soft);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ------------------------------------------------- seating template builder */

/* The hall preview: the customer map's own markup and the hall's own
   positioning css, boxed. Hidden seats show as dashed outlines. */
.iv-hall-preview {
	position: relative;
	background: var(--iv-surface);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius);
	padding: 16px;
	margin-bottom: 20px;
}

.iv-hall-preview .concert-hall-dimmensions { position: relative; }

.iv-hall-preview .seat { cursor: default; }

.iv-hall-preview .iv-seat-hidden {
	background: transparent;
	border-style: dashed;
	border-color: var(--iv-text-faint);
	color: var(--iv-text-faint);
}

.iv-seatmap-legend {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin: 4px 0 10px;
	font-size: 12.5px;
	color: var(--iv-text-soft);
}

.iv-legend-item { display: flex; align-items: center; gap: 6px; }

.iv-legend-swatch {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	display: inline-block;
}

.iv-seatrow {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 3px 0;
}

.iv-seatrow-label {
	width: 34px;
	text-align: right;
	font-weight: 650;
	font-size: 12.5px;
	color: var(--iv-text-soft);
	flex: none;
}

.iv-seatrow-seats {
	display: flex;
	gap: 2px;
	flex-wrap: wrap;
	min-width: 0;
}

.iv-seat {
	width: 22px;
	height: 20px;
	border-radius: 3px;
	font-size: 10px;
	color: rgba(0,0,0,.65);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
}

.iv-seatrow-edit {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	flex: none;
	font-size: 12px;
	color: var(--iv-text-soft);
}

/* Pricing rows in the showing dialog and level rows in the hall dialog. */
.iv-price-row {
	display: grid;
	grid-template-columns: minmax(0,1.4fr) 110px 110px 90px 100px;
	gap: 10px;
	align-items: center;
	margin-bottom: 8px;
}

.iv-price-row > div:first-child { padding-top: 16px; }

.iv-level-row {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) 70px;
	gap: 10px;
	align-items: end;
	margin-bottom: 8px;
}

/* The reward rows in the promotion editor. */
.iv-reward-row {
	display: grid;
	grid-template-columns: minmax(0,1.6fr) 90px 80px 80px minmax(0,1.2fr) 80px;
	gap: 10px;
	align-items: end;
	margin-bottom: 10px;
}

/* --------------------------------------------------------- survey results */

.iv-survey-results { max-width: 720px; }

.iv-survey-row {
	display: grid;
	grid-template-columns: 180px minmax(0,1fr) 110px;
	gap: 12px;
	align-items: center;
	padding: 7px 0;
	font-size: 13px;
}

.iv-survey-label { color: var(--iv-text); overflow-wrap: break-word; }

.iv-survey-bar {
	height: 14px;
	background: var(--iv-border-soft);
	border-radius: 7px;
	overflow: hidden;
}

.iv-survey-bar span {
	display: block;
	height: 100%;
	background: var(--iv-accent);
	border-radius: 7px;
}

.iv-survey-count {
	text-align: right;
	color: var(--iv-text-soft);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ tabs */

.iv-tabs {
	display: flex;
	gap: 2px;
	border-bottom: 2px solid var(--iv-border-soft);
	margin: 18px 0 20px;
}

.iv-tab {
	padding: 9px 16px;
	border: none;
	background: transparent;
	font: inherit;
	font-size: 13.5px;
	font-weight: 550;
	color: var(--iv-text-soft);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
}

.iv-tab:hover { color: var(--iv-accent); }

.iv-tab-active {
	color: var(--iv-accent);
	border-bottom-color: var(--iv-accent);
}

/* Seat rows inside a showing card on the customer page. */
.iv-seat-row {
	display: grid;
	grid-template-columns: 90px minmax(0,1fr) 56px 56px 150px 170px 70px;
	gap: 10px;
	align-items: center;
	padding: 8px 14px;
	font-size: 13px;
	border-bottom: 1px solid var(--iv-border-soft);
}

.iv-seat-row:last-child { border-bottom: none; }

.iv-seat-row-head {
	font-size: 11px;
	font-weight: 650;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--iv-text-faint);
	background: var(--iv-bg);
}

.iv-seat-unhandled { box-shadow: inset 3px 0 0 var(--iv-warn); }

/* ----------------------------------------------------------------- login */

.iv-login {
	display: flex;
	justify-content: center;
	padding: 9vh 20px 40px;
}

.iv-login-card {
	width: min(380px, 100%);
	background: var(--iv-surface);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius-lg);
	box-shadow: var(--iv-shadow);
	padding: 28px;
}

.iv-login-brand {
	font-size: 18px;
	font-weight: 700;
	color: var(--iv-accent);
	margin-bottom: 20px;
}

.iv-login-brand span { color: var(--iv-text-faint); font-weight: 400; }

/* ----------------------------------------------------------------- cards */

/* The report chooser: a grid of clickable cards, each an icon, a name and
   a sentence saying what comes out. */
.iv-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: var(--iv-gap);
	margin-top: 18px;
}

.iv-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px;
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius-lg);
	background: var(--iv-surface);
	box-shadow: var(--iv-shadow);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .12s, box-shadow .12s;
}

.iv-card:hover {
	border-color: var(--iv-accent);
	box-shadow: var(--iv-shadow-lg);
}

.iv-card-icon {
	flex: none;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--iv-accent-soft);
	color: var(--iv-accent);
}

.iv-card-icon svg { width: 24px; height: 24px; }

.iv-card-body { display: block; }

.iv-card-title {
	display: block;
	font-size: 14px;
	font-weight: 650;
	color: var(--iv-text);
	margin-bottom: 4px;
}

.iv-card-blurb {
	display: block;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--iv-text-soft);
}

/* A search box that reads as one: rounded, with room to type. The native
   type=search clear button is kept. */
.iv-search {
	width: 280px;
	max-width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius);
	font: inherit;
	font-size: 13px;
	background: var(--iv-surface);
}

.iv-search:focus { outline: none; border-color: var(--iv-accent); }

.iv-filter-label { font-size: 12px; color: var(--iv-text-faint); }

/* The loading spinner, replacing an animated gif. */
.iv-loading {
	display: none;
	width: 18px;
	height: 18px;
	border: 3px solid var(--iv-border);
	border-top-color: var(--iv-accent);
	border-radius: 50%;
	animation: iv-spin .7s linear infinite;
}

@keyframes iv-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------ sales list cards */

/* One card per transaction. Unprocessed ones get an amber edge -- the old
   list painted the entire row set red. */
.iv-sale {
	border: 1px solid var(--iv-border);
	border-left: 3px solid var(--iv-border);
	border-radius: var(--iv-radius);
	background: var(--iv-surface);
	margin-bottom: 12px;
}

.iv-sale-pending { border-left-color: var(--iv-warn); }

.iv-sale-head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 12px 14px;
	border-bottom: 1px solid var(--iv-border-soft);
	background: var(--iv-bg);
	border-radius: var(--iv-radius) var(--iv-radius) 0 0;
}

.iv-sale-check {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--iv-text-soft);
	white-space: nowrap;
}

.iv-sale-who strong { font-size: 13.5px; }

.iv-sale-meta {
	display: block;
	font-size: 12px;
	color: var(--iv-text-faint);
	margin-top: 2px;
}

.iv-sale-total {
	font-size: 14px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	min-width: 70px;
	text-align: right;
}

.iv-sale-line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 110px 90px;
	gap: 10px;
	align-items: center;
	padding: 10px 14px;
	font-size: 13px;
	border-bottom: 1px solid var(--iv-border-soft);
}

.iv-sale-line:last-child { border-bottom: none; }

.iv-line-amt { text-align: right; font-variant-numeric: tabular-nums; color: var(--iv-text-soft); }

/* ----------------------------------------------------------------- pager */

.iv-pager {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--iv-border-soft);
	font-size: 13px;
	color: var(--iv-text-soft);
}

.iv-pager-pages {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.iv-page-btn {
	min-width: 32px;
	padding: 6px 10px;
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius);
	background: var(--iv-surface);
	color: var(--iv-text-soft);
	font: inherit;
	text-align: center;
	cursor: pointer;
}

button.iv-page-btn:hover { border-color: var(--iv-accent); color: var(--iv-accent); }

.iv-page-current {
	background: var(--iv-accent);
	border-color: var(--iv-accent);
	color: #fff;
	font-weight: 600;
	cursor: default;
}

.iv-page-disabled { opacity: .45; cursor: default; }

.iv-page-gap { padding: 0 2px; color: var(--iv-text-faint); }

.iv-pager-size {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

.iv-pager-size label { font-size: 12px; color: var(--iv-text-faint); }

/* ---------------------------------------------------------------- tables */

/*
 * The existing pages build tables from divs with display:table-*, so those
 * class names are restyled rather than replaced.
 */
/*
 * A page sets --iv-cols for evenly sized columns, or --iv-grid for a full
 * template when the columns are of very different widths. A page that sets
 * neither gets the default, which is why the customer list -- twelve cells
 * against a default of seven -- wrapped onto two grid rows and stopped
 * lining up with its headings.
 */
.display-row,
.display-row-content {
	display: grid;
	grid-template-columns: var(--iv-grid, repeat(var(--iv-cols, 7), minmax(0, 1fr)));
	gap: 0;
	width: 100%;
	align-items: center;
}

/*
 * A safety net for genuinely narrow windows. The rows are not given
 * min-width: max-content -- that made them as wide as their longest cell,
 * so a wide table could never fit its card and always spilled out. Columns
 * are proportional instead, and long values wrap.
 */
.iv-scroll-x { overflow-x: auto; }

/* Dense tables: a step down in size, and numbers that line up. */
.iv-dense .display-cell { padding: 9px 10px; font-size: 12.5px; }
.iv-dense .display-row .display-cell { font-size: 11.5px; }

.display-row {
	background: #f8f9fa;
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius) var(--iv-radius) 0 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--iv-text-soft);
}

.display-row-content {
	background: var(--iv-surface);
	border: 1px solid var(--iv-border);
	border-top: none;
	cursor: pointer;
	transition: background .1s ease;
}

.display-row-content:last-of-type { border-radius: 0 0 var(--iv-radius) var(--iv-radius); }
.display-row-content:hover { background: var(--iv-accent-soft); }

.display-cell {
	display: block;
	padding: 11px 14px;
	min-width: 0;
	overflow-wrap: anywhere;
	font-size: 13px;
}

.display-row .display-cell { padding-top: 9px; padding-bottom: 9px; }

.display-row-spacer { display: none; }

/* A real table, for new pages. main.css opens by giving every table and
   td a solid black border; this family draws only its own soft row
   lines, so the element borders are switched off outright. */
.iv-table-wrap { overflow-x: auto; border-radius: var(--iv-radius); }

.iv-table { width: 100%; border-collapse: collapse; font-size: 13px; border: none; }

.iv-table th {
	text-align: left;
	background: #f8f9fa;
	border: none;
	border-bottom: 1px solid var(--iv-border);
	padding: 10px 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--iv-text-soft);
	white-space: nowrap;
}

.iv-table td { padding: 11px 14px; border: none; border-bottom: 1px solid var(--iv-border-soft); }
.iv-table tbody tr:hover { background: var(--iv-accent-soft); }
.iv-table tbody tr:last-child td { border-bottom: none; }
.iv-table .iv-num { text-align: right; font-variant-numeric: tabular-nums; }

.iv-empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--iv-text-faint);
	font-size: 13px;
}

/* --------------------------------------------------------------- buttons */

.iv-btn,
input[type="button"],
input[type="submit"],
button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font: inherit;
	font-size: 13px;
	font-weight: 550;
	line-height: 1;
	padding: 9px 15px;
	border-radius: var(--iv-radius);
	border: 1px solid var(--iv-border);
	background: var(--iv-surface);
	color: var(--iv-text);
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.iv-btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover { background: #f1f3f5; border-color: #cfd4d9; }

.iv-btn:disabled, button:disabled, input[type="button"]:disabled {
	opacity: .5; cursor: default;
}

/* input.iv-btn-primary is spelled out because the plain
   input[type="button"] rule above otherwise outweighs the class. */
.iv-btn-primary,
input.iv-btn-primary,
input[type="submit"],
.red-button, .red-button-content {
	background: var(--iv-accent);
	border-color: var(--iv-accent);
	color: #fff;
}

.iv-btn-primary:hover,
input.iv-btn-primary:hover,
input[type="submit"]:hover,
.red-button:hover, .red-button-content:hover {
	background: var(--iv-accent-dark);
	border-color: var(--iv-accent-dark);
}

.iv-btn-danger, input.iv-btn-danger { background: var(--iv-error); border-color: var(--iv-error); color: #fff; }
.iv-btn-danger:hover, input.iv-btn-danger:hover { background: #8f1d17; border-color: #8f1d17; }

.iv-btn-ghost, input.iv-btn-ghost { background: transparent; border-color: transparent; color: var(--iv-text-soft); }
.iv-btn-ghost:hover, input.iv-btn-ghost:hover { background: var(--iv-border-soft); }

.iv-btn-sm, input.iv-btn-sm { padding: 6px 10px; font-size: 12px; }

/* ----------------------------------------------------------------- forms */

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="date"], select, textarea {
	font: inherit;
	font-size: 13px;
	color: var(--iv-text);
	background: var(--iv-surface);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius);
	padding: 8px 10px;
	max-width: 100%;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--iv-accent);
	box-shadow: 0 0 0 3px var(--iv-accent-soft);
}

.iv-field { margin-bottom: 14px; }

.iv-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--iv-text-soft);
	margin-bottom: 5px;
}

.iv-hint {
	display: block;
	font-size: 12px;
	color: var(--iv-text-faint);
	margin-top: 4px;
}

.iv-checklist {
	max-height: 168px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius);
	padding: 8px 10px;
	background: #fcfcfd;
}

.iv-checklist label { display: block; padding: 3px 0; font-size: 13px; }

/* ---------------------------------------------------------------- alerts */

.iv-alert {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px 14px;
	border-radius: var(--iv-radius);
	border: 1px solid;
	font-size: 13px;
	margin-bottom: 16px;
}

.iv-alert strong { font-weight: 650; }

.iv-alert-success { background: var(--iv-ok-soft);    border-color: #bfe3ce; color: var(--iv-ok); }
.iv-alert-error   { background: var(--iv-error-soft); border-color: #f3c4c1; color: var(--iv-error); }
.iv-alert-warning { background: var(--iv-warn-soft);  border-color: #eddbb0; color: var(--iv-warn); }
.iv-alert-info    { background: var(--iv-info-soft);  border-color: #c3d9ef; color: var(--iv-info); }

/* --------------------------------------------------------------- badges */

.iv-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	background: var(--iv-border-soft);
	color: var(--iv-text-soft);
	white-space: nowrap;
}

.iv-badge-ok    { background: var(--iv-ok-soft);    color: var(--iv-ok); }
.iv-badge-off   { background: var(--iv-border-soft); color: var(--iv-text-faint); }
.iv-badge-warn  { background: var(--iv-warn-soft);  color: var(--iv-warn); }
.iv-badge-error { background: var(--iv-error-soft); color: var(--iv-error); }

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

/* main.css sets pointer-events:none here, which is why clicking the
   backdrop never closed the panel, and position:absolute, which leaves it
   behind once the page is scrolled. */
#background-disabler {
	display: none;
	position: fixed;
	inset: 0;
	width: auto;
	height: auto;
	pointer-events: auto;
	background: rgba(31,41,51,.45);
	z-index: 400;
}

/*
 * main.css centres this panel with negative margins sized for a fixed
 * 1000x550 box: margin-left:-500px, margin-top:-275px, plus height:550px
 * and overflow-y:scroll. Those are still in force here, so each one is
 * reset explicitly -- otherwise the transform centring is shifted 500px
 * left and 275px up, and the panel scrolls even when it has nothing to
 * scroll.
 */
#field-editor {
	display: none;
	position: fixed;
	z-index: 500;
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%);
	margin: 0;
	width: min(720px, calc(100vw - 40px));
	height: auto;
	max-height: min(88vh, 900px);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	background: var(--iv-surface);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius-lg);
	box-shadow: var(--iv-shadow-lg);
	padding: 0;
}

#field-editor-content { padding: 24px; }

#field-editor-content h3 { margin-top: 0; }

/* ------------------------------------------------------ yes/no question */

/* IV.ask() -- above the map popup (800) so an offer made when the map
   closes is never buried under its fading backdrop. */
.iv-ask-mask {
	position: fixed;
	inset: 0;
	z-index: 900;
	background: rgba(31, 41, 51, .35);
	display: flex;
	align-items: center;
	justify-content: center;
}

.iv-ask-card {
	width: min(440px, calc(100vw - 40px));
	background: var(--iv-surface);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius-lg);
	box-shadow: var(--iv-shadow-lg);
	padding: 22px 24px;
	animation: iv-toast-in .18s ease-out;
}

.iv-ask-card h3 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
}

.iv-ask-message {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--iv-text-soft);
	white-space: pre-line;
}

/* --------------------------------------------------------------- toasts */

/* Above every layer there is -- dialogs at 500, the map popup at 800,
   the seat card at 850. A toast is feedback on whatever is open, so
   nothing may cover it. */
#iv-toasts {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: min(420px, calc(100vw - 40px));
}

.iv-toast {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--iv-radius);
	background: var(--iv-surface);
	border: 1px solid var(--iv-border);
	border-left: 4px solid var(--iv-text-faint);
	box-shadow: var(--iv-shadow-lg);
	font-size: 13px;
	animation: iv-toast-in .18s ease-out;
}

.iv-toast-success { border-left-color: var(--iv-ok); }
.iv-toast-error   { border-left-color: var(--iv-error); }
.iv-toast-warning { border-left-color: var(--iv-warn); }
.iv-toast-info    { border-left-color: var(--iv-info); }

.iv-toast-close {
	margin-left: auto;
	border: none;
	background: none;
	padding: 0 2px;
	color: var(--iv-text-faint);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

#iv-busy {
	position: fixed;
	top: 16px;
	left: 50%;
	transform: translateX(-50%) translateY(-8px);
	/* Like the toasts: the loader reports on whatever is open, popups
	   included, so it sits above all of them (toasts keep the top). */
	z-index: 950;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--iv-surface);
	border: 1px solid var(--iv-border);
	box-shadow: var(--iv-shadow-lg);
	font-size: 13px;
	color: var(--iv-text-soft);
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease-out, transform .15s ease-out;
}

#iv-busy.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.iv-busy-spinner {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--iv-border);
	border-top-color: var(--iv-accent);
	animation: iv-busy-spin .7s linear infinite;
}

@keyframes iv-busy-spin {
	to { transform: rotate(360deg); }
}

@keyframes iv-toast-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.iv-toast { animation: none; }
	.iv-busy-spinner { animation: none; }
	* { transition: none !important; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
	.iv-header-inner { flex-wrap: wrap; padding: 0 14px; }
	.iv-brand { padding: 12px 0 4px; }
	#content { padding: 16px 14px 48px; }
	.screen-block { padding: 18px 16px; }

	/* The grid tables become stacked records, each cell labelled by the
	   data-label the page supplies. */
	.display-row { display: none; }
	.display-row-content {
		grid-template-columns: 1fr;
		border-radius: var(--iv-radius);
		margin-bottom: 10px;
		border-top: 1px solid var(--iv-border);
		padding: 4px 0;
	}
	.display-cell { display: flex; gap: 10px; padding: 6px 14px; }
	.display-cell::before {
		content: attr(data-label);
		flex: 0 0 40%;
		font-size: 12px;
		font-weight: 600;
		color: var(--iv-text-faint);
	}
}

/* ------------------------------------------------- legacy colour classes
 *
 * main.css carries a set of colour utilities the pages use directly:
 * .red, .green, .orange, .yellow, .blue, .purple and their light variants,
 * plus .notification for the small status flags. They were saturated
 * enough to fight with everything around them -- a lime background on
 * green text, a #FF00E9 border, a full-strength #f1c40f yellow.
 *
 * The class names stay, so no page has to change; they now resolve to the
 * same muted set the rest of the interface uses.
 */

.red, .light-red, .green, .light-green, .orange, .yellow, .light-yellow,
.blue, .light-blue, .purple, .premium, .general {
	border-radius: var(--iv-radius);
	font-weight: 600;
}

.red          { background: var(--iv-error-soft); color: var(--iv-error); }
.light-red    { background: var(--iv-error-soft); color: var(--iv-error); }
.green        { background: var(--iv-ok-soft);    color: var(--iv-ok); }
.light-green  { background: var(--iv-ok-soft);    color: var(--iv-ok); }
.orange       { background: var(--iv-warn-soft);  color: var(--iv-warn); }
.yellow       { background: var(--iv-warn-soft);  color: var(--iv-warn); }
.light-yellow { background: var(--iv-warn-soft);  color: var(--iv-warn); }
.blue         { background: var(--iv-info-soft);  color: var(--iv-info); }
.light-blue   { background: transparent;          color: inherit; }
.purple       { background: #f1ecf5;              color: #5c326d; }

.red:hover, .light-red:hover, .green:hover, .orange:hover,
.yellow:hover, .blue:hover { color: inherit; }

/* Seat pricing bands, previously a full-strength orange against white. */
.premium { background: var(--iv-warn-soft); color: var(--iv-warn); border-color: var(--iv-warn-soft); }
.general { background: var(--iv-info-soft); color: var(--iv-info); border-color: var(--iv-info-soft); }

/* The small T / R flags on the customer list: a pill, not a 50px block. */
.notification {
	display: inline-block;
	width: auto;
	min-width: 20px;
	height: auto;
	padding: 1px 7px;
	margin-right: 3px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

/* Row separators are drawn by the table styles now. */
.add-borders { border: none; }

.search-receipt {
	border-color: var(--iv-border) !important;
	background: var(--iv-accent-soft) !important;
	color: var(--iv-accent) !important;
}

/* ---- seat details card on the showing map ---- */

#seat-info-wrapper {
	position: fixed;
	top: 90px;
	right: 24px;
	width: 320px;
	max-width: calc(100vw - 48px);
	background: var(--iv-bg, #fff);
	border: 1px solid var(--iv-border, #d9d9d9);
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
	padding: 14px 16px;
	z-index: 250;
	display: none;
}

.iv-seatinfo-res {
	border-top: 1px solid var(--iv-border, #e3e3e3);
	padding: 8px 0;
	font-size: 13px;
	line-height: 1.5;
}

.iv-seatinfo-res:first-child {
	border-top: none;
	padding-top: 0;
}

/* ---- hall layout editor (hall-seating.php) ---- */

#hx-canvas {
	position: relative;
	overflow: auto;
	height: 72vh;
	min-height: 380px;
	border: 1px solid var(--iv-border);
	border-radius: 8px;
	background-color: #fdfdfd;
	touch-action: none;
}

/* The grid lives on the stage so its cells line up with the layout's
   coordinates. Each cell is exactly one seat of pitch (16px), with a
   fainter line at half a cell -- the snap points that let uneven rows
   sit staggered half a seat. */
#hx-stage {
	position: relative;
	min-width: 100%;
	min-height: 100%;
	background-image:
		linear-gradient(to right, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
		linear-gradient(to right, rgba(0, 0, 0, 0.025) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(0, 0, 0, 0.025) 1px, transparent 1px);
	background-size: 16px 16px, 16px 16px, 8px 8px, 8px 8px;
}

/* Outline rather than border+padding: the section box must add zero
   offset, so its seats land centred in the stage's grid cells. Font
   size zero for the same reason the live maps' .section uses it: the
   text strut would otherwise stretch each row's line box past the 16px
   seat pitch and push rows off the vertical grid. */
.hx-section {
	position: absolute;
	font-size: 0;
}

.hx-section:hover {
	outline: 1px dashed rgba(166, 25, 46, 0.35);
}

.hx-handle {
	position: absolute;
	top: -16px;
	left: 0;
	font-size: 9px;
	line-height: 13px;
	padding: 0 5px;
	background: var(--iv-accent);
	color: #fff;
	border-radius: 3px;
	cursor: grab;
	user-select: none;
	white-space: nowrap;
	z-index: 5;
}

.hx-align {
	display: inline-block;
	margin-left: 4px;
	padding: 0 3px;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 2px;
	cursor: pointer;
}

.hx-align:hover { background: rgba(255, 255, 255, 0.5); }

.hx-row { white-space: nowrap; }

#hx-canvas .seat { cursor: pointer; }

.hx-addseat {
	width: 10px;
	height: 10px;
	margin: 2px;
	display: inline-block;
	vertical-align: top;
	text-align: center;
	font-size: 8px;
	line-height: 10px;
	color: #b9b9b9;
	border: 1px dashed #c9c9c9;
	border-radius: 2px;
	cursor: pointer;
	user-select: none;
}

.hx-addseat:hover { color: var(--iv-accent); border-color: var(--iv-accent); }

.hx-newrow {
	margin: 2px;
	border: 1px dashed #c9c9c9;
	border-radius: 3px;
	font-size: 7px;
	line-height: 12px;
	text-align: center;
	color: #b9b9b9;
	cursor: pointer;
	user-select: none;
}

.hx-newrow:hover { color: var(--iv-accent); border-color: var(--iv-accent); }

.seat.hx-sel {
	outline: 2px solid #2f6fd0;
	outline-offset: 0;
}

.seat.hx-hidden { opacity: 0.35; }

.seat.hx-res::after {
	content: "";
	display: block;
	width: 3px;
	height: 3px;
	margin: -2px auto 0;
	border-radius: 50%;
	background: #a6192e;
}

.seat.hx-cue-left { box-shadow: -3px 0 0 0 #2f6fd0; }
.seat.hx-cue-right { box-shadow: 3px 0 0 0 #2f6fd0; }
.hx-cue-row { outline: 2px dashed #2f6fd0; }

.hx-ghost {
	position: fixed;
	z-index: 500;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	background: #2f6fd0;
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	border-radius: 9px;
	pointer-events: none;
}

.hx-marquee {
	position: fixed;
	z-index: 400;
	border: 1px dashed #2f6fd0;
	background: rgba(47, 111, 208, 0.08);
	pointer-events: none;
}

.hx-selbar { row-gap: 6px; }

/* ---- hall editor v2: active sections, context menu, graphics ---- */

.hx-section.hx-active {
	outline: 1px solid var(--iv-accent);
}

.hx-align.hx-on { background: rgba(255, 255, 255, 0.55); color: #7a0e1f; }

.hx-addrow { letter-spacing: 0; }

/* ADA seats in the editor: a blue inner ring (customer maps mark ADA
   areas with the ADA graphic instead). */
.seat.hx-ada { box-shadow: inset 0 0 0 1.5px #2f6fd0; }

/* Graphics are draggable in the editor only. */
#hx-canvas .hall-decor {
	pointer-events: auto;
	cursor: grab;
}

#hx-canvas .hall-decor:hover {
	outline: 1px dashed #2f6fd0;
	outline-offset: 2px;
}

.hx-menu {
	position: fixed;
	z-index: 900;
	min-width: 200px;
	background: var(--iv-bg, #fff);
	border: 1px solid var(--iv-border, #d9d9d9);
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
	padding: 5px;
	font-size: 13px;
}

.hx-menu-item {
	padding: 6px 10px;
	border-radius: 5px;
	cursor: pointer;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 7px;
}

.hx-menu-item:hover { background: var(--iv-accent-soft, #f6e5e8); }

.hx-menu-item .seat { cursor: pointer; }

.hx-menu-head {
	color: var(--iv-text-faint, #8a8a8a);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: default;
}

.hx-menu-head:hover { background: none; }

.hx-menu-sep {
	border-top: 1px solid var(--iv-border, #e3e3e3);
	margin: 4px 6px;
}

/* The true-centre cross of the hall canvas. */
.hx-cross {
	position: absolute;
	pointer-events: none;
	z-index: 3;
}

.hx-cross-v {
	top: 0;
	width: 0;
	border-left: 1px dashed rgba(166, 25, 46, 0.45);
}

.hx-cross-h {
	left: 0;
	height: 0;
	border-top: 1px dashed rgba(166, 25, 46, 0.45);
}

/* Section handles hang below sections that sit at the top of the hall,
   where an above-the-box handle would be clipped out of reach. */
.hx-handle.hx-handle-below {
	top: auto;
	bottom: -16px;
}

.hx-modes { display: inline-flex; gap: 4px; }

input.hx-mode-on {
	background: var(--iv-accent) !important;
	border-color: var(--iv-accent) !important;
	color: #fff !important;
}

#hx-canvas.hx-panning-mode { cursor: grab; }
#hx-canvas.hx-panning-mode .seat { cursor: grab; }