.tableau-builder-head {
	align-items: flex-end;
	display: flex;
	gap: 30px;
	justify-content: space-between;
}

.tableau-builder-head > div:first-child {
	max-width: 650px;
}

.tableau-head-actions {
	display: flex;
	flex: 0 0 auto;
	gap: 9px;
}

.tableau-button,
.tableau-small-button,
.tableau-text-button,
.tableau-palettes button {
	font-family: Raleway, Arial, Helvetica, sans-serif;
}

.tableau-button {
	border-radius: 5px;
	cursor: pointer;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.2;
	min-height: 42px;
	padding: 10px 14px;
}

.tableau-button:disabled {
	cursor: default;
	opacity: .45;
}

.tableau-button-primary {
	background: #bc252b;
	border: 1px solid #9f1e23;
	color: #fff;
}

.tableau-button-light {
	background: #fff;
	border: 1px solid #adb8b5;
	color: #40545a;
}

.tableau-button-full {
	width: 100%;
}

.tableau-workspace {
	align-items: start;
	display: grid;
	gap: 25px;
	grid-template-columns: 430px minmax(0, 1fr);
}

.tableau-controls {
	background: #fbfaf8;
	border: 1px solid #dfe2df;
	border-radius: 7px;
	box-shadow: 0 2px 9px rgba(48, 61, 65, .06);
	overflow: hidden;
}

.tableau-control-section {
	border-bottom: 1px solid #e2e5e2;
	padding: 22px;
}

.tableau-section-title,
.tableau-section-title > div {
	align-items: center;
	display: flex;
}

.tableau-section-title {
	margin-bottom: 16px;
}

.tableau-section-title-action {
	justify-content: space-between;
}

.tableau-section-title > span,
.tableau-section-title > div > span {
	align-items: center;
	background: #7b8568;
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	font-size: 12px;
	font-weight: bold;
	height: 25px;
	justify-content: center;
	margin-right: 8px;
	width: 25px;
}

.tableau-section-title h3 {
	color: #39494e;
	font-size: 15px;
	margin: 0;
}

.tableau-fields {
	display: grid;
	gap: 13px 11px;
	grid-template-columns: 1fr 1fr;
}

.tableau-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tableau-control-section > .tableau-field + .tableau-field {
	margin-top: 13px;
}

.tableau-field-wide {
	grid-column: 1 / -1;
}

.tableau-field label,
.tableau-table-setting label {
	color: #56666c;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.3;
	text-transform: uppercase;
}

.tableau-field input,
.tableau-field textarea,
.tableau-table-setting input,
.tableau-table-setting select {
	background: #fff;
	border: 1px solid #cbd3d2;
	border-radius: 5px;
	box-shadow: inset 0 1px 2px rgba(39, 50, 55, .03);
	color: #26383f;
	font: 15px/1.45 Raleway, Arial, Helvetica, sans-serif;
	padding: 10px 11px;
	text-align: left;
	width: 100%;
}

.tableau-field input:focus,
.tableau-field textarea:focus,
.tableau-table-setting input:focus,
.tableau-table-setting select:focus {
	border-color: #7b8568;
	box-shadow: 0 0 0 3px rgba(123, 133, 104, .14);
	outline: 0;
}

.tableau-field textarea {
	min-height: 82px;
	resize: vertical;
}

.tableau-help {
	color: #76848a;
	font-size: 11px;
	line-height: 1.4;
}

.tableau-guest-summary {
	align-items: center;
	display: flex;
	font-size: 11px;
	justify-content: space-between;
	margin: 14px 0 9px;
}

.tableau-text-button {
	background: transparent;
	border: 0;
	color: #7e5558;
	cursor: pointer;
	font-size: 10px;
	padding: 3px 0;
	text-decoration: underline;
}

.tableau-guest-directory {
	display: grid;
	gap: 6px;
	max-height: 155px;
	overflow: auto;
}

.tableau-directory-item {
	align-items: center;
	background: #fff;
	border: 1px solid #d3d9d7;
	border-radius: 3px;
	color: #405158;
	display: grid;
	font-size: 10px;
	gap: 5px;
	grid-template-columns: minmax(0, 1fr) auto 20px;
	padding: 5px 5px 5px 8px;
	width: 100%;
}

.tableau-directory-item input {
	appearance: none;
	background: transparent;
	border: 0;
	color: #405158;
	font: 11px/1.35 Raleway, Arial, Helvetica, sans-serif;
	min-width: 0;
	overflow: hidden;
	padding: 2px 0;
	text-overflow: ellipsis;
	width: 100%;
	white-space: nowrap;
}

