[hidden] { display: none !important; }

.arb-admin-wrap .arb-admin-form,
.arb-admin-wrap .arb-admin-filter {
	background: #fff;
	border: 1px solid #dcdcde;
	padding: 16px;
	border-radius: 10px;
	margin: 16px 0;
}

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

.arb-form-grid p {
	margin: 0;
}

.arb-form-grid input,
.arb-form-grid select,
.arb-form-grid textarea {
	width: 100%;
}

.arb-inline-filter {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.arb-table th,
.arb-table td {
	vertical-align: middle;
}

@media (max-width: 900px) {
	.arb-form-grid {
		grid-template-columns: 1fr;
	}
}


.arb-stat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 12px 0 18px;
}

.arb-stat-card,
.arb-editor-card {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.arb-stat-label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #64748b;
	margin-bottom: 8px;
}

.arb-stat-card strong {
	font-size: 24px;
	line-height: 1;
}

.arb-editor-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.arb-editor-head h2 {
	margin: 0;
}

@media (max-width: 1100px) {
	.arb-stat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.arb-stat-grid {
		grid-template-columns: 1fr;
	}
}


.arb-audit-panel { margin-top: 18px; border-top: 1px solid #e5e7eb; padding-top: 16px; }
.arb-audit-list { display: grid; gap: 10px; }
.arb-audit-item { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.arb-timeline { display: grid; gap: 16px; }
.arb-time-group { display: grid; grid-template-columns: 100px 1fr; gap: 14px; align-items: start; }
.arb-time-label { font-weight: 700; padding-top: 10px; }
.arb-time-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.arb-time-card { background: #fff; border: 1px solid #dcdcde; border-left: 4px solid #2271b1; border-radius: 12px; padding: 12px; display: grid; gap: 6px; }
.arb-status-cancelled { opacity: .75; border-left-color: #b32d2e; }
.arb-status-seated { border-left-color: #00a32a; }
.arb-status-completed { border-left-color: #4f46e5; }
.arb-status-no_show { border-left-color: #dba617; }

@media (max-width: 900px) {
	.arb-time-group { grid-template-columns: 1fr; }
}


body.arb-modal-open {
	overflow: hidden;
}

.arb-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100000;
}

.arb-modal-card {
	width: min(980px, 100%);
	max-height: 90vh;
	overflow: auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
	border: 1px solid #dcdcde;
}

.arb-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid #e5e7eb;
}

.arb-modal-head h2 {
	margin: 0;
}

.arb-modal-body {
	padding: 20px;
	display: grid;
	gap: 16px;
}

.arb-modal-error {
	padding: 12px 14px;
	border-radius: 10px;
	background: #fff1f2;
	border: 1px solid #fecdd3;
	color: #9f1239;
}

.arb-modal-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.arb-modal-status {
	color: #475569;
	font-weight: 600;
}

.arb-audit-main {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	width: 100%;
}

.arb-audit-diff {
	width: 100%;
	display: grid;
	gap: 6px;
	margin-top: 8px;
}

.arb-audit-diff-line code {
	display: inline-block;
	white-space: pre-wrap;
	word-break: break-word;
	background: #f8fafc;
	padding: 4px 8px;
	border-radius: 8px;
}

.arb-time-card-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 4px;
}


.arb-stat-grid-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.arb-notice-ok,
.arb-conflict-summary {
	background: #fff;
	border: 1px solid #dcdcde;
	padding: 16px;
	border-radius: 12px;
	margin: 16px 0;
}

.arb-notice-ok {
	border-color: #bbf7d0;
	background: #f0fdf4;
}

.arb-conflict-list {
	display: grid;
	gap: 10px;
	margin-top: 10px;
}

.arb-conflict-item {
	padding: 10px 12px;
	border-radius: 10px;
	background: #fff7ed;
	border: 1px solid #fdba74;
	display: grid;
	gap: 4px;
}

.arb-lane-planner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	margin-top: 18px;
}

.arb-lane-card {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 14px;
	padding: 14px;
	display: grid;
	gap: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.arb-lane-card-conflict {
	border-color: #fb7185;
	box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.1);
}

.arb-lane-card-inactive {
	opacity: .7;
}

.arb-lane-head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: start;
	border-bottom: 1px solid #e5e7eb;
	padding-bottom: 10px;
}

.arb-lane-head h3 {
	margin: 0 0 4px;
}

.arb-lane-head p,
.arb-lane-meta {
	margin: 0;
	color: #64748b;
}

.arb-lane-bookings {
	display: grid;
	gap: 10px;
}

.arb-lane-booking {
	border: 1px solid #e5e7eb;
	border-left: 4px solid #2271b1;
	border-radius: 12px;
	padding: 10px;
	display: grid;
	gap: 8px;
	background: #fff;
}

.arb-lane-booking-conflict {
	border-color: #fb7185;
	background: #fff1f2;
}

.arb-lane-booking-top,
.arb-lane-booking-meta {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.arb-lane-empty {
	padding: 14px;
	border-radius: 10px;
	background: #f8fafc;
	color: #64748b;
}

.arb-conflict-pill {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 4px 8px;
	border-radius: 999px;
	background: #ffe4e6;
	color: #be123c;
	font-weight: 700;
	font-size: 12px;
}

@media (max-width: 1200px) {
	.arb-stat-grid-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.arb-stat-grid-5 {
		grid-template-columns: 1fr;
	}
}


.arb-panel{background:#fff;border:1px solid #dcdcde;border-radius:10px;padding:16px;margin:16px 0}.arb-form-panel h2{margin-top:0}.arb-grid-span-2{grid-column:1 / -1}.arb-inline-walkin-form .button{margin-top:8px}.arb-floor-area{margin:22px 0}.arb-floor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.arb-floor-card{background:#fff;border:1px solid #dcdcde;border-left:5px solid #46b450;border-radius:12px;padding:14px;box-shadow:0 1px 2px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:8px}.arb-floor-card.is-busy{border-left-color:#d63638}.arb-floor-cap,.arb-floor-state{display:block;color:#50575e}.arb-floor-list{margin:0;padding-left:16px}.arb-floor-list li{margin:0 0 4px}


.arb-layout-status{margin-left:10px;font-weight:600;color:#475569}
.arb-floor-canvas{position:relative;min-height:520px;background:linear-gradient(180deg,#f8fafc,#eef2ff);border:1px dashed #cbd5e1;border-radius:16px;padding:16px;overflow:hidden}
.arb-floor-table{position:absolute;background:#fff;border:1px solid #dcdcde;border-left:5px solid #46b450;border-radius:14px;padding:12px;box-shadow:0 8px 24px rgba(15,23,42,.08);display:flex;flex-direction:column;gap:8px;cursor:default;user-select:none}
.arb-floor-table.arb-floor-table-round{border-radius:999px}
.arb-floor-table.is-busy{border-left-color:#d63638}
.arb-floor-table.is-dragging{opacity:.85;box-shadow:0 16px 40px rgba(15,23,42,.18)}
.arb-floor-drag-handle{position:absolute;top:8px;right:10px;color:#64748b;cursor:grab;font-weight:700;letter-spacing:.08em}
.arb-status-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;background:#eef2ff;color:#3730a3}
.arb-status-chip.is-seated{background:#dcfce7;color:#166534}
.arb-status-chip.is-late{background:#fee2e2;color:#b91c1c}
.arb-status-chip.is-upcoming{background:#fef3c7;color:#92400e}
.arb-priority-pill{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700}
.arb-priority-high{background:#fee2e2;color:#b91c1c}
.arb-priority-medium{background:#fef3c7;color:#92400e}
.arb-priority-normal{background:#e0f2fe;color:#075985}


.arb-floor-table {
	position: absolute;
}

.arb-floor-table .arb-floor-resize-handle {
	position: absolute;
	right: 6px;
	bottom: 6px;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	background: #1d4ed8;
	cursor: nwse-resize;
	box-shadow: 0 0 0 2px #fff;
}

.arb-floor-table.is-dragging {
	opacity: .92;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
	z-index: 4;
}

.arb-live-note {
	display: inline-block;
	margin: 0 0 14px;
	font-weight: 600;
	color: #475569;
}

.arb-waitlist-suggestions {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 12px;
	padding: 16px;
	margin: 16px 0;
}

.arb-waitlist-suggestion-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

.arb-waitlist-suggestion-card {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 12px;
	display: grid;
	gap: 6px;
	background: #f8fafc;
}

.arb-priority-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	width: fit-content;
}

.arb-priority-pill.is-high {
	background: #fee2e2;
	color: #b91c1c;
}

.arb-priority-pill.is-medium {
	background: #fef3c7;
	color: #b45309;
}

.arb-priority-pill.is-normal {
	background: #dbeafe;
	color: #1d4ed8;
}


.arb-operational-alerts {
	background: #fff;
	border: 1px solid #fed7aa;
	padding: 16px;
	border-radius: 12px;
	margin: 16px 0;
}

.arb-alert-list {
	display: grid;
	gap: 10px;
}

.arb-alert-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 14px;
	border-radius: 10px;
	background: #fff7ed;
	border: 1px solid #fdba74;
}

.arb-alert-late_arrival {
	background: #fff7ed;
}

.arb-alert-table_overrun {
	background: #fef2f2;
	border-color: #fca5a5;
}

.arb-checkin-timer {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 999px;
	background: #ecfeff;
	border: 1px solid #a5f3fc;
	font-size: 12px;
	font-weight: 600;
	color: #155e75;
}


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

.arb-host-column {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 14px;
	padding: 16px;
}

.arb-host-card {
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px;
	margin-bottom: 10px;
	background: #f8fafc;
}

.arb-host-card-top,
.arb-host-card-meta {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

@media (max-width: 980px) {
	.arb-host-stand-grid {
		grid-template-columns: 1fr;
	}
}


.arb-resource-summary {
	background: #f8fafc;
	border: 1px solid #dbe4ee;
	padding: 12px 14px;
	border-radius: 10px;
	margin-bottom: 12px;
	display: grid;
	gap: 6px;
}

.arb-resource-components,
.arb-resource-help {
	color: #475569;
}

.arb-combo-badge,
.arb-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
}

.arb-combo-badge {
	background: #ede9fe;
	border: 1px solid #c4b5fd;
	color: #5b21b6;
}

.arb-chip {
	background: #f1f5f9;
	border: 1px solid #cbd5e1;
	color: #334155;
}

.arb-chip-priority {
	background: #fff7ed;
	border-color: #fdba74;
	color: #9a3412;
}

.arb-floor-list li small {
	display: block;
	margin-top: 4px;
	color: #475569;
}

.arb-host-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
	gap: 18px;
	margin-top: 18px;
}

.arb-host-card {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 14px;
	padding: 16px;
	display: grid;
	gap: 14px;
}

.arb-host-bookings,
.arb-host-waitlist {
	display: grid;
	gap: 12px;
}

.arb-host-booking,
.arb-host-waitlist-item {
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px;
	display: grid;
	gap: 8px;
	background: #fff;
}

.arb-host-booking-top,
.arb-host-meta,
.arb-host-actions,
.arb-host-tags {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.arb-host-name {
	font-weight: 700;
}

@media (max-width: 980px) {
	.arb-host-grid {
		grid-template-columns: 1fr;
	}
}


.arb-modal-guest-profile {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #dbe3ec;
    border-radius: 10px;
    line-height: 1.55;
}

.arb-modal-guest-profile strong {
    display: block;
    margin-bottom: 6px;
}

.arb-inline-label {
    font-weight: 600;
}

.arb-chip-guest {
    background: #eef6ff;
}

.arb-chip-flag {
    background: #fff4e5;
}


.arb-risk-badges {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin: 4px 0 0;
}

.arb-risk-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	background: #eef2ff;
	color: #3730a3;
	border: 1px solid #c7d2fe;
}

.arb-risk-badge.is-vip {
	background: #fff7ed;
	color: #9a3412;
	border-color: #fdba74;
}

.arb-risk-badge.is-allergy {
	background: #fef2f2;
	color: #b91c1c;
	border-color: #fecaca;
}

.arb-risk-badge.is-risk {
	background: #fff1f2;
	color: #9f1239;
	border-color: #fda4af;
}

.arb-risk-badge.is-repeat {
	background: #f0fdf4;
	color: #166534;
	border-color: #bbf7d0;
}

.arb-risk-badge.is-occasion {
	background: #faf5ff;
	color: #7e22ce;
	border-color: #e9d5ff;
}

.arb-modal-suggestions {
	border: 1px solid #dbeafe;
	background: #f8fbff;
	border-radius: 12px;
	padding: 12px 14px;
}

.arb-reassign-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
	margin-top: 10px;
}

.arb-reassign-option {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 10px 12px !important;
	height: auto !important;
	text-align: left;
	white-space: normal;
}

.arb-reassign-option span,
.arb-reassign-option small {
	display: block;
}


.arb-host-filter-form select {
	min-width: 180px;
}

.arb-floor-table-conflict {
	box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18), 0 12px 28px rgba(220, 38, 38, 0.12);
	border-color: #f87171;
}

.arb-floor-conflict-badge {
	display: inline-block;
	margin-top: 4px;
	padding: 3px 8px;
	border-radius: 999px;
	background: #fff1f2;
	color: #be123c;
	font-size: 12px;
	font-weight: 700;
}

.arb-floor-booking-conflict {
	background: #fff1f2;
	border-radius: 8px;
	padding: 6px 8px;
}


.arb-pacing-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:14px 0 18px}
.arb-pacing-card{background:#fff;border:1px solid #dcdcde;border-radius:12px;padding:12px 14px;display:grid;gap:6px}
.arb-pacing-card strong{font-size:12px;text-transform:uppercase;color:#64748b;letter-spacing:.04em}
.arb-pacing-card span{font-size:18px;font-weight:700;color:#0f172a}
.arb-pacing-heavy{background:#fff7ed;border-color:#fdba74}
.arb-pacing-busy{background:#eff6ff;border-color:#93c5fd}
.arb-modal-risk{background:#fff7ed;border:1px solid #fdba74;padding:12px 14px;border-radius:10px;margin-bottom:12px;display:grid;gap:8px}
.arb-risk-reasons{margin:0;padding-left:18px;color:#7c2d12}
@media (max-width:1100px){.arb-pacing-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

.arb-host-insights-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 16px 0;
}

.arb-host-pressure {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	margin-bottom: 12px;
}

.arb-pressure-critical { background: #fff1f2; border-color: #fecdd3; }
.arb-pressure-high { background: #fff7ed; border-color: #fed7aa; }
.arb-pressure-moderate { background: #eff6ff; border-color: #bfdbfe; }
.arb-pressure-low { background: #f0fdf4; border-color: #bbf7d0; }

.arb-host-mini-stats {
	display: grid;
	gap: 8px;
	font-size: 13px;
	color: #475569;
}

.arb-turnaround-list,
.arb-next-actions {
	display: grid;
	gap: 10px;
}

.arb-turnaround-item {
	display: grid;
	gap: 4px;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #fff;
}

.arb-next-actions li {
	margin-left: 18px;
	padding-left: 4px;
}

@media (max-width: 1100px) {
	.arb-host-insights-grid {
		grid-template-columns: 1fr;
	}
}

.arb-daypart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.arb-daypart-card{border:1px solid #dcdcde;border-radius:12px;padding:12px;background:#fff}.arb-manager-grid{margin-bottom:16px}.arb-host-waitlist-item .description{margin:8px 0 0;color:#50575e}.arb-pressure-critical{border-left:4px solid #b32d2e}.arb-pressure-high{border-left:4px solid #dba617}.arb-pressure-moderate{border-left:4px solid #2271b1}.arb-pressure-low{border-left:4px solid #00a32a}


/* Host Stand professional rebuild */
.arb-host-floor-card { margin-top: 18px; }
.arb-host-floor-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.arb-host-floor-tile { display:block; text-decoration:none; color:inherit; border:1px solid #d7dee8; border-radius:14px; padding:14px; background:#fff; box-shadow:0 2px 10px rgba(15,23,42,.05); }
.arb-host-floor-tile:hover { box-shadow:0 6px 18px rgba(15,23,42,.08); transform:translateY(-1px); }
.arb-host-floor-top { display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; }
.arb-host-floor-sub, .arb-host-floor-meta, .arb-host-floor-count { display:block; color:#475569; font-size:12px; margin-top:4px; }
.arb-host-main-grid { display:grid; grid-template-columns:1.6fr 1fr; gap:18px; margin-top:18px; }
.arb-host-bookings-list { max-height:720px; overflow:auto; }
.arb-status-pill { display:inline-flex; align-items:center; gap:4px; font-size:11px; line-height:1; padding:5px 8px; border-radius:999px; background:#eef2ff; color:#1e3a8a; }
.arb-status-pill.arb-status-seated { background:#ecfdf5; color:#166534; }
.arb-status-pill.arb-status-confirmed, .arb-status-pill.arb-status-pending { background:#eff6ff; color:#1d4ed8; }
.arb-status-pill.arb-status-cancelled, .arb-status-pill.arb-status-no_show { background:#fef2f2; color:#b91c1c; }
.arb-status-pill.arb-status-completed { background:#f8fafc; color:#334155; }
.arb-host-table-details { margin-top:18px; }
.arb-host-table-detail { border-top:1px solid #e2e8f0; padding:18px 0; scroll-margin-top:80px; }
.arb-host-table-detail:first-child { border-top:none; }
.arb-host-table-detail-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
.arb-host-table-detail-meta { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; color:#475569; font-size:13px; }
.arb-host-table-bookings { display:grid; gap:12px; }
.arb-host-booking { border:1px solid #d7dee8; border-left:4px solid #94a3b8; border-radius:12px; background:#fff; padding:14px; }
.arb-host-booking.arb-status-confirmed, .arb-host-booking.arb-status-pending { border-left-color:#2563eb; }
.arb-host-booking.arb-status-seated { border-left-color:#16a34a; }
.arb-host-booking.arb-status-cancelled, .arb-host-booking.arb-status-no_show { border-left-color:#dc2626; }
.arb-host-booking.arb-status-completed { border-left-color:#64748b; }
.arb-host-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

.arb-floor-actions{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}


.arb-free-table-actions {
	margin-top: 10px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.arb-host-stand-card-status.is-blocked {
	background: #fff7ed;
	border: 1px solid #fdba74;
	color: #9a3412;
	padding: 10px 12px;
	border-radius: 10px;
}

/* Floor Map — inline capacity editor */
button.arb-cap-editor-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
	color: #475569;
	background: #f1f5f9;
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	cursor: pointer;
}
button.arb-cap-editor-toggle:hover {
	background: #e2e8f0;
	border-color: #94a3b8;
}
button.arb-cap-editor-toggle.arb-cap-saved-flash {
	background: #dcfce7;
	border-color: #4ade80;
	color: #166534;
}
.arb-cap-editor {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	align-items: center;
	padding: 6px 8px;
	margin-top: 4px;
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	cursor: auto;
}
.arb-cap-editor label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #475569;
}
.arb-cap-editor input[type="number"] {
	width: 56px;
	padding: 3px 4px;
	border: 1px solid #94a3b8;
	border-radius: 4px;
	font-size: 13px;
}
.arb-cap-editor .arb-cap-status {
	flex-basis: 100%;
	color: #b91c1c;
	font-size: 11px;
}

/* Tables/Shifts — inline on/off toggle pill */
.arb-toggle-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px 4px 6px;
	border-radius: 999px;
	border: 1px solid transparent;
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
	user-select: none;
}
.arb-toggle-pill:hover {
	text-decoration: none;
}
.arb-toggle-pill:focus {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}
.arb-toggle-pill-dot {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transition: transform .15s ease;
}
.arb-toggle-pill-label {
	min-width: 22px;
	text-align: left;
}
.arb-toggle-pill.is-on {
	background: #2563eb;
	border-color: #1e40af;
	color: #fff;
}
.arb-toggle-pill.is-on:hover {
	background: #1d4ed8;
}
.arb-toggle-pill.is-off {
	background: #cbd5e1;
	border-color: #94a3b8;
	color: #475569;
	padding: 4px 6px 4px 12px;
	flex-direction: row-reverse;
}
.arb-toggle-pill.is-off:hover {
	background: #94a3b8;
	color: #1e293b;
}
.arb-toggle-pill.is-off .arb-toggle-pill-label {
	text-align: right;
}

/* ─────────────────────────────────────────────────────────────
   Timeline dashboard
   ─────────────────────────────────────────────────────────── */

.arb-timeline-wrap {
	max-width: none;
}

#arb-timeline-root {
	margin-top: 16px;
}

.arb-timeline-loading {
	color: #64748b;
	font-style: italic;
}

/* Header (date nav + stats) */
.arb-tl-header {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
.arb-tl-date-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
/* Old nav/today/date-pill definitions intentionally removed.
   The single source of truth now lives in the "Professional UI
   overhaul" section further down. Keeping two sets caused the
   cascade to fight itself — focus + hover states leaked from
   one set into the other and left certain pills stuck looking
   half-selected. */
.arb-tl-pill-day {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.arb-tl-pill-date {
	font-size: 13px;
	font-weight: 700;
}
.arb-tl-stats {
	display: flex;
	gap: 18px;
}
.arb-tl-stat {
	font-size: 14px;
	color: #475569;
}
.arb-tl-stat strong {
	font-size: 18px;
	color: #0f172a;
}

/* Layout — grid on left, side panel on right */
.arb-tl-layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 16px;
	align-items: start;
}
@media (max-width: 1280px) {
	.arb-tl-layout {
		grid-template-columns: 1fr;
	}
}

/* The actual gantt grid */
.arb-tl-grid-wrap {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	overflow: auto;
	max-height: 75vh;
}
.arb-tl-time-strip {
	display: flex;
	position: sticky;
	top: 0;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	z-index: 2;
	font-size: 11px;
	color: #64748b;
	font-weight: 600;
}
/* Header cell on the LEFT of the time strip — sits above the
   table-label column and visually anchors the strip's left edge
   so it doesn't read as a 180px void. Slightly darker background
   so it reads as a header rather than an empty padding band. */
.arb-tl-time-strip-head {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding: 0 14px;
	background: #f1f5f9;
	border-right: 1px solid #e2e8f0;
	font-size: 11px;
	font-weight: 700;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.arb-tl-time-col {
	flex-shrink: 0;
	padding: 8px 0 8px 8px;
	/* Stronger column divider so each hour reads as a distinct
	   vertical band, matching the Tablein/Resy aesthetic. The
	   light grey line continues downward through the booking body
	   via .arb-tl-hour-line (set by renderTableRow). */
	border-right: 1px solid #e2e8f0;
}
.arb-tl-body {
	position: relative;
}
.arb-tl-area-head {
	background: #f1f5f9;
	border-top: 1px solid #cbd5e1;
	border-bottom: 1px solid #e2e8f0;
	padding: 6px 14px;
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: #475569;
	position: sticky;
	left: 0;
	z-index: 1;
}
.arb-tl-row {
	display: flex;
	border-bottom: 1px solid #f1f5f9;
}
.arb-tl-row-label {
	flex-shrink: 0;
	padding: 8px 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #fff;
	border-right: 1px solid #e2e8f0;
	position: sticky;
	left: 0;
	z-index: 1;
}
.arb-tl-row-label strong {
	font-size: 13px;
	color: #0f172a;
}
.arb-tl-cap {
	font-size: 11px;
	color: #64748b;
}
.arb-tl-lane {
	position: relative;
	flex-shrink: 0;
	background-image: linear-gradient(to right, #fafafa 0%, #fff 100%);
}
.arb-tl-hour-line {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #f1f5f9;
}

/* Booking blocks */
.arb-tl-block {
	position: absolute;
	top: 4px;
	bottom: 4px;
	min-height: 56px;
	border-radius: 7px;
	/* Inner spacing tuned so the name has room to read clearly,
	   with the meta row sitting comfortably below. The extra 12px
	   on the left makes space for the 4px status border without
	   the name running into it. */
	padding: 8px 10px 8px 12px;
	cursor: pointer;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	line-height: 1.25;
	/* 4px solid status border is what reads the booking state
	   from across the room — operators glance at the timeline
	   for color first, content second. */
	border-left: 4px solid;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
	transition: transform .12s ease, box-shadow .12s ease;
}
.arb-tl-block:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
	z-index: 3;
}
.arb-tl-bk-name {
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: -0.01em;
	/* Keep some room from the top-right corner where the optional
	   status badge sits, so the name doesn't crash into "Pending"
	   when both are present. */
	padding-right: 6px;
}
.arb-tl-bk-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	white-space: nowrap;
	overflow: hidden;
}
.arb-tl-bk-time {
	font-size: 11px;
	font-weight: 500;
	opacity: 0.88;
	letter-spacing: 0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.arb-tl-bk-guests {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 18px;
	padding: 0 7px;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.14);
	flex-shrink: 0;
}
.arb-tl-bk-badge {
	position: absolute;
	top: 5px;
	right: 6px;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.16);
	line-height: 1.4;
	white-space: nowrap;
}

/* Status colors — deeper text colors for strong contrast against
   the tinted backgrounds. Borders are saturated solids so the
   status reads clearly even at a distance from the screen. */
.arb-tl-status-pending   { background: #fef3c7; color: #78350f; border-left-color: #f59e0b; }
.arb-tl-status-confirmed { background: #dbeafe; color: #1e3a8a; border-left-color: #2563eb; }
.arb-tl-status-seated    { background: #d1fae5; color: #064e3b; border-left-color: #059669; }
.arb-tl-status-completed { background: #ede9fe; color: #4c1d95; border-left-color: #7c3aed; }
.arb-tl-status-noshow    { background: #fee2e2; color: #991b1b; border-left-color: #ef4444; }
.arb-tl-status-cancelled { background: #e5e7eb; color: #4b5563; border-left-color: #9ca3af; text-decoration: line-through; opacity: 0.7; }

/* Right side panel */
.arb-tl-right-panel {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px;
	max-height: 75vh;
	overflow-y: auto;
}
.arb-tl-right-panel h3 {
	margin: 0 0 12px 0;
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
}
.arb-tl-arrival-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.arb-tl-arrival {
	padding: 10px 0;
	border-bottom: 1px solid #f1f5f9;
	cursor: pointer;
}
.arb-tl-arrival:last-child {
	border-bottom: none;
}
.arb-tl-arrival:hover {
	background: #f8fafc;
}
.arb-tl-arrival-head {
	display: flex;
	justify-content: space-between;
	margin-bottom: 4px;
}
.arb-tl-arrival-time {
	font-size: 12px;
	color: #64748b;
}
.arb-tl-arrival-meta {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #64748b;
}
.arb-tl-pill {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
}

.arb-tl-empty {
	color: #94a3b8;
	font-style: italic;
	margin: 20px 0;
	text-align: center;
}

/* Modal */
.arb-tl-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 16px;
}
.arb-tl-modal {
	background: #fff;
	border-radius: 12px;
	max-width: 480px;
	width: 100%;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
	/* Never let the modal grow taller than the viewport (overlay has
	   16px padding each side) — on short landscape phones the body
	   would otherwise overflow off-screen with no way to scroll to
	   the action buttons. */
	max-height: calc(100vh - 32px);
	overflow-y: auto;
}
.arb-tl-modal-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid #e2e8f0;
}
.arb-tl-modal-head h3 {
	margin: 0;
	font-size: 18px;
}
.arb-tl-modal-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #64748b;
}
.arb-tl-modal-body {
	padding: 16px 20px;
	font-size: 14px;
	color: #475569;
}
.arb-tl-modal-body p {
	margin: 0 0 10px 0;
}
.arb-tl-modal-actions {
	padding: 12px 20px 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	border-top: 1px solid #f1f5f9;
}
.arb-tl-act {
	padding: 8px 14px;
	border-radius: 6px;
	border: 1px solid #cbd5e1;
	background: #f8fafc;
	color: #1e293b;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}
.arb-tl-act:hover {
	background: #e2e8f0;
}
.arb-tl-act:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.arb-tl-act-primary {
	background: #10b981;
	color: #fff;
	border-color: #059669;
}
.arb-tl-act-primary:hover {
	background: #059669;
}
.arb-tl-act-warn {
	background: #f59e0b;
	color: #fff;
	border-color: #d97706;
}
.arb-tl-act-warn:hover {
	background: #d97706;
}
.arb-tl-act-danger {
	background: #ef4444;
	color: #fff;
	border-color: #dc2626;
}
.arb-tl-act-danger:hover {
	background: #dc2626;
}
.arb-tl-act-edit {
	margin-left: auto;
}

/* ─────────────────────────────────────────────────────────────
   Frontend owner dashboard (shortcode mode)
   These rules apply when the timeline is rendered outside of
   wp-admin via [arb_owner_dashboard]. They strip the admin look
   and add wrapping + the simple sign-in/access gates.
   ─────────────────────────────────────────────────────────── */

.arb-frontend-dashboard {
	max-width: 1600px;
	margin: 24px auto;
	padding: 0 16px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: #0f172a;
}
.arb-frontend-dashboard-head {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e2e8f0;
}
.arb-frontend-dashboard-head h2 {
	margin: 0 0 4px 0;
	font-size: 24px;
	color: #0f172a;
}
.arb-frontend-dashboard-user {
	margin: 0;
	font-size: 13px;
	color: #64748b;
}
.arb-frontend-dashboard-user a {
	color: #2563eb;
	text-decoration: none;
}
.arb-frontend-dashboard-user a:hover {
	text-decoration: underline;
}

/* Login / access-denied gate panels */
.arb-frontend-dashboard--gate {
	max-width: 480px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 32px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.arb-frontend-dashboard--gate h2 {
	border: none;
	padding: 0;
	margin-bottom: 12px;
}
.arb-frontend-dashboard--gate p {
	color: #475569;
	margin: 0 0 16px 0;
}
.arb-frontend-dashboard-btn {
	display: inline-block;
	background: #2563eb;
	color: #fff !important;
	padding: 10px 20px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
}
.arb-frontend-dashboard-btn:hover {
	background: #1d4ed8;
	text-decoration: none;
}

/* Inside the frontend wrapper we override a couple of admin styles
   that would otherwise pull in WordPress chrome-y borders. */
.arb-frontend-dashboard .arb-tl-header,
.arb-frontend-dashboard .arb-tl-grid-wrap,
.arb-frontend-dashboard .arb-tl-right-panel {
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* ─────────────────────────────────────────────────────────────
   Tabs navigation
   ─────────────────────────────────────────────────────────── */
.arb-tl-tabs {
	display: flex;
	gap: 4px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 4px;
	margin-bottom: 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
/* Old tab definition removed — see professional UI overhaul section. */

/* ─────────────────────────────────────────────────────────────
   List view
   ─────────────────────────────────────────────────────────── */
.arb-list-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 0;
	overflow: hidden;
}
.arb-list-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.arb-list-table th {
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	padding: 12px 14px;
	text-align: left;
	font-weight: 700;
	color: #475569;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.arb-list-table td {
	border-bottom: 1px solid #f1f5f9;
	padding: 12px 14px;
	color: #0f172a;
	vertical-align: middle;
}
.arb-list-table tr:last-child td { border-bottom: none; }
.arb-list-row { cursor: pointer; transition: background .12s; }
.arb-list-row:hover { background: #f8fafc; }

/* ─────────────────────────────────────────────────────────────
   Calendar view
   ─────────────────────────────────────────────────────────── */
.arb-cal-month-label {
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
	padding: 0 16px;
	min-width: 180px;
	text-align: center;
}
.arb-cal-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px;
	overflow: hidden;
}
.arb-cal-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: 6px;
}
.arb-cal-weekday {
	font-size: 11px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	text-align: center;
	padding: 6px 0;
}
.arb-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-auto-rows: minmax(64px, auto);
	gap: 4px;
}
.arb-cal-cell {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 6px 8px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 64px;
	transition: transform .12s ease;
	color: #0f172a;
	font: inherit;
	text-align: left;
}
.arb-cal-cell:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
}
.arb-cal-cell.is-other-month {
	opacity: 0.4;
}
.arb-cal-cell.is-today {
	border-color: #2563eb;
	border-width: 2px;
	padding: 5px 7px;
}
.arb-cal-day {
	font-size: 14px;
	font-weight: 700;
}
.arb-cal-count {
	font-size: 11px;
	font-weight: 600;
}
.arb-cal-count-empty {
	color: #cbd5e1;
}

/* ─────────────────────────────────────────────────────────────
   Stats view
   ─────────────────────────────────────────────────────────── */
.arb-stats-presets {
	display: flex;
	gap: 4px;
}
.arb-stats-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}
.arb-stats-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.arb-stats-card-value {
	font-size: 28px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.1;
}
.arb-stats-card-label {
	font-size: 12px;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-weight: 600;
}
.arb-stats-chart-card,
.arb-stats-breakdown-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
}
.arb-stats-chart-card h3,
.arb-stats-breakdown-card h3 {
	margin: 0 0 12px 0;
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
}
.arb-stats-chart {
	width: 100%;
	height: auto;
	max-height: 240px;
}
.arb-stats-breakdown {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
}
.arb-stats-breakdown li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: #f8fafc;
	border-radius: 8px;
	font-size: 14px;
}

/* ─────────────────────────────────────────────────────────────
   Floor view promo
   ─────────────────────────────────────────────────────────── */
.arb-floor-promo {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 40px 24px;
	text-align: center;
}
.arb-floor-promo h2 {
	margin: 0 0 12px 0;
}
.arb-floor-promo p {
	color: #64748b;
	margin: 0 0 16px 0;
}

/* ─────────────────────────────────────────────────────────────
   Mobile responsive — single column under 1024px
   Tab labels collapse to icons under 640px
   ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.arb-tl-layout {
		grid-template-columns: 1fr;
	}
	.arb-tl-stats {
		font-size: 13px;
	}
	.arb-tl-date-pills {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}
@media (max-width: 768px) {
	.arb-tl-header {
		flex-direction: column;
		align-items: stretch;
	}
	.arb-tl-date-nav {
		justify-content: center;
	}
	.arb-stats-card-value {
		font-size: 22px;
	}
	.arb-list-table th,
	.arb-list-table td {
		padding: 10px 8px;
		font-size: 12px;
	}
	.arb-cal-day {
		font-size: 12px;
	}
	.arb-cal-count {
		font-size: 9px;
	}
	.arb-tl-modal {
		max-width: calc(100vw - 24px);
	}
	.arb-tl-modal-actions {
		flex-direction: column;
	}
	.arb-tl-modal-actions .arb-tl-act {
		width: 100%;
		text-align: center;
	}
	.arb-tl-act-edit {
		margin-left: 0;
		margin-top: 4px;
	}
	.arb-frontend-dashboard {
		padding: 0 12px;
	}
}
@media (max-width: 640px) {
	.arb-tl-tab-label {
		display: none;
	}
	.arb-tl-tab {
		padding: 8px 12px;
	}
	.arb-tl-tab-icon {
		font-size: 18px;
	}
	.arb-cal-grid {
		grid-auto-rows: minmax(48px, auto);
	}
	.arb-cal-cell {
		min-height: 48px;
		padding: 4px;
	}
}

/* ─────────────────────────────────────────────────────────────
   Floor Map view (frontend dashboard)
   ─────────────────────────────────────────────────────────── */
.arb-tl-view-floor .arb-floor-promo { display: none; }

.arb-floor-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 16px;
	font-size: 12px;
	color: #475569;
}
.arb-floor-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}
.arb-floor-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.08);
}
.arb-floor-swatch.is-free     { background: #ecfdf5; border-color: #10b981; }
.arb-floor-swatch.is-booked   { background: #eff6ff; border-color: #3b82f6; }
.arb-floor-swatch.is-occupied { background: #fef2f2; border-color: #ef4444; }
.arb-floor-swatch.is-inactive { background: #f1f5f9; border-color: #94a3b8; }

.arb-floor-area {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
	overflow: hidden;
}
.arb-floor-area-head {
	margin: 0 0 12px 0;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: #475569;
}
.arb-floor-canvas {
	position: relative;
	width: 100%;
	background:
		linear-gradient(to right, rgba(15,23,42,0.03) 1px, transparent 1px) 0 0 / 40px 100%,
		linear-gradient(to bottom, rgba(15,23,42,0.03) 1px, transparent 1px) 0 0 / 100% 40px,
		#f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	min-height: 200px;
	overflow: auto;
}

.arb-floor-tile {
	position: absolute;
	border: 2px solid;
	border-radius: 8px;
	padding: 6px 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	cursor: pointer;
	font: inherit;
	text-align: center;
	transition: transform .12s ease, box-shadow .12s ease;
	overflow: hidden;
}
.arb-floor-tile:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
	z-index: 2;
}
.arb-floor-tile.shape-circle,
.arb-floor-tile.shape-round {
	border-radius: 50%;
}
.arb-floor-tile-label {
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.arb-floor-tile-cap {
	font-size: 10px;
	opacity: 0.8;
	font-weight: 600;
}
.arb-floor-tile-next {
	font-size: 10px;
	margin-top: 4px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-top: 1px solid rgba(15, 23, 42, 0.1);
	padding-top: 4px;
}

/* Status colors. The border + background combo gives the tile a
   recognizable identity even for color-blind operators. */
.arb-floor-tile.is-free {
	background: #ecfdf5;
	border-color: #10b981;
	color: #065f46;
}
.arb-floor-tile.is-booked {
	background: #eff6ff;
	border-color: #3b82f6;
	color: #1e40af;
}
.arb-floor-tile.is-occupied {
	background: #fef2f2;
	border-color: #ef4444;
	color: #991b1b;
}
.arb-floor-tile.is-inactive,
.arb-floor-tile.is-disabled {
	background: #f1f5f9;
	border-color: #cbd5e1;
	color: #64748b;
	opacity: 0.7;
	cursor: not-allowed;
}

.arb-floor-booking-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.arb-floor-booking {
	padding: 10px 12px;
	border-bottom: 1px solid #f1f5f9;
	font-size: 13px;
}
.arb-floor-booking:last-child { border-bottom: none; }
.arb-floor-booking > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.arb-floor-booking > div + div { margin-top: 4px; color: #64748b; font-size: 12px; }

@media (max-width: 768px) {
	.arb-floor-canvas {
		min-height: 280px;
	}
}

/* ─────────────────────────────────────────────────────────────
   Settings hub cards
   ─────────────────────────────────────────────────────────── */
.arb-settings-hub .description {
	color: #64748b;
	margin-bottom: 24px;
	font-size: 14px;
}
.arb-hub-section-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: #64748b;
	margin: 24px 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #e2e8f0;
}
.arb-hub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}
.arb-hub-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px;
	text-decoration: none;
	color: #0f172a;
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.arb-hub-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
	border-color: #2563eb;
	color: #0f172a;
}
.arb-hub-card-icon {
	font-size: 24px;
	line-height: 1;
}
.arb-hub-card-title {
	font-size: 15px;
	font-weight: 700;
}
.arb-hub-card-desc {
	font-size: 12px;
	color: #64748b;
	line-height: 1.4;
}

/* Generic form card used by Time/Language, Tags, Duration */
.arb-form-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	max-width: 800px;
	margin-bottom: 20px;
}
.arb-form-card label {
	display: block;
	margin-bottom: 4px;
}
.arb-form-card label strong {
	font-weight: 700;
	color: #0f172a;
}
.arb-form-card p {
	margin: 0 0 14px 0;
}
.arb-form-card .description {
	display: block;
	font-size: 12px;
	color: #64748b;
	margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────
   Floor map edit mode (frontend drag-to-save)
   ─────────────────────────────────────────────────────────── */
.arb-floor-toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 12px;
}
.arb-floor-hint {
	font-size: 13px;
	color: #64748b;
}

/* Canvas in edit mode — yellow tint so the operator can't miss
   that they're in a different mode where actions are persistent. */
.arb-floor-canvas.is-edit-mode {
	background:
		linear-gradient(to right, rgba(245,158,11,0.10) 1px, transparent 1px) 0 0 / 40px 100%,
		linear-gradient(to bottom, rgba(245,158,11,0.10) 1px, transparent 1px) 0 0 / 100% 40px,
		#fffbeb;
	border-color: #f59e0b;
}

/* Draggable tiles get a move cursor and a subtle handle hint. */
.arb-floor-tile.is-draggable {
	cursor: move;
	touch-action: none;            /* required for pointer events on touch */
	user-select: none;
}
.arb-floor-tile.is-draggable:hover {
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2);
}
.arb-floor-tile.is-dragging {
	opacity: 0.85;
	z-index: 10;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.3);
	transition: none;
}

/* ─────────────────────────────────────────────────────────────
   Frontend inline settings forms
   ─────────────────────────────────────────────────────────── */
.arb-settings-form-wrap {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	max-width: 800px;
}
.arb-settings-form-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e2e8f0;
}
.arb-settings-form-head h2 {
	margin: 0;
	font-size: 20px;
}
.arb-settings-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.arb-form-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.arb-form-row label {
	font-size: 13px;
	font-weight: 700;
	color: #0f172a;
}
.arb-form-row input[type="text"],
.arb-form-row input[type="number"],
.arb-form-row input[type="color"],
.arb-form-row select {
	padding: 8px 10px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 14px;
	max-width: 480px;
}
.arb-form-row input[type="color"] {
	height: 40px;
	width: 60px;
	padding: 2px;
}
.arb-form-row select {
	background: #fff;
}
.arb-form-actions {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}
.arb-form-hint {
	background: #f1f5f9;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
	color: #475569;
	margin: 0 0 12px;
}
.arb-list-actions {
	white-space: nowrap;
}
.arb-tag-pill {
	display: inline-block;
	color: #fff;
	padding: 4px 12px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 12px;
}
.arb-tags-form,
.arb-duration-form {
	margin-bottom: 24px;
}
.arb-hub-card-external {
	border-style: dashed;
}
.arb-hub-card-external:hover {
	border-style: solid;
}

/* ─────────────────────────────────────────────────────────────
   Iframe overlay for embedded admin pages (Settings + Floor edit)
   ─────────────────────────────────────────────────────────── */
.arb-iframe-wrap {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	overflow: hidden;
}
.arb-iframe-head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	border-bottom: 1px solid #e2e8f0;
	background: #f8fafc;
}
.arb-iframe-head h2 {
	margin: 0;
	font-size: 18px;
	color: #0f172a;
}
.arb-iframe {
	display: block;
	width: 100%;
	background: #fff;
	border: 0;
}

/* ─────────────────────────────────────────────────────────────
   Walk-in button + modal
   ─────────────────────────────────────────────────────────── */
.arb-tl-walkin-btn {
	background: linear-gradient(135deg, #f97316, #ea580c);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25);
	transition: transform .12s ease, box-shadow .12s ease;
	white-space: nowrap;
}
.arb-tl-walkin-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.arb-walkin-modal { max-width: 460px; }
.arb-walkin-form { display: flex; flex-direction: column; gap: 14px; }
.arb-walkin-form input[type="text"],
.arb-walkin-form input[type="tel"],
.arb-walkin-form input[type="time"],
.arb-walkin-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
}
.arb-walkin-form textarea { resize: vertical; }
.arb-walkin-party-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
	margin-top: 4px;
}
.arb-walkin-party-btn {
	background: #f1f5f9;
	border: 2px solid transparent;
	border-radius: 8px;
	padding: 10px 0;
	font-size: 16px;
	font-weight: 700;
	color: #0f172a;
	cursor: pointer;
	transition: all .12s ease;
}
.arb-walkin-party-btn:hover { background: #e2e8f0; }
.arb-walkin-party-btn.is-active {
	background: #f97316;
	color: #fff;
	border-color: #ea580c;
}
.arb-walkin-error {
	background: #fef2f2;
	border: 1px solid #fca5a5;
	color: #991b1b;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13px;
}

/* ─────────────────────────────────────────────────────────────
   Professional UI overhaul (v3.13.10)
   Inspired by Tablein's clean operator interface.
   ─────────────────────────────────────────────────────────── */

/* Tab bar — clean underline-style tabs, no emojis */
.arb-tl-tabs {
	display: flex;
	gap: 0;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 4px;
	margin-bottom: 16px;
	overflow-x: auto;
}
.arb-tl-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: none;
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
	white-space: nowrap;
}
.arb-tl-tab:hover {
	background: #f1f5f9;
	color: #0f172a;
}
.arb-tl-tab.is-active {
	background: #1e293b;
	color: #fff;
}
.arb-tl-tab.is-active:hover { background: #0f172a; }
.arb-tl-tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.arb-tl-tab-icon svg { display: block; }

/* Header bar — cleaner spacing */
.arb-tl-header {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	margin-bottom: 16px;
}
.arb-tl-date-nav {
	display: flex;
	align-items: center;
	gap: 6px;
}
.arb-tl-nav-btn,
.arb-tl-today-btn {
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	padding: 7px 12px;
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	cursor: pointer;
	transition: all .12s ease;
}
.arb-tl-nav-btn:hover,
.arb-tl-today-btn:hover {
	background: #f8fafc;
	border-color: #94a3b8;
}
.arb-tl-date-pills {
	display: flex;
	gap: 4px;
	margin-left: 4px;
}
.arb-tl-date-pill {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 6px 10px;
	cursor: pointer;
	font-family: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 48px;
	line-height: 1.2;
	transition: all .12s ease;
}
.arb-tl-date-pill:hover { background: #f1f5f9; }
.arb-tl-date-pill.is-active {
	background: #1e293b;
	color: #fff;
}
.arb-tl-pill-day {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	/* Was: opacity: 0.7
	   Bug: opacity stacks with background-luminance. On a white
	   resting background, faded red looked subtle and intentional.
	   On the light-grey hover background (#f1f5f9), the same
	   faded text dropped below readable contrast and the day
	   label "disappeared" visually. Using an explicit muted color
	   instead keeps the contrast ratio constant across both
	   resting and hover states. */
	color: #ef4444;
}
.arb-tl-pill-date {
	font-size: 13px;
	font-weight: 700;
	color: #ef4444;
}
/* When the pill is active (dark slate background), labels invert
   to white so they stay readable. Without these, the explicit
   red color above would persist and clash with the dark fill. */
.arb-tl-date-pill.is-active .arb-tl-pill-day,
.arb-tl-date-pill.is-active .arb-tl-pill-date {
	color: #fff;
}

/* Stats badges */
.arb-tl-stats {
	display: flex;
	gap: 8px;
	margin-left: auto;
}
.arb-tl-stat {
	background: #f1f5f9;
	border-radius: 8px;
	padding: 6px 12px;
	font-size: 13px;
	color: #475569;
}
.arb-tl-stat strong {
	color: #0f172a;
	margin-right: 2px;
}

/* Walk-in button — solid Tablein-style orange, no gradient */
.arb-tl-walkin-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #f97316;
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
	transition: background .12s ease, box-shadow .12s ease;
	margin-left: auto;
}
.arb-tl-walkin-btn:hover {
	background: #ea580c;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
}
.arb-tl-walkin-btn svg { flex-shrink: 0; }

/* If both stats and walk-in: stats no longer needs margin-left:auto */
.arb-tl-stats + .arb-tl-walkin-btn { margin-left: 0; }

/* Action buttons — refined */
.arb-tl-act {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
	cursor: pointer;
	transition: all .12s ease;
	font-family: inherit;
	text-decoration: none;
}
.arb-tl-act:hover {
	background: #f8fafc;
	border-color: #94a3b8;
	color: #0f172a;
}
.arb-tl-act-primary {
	background: #1e293b;
	color: #fff;
	border-color: #1e293b;
}
.arb-tl-act-primary:hover {
	background: #0f172a;
	border-color: #0f172a;
	color: #fff;
}
.arb-tl-act-danger {
	background: #fff;
	color: #dc2626;
	border-color: #fca5a5;
}
.arb-tl-act-danger:hover {
	background: #fef2f2;
	border-color: #ef4444;
	color: #b91c1c;
}

/* Hub cards — subtle, with proper SVG icon space */
.arb-hub-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	text-decoration: none;
	color: #0f172a;
	transition: all .12s ease;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
}
.arb-hub-card:hover {
	border-color: #94a3b8;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
	transform: translateY(-1px);
}
.arb-hub-card-icon {
	display: inline-flex;
	width: 40px;
	height: 40px;
	background: #f1f5f9;
	border-radius: 10px;
	align-items: center;
	justify-content: center;
	color: #475569;
}
.arb-hub-card:hover .arb-hub-card-icon {
	background: #e2e8f0;
	color: #1e293b;
}
.arb-hub-card-icon svg { display: block; }
.arb-hub-card-title {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
}
.arb-hub-card-desc {
	font-size: 12px;
	color: #64748b;
	line-height: 1.4;
}
.arb-hub-section-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: #94a3b8;
	margin: 24px 0 12px;
	padding-bottom: 0;
	border-bottom: none;
}
.arb-hub-section-title:first-child { margin-top: 0; }

/* Walk-in modal redesign */
.arb-walkin-modal { max-width: 560px; }
.arb-walkin-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media (max-width: 560px) {
	.arb-walkin-grid-2 { grid-template-columns: 1fr; }
}

/* Party-size pills — refined, Tablein-style */
.arb-walkin-party-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
	margin-top: 4px;
}
.arb-walkin-party-btn {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 10px 0;
	font-size: 15px;
	font-weight: 700;
	color: #475569;
	cursor: pointer;
	transition: all .12s ease;
	font-family: inherit;
}
.arb-walkin-party-btn:hover {
	background: #f1f5f9;
	border-color: #cbd5e1;
	color: #0f172a;
}
.arb-walkin-party-btn.is-active {
	background: #1e293b;
	color: #fff;
	border-color: #1e293b;
}

/* Walk-in table chips */
.arb-walkin-tables-row { margin-top: 4px; }
.arb-walkin-tables {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
	max-height: 200px;
	overflow-y: auto;
	padding: 4px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
}
.arb-walkin-tables-msg {
	padding: 12px;
	color: #64748b;
	font-size: 13px;
}
.arb-walkin-tables-msg.is-error { color: #dc2626; }
.arb-walkin-table-chip {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 8px 12px;
	cursor: pointer;
	transition: all .12s ease;
	font-family: inherit;
	text-align: left;
	min-width: 110px;
}
.arb-walkin-table-chip:hover {
	border-color: #94a3b8;
}
.arb-walkin-table-chip.is-active {
	background: #1e293b;
	border-color: #1e293b;
	color: #fff;
}
.arb-walkin-table-chip.is-active .arb-walkin-table-chip-meta { color: #cbd5e1; }
.arb-walkin-table-chip.is-busy {
	background: #f1f5f9;
	color: #94a3b8;
	cursor: not-allowed;
}
.arb-walkin-table-chip.is-busy:hover { border-color: #e2e8f0; }
.arb-walkin-table-chip.is-recommended:not(.is-active) {
	border-color: #f97316;
}
.arb-walkin-table-chip.is-auto {
	background: #fef3c7;
	border-color: #fcd34d;
}
.arb-walkin-table-chip.is-auto.is-active {
	background: #f97316;
	border-color: #f97316;
}
.arb-walkin-table-chip-name {
	font-size: 13px;
	font-weight: 700;
}
.arb-walkin-table-chip-meta {
	font-size: 11px;
	color: #64748b;
	line-height: 1.3;
}

/* Modal — slightly tighter */
.arb-tl-modal {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}
.arb-tl-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e2e8f0;
}
.arb-tl-modal-head h3 {
	margin: 0;
	font-size: 17px;
	color: #0f172a;
	font-weight: 700;
}
.arb-tl-modal-close {
	background: transparent;
	border: none;
	font-size: 24px;
	line-height: 1;
	color: #94a3b8;
	cursor: pointer;
	padding: 0;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	transition: all .12s ease;
}
.arb-tl-modal-close:hover {
	background: #f1f5f9;
	color: #0f172a;
}
.arb-tl-modal-body { padding: 20px; }


/* ─────────────────────────────────────────────────────────────
   Premium login gate (frontend dashboard)
   ─────────────────────────────────────────────────────────── */
.arb-login-page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
	padding: 32px 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.arb-login-card {
	width: 100%;
	max-width: 420px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 32px;
	box-shadow:
		0 1px 3px rgba(15, 23, 42, 0.04),
		0 10px 40px rgba(15, 23, 42, 0.06);
}
.arb-login-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px 6px 6px;
	background: #f1f5f9;
	border-radius: 999px;
	color: #1e293b;
	margin-bottom: 20px;
}
.arb-login-brand svg {
	background: #1e293b;
	color: #fff;
	padding: 6px;
	border-radius: 999px;
	width: 28px;
	height: 28px;
}
.arb-login-brand-name {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.arb-login-title {
	margin: 0 0 6px 0;
	font-size: 24px;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.02em;
}
.arb-login-sub {
	margin: 0 0 24px 0;
	font-size: 14px;
	color: #64748b;
}
.arb-login-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.arb-login-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.arb-login-field label {
	font-size: 12px;
	font-weight: 600;
	color: #475569;
	letter-spacing: 0.01em;
}
.arb-login-field input {
	padding: 11px 14px;
	font-size: 14px;
	font-family: inherit;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	background: #fff;
	color: #0f172a;
	transition: border-color .12s ease, box-shadow .12s ease;
	width: 100%;
	box-sizing: border-box;
}
.arb-login-field input:focus {
	outline: none;
	border-color: #1e293b;
	box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.08);
}
.arb-login-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 2px;
}
.arb-login-remember {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #475569;
	cursor: pointer;
	user-select: none;
}
.arb-login-remember input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: #1e293b;
	cursor: pointer;
	margin: 0;
}
.arb-login-lost {
	font-size: 13px;
	color: #475569;
	text-decoration: none;
	font-weight: 500;
	transition: color .12s ease;
}
.arb-login-lost:hover { color: #0f172a; text-decoration: underline; }
.arb-login-error {
	background: #fef2f2;
	border: 1px solid #fca5a5;
	color: #991b1b;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 13px;
	margin: 4px 0;
}
.arb-login-submit {
	margin-top: 6px;
	background: #1e293b;
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 13px 16px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background .12s ease, transform .08s ease;
	font-family: inherit;
}
.arb-login-submit:hover:not(:disabled) {
	background: #0f172a;
}
.arb-login-submit:active:not(:disabled) {
	transform: translateY(1px);
}
.arb-login-submit:disabled {
	background: #94a3b8;
	cursor: wait;
}
.arb-login-footer {
	margin: 24px 0 0 0;
	padding-top: 20px;
	border-top: 1px solid #f1f5f9;
	font-size: 12px;
	color: #94a3b8;
	text-align: center;
	line-height: 1.5;
}

/* Mobile tuning */
@media (max-width: 480px) {
	.arb-login-page { padding: 16px; min-height: 100vh; }
	.arb-login-card { padding: 24px; border-radius: 12px; }
	.arb-login-title { font-size: 22px; }
}

/* ─────────────────────────────────────────────────────────────
   Mobile fixes for modals + dashboard header
   ─────────────────────────────────────────────────────────── */

/* Modal: scrollable on small screens. Without this, a tall
   walk-in modal (12 party buttons + 8+ table chips) would
   overflow the viewport and the operator couldn't reach the
   submit button. */
.arb-tl-modal {
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.arb-tl-modal-body {
	overflow-y: auto;
	flex: 1;
}
@media (max-width: 600px) {
	.arb-tl-modal-overlay {
		align-items: flex-start;
		padding: 12px;
	}
	.arb-tl-modal {
		max-height: calc(100vh - 24px);
		max-width: 100%;
	}
	.arb-tl-modal-body { padding: 16px; }
}

/* Header bar on narrow screens — let it wrap cleanly instead
   of squishing date pills and the walk-in button. */
@media (max-width: 700px) {
	.arb-tl-header {
		padding: 12px;
		gap: 10px;
	}
	.arb-tl-stats { margin-left: 0; flex-wrap: wrap; }
	.arb-tl-walkin-btn { margin-left: 0; }
	.arb-tl-date-pills { overflow-x: auto; max-width: 100%; }
}

/* Touch target boost — tabs and party buttons need to hit the
   44px iOS guideline so they're tappable on a phone without
   missing. */
@media (max-width: 700px) {
	.arb-tl-tab {
		padding: 10px 14px;
		font-size: 13px;
	}
	.arb-walkin-party-btn {
		padding: 12px 0;
		font-size: 16px;
		min-height: 44px;
	}
	.arb-walkin-party-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Lost password modal success state */
.arb-lostpw-modal { max-width: 420px; }
.arb-lostpw-help {
	margin: 0 0 16px 0;
	font-size: 13px;
	color: #64748b;
	line-height: 1.5;
}
.arb-login-success {
	background: #ecfdf5;
	border: 1px solid #6ee7b7;
	color: #065f46;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 13px;
	margin: 4px 0;
}

/* ─── Touch device hover reset (frontend dashboard) ────────────
   On touchscreens, :hover styles "stick" after a tap until the
   user taps somewhere else. That left date pills, nav arrows,
   tab buttons, walk-in modal pills, and table chips looking
   permanently hovered after a single tap. Disabling hover
   entirely on (hover: none) devices fixes it without affecting
   real-mouse interactions on desktop.

   Using `all: revert` is the cleanest way: it tells the browser
   "reset every property this :hover rule set back to the
   non-hover default", regardless of which specific properties
   any given rule above happened to override. */
@media (hover: none) {
	.arb-tl-tab:hover,
	.arb-tl-tab.is-active:hover,
	.arb-tl-nav-btn:hover,
	.arb-tl-today-btn:hover,
	.arb-tl-date-pill:hover,
	.arb-tl-act:hover,
	.arb-tl-act-primary:hover,
	.arb-tl-act-warn:hover,
	.arb-tl-act-danger:hover,
	.arb-tl-walkin-btn:hover,
	.arb-hub-card:hover,
	.arb-hub-card:hover .arb-hub-card-icon,
	.arb-hub-card-external:hover,
	.arb-walkin-party-btn:hover,
	.arb-walkin-table-chip:hover,
	.arb-walkin-table-chip.is-busy:hover,
	.arb-tl-block:hover,
	.arb-tl-arrival:hover,
	.arb-tl-modal-close:hover,
	.arb-login-lost:hover {
		all: revert;
	}
}

/* ─── Active-state hover protection (desktop) ──────────────────
   Mouse-hovering an already-selected control should not change
   its appearance — the dark/red "selected" treatment must win
   over the lighter hover treatment. Without these explicit
   overrides, a user mousing over the currently-selected date
   pill saw it briefly fade to grey, which looked broken. */
.arb-tl-tab.is-active:hover {
	background: #1e293b;
	color: #fff;
}
.arb-tl-date-pill.is-active:hover,
.arb-tl-date-pill.is-active:focus {
	background: #1e293b;
	color: #fff;
	border-color: #1e293b;
}
.arb-walkin-party-btn.is-active:hover {
	background: #1e293b;
	color: #fff;
	border-color: #1e293b;
}
.arb-walkin-table-chip.is-active:hover {
	background: #1e293b;
	border-color: #1e293b;
	color: #fff;
}
.arb-walkin-table-chip.is-busy {
	cursor: not-allowed;
}
.arb-walkin-table-chip.is-busy:hover {
	background: #f1f5f9;
	border-color: #e2e8f0;
	color: #94a3b8;
}

/* ─── Nav arrow icon contrast on hover ─────────────────────────
   The next/prev arrows had their text/icon color inherit from
   the parent, which turned them near-invisible against the
   hover background. Pin them to a darker color so they stay
   readable when the user mouses over. */
.arb-tl-nav-btn:hover {
	color: #0f172a;
}
.arb-tl-nav-btn:hover svg { color: inherit; }

/* ─── Definitive focus/active reset (v3.14.8) ──────────────────
   Earlier hover fixes still allowed two failure modes that
   showed up in production:

     1) After click, the button keeps :focus on desktop. Browser
        default focus styling (or a leaked :hover style) made the
        element look "selected" even when it wasn't.

     2) Some browsers leave the :active state visible briefly,
        which can ghost a button as faded for hundreds of ms
        after release.

   Fix: kill the browser default focus outline on these dashboard
   controls and only show a visible ring when :focus-visible
   triggers (i.e. when the user navigates by keyboard, not by
   mouse click). This is the modern pattern. */
.arb-tl-tab,
.arb-tl-nav-btn,
.arb-tl-today-btn,
.arb-tl-date-pill,
.arb-tl-act,
.arb-tl-walkin-btn,
.arb-walkin-party-btn,
.arb-walkin-table-chip,
.arb-hub-card,
.arb-tl-modal-close {
	outline: none;
}
.arb-tl-tab:focus-visible,
.arb-tl-nav-btn:focus-visible,
.arb-tl-today-btn:focus-visible,
.arb-tl-date-pill:focus-visible,
.arb-tl-act:focus-visible,
.arb-tl-walkin-btn:focus-visible,
.arb-walkin-party-btn:focus-visible,
.arb-walkin-table-chip:focus-visible,
.arb-hub-card:focus-visible {
	outline: 2px solid #1e293b;
	outline-offset: 2px;
}

/* Ensure non-active pills always paint as transparent in their
   resting state. The Greek-locale screenshots showed "ΔΕΥ"
   pills with a stuck grey background even though they were
   neither hovered nor active. This appears to be a focus-state
   leak from earlier rules, so we explicitly reset the non-
   active resting appearance here AFTER everything else. */
.arb-tl-date-pill:not(.is-active),
.arb-tl-date-pill:not(.is-active):focus {
	background: transparent;
	border-color: transparent;
}
.arb-tl-tab:not(.is-active),
.arb-tl-tab:not(.is-active):focus {
	background: transparent;
}

/* ─── Visible hover feedback (desktop only) ────────────────────
   The transparent resting state above fixed the "stuck pill"
   problem, but it also killed the only visual indication that
   these are clickable. Add a subtle hover background, gated to
   pointer-capable devices so it can't get stuck after a tap. */
@media (hover: hover) and (pointer: fine) {
	.arb-tl-date-pill:not(.is-active):hover {
		background: #f1f5f9;
		border-color: #e2e8f0;
	}
	.arb-tl-tab:not(.is-active):hover {
		background: #f1f5f9;
		color: #0f172a;
	}
	.arb-tl-nav-btn:hover {
		background: #f1f5f9;
	}
}

/* Next/prev nav arrows: pin the text color so the ← / → glyphs
   remain readable when WordPress (in the iframed admin pages)
   tries to apply its own button color overrides. Without this,
   the arrow rendered the same color as the button background
   on some focus states, making it look like a blank pill (see
   the "empty box next to ΠΕΜ" screenshot). */
.arb-tl-nav-btn {
	color: #0f172a !important;
}
.arb-tl-nav-btn:hover,
.arb-tl-nav-btn:focus-visible {
	color: #0f172a !important;
}

/* ─── Theme override protection: Today + nav buttons (v3.14.11) ─
   Same fix as the booking widget's area dropdown: host themes
   sometimes apply aggressive `button:hover { color: #fff }`
   rules that beat our cascade and make the "Today" label and
   ← / → arrows go invisible on hover. Lock the text color in
   every interactive state with !important so theme rules can't
   override it. */
.arb-tl-today-btn,
.arb-tl-today-btn:hover,
.arb-tl-today-btn:focus,
.arb-tl-today-btn:active {
	color: #0f172a !important;
	background: #fff !important;
}
.arb-tl-nav-btn,
.arb-tl-nav-btn:hover,
.arb-tl-nav-btn:focus,
.arb-tl-nav-btn:active {
	color: #0f172a !important;
	background: #fff !important;
}
/* Hover state — only the border changes color for both buttons.
   Re-asserted here so the hover specifically (which has higher
   specificity than the bare element selector above) doesn't
   lose the background:#fff rule. */
@media (hover: hover) and (pointer: fine) {
	.arb-tl-today-btn:hover,
	.arb-tl-nav-btn:hover {
		background: #f8fafc !important;
		border-color: #94a3b8 !important;
		color: #0f172a !important;
	}
}

/* ─── Tag Management page ───────────────────────────────────────
   Three-card layout matching the Tablein competitor reference.
   Each card is a stack of: header (title + Edit button), System
   tags pill row (read-only navy pills), Custom tags pill row
   (operator-managed pills + inline "+ Add tag" toggle). */
.arb-tag-management .arb-tag-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 22px 28px;
	margin: 16px 0;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.arb-tag-management .arb-tag-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}
.arb-tag-management .arb-tag-card-header h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
	border-bottom: none !important;
	padding: 0 !important;
}
.arb-tag-management .arb-tag-section { margin-top: 18px; }
.arb-tag-management .arb-tag-section h3 {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	color: #0f172a;
}
.arb-tag-management .arb-tag-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.arb-tag-management .arb-tag-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 999px;
	line-height: 1.2;
	color: #fff;
}
.arb-tag-management .arb-tag-pill-system {
	background: #1e293b;
	color: #fff;
}
.arb-tag-management .arb-tag-pill-custom {
	color: #fff;
	padding-right: 6px;
}
.arb-tag-management .arb-tag-pill-remove {
	background: rgba(255, 255, 255, 0.18);
	border: none;
	color: #fff;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-size: 12px;
	line-height: 18px;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 4px;
	transition: background .12s ease;
}
.arb-tag-management .arb-tag-pill-remove:hover {
	background: rgba(255, 255, 255, 0.35);
}
.arb-tag-management .arb-tag-add-toggle {
	background: #fff;
	border: 1px dashed #94a3b8;
	color: #1e293b;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	transition: all .12s ease;
}
.arb-tag-management .arb-tag-add-toggle:hover {
	border-color: #1e293b;
	background: #f8fafc;
}
.arb-tag-management .arb-tag-add-form {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	flex-wrap: wrap;
}
.arb-tag-management .arb-tag-add-input {
	flex: 1;
	min-width: 200px;
	max-width: 320px;
	padding: 8px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
}
.arb-tag-management .arb-tag-add-input:focus {
	outline: none;
	border-color: #1e293b;
	box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.08);
}
.arb-tag-management .arb-tag-add-error {
	color: #b91c1c;
	font-size: 13px;
	flex-basis: 100%;
}

/* ─── Widget Integration page ────────────────────────────────── */
.arb-widget-integration .arb-widget-context {
	font-size: 14px;
	color: #475569;
	margin: 8px 0 24px;
}
.arb-widget-integration .arb-widget-context code {
	background: #f1f5f9;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 12px;
	color: #1e293b;
}
.arb-widget-integration .arb-embed-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 22px 28px;
	margin: 16px 0;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.arb-widget-integration .arb-embed-card h2 {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: #0f172a;
	border-bottom: none !important;
	padding: 0 !important;
}
.arb-widget-integration .arb-embed-card p.description {
	margin: 0 0 16px;
	font-size: 13px;
	color: #64748b;
}
.arb-copy-snippet {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.arb-snippet-textarea {
	width: 100%;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
	padding: 12px 14px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	background: #f8fafc !important;
	color: #0f172a !important;
	resize: vertical;
	min-height: 64px;
	box-sizing: border-box;
	overflow: auto;
}
.arb-copy-button {
	align-self: flex-start;
}
.arb-copy-button.is-copied {
	background: #166534 !important;
	border-color: #166534 !important;
	color: #fff !important;
}
.arb-copy-button.is-copy-failed {
	background: #b91c1c !important;
	border-color: #b91c1c !important;
	color: #fff !important;
}
.arb-embed-preview {
	background: repeating-linear-gradient(45deg, #f1f5f9 0 8px, #fff 8px 16px);
	padding: 16px;
	border-radius: 8px;
	border: 1px dashed #cbd5e1;
}

/* ─── Timeline: live "now" indicator ─────────────────────────────
   Teal vertical line drawn across the timeline body at the
   current restaurant-local time. Placed via JS (see
   appendNowLine in timeline.js). Pointer-events disabled so
   the line never intercepts clicks meant for a booking pill
   sitting underneath it. */
.arb-tl-body { position: relative; }
.arb-tl-now-line {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #0891b2;
	pointer-events: none;
	z-index: 9;
	box-shadow: 0 0 0 1px rgba(8, 145, 178, 0.18);
	transition: left .25s ease;
}
.arb-tl-now-dot {
	position: absolute;
	top: -6px;
	left: -5px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #0891b2;
	box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.25);
	animation: arb-tl-now-pulse 2.4s ease-in-out infinite;
}
/* "Out of range" treatment — when current time falls BEFORE the
   timeline's visible start (e.g. now is 14:00 but the earliest
   shift starts at 18:00) or AFTER its visible end. We clamp the
   line to the edge instead of hiding it, then dim the dot and
   add a small arrow indicator pointing in the direction of the
   actual "now" so the operator reads "current time is somewhere
   off-strip" rather than "broken". */
.arb-tl-now-line.arb-tl-now-before .arb-tl-now-dot,
.arb-tl-now-line.arb-tl-now-after  .arb-tl-now-dot {
	opacity: 0.55;
	animation: none;
}
.arb-tl-now-line.arb-tl-now-before::before,
.arb-tl-now-line.arb-tl-now-after::before {
	position: absolute;
	top: -8px;
	font-size: 11px;
	color: #0891b2;
	font-weight: 700;
	white-space: nowrap;
}
.arb-tl-now-line.arb-tl-now-before::before {
	content: '←';
	right: 6px;
}
.arb-tl-now-line.arb-tl-now-after::before {
	content: '→';
	left: 6px;
}
@keyframes arb-tl-now-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.25); }
	50%       { box-shadow: 0 0 0 7px rgba(8, 145, 178, 0.08); }
}
@media (prefers-reduced-motion: reduce) {
	.arb-tl-now-dot { animation: none; }
	.arb-tl-now-line { transition: none; }
}

/* ─── Bookings page filters: chips + advanced search ────────────
   Layout, top to bottom:
     1. Prominent search bar (pill-shaped, search icon, date picker
        and Apply button on the same line)
     2. Status chips row (with live counts scoped to the selected
        date / range)
     3. Advanced-search toggle button
     4. Collapsible advanced-search panel (booking #, name, phone,
        email, date range)
   This mirrors the Tablein list view layout the operators are
   used to. */
.arb-bookings-filters {
	margin: 16px 0 18px;
}
/* ── Prominent search bar (replaces the old buried search field) ── */
.arb-bookings-searchbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.arb-search-pill {
	position: relative;
	flex: 1 1 320px;
	max-width: 480px;
	display: flex;
	align-items: center;
}
.arb-search-pill .arb-search-icon {
	position: absolute;
	left: 16px;
	width: 18px;
	height: 18px;
	color: #94a3b8;
	pointer-events: none;
}
.arb-search-pill input[type="search"] {
	width: 100%;
	padding: 11px 16px 11px 44px;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	color: #0f172a;
	font-family: inherit;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.arb-search-pill input[type="search"]:focus {
	outline: none;
	border-color: #1e293b;
	box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.08);
}
.arb-search-pill input[type="search"]::placeholder { color: #94a3b8; }
.arb-search-date {
	min-width: 160px;
	padding: 10px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	color: #0f172a;
	font-family: inherit;
}

/* ── Status chips with date-scoped counts ── */
.arb-status-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}
.arb-status-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 600;
	color: #475569;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	text-decoration: none;
	transition: all .12s ease;
	white-space: nowrap;
}
.arb-status-chip:hover {
	border-color: #1e293b;
	color: #0f172a;
	background: #f8fafc;
}
.arb-status-chip.is-active {
	background: #1e293b;
	border-color: #1e293b;
	color: #fff;
}
.arb-status-chip.is-active:hover {
	background: #0f172a;
	color: #fff;
}
.arb-status-chip .arb-chip-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 18px;
	padding: 0 6px;
	background: #f1f5f9;
	color: #475569;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
}
.arb-status-chip.is-active .arb-chip-count {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

/* ── Advanced toggle row + panel ── */
.arb-bookings-advanced-toggle-row {
	margin-bottom: 12px;
}
.arb-advanced-search-panel {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 20px 24px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.arb-advanced-search-panel h3 {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.arb-advanced-search-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px 18px;
}
.arb-advanced-search-grid label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}
.arb-advanced-search-grid label span { display: block; }
.arb-advanced-search-grid input {
	padding: 9px 12px;
	font-size: 14px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background: #fff;
	color: #0f172a;
	font-family: inherit;
	min-height: 40px;
}
.arb-advanced-search-grid input:focus {
	outline: none;
	border-color: #1e293b;
	box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.08);
}
.arb-advanced-search-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #e5e7eb;
}

/* ─── Bookings page header (+ New Reservation button) ────────── */
.arb-bookings-pageheader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}
.arb-bookings-pageheader h1 { margin: 0; }
.arb-bookings-pageheader .arb-open-new-reservation {
	background: #1e293b !important;
	border-color: #1e293b !important;
	color: #fff !important;
	padding: 10px 22px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	height: auto !important;
	line-height: 1.2 !important;
}
.arb-bookings-pageheader .arb-open-new-reservation:hover {
	background: #0f172a !important;
	border-color: #0f172a !important;
}

/* ─── New Reservation modal ─────────────────────────────────────
   Large two-column modal — the Tablein-equivalent admin booking
   creation surface. Status tabs at top, Reservation details on
   the left, Guest details on the right, save bar at the bottom. */
.arb-new-reservation-modal {
	z-index: 100050;
}
.arb-new-res-card {
	width: 95vw;
	max-width: 1100px;
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
}
.arb-new-res-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid #e5e7eb;
	background: #f8fafc;
}
.arb-new-res-status-tabs {
	display: flex;
	gap: 4px;
}
.arb-new-res-status-tab {
	border: none;
	background: transparent;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	color: #64748b;
	border-radius: 8px;
	cursor: pointer;
	font-family: inherit;
	transition: all .12s ease;
}
.arb-new-res-status-tab:hover { background: #e2e8f0; color: #0f172a; }
.arb-new-res-status-tab.is-active {
	background: #1e293b;
	color: #fff;
}
.arb-new-res-head .arb-modal-close {
	font-size: 28px;
	line-height: 1;
	color: #64748b;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0 8px;
}
.arb-new-res-head .arb-modal-close:hover { color: #0f172a; }

.arb-new-res-body {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 0;
	overflow-y: auto;
	flex: 1;
}
.arb-new-res-col {
	padding: 24px 26px;
}
.arb-new-res-col-left {
	border-right: 1px solid #e5e7eb;
}
.arb-new-res-col h2 {
	margin: 0 0 18px;
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
	border-bottom: none !important;
	padding: 0 !important;
}
.arb-new-res-field { margin-bottom: 18px; }
.arb-new-res-field > label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	margin-bottom: 6px;
}
.arb-new-res-field input[type="text"],
.arb-new-res-field input[type="email"],
.arb-new-res-field input[type="tel"],
.arb-new-res-field input[type="number"],
.arb-new-res-field input[type="date"],
.arb-new-res-field input[type="time"],
.arb-new-res-field select,
.arb-new-res-field textarea {
	width: 100%;
	padding: 10px 12px;
	font-size: 14px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background: #fff;
	color: #0f172a;
	font-family: inherit;
	min-height: 42px;
	box-sizing: border-box;
}
.arb-new-res-field textarea {
	min-height: 70px;
	resize: vertical;
}
.arb-new-res-field input:focus,
.arb-new-res-field select:focus,
.arb-new-res-field textarea:focus {
	outline: none;
	border-color: #1e293b;
	box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.08);
}
.arb-new-res-field-grid {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 14px;
}
/* Guest count pill grid */
.arb-new-res-guests-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}
.arb-guest-pill {
	height: 38px;
	border: 1px solid #cbd5e1;
	background: #fff;
	color: #1e293b;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: all .12s ease;
}
.arb-guest-pill:hover {
	border-color: #1e293b;
	background: #f8fafc;
}
.arb-guest-pill.is-active {
	background: #1e293b;
	color: #fff;
	border-color: #1e293b;
}
.arb-guest-pill-input {
	padding: 0 8px;
	min-height: 0 !important;
	text-align: center;
}
/* Tag chip row */
.arb-new-res-tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.arb-new-res-tag-chip {
	border: 1px solid #cbd5e1;
	background: #fff;
	color: #475569;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	transition: all .12s ease;
	white-space: nowrap;
}
.arb-new-res-tag-chip:hover {
	border-color: #1e293b;
	color: #0f172a;
	background: #f8fafc;
}
.arb-new-res-tag-chip.is-active {
	background: #1e293b;
	color: #fff;
	border-color: #1e293b;
}
.arb-new-res-tag-chip-custom {
	border-style: dashed;
}
.arb-new-res-tag-chip-custom.is-active {
	border-style: solid;
}
.arb-new-res-tag-empty {
	font-size: 12px;
	color: #94a3b8;
	font-style: italic;
}
/* Footer */
.arb-new-res-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 26px;
	border-top: 1px solid #e5e7eb;
	background: #f8fafc;
	flex-shrink: 0;
}
.arb-new-res-email-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	cursor: pointer;
}
.arb-new-res-foot-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}
.arb-new-res-error {
	color: #b91c1c;
	font-size: 13px;
	font-weight: 600;
}
.arb-new-res-save {
	padding: 10px 28px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	border-radius: 8px !important;
}
/* Responsive: stack columns on narrow viewports (mobile, iframe) */
@media (max-width: 880px) {
	.arb-new-res-body {
		grid-template-columns: 1fr;
	}
	.arb-new-res-col-left {
		border-right: none;
		border-bottom: 1px solid #e5e7eb;
	}
}

/* ─── New Reservation: guest autocomplete dropdown ───────────── */
.arb-new-res-guest-search {
	position: relative;
}
.arb-guest-suggest {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
	margin-top: 4px;
	max-height: 280px;
	overflow-y: auto;
	z-index: 5;
}
.arb-guest-suggest-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	padding: 9px 12px;
	background: transparent;
	border: none;
	border-bottom: 1px solid #f1f5f9;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	transition: background .1s ease;
}
.arb-guest-suggest-item:last-child { border-bottom: none; }
.arb-guest-suggest-item:hover,
.arb-guest-suggest-item:focus {
	background: #f8fafc;
	outline: none;
}
.arb-guest-suggest-name {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.2;
}
.arb-guest-suggest-meta {
	font-size: 12px;
	font-weight: 500;
	color: #64748b;
	margin-top: 2px;
}

/* ─── Frontend dashboard head with persistent New Reservation ── */
.arb-frontend-dashboard-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.arb-frontend-dashboard-titles {
	flex: 1 1 auto;
	min-width: 0;
}
.arb-frontend-dashboard-titles h2 { margin: 0 0 4px; }
.arb-frontend-dashboard-titles p { margin: 0; }
.arb-frontend-new-res {
	flex-shrink: 0;
	background: #1e293b !important;
	border-color: #1e293b !important;
	color: #fff !important;
	padding: 12px 24px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: 10px !important;
	height: auto !important;
	line-height: 1.2 !important;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
	transition: background .12s ease, box-shadow .12s ease;
	cursor: pointer;
}
.arb-frontend-new-res:hover {
	background: #0f172a !important;
	border-color: #0f172a !important;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}
@media (max-width: 600px) {
	.arb-frontend-new-res {
		width: 100%;
		text-align: center;
	}
}

/* ─── New Reservation modal: mode rail (Booking / Blocked) ──────
   Left vertical tab strip à la Tablein. Each mode tab is an
   icon-above-label button; active state inverts colors. The
   shell flexes rail + content panels horizontally so the
   blocked-mode panel and the booking-mode panel sit in the same
   geometric slot but only one is visible. */
.arb-new-res-shell {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}
.arb-new-res-rail {
	flex-shrink: 0;
	width: 92px;
	background: #f1f5f9;
	border-right: 1px solid #e2e8f0;
	display: flex;
	flex-direction: column;
	padding: 16px 8px;
	gap: 4px;
}
.arb-new-res-mode-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 6px;
	background: transparent;
	border: none;
	border-radius: 10px;
	color: #64748b;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: all .12s ease;
}
.arb-new-res-mode-tab:hover {
	background: #e2e8f0;
	color: #0f172a;
}
.arb-new-res-mode-tab.is-active {
	background: #1e293b;
	color: #fff;
}
.arb-new-res-mode-tab svg { display: block; }
.arb-new-res-mode {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow-y: auto;
}
.arb-new-res-mode[hidden] { display: none; }

/* Blocked-mode panel — single-column form, less dense than the
   booking grid because it has far fewer fields. */
.arb-new-res-blocked-body {
	padding: 24px 26px;
	max-width: 620px;
}
.arb-new-res-blocked-body h2 {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
}
.arb-new-res-blocked-body .description {
	margin: 0 0 20px;
	font-size: 13px;
	color: #64748b;
	line-height: 1.5;
}

/* ─── Timeline: block bands (gray hatched pattern) ──────────────
   A "block" is an operator-declared period during which a table
   is out of service. Renders as a striped gray band so it reads
   immediately as "not available" — distinct from booking pills
   which have status colors and full content. */
.arb-tl-block-band {
	position: absolute;
	top: 4px;
	bottom: 4px;
	background-color: #cbd5e1;
	background-image: repeating-linear-gradient(
		45deg,
		rgba(15, 23, 42, 0.08),
		rgba(15, 23, 42, 0.08) 6px,
		transparent 6px,
		transparent 12px
	);
	border: 1px dashed #64748b;
	border-radius: 6px;
	pointer-events: auto;
	cursor: help;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	z-index: 1;
}
.arb-tl-block-band-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #334155;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 8px;
	max-width: 100%;
}

/* When mode rail is shown, the body's previous max-width might
   clip — narrow viewports stack vertically. */
@media (max-width: 880px) {
	.arb-new-res-shell { flex-direction: column; }
	.arb-new-res-rail {
		width: 100%;
		flex-direction: row;
		justify-content: center;
		gap: 8px;
		padding: 8px;
	}
	.arb-new-res-mode-tab { flex-direction: row; padding: 8px 14px; }
}

/* ═════════════════════════════════════════════════════════════════
   OWNER DASHBOARD v2 — Premium chrome
   ═════════════════════════════════════════════════════════════════
   Activated by the .arb-fd-v2 wrapper class on the dashboard root.
   All rules below are scoped to .arb-fd-v2 so the older horizontal-
   tab dashboard layout (and the wp-admin pages) are unaffected.

   Two-column layout: vertical sidebar (240px) + main content area.
   The inner timeline.js still renders its own horizontal tab strip
   inside #arb-timeline-root; we hide it via CSS in v2 mode since
   the sidebar now drives the same navigation.
   ═════════════════════════════════════════════════════════════════ */

.arb-fd-v2 {
	display: flex;
	min-height: 100vh;
	background: #f7f8fb;
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #0f172a;
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ─── Sidebar (vertical nav rail) ─────────────────────────────── */
.arb-fd-v2 .arb-fd-sidebar {
	flex-shrink: 0;
	width: 240px;
	background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
	color: #cbd5e1;
	display: flex;
	flex-direction: column;
	padding: 22px 14px 18px;
	position: sticky;
	top: 0;
	height: 100vh;
	box-shadow: 1px 0 0 rgba(15, 23, 42, 0.04);
	z-index: 5;
}
.arb-fd-v2 .arb-fd-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 8px 22px;
	border-bottom: 1px solid rgba(148, 163, 184, 0.12);
	margin-bottom: 16px;
}
.arb-fd-v2 .arb-fd-brand-mark {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, #3b82f6, #6366f1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}
.arb-fd-v2 .arb-fd-brand-mark svg {
	width: 20px;
	height: 20px;
	stroke-width: 2;
}
.arb-fd-v2 .arb-fd-brand-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.arb-fd-v2 .arb-fd-brand-name {
	font-size: 14px;
	font-weight: 700;
	color: #f8fafc;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.arb-fd-v2 .arb-fd-brand-tag {
	font-size: 11px;
	color: #94a3b8;
	margin-top: 2px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Nav buttons */
.arb-fd-v2 .arb-fd-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}
.arb-fd-v2 .arb-fd-nav-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: transparent;
	border: none;
	border-radius: 9px;
	color: #cbd5e1;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	transition: background-color .14s ease, color .14s ease;
	width: 100%;
	position: relative;
}
.arb-fd-v2 .arb-fd-nav-btn:hover {
	background: rgba(148, 163, 184, 0.08);
	color: #f8fafc;
}
.arb-fd-v2 .arb-fd-nav-btn:focus-visible {
	outline: 2px solid #3b82f6;
	outline-offset: 2px;
}
.arb-fd-v2 .arb-fd-nav-btn.is-active {
	background: rgba(59, 130, 246, 0.16);
	color: #ffffff;
}
.arb-fd-v2 .arb-fd-nav-btn.is-active::before {
	content: '';
	position: absolute;
	left: -14px;
	top: 8px;
	bottom: 8px;
	width: 3px;
	background: #3b82f6;
	border-radius: 0 3px 3px 0;
}
.arb-fd-v2 .arb-fd-nav-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.arb-fd-v2 .arb-fd-nav-icon svg {
	width: 18px;
	height: 18px;
	stroke-width: 1.8;
}
.arb-fd-v2 .arb-fd-nav-label {
	font-size: 14px;
	letter-spacing: -0.005em;
}

/* User footer */
.arb-fd-v2 .arb-fd-user {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 8px;
	margin-top: 12px;
	border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.arb-fd-v2 .arb-fd-user-avatar {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, #6366f1, #8b5cf6);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
}
.arb-fd-v2 .arb-fd-user-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}
.arb-fd-v2 .arb-fd-user-name {
	font-size: 13px;
	font-weight: 600;
	color: #e2e8f0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.arb-fd-v2 .arb-fd-user-logout {
	font-size: 11px;
	color: #94a3b8;
	text-decoration: none;
	font-weight: 500;
}
.arb-fd-v2 .arb-fd-user-logout:hover {
	color: #f8fafc;
	text-decoration: underline;
}

/* ─── Main area ─────────────────────────────────────────────── */
.arb-fd-v2 .arb-fd-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 24px 32px 32px;
}
.arb-fd-v2 .arb-fd-topbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 0 0 22px;
	margin-bottom: 22px;
	border-bottom: 1px solid #e2e8f0;
}
.arb-fd-v2 .arb-fd-topbar-titles { min-width: 0; }
.arb-fd-v2 .arb-fd-page-title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: #0f172a;
	line-height: 1.2;
}
.arb-fd-v2 .arb-fd-page-sub {
	margin: 4px 0 0;
	font-size: 13px;
	color: #64748b;
	font-weight: 500;
}
.arb-fd-v2 .arb-fd-page-sub strong {
	font-weight: 600;
	color: #334155;
}
.arb-fd-v2 .arb-fd-topbar-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.arb-fd-v2 .arb-fd-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	background: #0f172a;
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	letter-spacing: -0.005em;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06);
	transition: background-color .14s ease, transform .12s ease, box-shadow .14s ease;
}
.arb-fd-v2 .arb-fd-cta:hover {
	background: #1e293b;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.1);
}
.arb-fd-v2 .arb-fd-cta:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}
.arb-fd-v2 .arb-fd-cta:focus-visible {
	outline: 2px solid #3b82f6;
	outline-offset: 2px;
}
.arb-fd-v2 .arb-fd-cta svg { flex-shrink: 0; }

/* ─── Hide the inner JS-rendered horizontal tab strip in v2 ──── */
.arb-fd-v2 .arb-tl-tabs { display: none !important; }

/* ─── Refine the inner timeline content for v2 ──────────────── */
.arb-fd-v2 #arb-timeline-root { flex: 1; min-height: 0; }
.arb-fd-v2 .arb-tl-loading,
.arb-fd-v2 .arb-timeline-loading {
	padding: 40px 0;
	color: #94a3b8;
	font-size: 14px;
}

/* Hide the legacy frontend-dashboard-head (older selectors target
   it); the v2 topbar replaces it. Kept invisible rather than
   removed so any third-party CSS / JS hook keyed off it doesn't
   throw. */
.arb-fd-v2 .arb-frontend-dashboard-head { display: none; }

/* Polish the inner timeline header (date nav + stats + walk-in
   button). Lives inside #arb-timeline-root and is rendered by
   timeline.js, so we restyle via the existing class hooks rather
   than restructure markup. */
.arb-fd-v2 .arb-tl-header {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 14px 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
	margin-bottom: 18px;
}
.arb-fd-v2 .arb-tl-grid-wrap {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
	overflow: auto;
}
.arb-fd-v2 .arb-tl-right-panel {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.arb-fd-v2 .arb-tl-time-strip {
	background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
	border-bottom: 1px solid #e2e8f0;
}
.arb-fd-v2 .arb-tl-time-strip-head {
	background: #f1f5f9;
	color: #475569;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
}
.arb-fd-v2 .arb-tl-area-head {
	background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
	color: #334155;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 8px 16px;
	border-top: 1px solid #e2e8f0;
	border-bottom: 1px solid #e2e8f0;
}

/* Booking summary cards inside the v2 dashboard get more breathing
   room and a card-style background. */
.arb-fd-v2 .arb-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}
.arb-fd-v2 .arb-stat-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 14px 18px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
	display: flex;
	flex-direction: column;
	gap: 4px;
	transition: border-color .14s ease, box-shadow .14s ease;
}
.arb-fd-v2 .arb-stat-card:hover {
	border-color: #cbd5e1;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.arb-fd-v2 .arb-stat-label {
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.arb-fd-v2 .arb-stat-card strong {
	font-size: 24px;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.025em;
}

/* Inner content tables get the same card treatment so the dashboard
   feels visually consistent. */
.arb-fd-v2 .arb-table,
.arb-fd-v2 table.widefat {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.arb-fd-v2 .arb-table thead,
.arb-fd-v2 table.widefat thead {
	background: #f8fafc;
}
.arb-fd-v2 .arb-table th,
.arb-fd-v2 table.widefat th {
	font-size: 11px;
	font-weight: 700;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 12px 14px;
	border-bottom: 1px solid #e2e8f0;
}
.arb-fd-v2 .arb-table td,
.arb-fd-v2 table.widefat td {
	padding: 12px 14px;
	font-size: 13px;
	color: #1e293b;
	border-bottom: 1px solid #f1f5f9;
}
.arb-fd-v2 .arb-table tr:last-child td,
.arb-fd-v2 table.widefat tr:last-child td {
	border-bottom: none;
}

/* ─── Responsive: collapse sidebar to icons on tablet ─────────── */
@media (max-width: 1100px) {
	.arb-fd-v2 .arb-fd-sidebar {
		width: 72px;
		padding: 22px 8px 18px;
	}
	.arb-fd-v2 .arb-fd-brand-text,
	.arb-fd-v2 .arb-fd-nav-label,
	.arb-fd-v2 .arb-fd-user-info {
		display: none;
	}
	.arb-fd-v2 .arb-fd-brand {
		justify-content: center;
		padding: 4px 0 18px;
	}
	.arb-fd-v2 .arb-fd-nav-btn {
		justify-content: center;
		padding: 12px 0;
	}
	.arb-fd-v2 .arb-fd-nav-btn.is-active::before { left: -8px; }
	.arb-fd-v2 .arb-fd-user { justify-content: center; padding: 12px 0; }
}

/* ─── Responsive: stack sidebar as horizontal top bar on mobile ─ */
@media (max-width: 720px) {
	.arb-fd-v2 {
		flex-direction: column;
	}
	.arb-fd-v2 .arb-fd-sidebar {
		width: 100%;
		height: auto;
		position: static;
		flex-direction: row;
		padding: 12px 14px;
		border-bottom: 1px solid rgba(148, 163, 184, 0.16);
		align-items: center;
		gap: 8px;
	}
	.arb-fd-v2 .arb-fd-brand {
		padding: 0;
		margin: 0;
		border: none;
		flex-shrink: 0;
	}
	.arb-fd-v2 .arb-fd-nav {
		flex-direction: row;
		flex: 1;
		overflow-x: auto;
		justify-content: center;
		gap: 4px;
	}
	.arb-fd-v2 .arb-fd-nav-btn { padding: 8px 10px; }
	.arb-fd-v2 .arb-fd-nav-btn.is-active::before { display: none; }
	.arb-fd-v2 .arb-fd-user {
		margin: 0;
		padding: 0;
		border: none;
		flex-shrink: 0;
	}
	.arb-fd-v2 .arb-fd-main { padding: 16px; }
	.arb-fd-v2 .arb-fd-topbar { flex-direction: column; align-items: stretch; }
	.arb-fd-v2 .arb-fd-page-title { font-size: 20px; }
}

/* ═════════════════════════════════════════════════════════════════
   OWNER DASHBOARD — KIOSK MODE
   ═════════════════════════════════════════════════════════════════
   When .arb-owner-dashboard-page is on <body> (added by the
   body_class filter for pages containing the [arb_owner_dashboard]
   shortcode), we neutralize the WordPress theme chrome so the
   dashboard sits edge-to-edge in the viewport — no header, no
   footer, no page-template padding.

   Scoped strictly to this body class so other pages on the site
   continue to render normally with their theme intact.
   ═════════════════════════════════════════════════════════════════ */

body.arb-owner-dashboard-page,
html:has(body.arb-owner-dashboard-page) {
	margin: 0 !important;
	padding: 0 !important;
	background: #f7f8fb !important;
	overflow-x: hidden;
}

/* Hide common theme chrome. Selector list covers the
   markup conventions used by the major WP theme families
   (Twenty Twenty-*, Astra, GeneratePress, Kadence, OceanWP,
   Hello, block-based themes, and Elementor wrappers). If a
   particular theme uses a non-standard selector, a site owner
   can extend this list via Customizer → Additional CSS. */
body.arb-owner-dashboard-page #masthead,
body.arb-owner-dashboard-page #site-header,
body.arb-owner-dashboard-page .site-header,
body.arb-owner-dashboard-page header.site-header,
body.arb-owner-dashboard-page header#header,
body.arb-owner-dashboard-page .main-header,
body.arb-owner-dashboard-page .header-wrap,
body.arb-owner-dashboard-page .header,
body.arb-owner-dashboard-page #colophon,
body.arb-owner-dashboard-page #site-footer,
body.arb-owner-dashboard-page .site-footer,
body.arb-owner-dashboard-page footer.site-footer,
body.arb-owner-dashboard-page footer#footer,
body.arb-owner-dashboard-page .main-footer,
body.arb-owner-dashboard-page .footer-wrap,
body.arb-owner-dashboard-page .ast-mobile-header,
body.arb-owner-dashboard-page .elementor-location-header,
body.arb-owner-dashboard-page .elementor-location-footer,
body.arb-owner-dashboard-page .breadcrumbs,
body.arb-owner-dashboard-page .entry-header,
body.arb-owner-dashboard-page .entry-footer,
body.arb-owner-dashboard-page .page-header,
body.arb-owner-dashboard-page .post-navigation,
body.arb-owner-dashboard-page .nav-links,
body.arb-owner-dashboard-page .wp-block-template-part[data-area="header"],
body.arb-owner-dashboard-page .wp-block-template-part[data-area="footer"] {
	display: none !important;
}

/* Reset every common page-wrap container so the dashboard
   sits flush in the viewport without theme-added padding,
   margins, or max-width constraints. */
body.arb-owner-dashboard-page #page,
body.arb-owner-dashboard-page #wrapper,
body.arb-owner-dashboard-page #site-wrapper,
body.arb-owner-dashboard-page .site,
body.arb-owner-dashboard-page #content,
body.arb-owner-dashboard-page .site-content,
body.arb-owner-dashboard-page #main,
body.arb-owner-dashboard-page main,
body.arb-owner-dashboard-page main#main,
body.arb-owner-dashboard-page main#primary,
body.arb-owner-dashboard-page #primary,
body.arb-owner-dashboard-page .content-area,
body.arb-owner-dashboard-page article,
body.arb-owner-dashboard-page article.page,
body.arb-owner-dashboard-page .entry-content,
body.arb-owner-dashboard-page .post-inner,
body.arb-owner-dashboard-page .container,
body.arb-owner-dashboard-page .ast-container,
body.arb-owner-dashboard-page .inside-article,
body.arb-owner-dashboard-page .wp-site-blocks,
body.arb-owner-dashboard-page .is-layout-constrained,
body.arb-owner-dashboard-page .wp-block-group,
body.arb-owner-dashboard-page .elementor-section-wrap {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	width: 100% !important;
	background: transparent !important;
}

/* Make the dashboard fill the viewport exactly. When the
   WP admin bar is visible, leave its 32px (admin bar height)
   so we don't overlap it. */
body.arb-owner-dashboard-page .arb-fd-v2 {
	min-height: 100vh;
	width: 100%;
}
body.admin-bar.arb-owner-dashboard-page .arb-fd-v2 {
	min-height: calc(100vh - 32px);
}
body.admin-bar.arb-owner-dashboard-page .arb-fd-sidebar {
	height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
	body.admin-bar.arb-owner-dashboard-page .arb-fd-v2 {
		min-height: calc(100vh - 46px);
	}
	body.admin-bar.arb-owner-dashboard-page .arb-fd-sidebar {
		height: auto;
	}
}

/* ═════════════════════════════════════════════════════════════════
   OWNER DASHBOARD v2 — INNER REFINEMENTS
   ═════════════════════════════════════════════════════════════════
   Additional CSS that scopes inside .arb-fd-v2 to bring the inner
   timeline.js-rendered content up to the same polish level as the
   outer shell. We only touch existing class hooks via cascade —
   no JS or HTML changes — so behavior stays identical.
   ═════════════════════════════════════════════════════════════════ */

/* ─── Date pills: harmonize red day labels with navy palette ──
   The default red (#ef4444) on ΣΑΒ/ΚΥΡ/ΔΕΥ etc. clashes with the
   v2 dark-navy theme. Mute to slate so they feel intentional. */
.arb-fd-v2 .arb-tl-pill-day,
.arb-fd-v2 .arb-tl-pill-date {
	color: #64748b;
}
.arb-fd-v2 .arb-tl-date-pill:hover .arb-tl-pill-day,
.arb-fd-v2 .arb-tl-date-pill:hover .arb-tl-pill-date {
	color: #334155;
}
.arb-fd-v2 .arb-tl-date-pill.is-active .arb-tl-pill-day,
.arb-fd-v2 .arb-tl-date-pill.is-active .arb-tl-pill-date {
	color: #fff;
}
.arb-fd-v2 .arb-tl-date-pill.is-active {
	background: #0f172a;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}
.arb-fd-v2 .arb-tl-date-pill {
	border-radius: 10px;
	padding: 8px 14px;
	min-width: 56px;
	transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.arb-fd-v2 .arb-tl-date-pill:hover {
	background: #eef2f7;
}

/* ─── Today button: small icon-style refinement ─────────────── */
.arb-fd-v2 .arb-tl-today-btn {
	border-radius: 10px;
	padding: 8px 16px;
	font-weight: 600;
	font-size: 13px;
	color: #334155;
	border: 1px solid #e2e8f0;
	background: #fff;
	transition: all .14s ease;
}
.arb-fd-v2 .arb-tl-today-btn:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
	color: #0f172a;
}

/* ─── Date nav arrow buttons (← →) ──────────────────────────── */
.arb-fd-v2 .arb-tl-nav-btn {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid #e2e8f0;
	background: #fff;
	color: #475569;
	transition: all .14s ease;
}
.arb-fd-v2 .arb-tl-nav-btn:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
	color: #0f172a;
}

/* ─── Stats badges (1 reservations · 2 guests) ──────────────── */
.arb-fd-v2 .arb-tl-stat-badge,
.arb-fd-v2 .arb-stats-badge {
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 8px 14px;
	font-size: 13px;
	color: #475569;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.arb-fd-v2 .arb-tl-stat-badge strong,
.arb-fd-v2 .arb-stats-badge strong {
	color: #0f172a;
	font-weight: 700;
	font-size: 14px;
}

/* ─── Walk-in button: muted accent, harmonized with the theme ─
   Default linear-gradient orange was too loud. New: refined
   amber/orange that reads as "alternate action" without
   competing with the New Reservation CTA. */
.arb-fd-v2 .arb-tl-walkin-btn {
	background: linear-gradient(135deg, #f59e0b, #d97706) !important;
	border: none !important;
	color: #fff !important;
	padding: 11px 20px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: 10px !important;
	box-shadow: 0 1px 2px rgba(217, 119, 6, 0.25), 0 2px 6px rgba(217, 119, 6, 0.08) !important;
	transition: transform .12s ease, box-shadow .14s ease, filter .14s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.arb-fd-v2 .arb-tl-walkin-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(217, 119, 6, 0.30), 0 4px 12px rgba(217, 119, 6, 0.15) !important;
	filter: brightness(1.05);
}
.arb-fd-v2 .arb-tl-walkin-btn:active {
	transform: translateY(0);
}

/* ─── Refine the inner header row layout ────────────────────── */
.arb-fd-v2 .arb-tl-header {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.arb-fd-v2 .arb-tl-date-nav {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* ─── Arriving panel polish ─────────────────────────────────── */
.arb-fd-v2 .arb-tl-right-panel {
	padding: 18px 18px 14px;
}
.arb-fd-v2 .arb-tl-right-panel h3 {
	font-size: 13px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 14px;
	text-transform: none;
	letter-spacing: -0.005em;
}
.arb-fd-v2 .arb-tl-arrival-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 8px;
	transition: border-color .14s ease, box-shadow .14s ease, transform .12s ease;
	cursor: pointer;
}
.arb-fd-v2 .arb-tl-arrival-card:hover {
	border-color: #cbd5e1;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
	transform: translateX(2px);
}
.arb-fd-v2 .arb-tl-arrival-name {
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	letter-spacing: -0.005em;
}
.arb-fd-v2 .arb-tl-arrival-time {
	font-size: 12px;
	color: #64748b;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.arb-fd-v2 .arb-tl-arrival-meta {
	font-size: 12px;
	color: #64748b;
	margin-top: 2px;
}

/* ─── Status pills (Confirmed / Pending / Seated etc.) ──────── */
.arb-fd-v2 .arb-tl-status-confirmed,
.arb-fd-v2 .arb-tl-status-pending,
.arb-fd-v2 .arb-tl-status-seated,
.arb-fd-v2 .arb-tl-status-cancelled,
.arb-fd-v2 .arb-tl-status-no_show,
.arb-fd-v2 .arb-tl-status-noshow,
.arb-fd-v2 .arb-tl-status-completed,
.arb-fd-v2 .arb-tl-status-left {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	letter-spacing: -0.005em;
	display: inline-block;
	border-left-width: 0;
}

/* ─── Custom scrollbar styling — subtle navy-tinted ──────────── */
.arb-fd-v2 .arb-tl-grid-wrap::-webkit-scrollbar,
.arb-fd-v2 .arb-tl-right-panel::-webkit-scrollbar,
.arb-fd-v2 .arb-fd-main::-webkit-scrollbar,
.arb-fd-v2 .arb-fd-nav::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
.arb-fd-v2 .arb-tl-grid-wrap::-webkit-scrollbar-track,
.arb-fd-v2 .arb-tl-right-panel::-webkit-scrollbar-track,
.arb-fd-v2 .arb-fd-main::-webkit-scrollbar-track,
.arb-fd-v2 .arb-fd-nav::-webkit-scrollbar-track {
	background: transparent;
}
.arb-fd-v2 .arb-tl-grid-wrap::-webkit-scrollbar-thumb,
.arb-fd-v2 .arb-tl-right-panel::-webkit-scrollbar-thumb,
.arb-fd-v2 .arb-fd-main::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 999px;
	border: 2px solid #f7f8fb;
}
.arb-fd-v2 .arb-tl-grid-wrap::-webkit-scrollbar-thumb:hover,
.arb-fd-v2 .arb-tl-right-panel::-webkit-scrollbar-thumb:hover,
.arb-fd-v2 .arb-fd-main::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}
/* Sidebar scrollbar — different palette since the bg is dark */
.arb-fd-v2 .arb-fd-nav::-webkit-scrollbar-thumb {
	background: rgba(148, 163, 184, 0.25);
	border-radius: 999px;
	border: 2px solid transparent;
}
.arb-fd-v2 .arb-fd-nav::-webkit-scrollbar-thumb:hover {
	background: rgba(148, 163, 184, 0.45);
}
/* Firefox */
.arb-fd-v2 .arb-tl-grid-wrap,
.arb-fd-v2 .arb-tl-right-panel,
.arb-fd-v2 .arb-fd-main {
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}
.arb-fd-v2 .arb-fd-nav {
	scrollbar-width: thin;
	scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

/* ─── Topbar polish: less redundancy, more breathing room ────── */
.arb-fd-v2 .arb-fd-page-sub {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.arb-fd-v2 .arb-fd-page-sub::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #10b981;
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
	display: inline-block;
	flex-shrink: 0;
}

/* ─── Now-line indicator: subtler treatment ───────────────────── */
.arb-fd-v2 .arb-tl-now-line {
	background: #3b82f6 !important;
	opacity: 0.85;
}
.arb-fd-v2 .arb-tl-now-marker {
	background: #3b82f6 !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
}

/* ─── Selection: theme matches the dashboard, not browser default ─ */
.arb-fd-v2 ::selection {
	background: rgba(59, 130, 246, 0.22);
	color: inherit;
}


/* ═════════════════════════════════════════════════════════════════
   KIOSK MODE — additional fixes for Hello Elementor / Elementor
   and the settings hub cards overflow.
   ═════════════════════════════════════════════════════════════════ */

/* Settings hub cards — fix description text being clipped when the
   card is narrow. Spans inside the flex-column card need explicit
   block display + overflow-wrap so long words break cleanly instead
   of bleeding past the card's right edge. The min-width: 0 on the
   card itself lets grid items shrink below their content's
   intrinsic width (default min-width: auto would prevent this and
   cause horizontal overflow when many cards share a row). */
.arb-hub-card {
	min-width: 0;
	overflow: hidden;
}
.arb-hub-card-title,
.arb-hub-card-desc {
	display: block;
	max-width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
}
.arb-hub-card-desc {
	line-height: 1.5;
}

/* Top breathing room when WP admin bar is visible. Pushes the
   dashboard below the admin bar's 32px fixed strip so the H1
   doesn't get clipped under it. Mobile admin bar is 46px tall. */
body.admin-bar.arb-owner-dashboard-page .arb-fd-v2 {
	margin-top: 32px;
}
body.admin-bar.arb-owner-dashboard-page .arb-fd-sidebar {
	top: 32px;
	height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
	body.admin-bar.arb-owner-dashboard-page .arb-fd-v2 {
		margin-top: 46px;
	}
	body.admin-bar.arb-owner-dashboard-page .arb-fd-sidebar {
		top: 46px;
		height: auto;
	}
}

/* Elementor / Hello Elementor specific container resets. The JS
   ancestor walker handles the parent chain at runtime, but these
   serve as a CSS-only safety net for cases where JS is delayed
   (e.g. slow networks, third-party script blocking). */
body.arb-owner-dashboard-page .elementor,
body.arb-owner-dashboard-page .elementor-section,
body.arb-owner-dashboard-page .elementor-container,
body.arb-owner-dashboard-page .elementor-row,
body.arb-owner-dashboard-page .elementor-column,
body.arb-owner-dashboard-page .elementor-column-wrap,
body.arb-owner-dashboard-page .elementor-widget-wrap,
body.arb-owner-dashboard-page .elementor-widget,
body.arb-owner-dashboard-page .elementor-widget-container,
body.arb-owner-dashboard-page .elementor-widget-shortcode,
body.arb-owner-dashboard-page .elementor-inner,
body.arb-owner-dashboard-page .elementor-element,
body.arb-owner-dashboard-page .e-con,
body.arb-owner-dashboard-page .e-con-inner,
body.arb-owner-dashboard-page .e-con-full,
body.arb-owner-dashboard-page .e-parent,
body.hello-elementor.arb-owner-dashboard-page .page-content,
body.hello-elementor.arb-owner-dashboard-page .site-main,
body.hello-elementor.arb-owner-dashboard-page main#content,
body.hello-elementor.arb-owner-dashboard-page article {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}


/* ═════════════════════════════════════════════════════════════════
   HOTFIX v3.14.45 — Settings cards text wrap + topbar breathing room
   ═════════════════════════════════════════════════════════════════
   The previous v3.14.44 fix added word-wrap/min-width but didn't
   address the real culprit: <button> elements have an inherited
   `white-space: pre` behavior in some browsers AND my earlier
   `overflow: hidden` was actively CLIPPING the wrapped text
   instead of just preventing overflow. Resetting both unblocks
   the natural wrap. */

button.arb-hub-card,
.arb-hub-card {
	white-space: normal !important;
	overflow: visible !important;
	text-align: left !important;
	cursor: pointer;
}
button.arb-hub-card *,
.arb-hub-card * {
	white-space: normal !important;
}
.arb-hub-card-title,
.arb-hub-card-desc {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: anywhere !important;
	text-overflow: clip !important;
	overflow: visible !important;
	text-align: left !important;
}
.arb-hub-card-icon {
	display: block;
	width: 36px;
	height: 36px;
	background: #f1f5f9;
	border-radius: 8px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
}
.arb-hub-card-icon svg {
	width: 18px;
	height: 18px;
	color: #64748b;
}

/* More breathing room at the top so the H1 doesn't sit at the
   absolute edge of the main column. 24px → 32px feels more
   spacious and matches modern SaaS app conventions. */
.arb-fd-v2 .arb-fd-main {
	padding-top: 32px !important;
}
.arb-fd-v2 .arb-fd-page-title {
	line-height: 1.3;
	padding-top: 2px;
}


/* ═════════════════════════════════════════════════════════════════
   HOTFIX v3.14.46 — Full-viewport breakout
   ═════════════════════════════════════════════════════════════════
   Hello Elementor's default page template constrains content to a
   max-width container (.page-content / .site-main). The dashboard
   sat INSIDE this container so the navy sidebar appeared offset
   from the viewport edge with a white strip on its left.

   The breakout trick: shift the dashboard element 50% to the right
   of its parent, then pull it back by half a viewport width. Net
   result: the element starts at the viewport's left edge no matter
   how narrow or centered the parent container is. Combined with
   width: 100vw, it spans the full viewport width edge-to-edge.

   This works regardless of theme (Hello Elementor, Astra, custom)
   and regardless of page template (Default, Boxed, Full Width).
   ═════════════════════════════════════════════════════════════════ */

body.arb-owner-dashboard-page {
	overflow-x: hidden;  /* hides any horizontal scroll caused by breakout */
	width: 100vw !important;
	max-width: 100vw !important;
}

body.arb-owner-dashboard-page .arb-fd-v2 {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	left: 50%;
	right: 50%;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
}


/* ═════════════════════════════════════════════════════════════════
   HOTFIX v3.14.47 — Flush-left sidebar (user-verified fix)
   ═════════════════════════════════════════════════════════════════
   The legacy `.arb-frontend-dashboard` rule on line 1449 adds
   `padding: 0 16px; max-width: 1600px; margin: 24px auto` to the
   v2 wrapper because the element carries both classes. The
   16px left-padding was the missing piece nudging the sidebar
   off the viewport edge — the breakout pattern made the
   element span 100vw but content still respected the parent's
   inner padding.

   Sidebar's own 14px left-padding then pushed the icons further
   inward. Killing both lands the sidebar (and its contents)
   genuinely flush against the viewport edge.

   We also nudge the active nav button's accent strip from
   `left: -14px` to `left: 0` — it used to sit inside the
   sidebar's old 14px padding zone, with the new flush layout
   it would otherwise be clipped behind the viewport edge.
   ═════════════════════════════════════════════════════════════════ */

.arb-frontend-dashboard.arb-fd-v2,
.arb-fd-v2 {
	padding: 0 !important;
}

.arb-fd-v2 .arb-fd-sidebar {
	padding-left: 0 !important;
}

.arb-fd-v2 .arb-fd-nav-btn.is-active::before {
	left: 0 !important;
}


/* ─── Late pill — booking past start_time, not yet seated ─────── */
.arb-tl-pill-late {
	background: #fef3c7;
	color: #92400e;
	border: 1px solid #fcd34d;
	font-weight: 600;
}
.arb-tl-arrival-late {
	border-left: 3px solid #f59e0b !important;
	background: #fffbeb;
}
.arb-fd-v2 .arb-tl-arrival-late {
	background: #fffbeb;
	border-color: #fcd34d;
}


/* ─── Sidebar collapse button ─────────────────────────────────── */
.arb-fd-v2 .arb-fd-collapse-btn {
	margin-left: auto;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(148, 163, 184, 0.16);
	border: 1px solid rgba(148, 163, 184, 0.22);
	color: #f1f5f9;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 0;
	overflow: hidden;
	transition: background-color .14s ease, color .14s ease, transform .14s ease;
}
.arb-fd-v2 .arb-fd-collapse-btn:hover {
	background: rgba(148, 163, 184, 0.30);
	color: #ffffff;
	transform: scale(1.05);
}
.arb-fd-v2 .arb-fd-collapse-btn:focus-visible {
	outline: 2px solid #3b82f6;
	outline-offset: 2px;
}
/* SVG inside the button — explicit dimensions + hardcoded stroke
   color rather than currentColor. WordPress core and many themes
   apply a `button { color: ... }` reset that sets currentColor
   to something dark, which on our navy sidebar reads as invisible.
   Explicit stroke sidesteps any inheritance issues. */
.arb-fd-v2 .arb-fd-collapse-btn svg {
	display: block;
	width: 14px;
	height: 14px;
	fill: none !important;
}
.arb-fd-v2 .arb-fd-collapse-btn svg polyline,
.arb-fd-v2 .arb-fd-collapse-btn svg line,
.arb-fd-v2 .arb-fd-collapse-btn svg path {
	stroke: #f1f5f9 !important;
	stroke-width: 2.2 !important;
}
.arb-fd-v2 .arb-fd-collapse-btn:hover svg polyline,
.arb-fd-v2 .arb-fd-collapse-btn:hover svg line,
.arb-fd-v2 .arb-fd-collapse-btn:hover svg path {
	stroke: #ffffff !important;
}
.arb-fd-v2 .arb-fd-collapse-icon-expand { display: none; }
.arb-fd-v2.is-sidebar-collapsed .arb-fd-collapse-icon-collapse { display: none; }
.arb-fd-v2.is-sidebar-collapsed .arb-fd-collapse-icon-expand { display: block; }

/* ─── Sidebar collapsed state (manual via JS toggle) ──────────── */
/* Mirrors the 1100px responsive rules but driven by the user's
   choice rather than viewport width. Applied at any screen size
   while the .is-sidebar-collapsed class is present on the
   dashboard wrapper. */
.arb-fd-v2.is-sidebar-collapsed .arb-fd-sidebar {
	width: 72px;
	padding: 22px 8px 18px 0;
}
/* Collapsed brand becomes a vertical stack: brand-mark on top,
   collapse-btn below it in normal flow. No absolute positioning
   so the button is always visible without overlapping the
   brand-mark icon. */
.arb-fd-v2.is-sidebar-collapsed .arb-fd-brand {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 4px 0 14px;
	gap: 10px;
	position: relative;
}
.arb-fd-v2.is-sidebar-collapsed .arb-fd-brand-text,
.arb-fd-v2.is-sidebar-collapsed .arb-fd-nav-label,
.arb-fd-v2.is-sidebar-collapsed .arb-fd-user-info {
	display: none;
}
.arb-fd-v2.is-sidebar-collapsed .arb-fd-collapse-btn {
	position: static;
	margin: 0;
	width: 36px;
	height: 28px;
	border-radius: 8px;
}
.arb-fd-v2.is-sidebar-collapsed .arb-fd-nav-btn {
	justify-content: center;
	padding: 12px 0;
}
.arb-fd-v2.is-sidebar-collapsed .arb-fd-nav-btn.is-active::before {
	left: -8px;
}
.arb-fd-v2.is-sidebar-collapsed .arb-fd-user {
	justify-content: center;
	padding: 12px 0;
}


/* ═════════════════════════════════════════════════════════════════
   v3.14.55 — Main padding + sticky labels + drag-to-scroll
   ═════════════════════════════════════════════════════════════════ */

/* User-provided padding for breathing room around the main panel */
.arb-fd-v2 main.arb-fd-main {
	padding-left: 30px !important;
	padding-right: 30px !important;
	box-sizing: border-box !important;
}
.arb-fd-v2 header.arb-fd-topbar,
.arb-fd-v2 #arb-timeline-root {
	width: 100% !important;
	max-width: 100% !important;
}

/* ─── Click-and-drag scroll cursor states ─────────────────────── */
.arb-fd-v2 .arb-tl-grid-wrap {
	cursor: grab;
	-webkit-overflow-scrolling: touch;  /* smooth iOS momentum scroll */
	overscroll-behavior-x: contain;     /* don't trigger browser back-swipe */
	touch-action: pan-x pan-y;          /* explicit touch panning support */
}
.arb-fd-v2 .arb-tl-grid-wrap.arb-tl-grid-dragging {
	cursor: grabbing;
	user-select: none;
}
.arb-fd-v2 .arb-tl-grid-wrap.arb-tl-grid-dragging * {
	cursor: grabbing !important;
}

/* ─── Sticky TABLES column (table labels stay visible on H-scroll) ─
   The 180px-wide left column with table names ("L BAR AREA",
   "M BAR 1", etc.) sticks to the left edge of the scroll
   container while the timeline cells scroll horizontally. Without
   this the operator has to scroll back to remember which row is
   which when looking at later hours.

   Z-index layering:
     - Row labels and area-head labels above the timeline cells
     - Time-strip head (the "TABLES" cell at top-left corner)
       above both because it's the intersection point */
.arb-fd-v2 .arb-tl-row-label {
	position: sticky;
	left: 0;
	z-index: 2;
	background: #ffffff;
	/* Subtle right-edge shadow on horizontal scroll so the sticky
	   column visually separates from the scrollable timeline cells.
	   Without it the labels would blend with the first cell. */
	box-shadow: 1px 0 0 rgba(15, 23, 42, 0.05), 3px 0 6px -3px rgba(15, 23, 42, 0.06);
}

/* Time-strip head ("TABLES" label, top-left corner). Already at
   left: 0 of time-strip; sticky + higher z-index keeps it pinned
   when the strip itself scrolls. */
.arb-fd-v2 .arb-tl-time-strip-head {
	position: sticky;
	left: 0;
	z-index: 3;
}

/* Area head labels (LOW / MIDDLE / OPEN AIR / etc.) — the inner
   span is what stays sticky; the banner background scrolls. Since
   the banner is a uniform color, visually nothing appears to move
   except the label text staying anchored at left. */
.arb-fd-v2 .arb-tl-area-head-label {
	position: sticky;
	left: 16px;          /* small inset so it doesn't kiss the edge */
	z-index: 2;
	display: inline-block;
	padding-right: 12px;
	background: linear-gradient(90deg, #eef2f7 0%, #eef2f7 92%, transparent 100%);
}


/* ─────────────────────────────────────────────────────────────────
 * Floor Map v2 — Tablein-style operational view
 * ─────────────────────────────────────────────────────────────────
 *
 * Layered on top of the existing .arb-floor-table HTML so the
 * drag-and-drop editor (admin.js) keeps working without changes.
 * The new visual treatment plus the time-slider + sidebar + stats
 * footer are scoped under .arb-floor-v2 so existing screens that
 * still use the v1 layout (none in this build, but the namespace
 * keeps options open) aren't affected.
 *
 * Key UX additions over v1:
 *   1. Round tables with subtle chair indicators around the rim
 *   2. Multi-state colours (free / pending / confirmed / seated / late)
 *   3. Time slider at the top — slide through service to see who's
 *      sitting at each table at any given moment
 *   4. Bookings sidebar on the right, searchable
 *   5. Stats footer (covers + bookings, today + month + total)
 *
 * The existing drag-handle / resize-handle / capacity-editor are
 * preserved by NOT changing their CSS selectors.
 */

/* — Layout wrapper — */
.arb-floor-v2 {
	display: grid;
	grid-template-columns: 1fr 320px;
	grid-template-rows: auto auto 1fr auto;
	grid-template-areas:
		"timebar  timebar"
		"canvas   sidebar"
		"canvas   sidebar"
		"stats    stats";
	gap: 14px;
	margin: 18px 0;
}
.arb-floor-v2-timebar  { grid-area: timebar; }
.arb-floor-v2-canvas   { grid-area: canvas;  }
.arb-floor-v2-sidebar  { grid-area: sidebar; }
.arb-floor-v2-stats    { grid-area: stats;   }

/* Collapse to single column under 980px so the sidebar doesn't
 * squeeze the canvas to nothing on smaller screens. */
@media (max-width: 980px) {
	.arb-floor-v2 {
		grid-template-columns: 1fr;
		grid-template-areas:
			"timebar"
			"canvas"
			"sidebar"
			"stats";
	}
}

/* — Time slider — */
.arb-floor-v2-timebar {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.arb-floor-v2-timebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.arb-floor-v2-timebar-label {
	font-size: 13px;
	color: #475569;
	font-weight: 500;
}
.arb-floor-v2-timebar-current {
	font-size: 18px;
	font-weight: 700;
	color: #2563eb;
	font-variant-numeric: tabular-nums;
}
.arb-floor-v2-timebar-track {
	position: relative;
	height: 36px;
	background: linear-gradient(180deg, #f8fafc, #f1f5f9);
	border-radius: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	scrollbar-width: thin;
	cursor: pointer;
}
.arb-floor-v2-timebar-track::-webkit-scrollbar { height: 6px; }
.arb-floor-v2-timebar-track::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 3px;
}
.arb-floor-v2-tick {
	display: inline-block;
	height: 36px;
	min-width: 56px;
	padding: 8px 4px 0;
	border-right: 1px solid #e2e8f0;
	font-size: 12px;
	color: #64748b;
	text-align: center;
	box-sizing: border-box;
	transition: background-color .15s;
	user-select: none;
}
.arb-floor-v2-tick.is-hour {
	font-weight: 700;
	color: #1e293b;
	background: #fff;
}
.arb-floor-v2-tick.is-quarter {
	font-size: 11px;
	color: #94a3b8;
}
.arb-floor-v2-tick.is-active {
	background: #2563eb;
	color: #fff !important;
	font-weight: 700;
}
.arb-floor-v2-tick:not(.is-active):hover {
	background: #e0e7ff;
	color: #1e40af;
}

/* — Canvas tweaks: existing .arb-floor-canvas + .arb-floor-table
 * are used as-is, but we override a few colours for the Tablein
 * multi-state colouring. The drag handles, resize handles, and
 * capacity editor all keep their original styling. */

.arb-floor-v2 .arb-floor-canvas {
	min-height: 560px;
	background:
		radial-gradient(circle at 0% 0%, #f1f5f9 0px, transparent 60px),
		radial-gradient(circle at 100% 100%, #f1f5f9 0px, transparent 60px),
		linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
}

/* Table state colours — set via JS data-state attribute when a
 * time slot is selected. v1 has only is-free / is-busy; v2 adds
 * pending / confirmed / seated / late states. */
.arb-floor-v2 .arb-floor-table {
	transition: background-color .2s, border-color .2s;
	background: #f1f5f9;
	border: 2px solid #cbd5e1;
	border-left: 2px solid #cbd5e1;
	color: #475569;
}
.arb-floor-v2 .arb-floor-table[data-state="free"] {
	background: #f1f5f9;
	border-color: #cbd5e1;
	color: #64748b;
}
.arb-floor-v2 .arb-floor-table[data-state="pending"] {
	background: #fef3c7;
	border-color: #d97706;
	color: #78350f;
}
.arb-floor-v2 .arb-floor-table[data-state="confirmed"] {
	background: #d1fae5;
	border-color: #059669;
	color: #064e3b;
}
.arb-floor-v2 .arb-floor-table[data-state="seated"] {
	background: #6ee7b7;
	border-color: #047857;
	color: #064e3b;
}
.arb-floor-v2 .arb-floor-table[data-state="late"] {
	background: #fecaca;
	border-color: #dc2626;
	color: #7f1d1d;
}

/* Round tables get the chair-indicator treatment. Eight notches
 * around the rim hint at chair positions without the visual noise
 * of a full chair drawing. We anchor them with absolute positioning
 * on the rim of the circular table.
 *
 * Implemented as a single background image with 8 radial gradients,
 * one per chair, positioned at compass points (N, NE, E, SE, S, SW,
 * W, NW). The background is on a pseudo-element that sits BEHIND
 * the table border, so the table itself stays solid and clickable.
 */
.arb-floor-v2 .arb-floor-table.arb-floor-table-round {
	border-radius: 50%;
	position: absolute;
}
.arb-floor-v2 .arb-floor-table.arb-floor-table-round::before {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 0%,   #94a3b8 3px, transparent 4px),
		radial-gradient(circle at 85% 15%,  #94a3b8 3px, transparent 4px),
		radial-gradient(circle at 100% 50%, #94a3b8 3px, transparent 4px),
		radial-gradient(circle at 85% 85%,  #94a3b8 3px, transparent 4px),
		radial-gradient(circle at 50% 100%, #94a3b8 3px, transparent 4px),
		radial-gradient(circle at 15% 85%,  #94a3b8 3px, transparent 4px),
		radial-gradient(circle at 0% 50%,   #94a3b8 3px, transparent 4px),
		radial-gradient(circle at 15% 15%,  #94a3b8 3px, transparent 4px);
	z-index: -1;
	opacity: .65;
	pointer-events: none;
}

/* — Sidebar — */
.arb-floor-v2-sidebar {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 560px;
	overflow: hidden;
}
.arb-floor-v2-sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 600;
	color: #1e293b;
}
.arb-floor-v2-sidebar-search {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 13px;
	box-sizing: border-box;
}
.arb-floor-v2-sidebar-search:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.arb-floor-v2-sidebar-list {
	flex: 1;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.arb-floor-v2-sidebar-item {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 10px 12px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 8px;
	align-items: center;
	font-size: 13px;
	cursor: pointer;
	transition: background-color .15s;
}
.arb-floor-v2-sidebar-item:hover {
	background: #eef2ff;
	border-color: #c7d2fe;
}
.arb-floor-v2-sidebar-item-guests {
	background: #2563eb;
	color: #fff;
	font-weight: 700;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 12px;
	min-width: 28px;
	text-align: center;
}
.arb-floor-v2-sidebar-item-name {
	font-weight: 500;
	color: #1e293b;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.arb-floor-v2-sidebar-item-time {
	color: #64748b;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}
.arb-floor-v2-sidebar-item-table {
	grid-column: 1 / -1;
	font-size: 11px;
	color: #475569;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	padding: 2px 6px;
	display: inline-block;
	justify-self: start;
}
.arb-floor-v2-sidebar-empty {
	color: #94a3b8;
	font-style: italic;
	text-align: center;
	padding: 24px 0;
	font-size: 13px;
}

/* — Stats footer — */
.arb-floor-v2-stats {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px;
	display: grid;
	grid-template-columns: auto repeat(3, 1fr) auto repeat(3, 1fr);
	gap: 18px;
	align-items: center;
}
.arb-floor-v2-stats-label {
	font-weight: 700;
	color: #1e293b;
	font-size: 14px;
	text-transform: lowercase;
}
.arb-floor-v2-stats-figure {
	text-align: center;
}
.arb-floor-v2-stats-figure-value {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: #2563eb;
	font-variant-numeric: tabular-nums;
}
.arb-floor-v2-stats-figure-label {
	display: block;
	font-size: 11px;
	color: #64748b;
	text-transform: lowercase;
	margin-top: 2px;
}
@media (max-width: 980px) {
	.arb-floor-v2-stats {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.arb-floor-v2-stats-label { grid-column: 1 / -1; }
}


/* ─────────────────────────────────────────────────────────────
 * Floor visual refinement v2.1 — Polished tiles for BOTH
 * the frontend dashboard (.arb-floor-tile) AND admin floor
 * (.arb-floor-table). Goal: Tablein-quality visual without
 * needing JS, using only CSS.
 * ─────────────────────────────────────────────────────────────
 */

/* ── Frontend tiles — used by timeline.js renderFloorTile() ── */

/* Container area: subtle gradient background instead of plain grey */
.arb-tl-view-floor .arb-floor-area {
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 18px 20px;
	margin-bottom: 18px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.arb-tl-view-floor .arb-floor-area-head {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #475569;
	text-transform: uppercase;
	margin: 0 0 14px 4px;
}

/* The canvas inside an area — subtle dotted grid pattern */
.arb-tl-view-floor .arb-floor-canvas {
	background-image:
		radial-gradient(circle, #e2e8f0 1px, transparent 1px);
	background-size: 20px 20px;
	background-position: 0 0;
	border-radius: 12px;
	min-height: 100px;
}

/* The tiles themselves — overhauled for polished look */
.arb-floor-tile {
	border-width: 2px !important;
	border-radius: 14px;
	padding: 10px 12px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.8) inset,
		0 2px 6px rgba(15, 23, 42, 0.06),
		0 1px 2px rgba(15, 23, 42, 0.04);
	background-clip: padding-box;
	font-weight: 600;
	letter-spacing: 0.01em;
	gap: 4px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Round tables: chair indicators around the rim. CSS-only —
 * 8 small dots positioned at compass points around the table.
 * Works on .shape-round AND .shape-circle for backward compat. */
.arb-floor-tile.shape-round,
.arb-floor-tile.shape-circle {
	border-radius: 50% !important;
	position: absolute;
}
.arb-floor-tile.shape-round::before,
.arb-floor-tile.shape-circle::before {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 2%,   currentColor 2.5px, transparent 3.5px),
		radial-gradient(circle at 84% 16%,  currentColor 2.5px, transparent 3.5px),
		radial-gradient(circle at 98% 50%,  currentColor 2.5px, transparent 3.5px),
		radial-gradient(circle at 84% 84%,  currentColor 2.5px, transparent 3.5px),
		radial-gradient(circle at 50% 98%,  currentColor 2.5px, transparent 3.5px),
		radial-gradient(circle at 16% 84%,  currentColor 2.5px, transparent 3.5px),
		radial-gradient(circle at 2% 50%,   currentColor 2.5px, transparent 3.5px),
		radial-gradient(circle at 16% 16%,  currentColor 2.5px, transparent 3.5px);
	opacity: 0.5;
	pointer-events: none;
	z-index: -1;
}

/* Polished state colors — refined palette closer to Tablein */
.arb-floor-tile.is-free {
	background: linear-gradient(180deg, #f0fdf4, #dcfce7);
	border-color: #86efac;
	color: #166534;
}
.arb-floor-tile.is-booked {
	background: linear-gradient(180deg, #eff6ff, #dbeafe);
	border-color: #93c5fd;
	color: #1e3a8a;
}
.arb-floor-tile.is-occupied {
	background: linear-gradient(180deg, #fef2f2, #fee2e2);
	border-color: #fca5a5;
	color: #991b1b;
}
.arb-floor-tile.is-inactive,
.arb-floor-tile.is-disabled {
	background: linear-gradient(180deg, #f8fafc, #f1f5f9);
	border-color: #cbd5e1;
	color: #64748b;
	opacity: 0.8;
}

.arb-floor-tile:hover {
	transform: translateY(-2px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.8) inset,
		0 8px 20px rgba(15, 23, 42, 0.12),
		0 3px 6px rgba(15, 23, 42, 0.08);
}

.arb-floor-tile-label {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.arb-floor-tile-cap {
	font-size: 10px;
	font-weight: 600;
	opacity: 0.75;
	letter-spacing: 0.04em;
}

/* ── Admin floor (.arb-floor-table) — same polished treatment ── */

.arb-floor-area {
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 18px 20px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.arb-floor-area > h2 {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #475569;
	text-transform: uppercase;
	margin: 0 0 14px 4px;
}

.arb-floor-canvas {
	background-image:
		radial-gradient(circle, #e2e8f0 1px, transparent 1px);
	background-size: 20px 20px !important;
	background-position: 0 0 !important;
	border: none;
	border-radius: 12px;
}

/* Refine admin tables with same polish as frontend tiles */
.arb-floor-table {
	border-radius: 14px !important;
	border-width: 2px;
	border-left-width: 2px !important;  /* override v1 5px left border */
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.8) inset,
		0 2px 6px rgba(15, 23, 42, 0.08),
		0 1px 2px rgba(15, 23, 42, 0.04);
	padding: 10px 12px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.arb-floor-table.arb-floor-table-round {
	border-radius: 50% !important;
}
.arb-floor-table.arb-floor-table-round::before {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 2%,   currentColor 2.5px, transparent 3.5px),
		radial-gradient(circle at 84% 16%,  currentColor 2.5px, transparent 3.5px),
		radial-gradient(circle at 98% 50%,  currentColor 2.5px, transparent 3.5px),
		radial-gradient(circle at 84% 84%,  currentColor 2.5px, transparent 3.5px),
		radial-gradient(circle at 50% 98%,  currentColor 2.5px, transparent 3.5px),
		radial-gradient(circle at 16% 84%,  currentColor 2.5px, transparent 3.5px),
		radial-gradient(circle at 2% 50%,   currentColor 2.5px, transparent 3.5px),
		radial-gradient(circle at 16% 16%,  currentColor 2.5px, transparent 3.5px);
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}

/* Refined state colors for admin */
.arb-floor-table.is-free {
	background: linear-gradient(180deg, #f0fdf4, #dcfce7);
	border-color: #86efac;
	color: #166534;
}
.arb-floor-table.is-busy {
	background: linear-gradient(180deg, #eff6ff, #dbeafe);
	border-color: #93c5fd;
	color: #1e3a8a;
}

/* Conflict highlighting — override the state colors with !important
 * so the operator never misses a double-booking. */
.arb-floor-table.arb-floor-table-conflict {
	border-color: #dc2626 !important;
	box-shadow:
		0 0 0 3px rgba(220, 38, 38, 0.18),
		0 8px 22px rgba(220, 38, 38, 0.18) !important;
}


/* ─────────────────────────────────────────────────────────────
 * Floor visual v2.2 — Professional restaurant floor plan look
 * Chair indicators on BOTH rectangular and round tables, like a
 * real venue floor plan (Tablein-style). CSS-only.
 * ─────────────────────────────────────────────────────────────
 */

/* Rectangular tables get chair "pads" along their edges — small
 * rounded bumps that read as seating positions. Implemented with
 * an inset box-shadow ring + edge pseudo-elements. We use the
 * tile's own currentColor so chairs match the state colour. */
.arb-tl-view-floor .arb-floor-tile.shape-rect,
.arb-floor-v2 .arb-floor-table:not(.arb-floor-table-round) {
	position: absolute;
	border-radius: 16px !important;
}

/* Chair pads for rect tables: top + bottom edges (2 each) via a
 * pseudo-element with a repeating dot pattern. The pads sit just
 * outside the tile border. */
.arb-tl-view-floor .arb-floor-tile.shape-rect::before {
	content: '';
	position: absolute;
	left: 18%;
	right: 18%;
	top: -7px;
	height: 5px;
	border-radius: 5px;
	background:
		radial-gradient(circle at 20% 50%, currentColor 2.5px, transparent 3px),
		radial-gradient(circle at 50% 50%, currentColor 2.5px, transparent 3px),
		radial-gradient(circle at 80% 50%, currentColor 2.5px, transparent 3px);
	opacity: 0.4;
	pointer-events: none;
}
.arb-tl-view-floor .arb-floor-tile.shape-rect::after {
	content: '';
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: -7px;
	height: 5px;
	border-radius: 5px;
	background:
		radial-gradient(circle at 20% 50%, currentColor 2.5px, transparent 3px),
		radial-gradient(circle at 50% 50%, currentColor 2.5px, transparent 3px),
		radial-gradient(circle at 80% 50%, currentColor 2.5px, transparent 3px);
	opacity: 0.4;
	pointer-events: none;
}

/* Refined Tablein-like palette — softer, more pastel */
.arb-tl-view-floor .arb-floor-tile.is-free {
	background: linear-gradient(155deg, #f0fdf9 0%, #d1fae5 100%);
	border-color: #6ee7b7;
	color: #065f46;
}
.arb-tl-view-floor .arb-floor-tile.is-booked {
	background: linear-gradient(155deg, #eff6ff 0%, #dbeafe 100%);
	border-color: #93c5fd;
	color: #1e40af;
}
.arb-tl-view-floor .arb-floor-tile.is-occupied {
	background: linear-gradient(155deg, #fef2f2 0%, #fee2e2 100%);
	border-color: #fca5a5;
	color: #991b1b;
}
.arb-tl-view-floor .arb-floor-tile.is-inactive,
.arb-tl-view-floor .arb-floor-tile.is-disabled {
	background: linear-gradient(155deg, #f8fafc 0%, #eef2f7 100%);
	border-color: #cbd5e1;
	color: #64748b;
}

/* Slightly smaller default font so labels fit nicely in tiles */
.arb-tl-view-floor .arb-floor-tile-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
}
.arb-tl-view-floor .arb-floor-tile-cap {
	font-size: 9px;
	font-weight: 600;
	opacity: 0.7;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* The canvas dotted-grid: lighter, more subtle */
.arb-tl-view-floor .arb-floor-canvas {
	background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px);
	background-size: 22px 22px;
	border-radius: 14px;
}


/* ─────────────────────────────────────────────────────────────
 * Frontend Floor edit mode — inline drag-and-drop
 * ─────────────────────────────────────────────────────────────
 */

/* Toolbar with Save / Done / hint */
.arb-floor-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.arb-floor-edit-hint {
	font-size: 12px;
	color: #64748b;
	font-style: italic;
}
.arb-floor-save-status {
	font-size: 12px;
	font-weight: 600;
	color: #059669;
}

/* Canvas in edit mode — subtle visual cue that drag is active */
.arb-floor-canvas.is-editing {
	background-color: #fafbff;
	outline: 2px dashed #c7d2fe;
	outline-offset: -2px;
}

/* Draggable tiles */
.arb-floor-tile.is-draggable {
	cursor: move;
	cursor: grab;
	user-select: none;
	touch-action: none;  /* prevent scroll while dragging on touch */
}
.arb-floor-tile.is-draggable:active {
	cursor: grabbing;
}
.arb-floor-tile.is-dragging {
	cursor: grabbing;
	z-index: 100 !important;
	transition: none !important;  /* follow pointer 1:1, no lag */
	box-shadow:
		0 12px 32px rgba(15, 23, 42, 0.28),
		0 4px 8px rgba(15, 23, 42, 0.16) !important;
	opacity: 0.92;
}

/* In edit mode, suppress the hover-lift so it doesn't fight with
 * the drag transform. */
.arb-floor-canvas.is-editing .arb-floor-tile:hover {
	transform: none;
}

/* Busy state for the Save button */
.arb-tl-act.is-busy {
	opacity: 0.6;
	pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────
 * Frontend Floor — resize handle (edit mode)
 * ─────────────────────────────────────────────────────────────
 */
.arb-floor-tile-resize {
	position: absolute;
	right: 3px;
	bottom: 3px;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.85);
	border: 1.5px solid currentColor;
	cursor: nwse-resize;
	touch-action: none;
	z-index: 5;
	/* Diagonal grip lines */
	background-image: linear-gradient(
		135deg,
		transparent 0%, transparent 35%,
		currentColor 35%, currentColor 45%,
		transparent 45%, transparent 60%,
		currentColor 60%, currentColor 70%,
		transparent 70%
	);
	opacity: 0.55;
	transition: opacity 0.15s ease;
}
.arb-floor-tile-resize:hover {
	opacity: 0.9;
}
/* For round tables the bottom-right corner sits outside the circle,
 * so pull the handle inward to keep it on the visible table. */
.arb-floor-tile.shape-round .arb-floor-tile-resize,
.arb-floor-tile.shape-circle .arb-floor-tile-resize {
	right: 14%;
	bottom: 14%;
}
/* While resizing: no transition so the tile tracks the pointer 1:1. */
.arb-floor-tile.is-resizing {
	transition: none !important;
	z-index: 100 !important;
	box-shadow:
		0 12px 32px rgba(15, 23, 42, 0.28),
		0 4px 8px rgba(15, 23, 42, 0.16) !important;
}


/* ─────────────────────────────────────────────────────────────
 * Frontend Floor — time slider (Phase C)
 * ─────────────────────────────────────────────────────────────
 */
.arb-floor-slider {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 14px 16px;
	margin-bottom: 16px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.arb-floor-slider-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 10px;
}
.arb-floor-slider-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #64748b;
}
.arb-floor-slider-current {
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
	font-variant-numeric: tabular-nums;
}
.arb-floor-slider-track {
	display: flex;
	align-items: stretch;
	gap: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
}
.arb-floor-tick {
	flex: 0 0 auto;
	min-width: 30px;
	height: 40px;
	border: none;
	border-left: 1px solid #f1f5f9;
	background: transparent;
	color: #94a3b8;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
	transition: background 0.12s ease, color 0.12s ease;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 6px;
}
.arb-floor-tick.is-hour {
	min-width: 52px;
	color: #475569;
	font-weight: 700;
	border-left: 1px solid #e2e8f0;
}
.arb-floor-tick:hover {
	background: #f1f5f9;
	color: #0f172a;
}
.arb-floor-tick.is-active {
	background: #0f172a;
	color: #ffffff;
	border-radius: 8px;
	border-left-color: transparent;
}
.arb-floor-tick.is-active:hover {
	background: #1e293b;
	color: #ffffff;
}


/* ─────────────────────────────────────────────────────────────
 * List view upgrade (Phase C) — search, filter tabs, badges
 * ─────────────────────────────────────────────────────────────
 */
.arb-list-toolbar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

/* Search box */
.arb-list-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 280px;
	max-width: 380px;
}
.arb-list-search svg {
	position: absolute;
	left: 12px;
	color: #94a3b8;
	pointer-events: none;
}
.arb-list-search-input {
	width: 100%;
	padding: 9px 12px 9px 36px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	font-size: 14px;
	background: #ffffff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.arb-list-search-input:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* Filter tabs */
.arb-list-tabs {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.arb-list-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	background: #ffffff;
	color: #475569;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}
.arb-list-tab:hover {
	border-color: #cbd5e1;
	background: #f8fafc;
}
.arb-list-tab.is-active {
	background: #0f172a;
	border-color: #0f172a;
	color: #ffffff;
}
.arb-list-tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: #f1f5f9;
	color: #475569;
	font-size: 11px;
	font-weight: 700;
}
.arb-list-tab.is-active .arb-list-tab-count {
	background: rgba(255, 255, 255, 0.22);
	color: #ffffff;
}

/* Party-size badge — coloured by status, like Tablein */
.arb-list-col-party { text-align: center; }
.arb-list-party-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	background: #e2e8f0;
	color: #334155;
}
.arb-list-party-badge.arb-tl-status-pending   { background: #fde68a; color: #78350f; }
.arb-list-party-badge.arb-tl-status-confirmed { background: #bfdbfe; color: #1e3a8a; }
.arb-list-party-badge.arb-tl-status-seated    { background: #a7f3d0; color: #064e3b; }
.arb-list-party-badge.arb-tl-status-completed { background: #ddd6fe; color: #4c1d95; }
.arb-list-party-badge.arb-tl-status-noshow    { background: #fecaca; color: #991b1b; }
.arb-list-party-badge.arb-tl-status-cancelled { background: #e5e7eb; color: #6b7280; }

/* Source pill */
.arb-list-source {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	background: #f1f5f9;
	color: #475569;
}
.arb-list-source.is-online { background: #e0e7ff; color: #3730a3; }
.arb-list-source.is-walkin { background: #fed7aa; color: #9a3412; }
.arb-list-source.is-phone  { background: #cffafe; color: #155e75; }
.arb-list-source.is-manual { background: #f1f5f9; color: #475569; }
.arb-list-source-none { color: #cbd5e1; }

/* Notes indicator dot next to guest name */
.arb-list-note-dot {
	color: #f59e0b;
	font-size: 10px;
	vertical-align: middle;
	cursor: help;
}

.arb-list-time { white-space: nowrap; }
.arb-list-guest { font-weight: 600; }


/* ─────────────────────────────────────────────────────────────
 * Floor layout — floor + sidebar + stats (Phase C, steps 2-3)
 * ─────────────────────────────────────────────────────────────
 */
.arb-floor-layout {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}
.arb-floor-main {
	flex: 1 1 auto;
	min-width: 0;  /* allow flex child to shrink below content width */
}

/* Bookings sidebar */
.arb-floor-sidebar {
	flex: 0 0 300px;
	max-width: 300px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
	position: sticky;
	top: 16px;
	max-height: calc(100vh - 32px);
	display: flex;
	flex-direction: column;
}
.arb-floor-sidebar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.arb-floor-sidebar-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #475569;
}
.arb-floor-sidebar-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	background: #0f172a;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
}
.arb-floor-sidebar-search {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	font-size: 13px;
	margin-bottom: 12px;
	box-sizing: border-box;
}
.arb-floor-sidebar-search:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.arb-floor-sidebar-list {
	overflow-y: auto;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	scrollbar-width: thin;
}
.arb-floor-sidebar-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	border: 1px solid #f1f5f9;
	border-radius: 10px;
	background: #ffffff;
	cursor: pointer;
	text-align: left;
	transition: background 0.12s ease, border-color 0.12s ease;
}
.arb-floor-sidebar-item:hover {
	background: #f8fafc;
	border-color: #e2e8f0;
}
.arb-floor-sidebar-item-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 700;
	background: #e2e8f0;
	color: #334155;
}
.arb-floor-sidebar-item-badge.arb-tl-status-pending   { background: #fde68a; color: #78350f; }
.arb-floor-sidebar-item-badge.arb-tl-status-confirmed { background: #bfdbfe; color: #1e3a8a; }
.arb-floor-sidebar-item-badge.arb-tl-status-seated    { background: #a7f3d0; color: #064e3b; }
.arb-floor-sidebar-item-badge.arb-tl-status-completed { background: #ddd6fe; color: #4c1d95; }
.arb-floor-sidebar-item-badge.arb-tl-status-noshow    { background: #fecaca; color: #991b1b; }
.arb-floor-sidebar-item-badge.arb-tl-status-cancelled { background: #e5e7eb; color: #6b7280; }
.arb-floor-sidebar-item-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.arb-floor-sidebar-item-name {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.arb-floor-sidebar-item-meta {
	font-size: 11px;
	color: #64748b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.arb-floor-sidebar-item .arb-tl-pill {
	flex: 0 0 auto;
	font-size: 9px;
	padding: 2px 6px;
}

/* Stats footer */
.arb-floor-stats {
	display: flex;
	gap: 14px;
	margin-top: 18px;
	padding: 16px 20px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.arb-floor-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 0 24px;
	border-right: 1px solid #f1f5f9;
}
.arb-floor-stat:last-child { border-right: none; }
.arb-floor-stat-value {
	font-size: 28px;
	font-weight: 800;
	color: #0f172a;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.arb-floor-stat-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #94a3b8;
}

/* Responsive: stack sidebar below floor on narrow screens */
@media (max-width: 1024px) {
	.arb-floor-layout {
		flex-direction: column;
	}
	.arb-floor-sidebar {
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
		position: static;
		max-height: 420px;
	}
}


/* ─────────────────────────────────────────────────────────────
 * Calendar upgrade — monthly summary + cleaner cells
 * ─────────────────────────────────────────────────────────────
 */
.arb-cal-summary {
	display: flex;
	gap: 14px;
	margin-bottom: 16px;
}
.arb-cal-summary-item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 14px 12px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.arb-cal-summary-value {
	font-size: 24px;
	font-weight: 800;
	color: #0f172a;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	text-align: center;
}
.arb-cal-summary-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #94a3b8;
}

/* Cleaner day cells */
.arb-cal-cell {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	min-height: 84px;
	padding: 8px 10px;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.arb-cal-cell:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
	z-index: 2;
}
.arb-cal-info {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
}
.arb-cal-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 7px;
	background: #2563eb;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.arb-cal-guests {
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
}
/* When a cell is heatmap-tinted (inline bg), make the badge blend */
.arb-cal-cell.has-bookings .arb-cal-badge {
	background: rgba(255, 255, 255, 0.28);
	color: inherit;
}
.arb-cal-cell.has-bookings .arb-cal-guests {
	color: inherit;
	opacity: 0.85;
}


/* ─────────────────────────────────────────────────────────────
 * Booking modal — enriched info grid
 * ─────────────────────────────────────────────────────────────
 */
.arb-booking-modal {
	max-width: 480px;
	width: 92vw;
}
.arb-booking-modal-head-main {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.arb-booking-modal-head-main h3 {
	margin: 0;
}
.arb-booking-info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: #e2e8f0;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 14px;
}
.arb-booking-info-cell {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 11px 14px;
	background: #ffffff;
}
.arb-booking-info-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #94a3b8;
}
.arb-booking-info-value {
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
}
.arb-booking-info-value a {
	color: #2563eb;
	text-decoration: none;
}
.arb-booking-info-value a:hover { text-decoration: underline; }

.arb-booking-notes {
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 10px;
	padding: 11px 14px;
	margin-bottom: 6px;
}
.arb-booking-notes-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #b45309;
	margin-bottom: 4px;
}
.arb-booking-notes p {
	margin: 0;
	font-size: 14px;
	color: #422006;
	line-height: 1.45;
}


/* ─────────────────────────────────────────────────────────────
 * Floor Plan v3 — Professional dark canvas (Aiolos / Tablein
 * style). Overrides the earlier light v2.1 / v2.2 blocks so the
 * read-only frontend Floor tab (.arb-tl-view-floor) reads as a
 * real venue floor map: dark slate canvas, glowing translucent
 * tables, chair indicators around the perimeter, white time
 * pill inside each reserved table.
 *
 * Scoped to .arb-tl-view-floor so the wp-admin Floor Map editor
 * (.arb-floor-v2) keeps its existing high-contrast light theme
 * for layout editing.
 * ─────────────────────────────────────────────────────────────
 */

/* Area panel — dark gradient background */
.arb-tl-view-floor .arb-floor-area {
	background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
	border: 1px solid #334155 !important;
	border-radius: 18px;
	padding: 22px 22px 26px;
	margin-bottom: 18px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 10px 30px rgba(2, 6, 23, 0.45);
}
.arb-tl-view-floor .arb-floor-area-head {
	color: #cbd5e1 !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 16px 4px;
}

/* Canvas — subtle grid of dim dots on a darker base */
.arb-tl-view-floor .arb-floor-canvas {
	background-color: rgba(2, 6, 23, 0.35) !important;
	background-image:
		radial-gradient(circle, rgba(148, 163, 184, 0.10) 1px, transparent 1.2px) !important;
	background-size: 24px 24px !important;
	background-position: 0 0 !important;
	border: 1px solid rgba(148, 163, 184, 0.08) !important;
	border-radius: 14px;
}

/* Tile — translucent slate fill, glowing edge, soft drop-shadow.
 * Reset earlier light gradients with explicit values. */
.arb-tl-view-floor .arb-floor-tile {
	position: absolute;
	background: rgba(51, 65, 85, 0.55) !important;
	border: 1.5px solid rgba(148, 163, 184, 0.55) !important;
	color: #e2e8f0 !important;
	border-radius: 14px !important;
	padding: 10px 10px 8px !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 6px 18px rgba(2, 6, 23, 0.45),
		0 0 24px rgba(148, 163, 184, 0.06) inset !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	align-items: center !important;
	text-align: center;
	gap: 4px;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.arb-tl-view-floor .arb-floor-tile:hover {
	transform: translateY(-2px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.08) inset,
		0 12px 30px rgba(2, 6, 23, 0.6),
		0 0 30px rgba(148, 163, 184, 0.18) inset !important;
}

/* Round tables — circle + chair dots around the rim */
.arb-tl-view-floor .arb-floor-tile.shape-round,
.arb-tl-view-floor .arb-floor-tile.shape-circle {
	border-radius: 50% !important;
}
.arb-tl-view-floor .arb-floor-tile.shape-round::before,
.arb-tl-view-floor .arb-floor-tile.shape-circle::before {
	content: '';
	position: absolute;
	inset: -9px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 1%,  rgba(203, 213, 225, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 85% 14%, rgba(203, 213, 225, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 99% 50%, rgba(203, 213, 225, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 85% 86%, rgba(203, 213, 225, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 50% 99%, rgba(203, 213, 225, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 15% 86%, rgba(203, 213, 225, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 1% 50%,  rgba(203, 213, 225, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 15% 14%, rgba(203, 213, 225, 0.85) 3px, transparent 4px);
	opacity: 0.55;
	pointer-events: none;
	z-index: -1;
}

/* Rectangular tables — chair pads along top + bottom edges */
.arb-tl-view-floor .arb-floor-tile.shape-rect {
	position: absolute;
}
.arb-tl-view-floor .arb-floor-tile.shape-rect::before,
.arb-tl-view-floor .arb-floor-tile.shape-rect::after {
	content: '';
	position: absolute;
	left: 12%;
	right: 12%;
	height: 6px;
	background:
		radial-gradient(circle at 12% 50%, rgba(203, 213, 225, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 38% 50%, rgba(203, 213, 225, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 62% 50%, rgba(203, 213, 225, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 88% 50%, rgba(203, 213, 225, 0.85) 3px, transparent 4px);
	opacity: 0.55;
	pointer-events: none;
	z-index: -1;
}
.arb-tl-view-floor .arb-floor-tile.shape-rect::before { top: -9px; }
.arb-tl-view-floor .arb-floor-tile.shape-rect::after  { bottom: -9px; }

/* Capacity range — small muted label at top of tile */
.arb-tl-view-floor .arb-floor-tile-cap {
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.10em !important;
	color: rgba(226, 232, 240, 0.75) !important;
	text-transform: none !important;
	opacity: 1 !important;
	line-height: 1;
}

/* Table label — number under the time pill */
.arb-tl-view-floor .arb-floor-tile-label {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	color: #f1f5f9 !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	line-height: 1;
	max-width: 92%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Time pill — white rounded badge in the center of a reserved
 * tile. Stands out sharply against the dark table fill. */
.arb-tl-view-floor .arb-floor-tile-time {
	display: inline-block;
	background: #f8fafc;
	color: #0f172a;
	font-size: 12px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	padding: 3px 11px;
	border-radius: 999px;
	letter-spacing: 0.02em;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.4) inset,
		0 2px 5px rgba(0, 0, 0, 0.35);
	white-space: nowrap;
	line-height: 1.35;
}

/* Suppress the legacy second-line "time · name" — replaced by pill */
.arb-tl-view-floor .arb-floor-tile-next {
	display: none !important;
}

/* State accents — keep the dark tile but tint the border + glow */
.arb-tl-view-floor .arb-floor-tile.is-free {
	background: rgba(51, 65, 85, 0.55) !important;
	border-color: rgba(110, 231, 183, 0.55) !important;
	color: #e2e8f0 !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 6px 18px rgba(2, 6, 23, 0.45),
		0 0 18px rgba(110, 231, 183, 0.18) inset !important;
}
.arb-tl-view-floor .arb-floor-tile.is-booked {
	background: rgba(30, 58, 138, 0.38) !important;
	border-color: rgba(147, 197, 253, 0.70) !important;
	color: #e2e8f0 !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 6px 18px rgba(2, 6, 23, 0.5),
		0 0 22px rgba(147, 197, 253, 0.22) inset !important;
}
.arb-tl-view-floor .arb-floor-tile.is-occupied {
	background: rgba(127, 29, 29, 0.42) !important;
	border-color: rgba(252, 165, 165, 0.75) !important;
	color: #fef2f2 !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 6px 18px rgba(2, 6, 23, 0.55),
		0 0 22px rgba(252, 165, 165, 0.22) inset !important;
}
.arb-tl-view-floor .arb-floor-tile.is-inactive,
.arb-tl-view-floor .arb-floor-tile.is-disabled {
	background: rgba(15, 23, 42, 0.55) !important;
	border-color: rgba(100, 116, 139, 0.45) !important;
	color: #94a3b8 !important;
	opacity: 0.72;
}

/* Round-table chair dots take their colour from the tile state */
.arb-tl-view-floor .arb-floor-tile.is-free.shape-round::before,
.arb-tl-view-floor .arb-floor-tile.is-free.shape-circle::before {
	background:
		radial-gradient(circle at 50% 1%,  rgba(110, 231, 183, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 85% 14%, rgba(110, 231, 183, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 99% 50%, rgba(110, 231, 183, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 85% 86%, rgba(110, 231, 183, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 50% 99%, rgba(110, 231, 183, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 15% 86%, rgba(110, 231, 183, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 1% 50%,  rgba(110, 231, 183, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 15% 14%, rgba(110, 231, 183, 0.85) 3px, transparent 4px) !important;
}
.arb-tl-view-floor .arb-floor-tile.is-booked.shape-round::before,
.arb-tl-view-floor .arb-floor-tile.is-booked.shape-circle::before {
	background:
		radial-gradient(circle at 50% 1%,  rgba(147, 197, 253, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 85% 14%, rgba(147, 197, 253, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 99% 50%, rgba(147, 197, 253, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 85% 86%, rgba(147, 197, 253, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 50% 99%, rgba(147, 197, 253, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 15% 86%, rgba(147, 197, 253, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 1% 50%,  rgba(147, 197, 253, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 15% 14%, rgba(147, 197, 253, 0.9) 3px, transparent 4px) !important;
}
.arb-tl-view-floor .arb-floor-tile.is-occupied.shape-round::before,
.arb-tl-view-floor .arb-floor-tile.is-occupied.shape-circle::before {
	background:
		radial-gradient(circle at 50% 1%,  rgba(252, 165, 165, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 85% 14%, rgba(252, 165, 165, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 99% 50%, rgba(252, 165, 165, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 85% 86%, rgba(252, 165, 165, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 50% 99%, rgba(252, 165, 165, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 15% 86%, rgba(252, 165, 165, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 1% 50%,  rgba(252, 165, 165, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 15% 14%, rgba(252, 165, 165, 0.9) 3px, transparent 4px) !important;
}

/* Same state-tinted chair pads for rectangular tables */
.arb-tl-view-floor .arb-floor-tile.is-free.shape-rect::before,
.arb-tl-view-floor .arb-floor-tile.is-free.shape-rect::after {
	background:
		radial-gradient(circle at 12% 50%, rgba(110, 231, 183, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 38% 50%, rgba(110, 231, 183, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 62% 50%, rgba(110, 231, 183, 0.85) 3px, transparent 4px),
		radial-gradient(circle at 88% 50%, rgba(110, 231, 183, 0.85) 3px, transparent 4px) !important;
}
.arb-tl-view-floor .arb-floor-tile.is-booked.shape-rect::before,
.arb-tl-view-floor .arb-floor-tile.is-booked.shape-rect::after {
	background:
		radial-gradient(circle at 12% 50%, rgba(147, 197, 253, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 38% 50%, rgba(147, 197, 253, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 62% 50%, rgba(147, 197, 253, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 88% 50%, rgba(147, 197, 253, 0.9) 3px, transparent 4px) !important;
}
.arb-tl-view-floor .arb-floor-tile.is-occupied.shape-rect::before,
.arb-tl-view-floor .arb-floor-tile.is-occupied.shape-rect::after {
	background:
		radial-gradient(circle at 12% 50%, rgba(252, 165, 165, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 38% 50%, rgba(252, 165, 165, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 62% 50%, rgba(252, 165, 165, 0.9) 3px, transparent 4px),
		radial-gradient(circle at 88% 50%, rgba(252, 165, 165, 0.9) 3px, transparent 4px) !important;
}

/* Legend strip — dark variant to sit on top of the dark canvas */
.arb-tl-view-floor .arb-floor-legend {
	background: #1e293b;
	border: 1px solid #334155;
	color: #cbd5e1;
}
.arb-tl-view-floor .arb-floor-legend-item { color: #cbd5e1; }
.arb-tl-view-floor .arb-floor-swatch.is-free     { background: rgba(110, 231, 183, 0.25); border-color: #6ee7b7; }
.arb-tl-view-floor .arb-floor-swatch.is-booked   { background: rgba(147, 197, 253, 0.25); border-color: #93c5fd; }
.arb-tl-view-floor .arb-floor-swatch.is-occupied { background: rgba(252, 165, 165, 0.25); border-color: #fca5a5; }
.arb-tl-view-floor .arb-floor-swatch.is-inactive { background: rgba(100, 116, 139, 0.25); border-color: #94a3b8; }

/* Time slider — dark variant matching the floor panel */
.arb-tl-view-floor .arb-floor-slider {
	background: #1e293b;
	border: 1px solid #334155;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 6px 18px rgba(2, 6, 23, 0.35);
}
.arb-tl-view-floor .arb-floor-slider-label   { color: #94a3b8; }
.arb-tl-view-floor .arb-floor-slider-current { color: #f1f5f9; }

/* Edit-mode canvas — keep a visible dashed cue against the dark fill */
.arb-tl-view-floor .arb-floor-canvas.is-editing {
	background-color: rgba(30, 41, 59, 0.65) !important;
	outline: 2px dashed rgba(165, 180, 252, 0.55);
	outline-offset: -2px;
}

/* Resize handle — keep visible on the dark tile */
.arb-tl-view-floor .arb-floor-tile-resize {
	background: rgba(241, 245, 249, 0.92);
	border: 1.5px solid rgba(15, 23, 42, 0.45);
}

/* Round-table resize handle stays inside the visible circle */
.arb-tl-view-floor .arb-floor-tile.shape-round .arb-floor-tile-resize,
.arb-tl-view-floor .arb-floor-tile.shape-circle .arb-floor-tile-resize {
	right: 14%;
	bottom: 14%;
}

/* Disabled / inactive tiles never get the chair indicators —
 * keeps the floor uncluttered for tables turned off for the day. */
.arb-tl-view-floor .arb-floor-tile.is-inactive::before,
.arb-tl-view-floor .arb-floor-tile.is-inactive::after,
.arb-tl-view-floor .arb-floor-tile.is-disabled::before,
.arb-tl-view-floor .arb-floor-tile.is-disabled::after {
	opacity: 0.18 !important;
}



/* ─────────────────────────────────────────────────────────────
 * Floor v3.1 — real chair elements (generated in timeline.js).
 * Replaces the faint pseudo-element dot "chairs" with explicit
 * chair pills, one per seat (capacity), coloured by table state.
 * Read-only dashboard Floor view only (.arb-tl-view-floor); the
 * wp-admin Floor Map editor keeps its plain editing look.
 * ───────────────────────────────────────────────────────────── */
.arb-tl-view-floor .arb-floor-tile {
	overflow: visible !important;
	box-sizing: border-box !important;
}
/* Drop the old pseudo-element dot chairs — real chairs replace them. */
.arb-tl-view-floor .arb-floor-tile.shape-round::before,
.arb-tl-view-floor .arb-floor-tile.shape-circle::before,
.arb-tl-view-floor .arb-floor-tile.shape-rect::before,
.arb-tl-view-floor .arb-floor-tile.shape-rect::after {
	content: none !important;
}
.arb-tl-view-floor .arb-floor-chair {
	position: absolute;
	width: 15px;
	height: 7px;
	border-radius: 4px;
	background: rgba(148, 163, 184, 0.85);
	box-shadow: 0 1px 2px rgba(2, 6, 23, 0.4);
	pointer-events: none;
	z-index: 1;
}
.arb-tl-view-floor .arb-floor-tile.is-free .arb-floor-chair     { background: #6ee7b7; }
.arb-tl-view-floor .arb-floor-tile.is-booked .arb-floor-chair   { background: #93c5fd; }
.arb-tl-view-floor .arb-floor-tile.is-occupied .arb-floor-chair { background: #fca5a5; }
.arb-tl-view-floor .arb-floor-tile.is-inactive .arb-floor-chair,
.arb-tl-view-floor .arb-floor-tile.is-disabled .arb-floor-chair { background: rgba(100, 116, 139, 0.6); }

/* ─────────────────────────────────────────────────────────────
 * Floor v3.2 — compact zones + tablet polish
 * The JS sizes each canvas to fit its tables; the old fixed
 * min-height:520px was overriding that and leaving huge empty
 * zones. Let the computed height win, and don't clip the
 * perimeter chairs. Read-only dashboard Floor view only.
 * ───────────────────────────────────────────────────────────── */
.arb-tl-view-floor .arb-floor-canvas {
	min-height: 0 !important;
	overflow: visible !important;
}
.arb-tl-view-floor .arb-floor-area {
	margin-bottom: 14px;
}
/* A little more room for the bookings sidebar on desktop. */
@media (min-width: 1025px) {
	.arb-floor-sidebar {
		flex: 0 0 330px;
		max-width: 330px;
	}
}
/* Tablet / smaller: zones get a touch less padding so tables use
 * more of the width, and the floor never forces a wide scroll. */
@media (max-width: 1024px) {
	.arb-tl-view-floor .arb-floor-area {
		padding: 18px 16px 20px;
	}
	.arb-tl-view-floor .arb-floor-canvas {
		width: 100% !important;
	}
}

/* ─────────────────────────────────────────────────────────────
 * Floor v3.3 — premium polish. One clean panel per zone (dotted
 * grid spans the whole zone instead of a box-in-a-box), tables
 * centered in the zone, refined header with a brand accent, and
 * a sane max-width so the floor doesn't stretch on ultrawide
 * monitors. Read-only dashboard Floor view only.
 * ───────────────────────────────────────────────────────────── */
.arb-tl-view-floor .arb-floor-layout {
	max-width: 1320px;
}
/* Dotted grid + slate gradient on the zone panel itself. */
.arb-tl-view-floor .arb-floor-area {
	background:
		radial-gradient(circle, rgba(148, 163, 184, 0.10) 1px, transparent 1.2px) 0 0 / 24px 24px,
		linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
	padding: 20px 26px 26px !important;
}
/* Canvas becomes a transparent, centered positioning layer — no
 * more inner border/box. */
.arb-tl-view-floor .arb-floor-canvas {
	margin: 0 auto;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 4px 0 !important;
}
/* Refined zone header with a small BookArrive accent dot. */
.arb-tl-view-floor .arb-floor-area-head {
	display: flex !important;
	align-items: center;
	gap: 9px;
	margin: 0 0 16px 2px !important;
}
.arb-tl-view-floor .arb-floor-area-head::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #C75129;
	flex: 0 0 auto;
}

/* ═════════════════════════════════════════════════════════════════
 * MOBILE HARDENING LAYER (owner dashboard)
 * Reinforces the existing responsive rules for real phones. Scoped
 * to small widths / coarse pointers so desktop is untouched. Lives
 * at the end of the file so it wins predictably by cascade order.
 * ═════════════════════════════════════════════════════════════════ */

/* ── Touch targets: comfortable finger sizes on touch devices ── */
@media (hover: none) and (pointer: coarse) {
	.arb-tl-tab,
	.arb-fd-v2 .arb-fd-nav-btn,
	.arb-tl-date-pill,
	.arb-tl-walkin-btn,
	.arb-tl-nav-btn,
	.arb-walkin-party-btn,
	.arb-walkin-table-chip,
	.arb-tl-modal-actions .arb-tl-act,
	.arb-fd-v2 [data-arb-sidebar-tab] {
		min-height: 44px;
	}
	.arb-tl-date-pill {
		min-width: 48px;
	}
}

/* ── ≤768px: forms never overflow; gantt fits the viewport ── */
@media (max-width: 768px) {
	#arb-timeline-root input[type="text"],
	#arb-timeline-root input[type="email"],
	#arb-timeline-root input[type="tel"],
	#arb-timeline-root input[type="number"],
	#arb-timeline-root input[type="date"],
	#arb-timeline-root input[type="time"],
	#arb-timeline-root input[type="search"],
	#arb-timeline-root select,
	#arb-timeline-root textarea {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	/* The gantt already scrolls; cap its height so it doesn't push
	   the rest of the page off-screen under the mobile top bar. */
	.arb-tl-grid-wrap {
		max-height: 70vh;
	}
	.arb-tl-right-panel {
		max-height: none; /* let the stacked panel grow naturally */
	}
}

/* ── ≤560px: bottom-sheet modals + full-width primary actions ── */
@media (max-width: 560px) {
	/* Modals become a bottom sheet — far easier to reach/scroll
	   one-handed than a tiny centered card. */
	.arb-tl-modal-overlay {
		align-items: flex-end;
		padding: 0;
	}
	.arb-tl-modal,
	.arb-walkin-modal {
		max-width: 100% !important;
		width: 100%;
		max-height: 92vh;
		border-radius: 16px 16px 0 0;
		margin: 0;
	}
	/* Primary buttons span the width so they're easy to tap. */
	.arb-tl-walkin-btn,
	.arb-fd-v2 .arb-tl-walkin-btn {
		width: 100%;
		justify-content: center;
	}
	/* Floor zones: tighter padding so tables use more of the width. */
	.arb-tl-view-floor .arb-floor-area {
		padding: 16px 12px 18px !important;
	}
	.arb-tl-view-floor .arb-floor-area-head {
		font-size: 11px;
	}
	/* Status legend / floor controls wrap instead of overflowing. */
	.arb-tl-view-floor .arb-floor-legend,
	.arb-tl-view-floor .arb-floor-toolbar {
		flex-wrap: wrap;
		gap: 8px;
	}
	/* Stats cards: one per row reads better than cramped columns. */
	.arb-stats-grid,
	.arb-tl-stats-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ── ≤400px: very small phones — keep the date strip + header tidy ── */
@media (max-width: 400px) {
	.arb-tl-date-pill {
		padding: 6px 8px;
	}
	.arb-stats-grid,
	.arb-tl-stats-grid {
		grid-template-columns: 1fr;
	}
	.arb-fd-v2 .arb-fd-topbar-actions .button,
	.arb-fd-v2 .arb-tl-walkin-btn {
		width: 100%;
	}
}

/* ═════════════════════════════════════════════════════════════════
   v3.14.119 — Full-height sidebar shell (navy rail no longer ends on scroll)
   ═════════════════════════════════════════════════════════════════
   Root cause: HOTFIX v3.14.46 set `overflow-x: hidden` on the dashboard
   <body> for the 100vw breakout. Per CSS Overflow, overflow-x:hidden with
   overflow-y:visible forces overflow-y to compute to `auto`, turning
   <body> into a scroll container — which silently disables the sidebar's
   `position: sticky`. The navy rail then scrolled away with the page,
   leaving a white strip beneath it (visible once the table list scrolls).

   Fix: make the dashboard a fixed-height (100vh) app shell. The wrapper
   clips at the viewport height; the sidebar becomes an ordinary flex
   child that STRETCHES to the full shell height (always edge-to-edge
   navy, top to bottom — no sticky/fixed needed and immune to the body
   overflow quirk); the main column owns the vertical scroll (it was
   already styled for it — see the scrollbar rules above). On mobile the
   rail collapses to a top bar and normal page scrolling returns.
   ═════════════════════════════════════════════════════════════════ */

.arb-fd-v2 {
	height: 100vh;
	max-height: 100vh;
	overflow: hidden;          /* inner panes scroll, not the shell itself */
}
body.admin-bar.arb-owner-dashboard-page .arb-fd-v2 {
	height: calc(100vh - 32px);
	max-height: calc(100vh - 32px);
}

/* The rail: a stretched flex child fills the shell's full height for
   free, so the navy spans top→bottom and never ends on scroll. */
.arb-fd-v2 .arb-fd-sidebar {
	position: static !important;
	top: auto !important;
	height: auto !important;        /* flex-stretch to the shell height */
	align-self: stretch;
	min-height: 0;
	overflow-y: auto;               /* scroll the nav itself on short screens */
	overflow-x: hidden;
}
body.admin-bar.arb-owner-dashboard-page .arb-fd-v2 .arb-fd-sidebar {
	height: auto !important;
	top: auto !important;
}

/* Main column owns the scroll (definite shell height makes this work). */
.arb-fd-v2 .arb-fd-main {
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
}

/* Between mobile-layout (720) and admin-bar-mobile (782): vertical rail
   still, but the admin bar is 46px tall. */
@media screen and (max-width: 782px) {
	body.admin-bar.arb-owner-dashboard-page .arb-fd-v2 {
		height: calc(100vh - 46px);
		max-height: calc(100vh - 46px);
	}
}

/* Mobile: rail is a horizontal top bar — restore normal page scroll so
   the shell grows with content instead of trapping it in a 100vh box. */
@media (max-width: 720px) {
	.arb-fd-v2 {
		height: auto;
		max-height: none;
		overflow: visible;
	}
	.arb-fd-v2 .arb-fd-main {
		overflow-y: visible;
		overflow-x: hidden;
	}
	.arb-fd-v2 .arb-fd-sidebar {
		overflow: visible;
	}
	body.admin-bar.arb-owner-dashboard-page .arb-fd-v2 {
		height: auto;
		max-height: none;
	}
}