/**
 * Reservation Manager — floor plan.
 *
 * Shared by the admin editor, the service view and the guest picker.
 */

.resm-fp-canvas {
	position: relative;
	max-width: 100%;
	overflow: hidden;
	background-color: #f6f7f7;
	background-image:
		linear-gradient( to right, rgba( 0, 0, 0, 0.05 ) 1px, transparent 1px ),
		linear-gradient( to bottom, rgba( 0, 0, 0, 0.05 ) 1px, transparent 1px );
	background-size: 20px 20px;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	touch-action: none;
}

.resm-fp-unit {
	position: absolute;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	box-sizing: border-box;
}

.resm-fp-table {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	box-sizing: border-box;
	background-color: #fff;
	border: 2px solid #8c8f94;
	color: #1f2933;
	font-family: inherit;
	font-size: 12px;
	line-height: 1.1;
	text-align: center;
	overflow: hidden;
}

/*
 * Chairs live on the unit, not the table body, because the body clips its
 * overflow — a chair drawn inside it would be cut off at the table edge.
 */
.resm-fp-chair {
	position: absolute;
	background-color: #c3c4c7;
	border-radius: 3px 3px 5px 5px;
	box-shadow: inset 0 -2px 0 rgba( 0, 0, 0, 0.08 );
	pointer-events: none;
}

.resm-fp-taken .resm-fp-chair {
	background-color: #9ca3af;
}

.resm-fp-shape-round {
	border-radius: 50%;
}

.resm-fp-shape-square,
.resm-fp-shape-rect {
	border-radius: 6px;
}

.resm-fp-label {
	font-weight: 600;
	max-width: 100%;
	padding: 0 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.resm-fp-seats {
	font-size: 10px;
	opacity: 0.7;
}

.resm-fp-badge {
	position: absolute;
	top: 2px;
	right: 4px;
	font-size: 9px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.4 );
}

/* The occasion, in the admin service panel. */
.resm-fp-occasion-note {
	margin: 6px 0 0;
	padding: 6px 8px;
	background: #fef3c7;
	border-left: 4px solid #b45309;
	border-radius: 4px;
	color: #7c2d12;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Marks a table where at least one of the day's bookings has an occasion. */
.resm-fp-occasion {
	position: absolute;
	top: 2px;
	left: 4px;
	font-size: 12px;
	line-height: 1;
	color: #fde047;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.55 );
}

.resm-fp-inactive {
	opacity: 0.45;
	border-style: dashed;
}

.resm-fp-taken .resm-fp-table {
	color: #fff;
}

.resm-fp-taken .resm-fp-seats {
	opacity: 0.85;
}

/* Editor */

.resm-fp-mode-edit .resm-fp-unit {
	cursor: grab;
	user-select: none;
	touch-action: none;
}

.resm-fp-dragging {
	cursor: grabbing;
	z-index: 5;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.25 );
}

.resm-fp-resize {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 14px;
	height: 14px;
	background: #2271b1;
	border-radius: 3px 0 6px 0;
	cursor: nwse-resize;
}

.resm-fp-selected .resm-fp-table {
	border-color: #2271b1;
	box-shadow: 0 0 0 3px rgba( 34, 113, 177, 0.3 );
}

/* Guest picker */

.resm-fp-mode-pick .resm-fp-unit {
	cursor: pointer;
	transition: transform 0.12s ease;
}

.resm-fp-free .resm-fp-table {
	border-color: #1e7b34;
}

.resm-fp-free:hover .resm-fp-table {
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.18 );
	background-color: #f0fdf4;
}

/*
 * Empty, but the wrong size for the party. Shown to staff only, and still
 * tappable: two four-tops pushed together seat six, and only the person
 * standing in the room can decide that.
 */
.resm-fp-misfit .resm-fp-table {
	border-style: dashed;
	border-color: #b45309;
}

.resm-fp-unavailable {
	opacity: 0.35;
	cursor: not-allowed;
}

.resm-fp-empty {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	transform: translate( -50%, -50% );
	color: #646970;
	font-size: 13px;
}

/* Admin chrome around the canvas */

.resm-fp-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 16px 0;
}

.resm-fp-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px;
}

.resm-fp-stage {
	flex: 1 1 640px;
	min-width: 0;
	overflow: auto;
}

.resm-fp-panel {
	flex: 0 0 260px;
	padding: 16px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
}

.resm-fp-panel h3 {
	margin-top: 0;
}

.resm-fp-panel label {
	display: block;
	margin: 0 0 4px;
	font-weight: 600;
	font-size: 12px;
}

.resm-fp-panel select,
.resm-fp-panel input {
	width: 100%;
	margin-bottom: 12px;
}

.resm-fp-hint {
	color: #646970;
	font-size: 12px;
}

.resm-fp-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 12px 0;
	font-size: 12px;
}

.resm-fp-legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.resm-fp-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
}

/* Area management */

.resm-fp-areas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 12px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
}

.resm-fp-areas label {
	font-size: 12px;
	font-weight: 600;
	margin: 0;
}

.resm-fp-areas input[type="number"] {
	width: 92px;
}

.resm-fp-areas input[type="text"] {
	width: 160px;
}

.resm-fp-sep {
	width: 1px;
	height: 24px;
	background: #dcdcde;
	margin: 0 4px;
}