/* ==========================================================================
   Edit Event page — Tickets tab layout & promo code chips
   Kept in its own file (linked from _Host.cshtml) so Visual Studio can't
   overwrite it through an open NewEditEvent.css. The list-order rule is
   desktop/tablet only; the promo chips apply on every screen size.
   ========================================================================== */
@media (min-width: 577px) {
	/* Show the Ticket List first, then the Add New Ticket form below it */
	.event-editor-container .tk2 > .section-card:has(.tk2-dcards-wrap) {
		order: -1;
	}
}

/* ── Linked promo codes: removable chips (add form, edit popup, mobile sheets) ── */
.tk2-promo-linked {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.tk2-promo-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 4px 4px 10px;
	border-radius: 999px;
	background: #ede9fe;
	border: 1px solid #ddd6fe;
	color: #5b21b6;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
}

.tk2-promo-chip-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #6d28d9;
	cursor: pointer;
	padding: 0;
}

	.tk2-promo-chip-x:hover,
	.tk2-promo-chip-x:focus-visible {
		background: #ddd6fe;
		color: #b91c1c;
	}

.tk2-promo-clear {
	border: 0;
	background: none;
	color: #b91c1c;
	font-size: 12px;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
	padding: 4px 2px;
}

.tk2-promo-none {
	margin: 0 0 10px;
}

/* bigger tap targets on phones */
@media (max-width: 576px) {
	.tk2-promo-chip {
		font-size: 13px;
		padding: 6px 6px 6px 12px;
	}

	.tk2-promo-chip-x {
		width: 32px;
		height: 32px;
	}

	.tk2-promo-clear {
		padding: 8px 4px;
	}
}

/* ── Ticket cards: promo code indicator pill ── */
.tk2 .tk2-pill.promo {
	background: #ede9fe;
	color: #5b21b6;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── "Created and linked" note in the promo section ── */
.tk2-promo-created {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	padding: 8px 10px;
	border-radius: 8px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #15803d;
	font-size: 12.5px;
	font-weight: 700;
}

/* ── Create Promo Code modal (opens over the ticket form, desktop + mobile) ── */
.tk2-pm-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
	z-index: 1200;
}

.tk2-pm {
	position: fixed;
	z-index: 1210;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(680px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
	overflow: hidden;
}

.tk2-pm-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e2e8f0;
}

	.tk2-pm-head h3 {
		margin: 0;
		font-size: 17px;
		font-weight: 800;
		color: #1d4ed8;
		display: flex;
		align-items: center;
		gap: 8px;
	}

.tk2-pm-close {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #64748b;
	font-size: 18px;
	cursor: pointer;
}

	.tk2-pm-close:hover {
		background: #f1f5f9;
		color: #0f172a;
	}

.tk2-pm-body {
	padding: 18px 20px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.tk2-pm-event {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	margin-bottom: 16px;
	border-radius: 10px;
	background: #eef4ff;
	color: #1e3a8a;
	font-size: 13.5px;
}

.tk2-pm-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}

.tk2-pm-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: #475569;
}

.tk2-pm-field .form-control,
.tk2-pm-field .form-select {
	min-height: 42px;
}

.tk2-pm-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.tk2-pm-check {
	display: flex;
	align-items: flex-end;
}

.tk2-pm-checkrow {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px !important;
	cursor: pointer;
}

	.tk2-pm-checkrow .form-check-input {
		margin: 0;
		width: 18px;
		height: 18px;
	}

.tk2-pm-error {
	margin-top: 14px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	font-size: 13px;
	font-weight: 600;
}

.tk2-pm-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	border-top: 1px solid #e2e8f0;
	background: #f8fafc;
}

.tk2-pm-spacer {
	flex: 1;
}

