/* Flat Booking Manager — Frontend styles */

.fbmf-wrap {
	--fbmf-available: #10b981;
	--fbmf-available-bg: #ecfdf5;
	--fbmf-available-border: #6ee7b7;
	--fbmf-hold: #f59e0b;
	--fbmf-hold-bg: #fffbeb;
	--fbmf-hold-border: #fcd34d;
	--fbmf-booked: #ef4444;
	--fbmf-booked-bg: #fef2f2;
	--fbmf-booked-border: #fca5a5;
	--fbmf-ink: #1f2937;
	--fbmf-muted: #6b7280;
	--fbmf-border: #e5e7eb;

	max-width: 1200px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.fbmf-header { text-align: center; margin-bottom: 18px; }
.fbmf-header h2 { font-size: 26px; color: var(--fbmf-ink); margin-bottom: 6px; }
.fbmf-desc { color: var(--fbmf-muted); max-width: 640px; margin: 0 auto; }

.fbmf-stats-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 20px;
}
.fbmf-stat-box {
	background: #fff;
	border: 1px solid var(--fbmf-border);
	border-radius: 14px;
	padding: 16px 12px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(16,24,40,.05);
	transition: transform .15s ease, box-shadow .15s ease;
}
.fbmf-stat-box:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16,24,40,.08); }
.fbmf-stat-box strong { display: block; font-size: 26px; line-height: 1.2; color: var(--fbmf-ink); font-weight: 700; }
.fbmf-stat-box span { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--fbmf-muted); }

.fbmf-stat-total { background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 65%); border-color: #e0e7ff; }
.fbmf-stat-available { background: linear-gradient(135deg, var(--fbmf-available-bg) 0%, #ffffff 65%); }
.fbmf-stat-available strong { color: #047857; }
.fbmf-stat-hold { background: linear-gradient(135deg, var(--fbmf-hold-bg) 0%, #ffffff 65%); }
.fbmf-stat-hold strong { color: #b45309; }
.fbmf-stat-booked { background: linear-gradient(135deg, var(--fbmf-booked-bg) 0%, #ffffff 65%); }
.fbmf-stat-booked strong { color: #b91c1c; }

.fbmf-legend {
	display: flex; justify-content: center; gap: 22px;
	margin: 18px 0 26px;
	font-size: 14px; color: var(--fbmf-ink);
}
.fbmf-legend-item { display: flex; align-items: center; gap: 6px; }
.fbmf-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.fbmf-dot-available { background: var(--fbmf-available); }
.fbmf-dot-hold { background: var(--fbmf-hold); }
.fbmf-dot-booked { background: var(--fbmf-booked); }

/* Building shape: one floor per row, stacked top to bottom */
.fbmf-building {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--fbmf-border);
	border-radius: 18px;
	padding: 20px;
	box-shadow: 0 4px 16px rgba(16,24,40,.05);
}

.fbmf-floor-row {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid var(--fbmf-border);
	border-radius: 12px;
	padding: 12px 14px;
	background: #fafafa;
}

.fbmf-floor-title {
	flex: 0 0 auto;
	max-width: 220px;
	min-width: 90px;
	font-size: 11px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: .02em;
	color: var(--fbmf-muted);
	border-right: 1px dashed var(--fbmf-border);
	padding-right: 12px;
	word-break: break-word;
	line-height: 1.3;
}

.fbmf-flat-strip { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 8px; }

.fbmf-flat {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 1.5px solid var(--fbmf-available-border);
	background: var(--fbmf-available-bg);
	color: #065f46;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 600;
	transition: transform .12s ease, box-shadow .12s ease;
	cursor: default;
	flex: 0 0 auto;
	min-width: 90px;
}
.fbmf-flat:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(16,24,40,.08); }

.fbmf-flat-code { font-weight: 700; }
.fbmf-flat-side { font-weight: 500; font-size: 11px; opacity: .8; text-transform: capitalize; }

.fbmf-flat-hold { background: var(--fbmf-hold-bg); border-color: var(--fbmf-hold-border); color: #92400e; }
.fbmf-flat-booked { background: var(--fbmf-booked-bg); border-color: var(--fbmf-booked-border); color: #991b1b; cursor: not-allowed; }

@media (max-width: 700px) {
	.fbmf-floor-row { flex-direction: column; align-items: stretch; }
	.fbmf-floor-title { border-right: none; border-bottom: 1px dashed var(--fbmf-border); padding-right: 0; padding-bottom: 6px; max-width: none; }
	.fbmf-stats-bar { grid-template-columns: repeat(2, 1fr); }
}