.tableau-directory-item input:focus {
	box-shadow: inset 0 -1px #7b8568;
	outline: 0;
}

.tableau-directory-item small {
	color: #879196;
	font-size: 9px;
}

.tableau-directory-item button,
.tableau-table-editor-row > button {
	background: transparent;
	border: 0;
	color: #8c5c60;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 1px 3px 3px;
}

.tableau-small-button {
	background: #fff;
	border: 1px solid #aeb8b4;
	border-radius: 4px;
	color: #40545a;
	cursor: pointer;
	font-size: 10px;
	font-weight: bold;
	padding: 7px 9px;
}

.tableau-table-editor {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.tableau-table-editor-row {
	align-items: end;
	background: #f3f4f1;
	border: 1px solid #dde1dc;
	border-radius: 5px;
	display: grid;
	gap: 7px;
	grid-template-columns: minmax(0, 1fr) 68px 82px 24px;
	padding: 9px;
}

.tableau-table-setting {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.tableau-table-setting input,
.tableau-table-setting select {
	font-size: 11px;
	padding: 7px;
}

.tableau-danger-zone {
	padding: 12px 20px 15px;
	text-align: center;
}

.tableau-preview-wrap {
	min-width: 0;
	position: sticky;
	top: 16px;
}

.tableau-preview-toolbar {
	align-items: center;
	background: #34474b;
	border-radius: 7px 7px 0 0;
	color: #fff;
	display: flex;
	gap: 20px;
	justify-content: space-between;
	padding: 9px 12px 9px 15px;
}

.tableau-preview-heading {
	display: flex;
	flex-direction: column;
}

.tableau-preview-heading strong {
	font-size: 12px;
}

.tableau-preview-heading span {
	color: #ccd6d3;
	font-size: 9px;
	margin-top: 2px;
}

.tableau-palettes {
	display: flex;
	gap: 5px;
}

.tableau-palettes button {
	align-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #e4e9e7;
	cursor: pointer;
	display: flex;
	font-size: 9px;
	gap: 5px;
	padding: 5px 7px;
}

.tableau-palettes button.is-selected {
	background: #fff;
	color: #34474b;
}

.tableau-swatch {
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 50%;
	display: block;
	height: 13px;
	width: 13px;
}

.tableau-swatch-olive { background: #a5ad8d; }
.tableau-swatch-rose { background: #d8b3b7; }
.tableau-swatch-blue { background: #9fb8c1; }

.tableau-canvas {
	--paper: #fdfbf5;
	--accent: #747955;
	--line: #ddd9c8;
	background: var(--paper);
	border: 1px solid #e1ddd1;
	border-radius: 0 0 7px 7px;
	box-shadow: 0 4px 18px rgba(42, 53, 57, .12);
	color: #34393a;
	font-family: "Palatino Linotype", Palatino, Georgia, serif;
	min-height: 640px;
	padding: 48px 38px 30px;
	position: relative;
	text-align: center;
}

.tableau-canvas::before {
	border-top: 1px solid var(--line);
	content: "";
	left: 20px;
	position: absolute;
	right: 20px;
	top: 18px;
}

.tableau-canvas[data-palette="rose"] {
	--paper: #fff9f8;
	--accent: #8d5962;
	--line: #ead4d7;
}

.tableau-canvas[data-palette="blue"] {
	--paper: #f7fafb;
	--accent: #4f7180;
	--line: #d2e0e4;
}

.tableau-canvas-head > span {
	color: var(--accent);
	font-family: Raleway, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	letter-spacing: .15em;
	text-transform: uppercase;
}

#content .tableau-canvas-head h2 {
	color: #303637;
	font-family: "Palatino Linotype", Palatino, Georgia, serif;
	font-size: 39px;
	font-weight: normal;
	line-height: 1.1;
	margin: 13px 0 11px;
	text-transform: none;
}

.tableau-ornament {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 0 auto 15px;
	max-width: 140px;
}

.tableau-ornament i {
	background: var(--line);
	height: 1px;
	width: 48px;
}

.tableau-ornament b {
	border: 1px solid var(--accent);
	height: 7px;
	transform: rotate(45deg);
	width: 7px;
}

#content .tableau-canvas-head p {
	color: #697170;
	font: 11px Raleway, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

.tableau-canvas-head em {
	color: var(--accent);
	font-style: normal;
	margin: 0 8px;
}

.tableau-table-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 38px;
}

.tableau-table-card {
	background: rgba(255, 255, 255, .38);
	border: 1px solid var(--line);
	border-radius: 3px;
	cursor: pointer;
	min-height: 150px;
	padding: 18px 13px 13px;
	position: relative;
	transition: border-color .15s, box-shadow .15s;
}

.tableau-table-card.is-drop-target,
.tableau-table-card:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
	outline: 0;
}

.tableau-table-card.is-over-capacity {
	border-color: #b74b51;
}

.tableau-table-card[data-shape="round"]::before {
	border: 1px solid var(--line);
	border-radius: 50%;
	content: "";
	height: 30px;
	left: 50%;
	position: absolute;
	top: -16px;
	transform: translateX(-50%);
	width: 30px;
}

.tableau-table-card[data-shape="long"]::before {
	border: 1px solid var(--line);
	content: "";
	height: 12px;
	left: 50%;
	position: absolute;
	top: -7px;
	transform: translateX(-50%);
	width: 50px;
}

.tableau-table-card h3 {
	color: var(--accent);
	font: 700 10px Raleway, Arial, Helvetica, sans-serif;
	letter-spacing: .08em;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.tableau-capacity {
	color: #7c8382;
	display: block;
	font: 9px Raleway, Arial, Helvetica, sans-serif;
	margin-bottom: 11px;
}

.tableau-table-card.is-over-capacity .tableau-capacity {
	color: #a43239;
	font-weight: bold;
}

.tableau-table-guests {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-height: 55px;
}

.tableau-guest-chip {
	align-items: center;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, .06);
	color: #424849;
	cursor: grab;
	display: flex;
	font-family: "Palatino Linotype", Palatino, Georgia, serif;
	font-size: 12px;
	gap: 5px;
	justify-content: space-between;
	line-height: 1.25;
	min-height: 25px;
	padding: 3px 2px 5px;
	text-align: left;
	width: 100%;
}

.tableau-guest-chip span {
	overflow-wrap: anywhere;
}

.tableau-guest-chip small {
	color: #8a5a5e;
	font-family: Arial, sans-serif;
	font-size: 14px;
}

.tableau-guest-chip.is-selected {
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent);
	font-weight: bold;
}

.tableau-guest-select,
.tableau-guest-unassign {
	appearance: none;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	margin: 0;
	padding: 0;
}

.tableau-guest-select {
	flex: 1 1 auto;
	font: inherit;
	line-height: inherit;
	min-width: 0;
	overflow-wrap: anywhere;
	text-align: left;
}

.tableau-guest-select:focus-visible,
.tableau-guest-unassign:focus-visible {
	outline: 1px dotted var(--accent);
	outline-offset: 2px;
}

.tableau-guest-unassign {
	color: #8a5a5e;
	flex: 0 0 auto;
	font: 14px/1 Arial, Helvetica, sans-serif;
	padding: 1px 2px;
}

.tableau-empty {
	color: #89908d;
	font: italic 10px Raleway, Arial, Helvetica, sans-serif;
	margin: 13px 0;
}

.tableau-canvas footer {
	border-top: 1px solid var(--line);
	color: var(--accent);
	font-size: 11px;
	font-style: italic;
	margin-top: 34px;
	padding-top: 19px;
}

.tableau-unassigned {
	background: #f5f6f4;
	border: 1px dashed #bcc5c1;
	border-radius: 5px;
	display: grid;
	gap: 12px;
	grid-template-columns: 175px minmax(0, 1fr);
	margin-top: 14px;
	min-height: 82px;
	padding: 14px;
}

.tableau-unassigned.is-drop-target,
.tableau-unassigned:focus {
	border-color: #667970;
	box-shadow: 0 0 0 3px rgba(102, 121, 112, .12);
	outline: 0;
}

.tableau-unassigned > div:first-child {
	display: flex;
	flex-direction: column;
}

.tableau-unassigned strong {
	color: #405158;
	font-size: 11px;
}

.tableau-unassigned > div:first-child span {
	color: #76848a;
	font-size: 9px;
	line-height: 1.4;
	margin-top: 3px;
}

.tableau-unassigned-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tableau-unassigned-list .tableau-guest-chip {
	background: #fff;
	border: 1px solid #d2d8d5;
	border-radius: 3px;
	font-family: Raleway, Arial, Helvetica, sans-serif;
	font-size: 10px;
	min-height: 30px;
	padding: 6px 7px;
	width: auto;
}

.tableau-selection-status {
	color: #51676e;
	font-size: 11px;
	min-height: 20px;
	padding: 8px 2px 0;
}

.tableau-bottom-actions {
	align-items: center;
	display: flex;
	justify-content: flex-end;
	margin-top: 18px;
}

#content .tableau-status {
	color: #5f6e73;
	font-size: 11px;
	margin-right: 14px;
	padding: 0;
}

