.wpab-front-desk { max-width: 900px; }

.wpab-fd-login { max-width: 360px; margin: 40px auto; }

.wpab-fd-toolbar {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.wpab-fd-toolbar input[type=search] { flex: 1; min-width: 200px; padding: 9px 10px; border: 1px solid #d1d5db; border-radius: 6px; transition: border-color .15s ease, box-shadow .15s ease; }
.wpab-fd-toolbar select { padding: 9px 10px; border: 1px solid #d1d5db; border-radius: 6px; }
.wpab-fd-toolbar input[type=search]:focus, .wpab-fd-toolbar select:focus { outline: none; border-color: var(--wpab-navy); box-shadow: 0 0 0 3px var(--wpab-navy-tint); }

.wpab-fd-card {
	border: 1px solid #e5e7eb;
	border-left: 4px solid #9ca3af;
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 12px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: #fff;
}
.wpab-fd-card.wpab-status-confirmed { border-left-color: #16a34a; }
.wpab-fd-card.wpab-status-pending { border-left-color: #ca8a04; }
.wpab-fd-card.wpab-status-cancelled { border-left-color: #dc2626; }
.wpab-fd-card.wpab-status-completed { border-left-color: var(--wpab-navy-dark); }

.wpab-fd-card-main { flex: 1; min-width: 240px; font-size: 14px; }
.wpab-fd-ref { font-family: Consolas, Menlo, monospace; font-weight: 700; color: var(--wpab-navy); }

.wpab-fd-docs { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.wpab-fd-doc {
	display: inline-block;
	font-size: 12px;
	background: var(--wpab-gold-tint);
	color: var(--wpab-navy);
	padding: 3px 10px;
	border-radius: 20px;
	text-decoration: none;
}
.wpab-fd-doc:hover { background: var(--wpab-gold-dark); }

.wpab-fd-card-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 220px;
	font-size: 12px;
}
.wpab-fd-card-actions label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.wpab-fd-card-actions select, .wpab-fd-card-actions input { font-weight: 400; padding: 6px; border: 1px solid #d1d5db; border-radius: 6px; }
.wpab-fd-upload-label input { padding: 4px; }

.wpab-btn-small { padding: 6px 12px; font-size: 12px; }

.wpab-fd-upload-status {
	font-size: 11px;
	color: #16a34a;
	background: #f0fdf4;
	padding: 4px 8px;
	border-radius: 6px;
}
.wpab-fd-upload-status.wpab-doc-error { color: #b91c1c; background: #fef2f2; }

/* ------------------------------------------------------------------
   New Appointment modal
   ------------------------------------------------------------------ */
.wpab-fd-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 5vh 16px;
	overflow-y: auto;
}
/* Without this, the [hidden] attribute never actually hides the modal:
   the browser's own `[hidden] { display: none }` rule and the
   `.wpab-fd-modal { display: flex }` rule above have equal specificity,
   and author stylesheets win ties over the user-agent stylesheet — so
   the modal stayed visible (and un-closeable) at all times. */
.wpab-fd-modal[hidden] { display: none; }
.wpab-fd-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
}
.wpab-fd-modal-inner {
	position: relative;
	background: #fff;
	border-radius: 10px;
	padding: 28px 28px 22px;
	max-width: 640px;
	width: 100%;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.wpab-fd-modal-inner h3 { margin-top: 0; color: var(--wpab-navy); }
.wpab-fd-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: #6b7280;
}
.wpab-fd-modal-close:hover { color: var(--wpab-navy); }

.wpab-fd-new-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 16px;
}
.wpab-fd-new-grid label,
#wpab-fd-new-form > label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
#wpab-fd-new-form input:not([type=checkbox]),
#wpab-fd-new-form select,
#wpab-fd-new-form textarea {
	font-weight: 400;
	padding: 8px 10px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	width: 100%;
	box-sizing: border-box;
}
#wpab-fd-new-form input:read-only { background: #f3f4f6; }

/* Belt-and-suspenders: the rule above already covers this by ID, but the
   Service dropdown was reported rendering narrower than its grid cell
   (no width was set anywhere for these fields), so it's pinned
   explicitly too in case a theme's own select styles ever outrank the
   shared rule above. */
#wpab-fd-new-service { width: 100%; box-sizing: border-box; }

/* Specificity note: `#wpab-fd-new-form > label` above (an ID selector)
   otherwise beats a bare `.wpab-fd-checkbox` class rule and forces these
   onto their own line with heavy font-weight — targeting the ID + class
   + tag combination here (higher specificity) instead of !important. */
#wpab-fd-new-form label.wpab-fd-checkbox {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	margin-bottom: 8px;
}
.wpab-fd-checkbox input[type=checkbox] {
	width: auto;
	margin: 0;
	padding: 0;
	border: none;
}

.wpab-fd-cust-results {
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	margin: -4px 0 12px;
	max-height: 180px;
	overflow-y: auto;
}
.wpab-fd-cust-result {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-align: left;
	gap: 2px;
	padding: 8px 10px;
	background: #fff;
	border: none;
	border-bottom: 1px solid #f3f4f6;
	cursor: pointer;
	font: inherit;
}
.wpab-fd-cust-result:last-child { border-bottom: none; }
.wpab-fd-cust-result:hover { background: var(--wpab-gold-tint); }
.wpab-fd-cust-result span { font-size: 12px; color: #6b7280; }

.wpab-fd-cust-picked {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--wpab-gold-tint);
	color: var(--wpab-navy);
	padding: 8px 12px;
	border-radius: 6px;
	margin-bottom: 12px;
	font-size: 13px;
}
.wpab-fd-cust-picked[hidden] { display: none; }

.wpab-fd-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 8px;
}

.wpab-fd-slots { margin: -6px 0 14px; }
.wpab-fd-slot-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}
.wpab-fd-slot-btn {
	padding: 6px 14px;
	border: 1px solid #d1d5db;
	border-radius: 20px;
	background: #fff;
	font-size: 13px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.wpab-fd-slot-btn:hover { border-color: var(--wpab-navy); }
.wpab-fd-slot-btn.is-selected {
	background: var(--wpab-navy);
	border-color: var(--wpab-navy);
	color: #fff;
}

@media (max-width: 560px) {
	.wpab-fd-new-grid { grid-template-columns: 1fr; }
}