.tk2-pm-link {
	border: 0;
	background: none;
	padding: 6px 0;
	color: #64748b;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.tk2-pm-btn {
	min-height: 42px;
	padding: 0 20px;
	border-radius: 9px;
	border: 1px solid #cbd5e1;
	background: #fff;
	color: #334155;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

	.tk2-pm-btn.primary {
		background: #2563eb;
		border-color: #2563eb;
		color: #fff;
	}

	.tk2-pm-btn:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

/* phones: full-height sheet, single column, big tap targets */
@media (max-width: 576px) {
	.tk2-pm {
		top: auto;
		bottom: 0;
		left: 0;
		transform: none;
		width: 100%;
		max-height: 92vh;
		border-radius: 16px 16px 0 0;
	}

	.tk2-pm-grid {
		grid-template-columns: 1fr;
	}

	.tk2-pm-field .form-control,
	.tk2-pm-field .form-select {
		min-height: 46px;
		font-size: 16px; /* stops iOS zooming into the field */
	}

	.tk2-pm-foot {
		flex-wrap: wrap;
		padding-bottom: calc(14px + env(safe-area-inset-bottom));
	}

	.tk2-pm-link {
		flex-basis: 100%;
		text-align: left;
	}

	.tk2-pm-spacer {
		display: none;
	}

	.tk2-pm-btn {
		flex: 1;
		min-height: 48px;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   Tickets tab — side-by-side layout on wide screens (like Widget & Forms)
   Left : Add New Ticket form (60%) · Right : Ticket List (40%, sticky, scrolls)
   Below 1200px it falls back to the stacked layout (list first); phones
   keep their own launcher + sheets and are untouched.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
	.event-editor-container .tk2 {
		display: grid !important;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); /* 60% form · 40% list */
		gap: 24px;
		align-items: start;
	}

		/* everything else in the tab (status notes etc.) spans both columns */
		.event-editor-container .tk2 > * {
			grid-column: 1 / -1;
		}

		/* left: Add New Ticket */
		.event-editor-container .tk2 > .section-card.tk2-desktop-only {
			grid-column: 1;
			grid-row: 1;
			min-width: 0;
		}

		/* right: Ticket List — stays in view while you work on the form */
		.event-editor-container .tk2 > .section-card:has(.tk2-dcards-wrap) {
			grid-column: 2;
			grid-row: 1;
			min-width: 0;
			position: sticky;
			top: 16px;
			max-height: calc(100vh - 32px);
			display: flex;
			flex-direction: column;
		}

			.event-editor-container .tk2 > .section-card:has(.tk2-dcards-wrap) > .card-body {
				flex: 1 1 auto;
				min-height: 0;
				overflow-y: auto;
				overscroll-behavior: contain;
			}

		/* list panel is the narrower column: one card per row, two once there is room */
		.event-editor-container .tk2 .tk2-dcards {
			grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		}

		/* an opened card (Details) keeps its full-width behaviour inside the panel */
		.event-editor-container .tk2 .tk2-dcard-details {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
}

/* ── Ticket count badge beside "Ticket List" / "Tickets": readable number ── */
.tk2 .tk2-card-header .tk2-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 24px;
	padding: 0 9px;
	margin-left: 10px;
	border-radius: 999px;
	background: #fff;
	color: #1d4ed8;
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	vertical-align: middle;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

/* ══════════════════════════════════════════════════════════════════════
   COMP TICKETS TAB — redesign to match the Tickets tab
   Left (60%): comp ticket cards · Right (40%): bulk Assign panel
   Assign + History stay full width below. Phones keep the existing
   comp-tab mobile card view (≤768px) — only the new overview is added.
   ══════════════════════════════════════════════════════════════════════ */
.cp2 {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cp2 .cp2-split {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media (min-width: 769px) {
	.cp2 {
		padding: 24px 32px;
	}

		.cp2 .cp2-split > .tab-content {
			padding: 0;
		}

		.cp2 > .section-card {
			margin: 0;
		}
}

@media (min-width: 1200px) {
	.cp2 .cp2-split {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		gap: 24px;
		align-items: start;
	}

		.cp2 .cp2-split > .tab-content,
		.cp2 .cp2-split > .cp2-assignpanel {
			min-width: 0;
		}

		/* overview stays in view while you work in the grid */
		.cp2 .cp2-split > .cp2-assignpanel {
			position: sticky;
			top: 16px;
			max-height: calc(100vh - 32px);
			display: flex;
			flex-direction: column;
		}

			.cp2 .cp2-split > .cp2-assignpanel > .card-body {
				flex: 1 1 auto;
				min-height: 0;
				overflow-y: auto;
				overscroll-behavior: contain;
			}
}

/* ── count badge ── */
.cp2 .cp2-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 24px;
	padding: 0 9px;
	margin-left: 10px;
	border-radius: 999px;
	background: #fff;
	color: #1d4ed8;
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	vertical-align: middle;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

/* ── totals strip ── */
.cp2 .cp2-totals {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: #e2e8f0;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 16px;
}

.cp2 .cp2-total {
	background: #f8fafc;
	padding: 12px 6px;
	text-align: center;
}

.cp2 .cp2-total-label,
.cp2 .cp2-stat-label {
	display: block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #94a3b8;
}

.cp2 .cp2-total-value {
	display: block;
	margin-top: 3px;
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
	font-variant-numeric: tabular-nums;
}

/* ── comp cards ── */
.cp2 .cp2-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
}

.cp2 .cp2-card {
	--cp2-tone: #16a34a;
	position: relative;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

	.cp2 .cp2-card::before {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		height: 4px;
		background: var(--cp2-tone);
	}

	.cp2 .cp2-card.tone-pending { --cp2-tone: #f59e0b; }
	.cp2 .cp2-card.tone-full { --cp2-tone: #2563eb; }

.cp2 .cp2-card-top {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 16px 14px 8px;
}

	.cp2 .cp2-card-top h4 {
		flex: 1;
		min-width: 0;
		margin: 0 !important;
		font-size: 18px !important;
		font-weight: 800 !important;
		line-height: 1.25 !important;
		color: #0b1220 !important;
		text-align: left !important;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-word;
	}

.cp2 .cp2-qty {
	flex: none;
	font-size: 17px;
	font-weight: 800;
	color: #1d4ed8;
	white-space: nowrap;
}

	.cp2 .cp2-qty small {
		font-size: 11px;
		font-weight: 700;
		color: #94a3b8;
	}

.cp2 .cp2-card-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 14px 12px;
}

	/* reuse the Tickets tab pill look inside the comp tab */
	.cp2 .cp2-card-pills .tk2-pill {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 3px 9px;
		border-radius: 999px;
		font-size: 10.5px;
		font-weight: 800;
		line-height: 1.5;
		white-space: nowrap;
	}

	.cp2 .cp2-card-pills .tk2-pill.hid { background: #e2e8f0; color: #475569; }
	.cp2 .cp2-card-pills .tk2-pill.soon { background: #fef3c7; color: #92400e; }
	.cp2 .cp2-card-pills .tk2-pill.live { background: #dcfce7; color: #166534; }

.cp2 .cp2-card-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: #e2e8f0;
	border-top: 1px solid #e2e8f0;
	border-bottom: 1px solid #e2e8f0;
}

	.cp2 .cp2-card-stats > div {
		background: #fafcff;
		padding: 10px 6px;
		text-align: center;
	}

.cp2 .cp2-stat-value {
	display: block;
	margin-top: 3px;
	font-size: 15px;
	font-weight: 800;
	color: #0f172a;
}

.cp2 .cp2-card-progress {
	padding: 12px 14px 4px;
}

.cp2 .cp2-bar {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: #e2e8f0;
	overflow: hidden;
}

	.cp2 .cp2-bar > i {
		display: block;
		height: 100%;
		border-radius: 999px;
		background: #2563eb;
		transition: width 0.3s ease;
	}

.cp2 .cp2-bar-note {
	display: block;
	margin-top: 6px;
	text-align: center;
	font-size: 10.5px;
	font-weight: 800;
	color: #94a3b8;
}

.cp2 .cp2-card-actions {
	display: flex;
	gap: 8px;
	padding: 12px 14px 14px;
}

.cp2 .cp2-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 12px;
	border-radius: 8px;
	border: 1px solid #cbd5e1;
	background: #fff;
	color: #475569;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

	.cp2 .cp2-btn:hover:not(:disabled) {
		border-color: #2563eb;
		color: #2563eb;
	}

	.cp2 .cp2-btn.primary {
		background: #2563eb;
		border-color: #2563eb;
		color: #fff;
	}

		.cp2 .cp2-btn.primary:hover:not(:disabled) {
			background: #1d4ed8;
			color: #fff;
		}

	.cp2 .cp2-btn.icon {
		flex: none;
		width: 40px;
		padding: 0;
	}

	.cp2 .cp2-btn.danger:hover:not(:disabled) {
		border-color: #dc2626;
		color: #dc2626;
		background: #fef2f2;
	}

	.cp2 .cp2-btn:disabled {
		opacity: 0.45;
		cursor: not-allowed;
	}

.cp2 .cp2-empty {
	text-align: center;
	padding: 28px 16px;
	color: #94a3b8;
}

	.cp2 .cp2-empty i {
		display: block;
		font-size: 30px;
		color: #cbd5e1;
		margin-bottom: 10px;
	}

/* phones: 2×2 totals, bigger tap targets */
@media (max-width: 576px) {
	.cp2 .cp2-totals {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cp2 .cp2-cards {
		grid-template-columns: 1fr;
	}

	.cp2 .cp2-btn {
		min-height: 46px;
		font-size: 13.5px;
	}

	.cp2 .cp2-btn.icon {
		width: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp2 .cp2-bar > i {
		transition: none;
	}
}

/* ── comp grid lives off-screen; its popup edit form and delete confirm still work ── */
.cp2 .cp2-grid-offscreen {
	position: absolute !important;
	left: -100000px !important;
	top: 0 !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	/* no pointer-events/transform here, so the popup stays clickable */
}

.cp2-editform {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 4px 2px;
}

	.cp2-editform label {
		display: block;
		margin-bottom: 6px;
		font-size: 12.5px;
		font-weight: 700;
		color: #475569;
	}

/* ── bulk assign panel ── */
.cp2 .cp2-bulk {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cp2 .cp2-bulk-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: #475569;
}

.cp2 .cp2-bulk-emails {
	min-height: 120px;
	font-size: 14px;
	line-height: 1.5;
	resize: vertical;
}

.cp2 .cp2-bulk-qty input {
	max-width: 140px;
}

.cp2 .cp2-help {
	margin: 6px 0 0;
	font-size: 11.5px;
	font-weight: 600;
	color: #94a3b8;
}

.cp2 .cp2-bulk-send {
	flex: none;
	min-height: 48px;
	font-size: 14px;
}

.cp2 .cp2-bulk-status {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
}

	.cp2 .cp2-bulk-status.ok {
		background: #f0fdf4;
		border: 1px solid #bbf7d0;
		color: #15803d;
	}

	.cp2 .cp2-bulk-status.bad {
		background: #fef2f2;
		border: 1px solid #fecaca;
		color: #b91c1c;
	}

.cp2 .cp2-bulk-log {
	margin: 0;
	padding-left: 18px;
	font-size: 12.5px;
	color: #475569;
	max-height: 180px;
	overflow-y: auto;
}

	.cp2 .cp2-bulk-log li {
		margin-bottom: 4px;
	}

@media (max-width: 576px) {
	.cp2 .cp2-bulk-emails {
		font-size: 16px; /* stops iOS zooming in */
	}

	.cp2 .cp2-bulk-qty input {
		max-width: 100%;
		font-size: 16px;
		min-height: 46px;
	}
}

/* ── collapsible Comp Ticket Records / History cards ── */
.cp2 .cp2-foldhead {
	position: relative;
	cursor: pointer;
	user-select: none;
	padding-right: 52px;
}

	.cp2 .cp2-foldhead:hover {
		filter: brightness(1.05);
	}

.cp2 .cp2-foldchev {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%) rotate(0deg);
	color: #fff;
	font-size: 16px;
	transition: transform 0.2s ease;
}

.cp2 .cp2-foldcard.collapsed > .card-body {
	display: none;
}

.cp2 .cp2-foldcard.collapsed .cp2-foldchev {
	transform: translateY(-50%) rotate(-90deg);
}

/* ── day pill: never cut the wording off ── */
.cp2 .cp2-card-pills .tk2-pill.cp2-pill-day {
	max-width: 100%;
	white-space: normal;
	text-align: left;
	line-height: 1.35;
	align-items: flex-start;
}

	.cp2 .cp2-card-pills .tk2-pill.cp2-pill-day i {
		margin-top: 2px;
	}

@media (prefers-reduced-motion: reduce) {
	.cp2 .cp2-foldchev {
		transition: none;
	}
}