.tableau-print {
	display: none;
}

@media (max-width: 1240px) {
	.tableau-workspace {
		grid-template-columns: 390px minmax(0, 1fr);
	}

	.tableau-table-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 960px) {
	.tableau-workspace {
		grid-template-columns: 1fr;
	}

	.tableau-preview-wrap {
		position: static;
	}
}

@media (max-width: 620px) {
	.tableau-builder {
		margin-top: 27px;
	}

	.tableau-builder-head {
		align-items: stretch;
		flex-direction: column;
		gap: 14px;
	}

	.tableau-head-actions {
		display: grid;
		grid-template-columns: 1fr 1.4fr;
	}

	.tableau-fields,
	.tableau-table-grid {
		grid-template-columns: 1fr;
	}

	.tableau-control-section {
		padding: 18px 14px;
	}

	.tableau-table-editor-row {
		grid-template-columns: minmax(0, 1fr) 62px 73px 22px;
		padding: 8px 6px;
	}

	.tableau-preview-toolbar {
		align-items: stretch;
		flex-direction: column;
		gap: 8px;
	}

	.tableau-palettes button {
		flex: 1;
		justify-content: center;
	}

	.tableau-canvas {
		min-height: 480px;
		padding: 42px 17px 26px;
	}

	.tableau-table-grid {
		gap: 26px;
	}

	.tableau-table-card {
		min-height: 110px;
	}

	#content .tableau-canvas-head h2 {
		font-size: 32px;
	}

	.tableau-unassigned {
		grid-template-columns: 1fr;
	}

	.tableau-bottom-actions {
		align-items: stretch;
		flex-direction: column;
		gap: 8px;
	}

	#content .tableau-status {
		margin: 0;
	}
}

@media print {
	@page {
		margin: 10mm;
		size: A4 landscape;
	}

	body * {
		visibility: hidden !important;
	}

	body,
	html {
		background: #fff !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.tableau-print,
	.tableau-print * {
		visibility: visible !important;
	}

	.tableau-print {
		display: block !important;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.tableau-print-page {
		--print-accent: #747955;
		--print-line: #d9d8cd;
		color: #303536;
		font-family: "Palatino Linotype", Palatino, Georgia, serif;
		min-height: 185mm;
		padding: 8mm;
		text-align: center;
	}

	.tableau-print-page[data-palette="rose"] {
		--print-accent: #8d5962;
		--print-line: #e5d2d4;
	}

	.tableau-print-page[data-palette="blue"] {
		--print-accent: #4f7180;
		--print-line: #cfdee2;
	}

	.tableau-print-head {
		border-bottom: 1px solid var(--print-line);
		margin-bottom: 8mm;
		padding-bottom: 6mm;
	}

	.tableau-print-head small {
		color: var(--print-accent);
		font: 700 8pt Arial, sans-serif;
		letter-spacing: .16em;
		text-transform: uppercase;
	}

	.tableau-print-title {
		font-size: 28pt;
		font-weight: normal;
		line-height: 1.1;
		margin: 3mm 0 2mm;
	}

	.tableau-print-head p {
		color: #646b6a;
		font: 9pt Arial, sans-serif;
		margin: 0;
	}

	.tableau-print-grid {
		display: grid;
		gap: 5mm;
		grid-template-columns: repeat(4, 1fr);
	}

	.tableau-print-table {
		border: 1px solid var(--print-line);
		break-inside: avoid;
		min-height: 38mm;
		padding: 5mm 4mm;
	}

	.tableau-print-table h2 {
		color: var(--print-accent);
		font: 700 9pt Arial, sans-serif;
		letter-spacing: .1em;
		margin: 0 0 3mm;
		text-transform: uppercase;
	}

	.tableau-print-table ol {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.tableau-print-table li {
		font-size: 9pt;
		line-height: 1.35;
		padding: .7mm 0;
	}

	.tableau-print-footer {
		color: var(--print-accent);
		font-size: 9pt;
		font-style: italic;
		margin-top: 7mm;
	}
}