/* Staff portal — By Gani Kuaför black/gold tokens */
.sam-staff-portal {
	--sam-bg: #151515;
	--sam-bg-deep: #090909;
	--sam-bg-panel: #141414;
	--sam-line: rgba(255, 255, 255, 0.10);
	--sam-accent: #c8a45d;
	--sam-accent-soft: rgba(200, 164, 93, 0.14);
	--sam-text: #f2f2f2;
	--sam-muted: #969696;
	--sam-danger: #e07a7a;
	--sam-ok: #7cbf8e;
	--sam-ease: 220ms ease;
	--sam-sidebar-w: 260px;
	--sam-shell-gap: 1.5rem;
	--sam-sticky-top: 1rem;
	/* Mobile drawer starts under theme .site-header */
	--sam-drawer-top: var(--bb-header-h, 5.75rem);
	color: var(--sam-text) !important;
	background: transparent;
	font-family: "Manrope", system-ui, sans-serif;
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 0 3rem;
	overflow-x: hidden;
}

body.admin-bar .sam-staff-portal {
	--sam-sticky-top: calc(32px + 1rem);
}

@media screen and (max-width: 782px) {
	body.admin-bar .sam-staff-portal {
		--sam-sticky-top: calc(46px + 1rem);
	}
}

/* PWA standalone: header includes safe-area — keep drawer aligned under it */
@media (display-mode: standalone) {
	.sam-staff-portal {
		--sam-drawer-top: calc(var(--bb-header-h, 5.75rem) + env(safe-area-inset-top, 0px));
	}
}

@supports (-webkit-touch-callout: none) {
	@media (display-mode: standalone) {
		.sam-staff-portal {
			--sam-drawer-top: calc(var(--bb-header-h, 5.75rem) + env(safe-area-inset-top, 0px));
		}
	}
}

/* Isolate from theme / accidental wp-admin button CSS on the front */
.sam-staff-portal a {
	color: var(--sam-accent) !important;
	text-decoration: none;
}

.sam-staff-portal a:hover,
.sam-staff-portal a:focus-visible {
	color: #e0c07a !important;
}

.sam-staff-portal .sam-sp-btn,
.sam-staff-portal button.sam-sp-btn,
.sam-staff-portal a.sam-sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.65rem 1.25rem;
	border: 1px solid var(--sam-accent) !important;
	background: transparent !important;
	color: var(--sam-accent) !important;
	font: inherit;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	line-height: 1.2;
	transition: background-color var(--sam-ease), color var(--sam-ease);
}

.sam-staff-portal .sam-sp-btn:hover,
.sam-staff-portal .sam-sp-btn:focus-visible,
.sam-staff-portal button.sam-sp-btn:hover,
.sam-staff-portal a.sam-sp-btn:hover {
	background: var(--sam-accent) !important;
	color: var(--sam-bg-deep) !important;
}

.sam-staff-portal .sam-sp-btn--sm {
	min-height: 2.1rem;
	padding: 0.4rem 0.85rem;
	font-size: 0.7rem;
}

.sam-staff-portal .sam-sp-btn--ghost {
	border-color: var(--sam-line) !important;
	color: var(--sam-muted) !important;
}

.sam-staff-portal .sam-sp-btn--gold {
	background: var(--sam-accent) !important;
	color: var(--sam-bg-deep) !important;
}

.sam-staff-portal .sam-sp-btn--danger {
	border-color: var(--sam-danger) !important;
	color: var(--sam-danger) !important;
	background: transparent !important;
}

.sam-staff-portal .sam-sp-tab,
.sam-staff-portal button.sam-sp-tab,
.sam-staff-portal a.sam-sp-tab {
	background: transparent !important;
	border: none !important;
	border-left: 3px solid transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--sam-muted) !important;
	font: inherit;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.85rem 1rem;
	cursor: pointer;
	min-height: 44px;
	line-height: 1.35;
	text-align: left;
	text-decoration: none !important;
	width: 100%;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 0.65rem;
	white-space: normal;
}

.sam-staff-portal .sam-sp-tab:hover,
.sam-staff-portal button.sam-sp-tab:hover,
.sam-staff-portal a.sam-sp-tab:hover {
	background: var(--sam-accent-soft) !important;
	color: #e0c07a !important;
}

.sam-staff-portal .sam-sp-tab:focus-visible,
.sam-staff-portal button.sam-sp-tab:focus-visible,
.sam-staff-portal a.sam-sp-tab:focus-visible {
	outline: 2px solid var(--sam-accent);
	outline-offset: 2px;
}

.sam-staff-portal .sam-sp-tab.is-active,
.sam-staff-portal button.sam-sp-tab.is-active,
.sam-staff-portal a.sam-sp-tab.is-active {
	color: var(--sam-accent) !important;
	border-left-color: var(--sam-accent) !important;
	background: var(--sam-accent-soft) !important;
}

.sam-staff-portal .sam-sp-summary__card {
	background: var(--sam-bg-panel) !important;
	border: 1px solid var(--sam-line) !important;
	color: var(--sam-text);
}

.sam-staff-portal .sam-sp-summary__num {
	color: var(--sam-accent) !important;
}

.sam-staff-portal .sam-sp-topbar__title,
.sam-staff-portal .sam-sp-topbar__sub {
	color: var(--sam-text);
}

.sam-staff-portal .sam-sp-topbar__sub {
	color: var(--sam-muted);
}

.sam-staff-portal .sam-sp-panel-hint,
.sam-staff-portal .sam-sp-empty {
	color: var(--sam-muted) !important;
}

.sam-sp-tab--manager {
	color: var(--sam-accent) !important;
}

.sam-sp-panel .sam-admin-portal,
.sam-sp-panel .sam-salon-staff {
	max-width: none;
}

.sam-sp-panel .sam-view-tabs {
	margin-bottom: 1rem;
}

/* ---------- Login ---------- */
.sam-sp-login {
	display: flex;
	justify-content: center;
	padding: 2rem 1rem;
}

.sam-sp-login__card {
	width: 100%;
	max-width: 24rem;
	background: var(--sam-bg-deep);
	border: 1px solid var(--sam-line);
	padding: 2rem;
	text-align: center;
}

.sam-sp-login__title {
	font-family: "Playfair Display", Georgia, serif;
	margin: 0 0 0.5rem;
}

.sam-sp-login__lead {
	color: var(--sam-muted);
	font-size: 0.9rem;
	margin: 0 0 1.5rem;
}

.sam-sp-login__lost {
	margin-top: 1.25rem;
	font-size: 0.85rem;
}

.sam-sp-hp {
	position: absolute;
	left: -9999px;
	height: 0;
	overflow: hidden;
}

/* ---------- Forms / buttons ---------- */
.sam-sp-form {
	display: grid;
	gap: 1rem;
	text-align: left;
}

.sam-sp-field {
	display: grid;
	gap: 0.4rem;
}

.sam-sp-field span {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sam-muted);
}

.sam-sp-field input[type="text"],
.sam-sp-field input[type="password"],
.sam-sp-field input[type="email"] {
	background: #111;
	border: 1px solid var(--sam-line);
	color: var(--sam-text);
	min-height: 2.75rem;
	padding: 0.65rem 0.9rem;
	font: inherit;
}

.sam-sp-field--check {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5rem;
}

.sam-sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.65rem 1.25rem;
	border: 1px solid var(--sam-accent);
	background: transparent;
	color: var(--sam-accent);
	font: inherit;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--sam-ease), color var(--sam-ease);
}

.sam-sp-btn:hover,
.sam-sp-btn:focus-visible {
	background: var(--sam-accent);
	color: var(--sam-bg-deep);
}

.sam-sp-btn--sm {
	min-height: 2.1rem;
	padding: 0.4rem 0.85rem;
	font-size: 0.7rem;
}

.sam-sp-btn--ghost {
	border-color: var(--sam-line);
	color: var(--sam-muted);
}

.sam-sp-btn--ghost:hover,
.sam-sp-btn--ghost:focus-visible {
	background: var(--sam-line);
	color: var(--sam-text);
}

.sam-sp-btn--gold {
	background: var(--sam-accent);
	color: var(--sam-bg-deep);
}

.sam-sp-btn--danger {
	border-color: var(--sam-danger);
	color: var(--sam-danger);
}

.sam-sp-btn--danger:hover,
.sam-sp-btn--danger:focus-visible {
	background: var(--sam-danger);
	color: #1a0a0a;
}

.sam-sp-inline-form {
	display: inline-flex;
}

.sam-sp-inline-form--stack {
	display: grid;
	gap: 0.5rem;
	margin-top: 0.5rem;
	min-width: 14rem;
}

.sam-sp-inline-form--stack textarea,
.sam-sp-inline-form--stack input[type="datetime-local"] {
	background: #111;
	border: 1px solid var(--sam-line);
	color: var(--sam-text);
	padding: 0.6rem 0.75rem;
	font: inherit;
	min-height: 2.5rem;
}

.sam-sp-details {
	display: inline-block;
}

.sam-sp-details summary {
	list-style: none;
	cursor: pointer;
}

.sam-sp-details summary::-webkit-details-marker {
	display: none;
}

/* ---------- Alerts / toast ---------- */
.sam-sp-alert {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--sam-line);
	margin: 0 0 1.25rem;
	font-size: 0.9rem;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.sam-sp-alert.is-leaving {
	opacity: 0;
	transform: translateY( -0.35rem );
	pointer-events: none;
}

.sam-sp-alert__text {
	flex: 1 1 auto;
	min-width: 0;
}

.sam-sp-alert__close {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	margin: -0.25rem -0.35rem -0.25rem 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.75;
}

.sam-sp-alert__close:hover,
.sam-sp-alert__close:focus-visible {
	opacity: 1;
	outline: none;
}

.sam-sp-alert--ok {
	border-color: var(--sam-ok);
	color: var(--sam-ok);
}

.sam-sp-alert--error {
	border-color: var(--sam-danger);
	color: var(--sam-danger);
}

.sam-sp-toast {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 9999;
	background: var(--sam-bg-deep);
	border: 1px solid var(--sam-accent);
	color: var(--sam-text);
	padding: 0.85rem 1.25rem;
	font-size: 0.85rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.sam-sp-toast[hidden] {
	display: none !important;
}

/* ---------- Topbar / summary ---------- */
.sam-sp-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--sam-line);
}

.sam-sp-topbar__title {
	font-family: "Playfair Display", Georgia, serif;
	margin: 0;
	font-size: 1.5rem;
}

.sam-sp-topbar__sub {
	margin: 0.15rem 0 0;
	color: var(--sam-muted);
	font-size: 0.85rem;
}

.sam-sp-topbar__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.65rem;
}

.sam-sp-sound-toggle {
	min-height: 2.1rem;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--sam-line);
	background: transparent;
	color: var(--sam-muted);
	font: inherit;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.sam-sp-sound-toggle.is-on {
	border-color: var(--sam-accent);
	color: var(--sam-accent);
}

.sam-sp-sound-toggle.is-rearm {
	border-color: rgba(200, 164, 93, 0.55);
	color: var(--sam-accent);
	background: rgba(200, 164, 93, 0.1);
}

.sam-sp-sound-toggle:focus-visible {
	outline: 2px solid var(--sam-accent);
	outline-offset: 2px;
}

.sam-sp-sound-rearm {
	margin: 0 0 0.75rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid rgba(200, 164, 93, 0.45);
	border-radius: 0.65rem;
	background: linear-gradient(180deg, rgba(200, 164, 93, 0.16), rgba(26, 24, 20, 0.92));
}

.sam-sp-sound-rearm[hidden] {
	display: none !important;
}

.sam-sp-sound-rearm__btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.55rem 0.75rem;
	border: 1px solid rgba(200, 164, 93, 0.5);
	border-radius: 0.45rem;
	background: #0f0f0f;
	color: #f4f4f4;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	cursor: pointer;
}

.sam-sp-sound-rearm__btn:hover,
.sam-sp-sound-rearm__btn:focus-visible {
	border-color: var(--sam-accent, #c8a45d);
	background: rgba(200, 164, 93, 0.18);
	outline: none;
}

/* Sticky stacked new-appointment notifications (no auto-dismiss) */
.sam-sp-notify-stack {
	--sam-notify-gap: 10px;
	position: fixed;
	top: max(1rem, env(safe-area-inset-top, 0px));
	right: max(1rem, env(safe-area-inset-right, 0px));
	left: auto;
	z-index: 100060;
	width: min(22.5rem, calc(100vw - 1.5rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
	max-height: min(70vh, calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	pointer-events: none;
}

body.admin-bar .sam-sp-notify-stack {
	top: calc(32px + 0.75rem + env(safe-area-inset-top, 0px));
}

@media screen and (max-width: 782px) {
	body.admin-bar .sam-sp-notify-stack {
		top: calc(46px + 0.75rem + env(safe-area-inset-top, 0px));
	}
}

.sam-sp-notify-stack[hidden] {
	display: none !important;
}

.sam-sp-notify-stack__head {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.45rem 0.65rem;
	background: #171512;
	border: 1px solid rgba(212, 175, 55, 0.35);
	border-radius: 0.55rem;
}

.sam-sp-notify-stack__title {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 0.95rem;
	font-weight: 600;
	color: #f4f4f4;
}

.sam-sp-notify-stack__badge {
	min-width: 1.55rem;
	height: 1.55rem;
	padding: 0 0.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--sam-accent, #d4af37);
	color: #171512;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1;
}

.sam-sp-notify-stack__list {
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	gap: var(--sam-notify-gap);
	overflow-y: auto;
	overflow-x: hidden;
	max-height: inherit;
	padding-right: 0.15rem;
	-webkit-overflow-scrolling: touch;
}

.sam-sp-notify-card {
	position: relative;
	background: #171512;
	border: 1px solid rgba(212, 175, 55, 0.45);
	border-left: 4px solid var(--sam-accent, #d4af37);
	border-radius: 0.55rem;
	color: #f4f4f4;
	padding: 0.85rem 0.9rem 0.9rem;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
	animation: sam-sp-notify-in 0.28s ease;
}

@keyframes sam-sp-notify-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sam-sp-notify-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.55rem;
}

.sam-sp-notify-card__eyebrow {
	margin: 0;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sam-accent, #d4af37);
	font-weight: 700;
}

.sam-sp-notify-card__close {
	flex: 0 0 auto;
	min-width: 44px;
	min-height: 44px;
	margin: -0.35rem -0.35rem 0 0;
	border: 0;
	border-radius: 0.4rem;
	background: transparent;
	color: #ccc;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sam-sp-notify-card__close:hover,
.sam-sp-notify-card__close:focus-visible {
	color: #f4f4f4;
	background: rgba(212, 175, 55, 0.14);
	outline: 2px solid var(--sam-accent, #d4af37);
	outline-offset: 1px;
}

.sam-sp-notify-card__time {
	margin: 0 0 0.35rem;
	font-size: 1.55rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--sam-accent, #d4af37);
	font-variant-numeric: tabular-nums;
}

.sam-sp-notify-card__time-label {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #aaa;
	margin-bottom: 0.15rem;
}

.sam-sp-notify-card__meta {
	margin: 0;
	display: grid;
	gap: 0.28rem;
	font-size: 0.86rem;
	color: #f4f4f4;
}

.sam-sp-notify-card__meta dt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.sam-sp-notify-card__meta dd {
	margin: 0;
	color: #f4f4f4;
}

.sam-sp-notify-card__meta dd span {
	color: #aaa;
	margin-right: 0.35rem;
}

.sam-sp-notify-card__ago {
	margin: 0.45rem 0 0;
	font-size: 0.75rem;
	color: #aaa;
}

.sam-sp-notify-card__actions {
	margin-top: 0.75rem;
}

.sam-sp-notify-card.is-dismissing {
	opacity: 0.55;
	pointer-events: none;
}

.sam-sp-notify-card__error {
	margin: 0.45rem 0 0;
	font-size: 0.78rem;
	color: #f0a0a0;
}

.sam-sp-card--live {
	animation: sam-sp-card-in 0.45s ease;
}

@keyframes sam-sp-card-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sam-sp-card--flash {
	box-shadow: 0 0 0 2px var(--sam-accent, #d4af37);
}

@media (max-width: 640px) {
	.sam-sp-notify-stack {
		top: max(0.75rem, env(safe-area-inset-top, 0px));
		right: max(0.75rem, env(safe-area-inset-right, 0px));
		left: max(0.75rem, env(safe-area-inset-left, 0px));
		width: auto;
		max-height: min(58vh, calc(100dvh - 5.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
	}
}

/* Legacy toast class kept for offline/status messages only */

@media (display-mode: standalone) {
	.sam-sp-notify-stack {
		top: max(1rem, env(safe-area-inset-top, 0px));
	}
}

.sam-sp-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 1025px) {
	.sam-sp-summary {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.sam-sp-summary__card {
	background: var(--sam-bg-panel);
	border: 1px solid var(--sam-line);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.sam-sp-summary__num {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.9rem;
	color: var(--sam-accent);
	line-height: 1;
}

.sam-sp-summary__label {
	margin-top: 0.35rem;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sam-muted);
}

/* ---------- Shell / sidebar / drawer ---------- */
.sam-sp-nav-toggle {
	display: none;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 48px;
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	padding-left: max(1rem, env(safe-area-inset-left));
	padding-right: max(1rem, env(safe-area-inset-right));
	border: 1px solid var(--sam-line);
	background: var(--sam-bg-panel);
	color: var(--sam-text);
	font: inherit;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	text-align: left;
	cursor: pointer;
}

.sam-sp-nav-toggle:focus-visible {
	outline: 2px solid var(--sam-accent);
	outline-offset: 2px;
}

.sam-sp-nav-toggle__icon {
	position: relative;
	flex: 0 0 1.15rem;
	width: 1.15rem;
	height: 0.85rem;
}

.sam-sp-nav-toggle__icon::before,
.sam-sp-nav-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--sam-accent);
}

.sam-sp-nav-toggle__icon::before {
	top: 0;
	box-shadow: 0 0.35rem 0 var(--sam-accent);
}

.sam-sp-nav-toggle__icon::after {
	bottom: 0;
}

.sam-sp-nav-toggle__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem;
	min-width: 0;
	color: var(--sam-muted);
}

.sam-sp-nav-toggle__sep {
	opacity: 0.5;
}

.sam-sp-nav-toggle [data-sam-nav-current] {
	color: var(--sam-accent);
	font-weight: 600;
}

.sam-sp-shell {
	display: block;
	position: relative;
	min-width: 0;
}

.sam-sp-nav-backdrop {
	display: none;
}

.sam-sp-sidebar {
	min-width: 0;
}

.sam-sp-main {
	min-width: 0;
}

/* ---------- Tabs (vertical sidebar nav) ---------- */
.sam-sp-tabs {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.15rem;
	margin: 0;
	padding: 0.65rem;
	border: 1px solid var(--sam-line);
	background: var(--sam-bg-panel);
	overflow: visible;
}

.sam-sp-tab {
	background: transparent;
	border: none;
	border-left: 3px solid transparent;
	color: var(--sam-muted);
	font: inherit;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.85rem 1rem;
	cursor: pointer;
	position: relative;
	flex: 0 0 auto;
	white-space: normal;
	width: 100%;
	min-height: 44px;
	text-align: left;
	line-height: 1.35;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.65rem;
	box-sizing: border-box;
}

.sam-sp-tab__label {
	flex: 1 1 auto;
	min-width: 0;
}

.sam-sp-tab.is-active {
	color: var(--sam-accent);
	border-left-color: var(--sam-accent);
	background: var(--sam-accent-soft);
}

.sam-sp-tab__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 0.35rem;
	margin-left: 0;
	background: var(--sam-accent);
	color: var(--sam-bg-deep);
	font-size: 0.68rem;
	border-radius: 999px;
	max-width: 3.5rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sam-sp-panel[hidden] {
	display: none !important;
}

.sam-sp-empty {
	color: var(--sam-muted);
	padding: 2rem 0;
	text-align: center;
}

/* Desktop: sticky vertical sidebar */
@media (min-width: 1025px) {
	.sam-sp-nav-toggle {
		display: none !important;
	}

	.sam-sp-nav-backdrop {
		display: none !important;
	}

	.sam-sp-shell {
		display: grid;
		grid-template-columns: var(--sam-sidebar-w) minmax(0, 1fr);
		gap: var(--sam-shell-gap);
		align-items: start;
	}

	.sam-sp-sidebar {
		position: sticky;
		top: var(--sam-sticky-top);
		z-index: 5;
		max-height: calc(100vh - var(--sam-sticky-top) - 1.5rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.sam-sp-tabs {
		min-height: 100%;
	}
}

/* Tablet / mobile / PWA: drawer (JS-enhanced) or stacked nav (no-JS fallback) */
@media (max-width: 1024px) {
	.sam-sp-nav-toggle {
		display: none;
	}

	.sam-sp-shell {
		display: block;
	}

	.sam-sp-sidebar {
		position: static;
		width: auto;
		max-width: none;
		margin-bottom: 1.25rem;
		transform: none;
		visibility: visible;
		pointer-events: auto;
		overflow: visible;
	}

	.sam-sp-tabs {
		border: 1px solid var(--sam-line);
		background: var(--sam-bg-panel);
		padding: 0.5rem;
		min-height: auto;
	}

	.sam-sp-shell.sam-sp-nav-enhanced > .sam-sp-nav-toggle {
		display: inline-flex;
	}

	.sam-sp-shell.sam-sp-nav-enhanced .sam-sp-nav-backdrop {
		position: fixed;
		inset: 0;
		z-index: 90;
		background: rgba(0, 0, 0, 0.65);
		border: 0;
		padding: 0;
		margin: 0;
		cursor: pointer;
	}

	.sam-sp-shell.sam-sp-nav-enhanced.is-nav-open .sam-sp-nav-backdrop {
		display: block;
	}

	.sam-sp-shell.sam-sp-nav-enhanced .sam-sp-sidebar {
		position: fixed;
		/* Below theme .site-header (z-index 1000) so logo never covers menu rows */
		top: var(--sam-drawer-top, var(--bb-header-h, 5.75rem));
		left: 0;
		bottom: auto;
		z-index: 100;
		width: min(280px, calc(100vw - 3rem));
		max-width: 100%;
		height: calc(100vh - var(--sam-drawer-top, var(--bb-header-h, 5.75rem)));
		height: calc(100dvh - var(--sam-drawer-top, var(--bb-header-h, 5.75rem)));
		max-height: calc(100vh - var(--sam-drawer-top, var(--bb-header-h, 5.75rem)));
		max-height: calc(100dvh - var(--sam-drawer-top, var(--bb-header-h, 5.75rem)));
		margin-bottom: 0;
		padding-top: 0.75rem;
		/* Clear theme .mobile-bar (z-index 1100) + home-indicator */
		padding-bottom: calc(0.75rem + var(--pwa-nav, 4.75rem) + env(safe-area-inset-bottom, 0px));
		padding-left: max(0.65rem, env(safe-area-inset-left, 0px));
		background: var(--sam-bg-deep);
		border-right: 1px solid var(--sam-line);
		transform: translateX(-105%);
		transition: transform 0.25s ease;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior-y: contain;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
		visibility: hidden;
		pointer-events: none;
	}

	body.admin-bar .sam-sp-shell.sam-sp-nav-enhanced .sam-sp-sidebar {
		top: calc(var(--sam-drawer-top, var(--bb-header-h, 5.75rem)) + 32px);
		height: calc(100vh - var(--sam-drawer-top, var(--bb-header-h, 5.75rem)) - 32px);
		height: calc(100dvh - var(--sam-drawer-top, var(--bb-header-h, 5.75rem)) - 32px);
		max-height: calc(100vh - var(--sam-drawer-top, var(--bb-header-h, 5.75rem)) - 32px);
		max-height: calc(100dvh - var(--sam-drawer-top, var(--bb-header-h, 5.75rem)) - 32px);
		padding-top: 0.75rem;
	}

	@media screen and (max-width: 782px) {
		body.admin-bar .sam-sp-shell.sam-sp-nav-enhanced .sam-sp-sidebar {
			top: calc(var(--sam-drawer-top, var(--bb-header-h, 5.75rem)) + 46px);
			height: calc(100vh - var(--sam-drawer-top, var(--bb-header-h, 5.75rem)) - 46px);
			height: calc(100dvh - var(--sam-drawer-top, var(--bb-header-h, 5.75rem)) - 46px);
			max-height: calc(100vh - var(--sam-drawer-top, var(--bb-header-h, 5.75rem)) - 46px);
			max-height: calc(100dvh - var(--sam-drawer-top, var(--bb-header-h, 5.75rem)) - 46px);
		}
	}

	.sam-sp-shell.sam-sp-nav-enhanced.is-nav-open .sam-sp-sidebar {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
	}

	.sam-sp-shell.sam-sp-nav-enhanced .sam-sp-tabs {
		border: none;
		background: transparent;
	}

	/* Lock background page only — do NOT set touch-action:none (blocks drawer scroll on iOS/PWA). */
	body.sam-sp-nav-locked {
		overflow: hidden;
		position: fixed;
		width: 100%;
		left: 0;
		right: 0;
	}

	html.sam-sp-nav-locked {
		overflow: hidden;
	}
}

/* ---------- Cards / grid ---------- */
.sam-sp-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.sam-sp-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.sam-sp-card {
	background: var(--sam-bg);
	border: 1px solid var(--sam-line);
	border-left: 3px solid var(--sam-line);
	padding: 1.1rem 1.25rem;
}

.sam-sp-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.sam-sp-card__code {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var(--sam-muted);
}

.sam-sp-card__name {
	font-family: "Playfair Display", Georgia, serif;
	margin: 0 0 0.6rem;
	font-size: 1.15rem;
}

.sam-sp-card__meta {
	display: grid;
	gap: 0.35rem;
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
}

.sam-sp-card__meta dt {
	color: var(--sam-muted);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sam-sp-card__meta dd {
	margin: 0 0 0.3rem;
}

.sam-sp-card__reason dd {
	color: var(--sam-danger);
}

.sam-sp-card__dur {
	color: var(--sam-muted);
}

.sam-sp-panel-hint {
	margin: 0 0 1rem;
	color: var(--sam-muted);
	font-size: 0.85rem;
	line-height: 1.45;
}

.sam-sp-day-group {
	margin-bottom: 1.5rem;
}

.sam-sp-day-group__title {
	margin: 0 0 0.75rem;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--sam-accent);
	border-bottom: 1px solid var(--sam-line);
	padding-bottom: 0.45rem;
}

.sam-sp-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--sam-line);
	align-items: flex-start;
}

.sam-sp-card__actions .sam-sp-btn {
	min-height: 44px;
	min-width: 44px;
	padding: 0.55rem 0.9rem;
}

.sam-sp-details {
	display: block;
	flex: 1 1 100%;
	max-width: 100%;
}

.sam-sp-details[open] {
	flex: 1 1 100%;
	width: 100%;
}

.sam-sp-reject-label {
	display: block;
	font-size: 0.8rem;
	color: var(--sam-muted, #9b9b9b);
	margin-bottom: 0.25rem;
}

.sam-sp-reject-error {
	margin: 0;
	color: var(--sam-danger, #e85d5d);
	font-size: 0.85rem;
}

.sam-sp-reject-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sam-sp-inline-form--stack {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.sam-sp-inline-form--stack textarea {
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
}

@media (max-width: 640px) {
	.sam-sp-card__actions {
		flex-direction: column;
		padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
	}

	.sam-sp-card__actions > .sam-sp-inline-form,
	.sam-sp-card__actions > .sam-sp-details {
		width: 100%;
	}

	.sam-sp-card__actions .sam-sp-btn {
		width: 100%;
		justify-content: center;
	}

	.sam-sp-details summary.sam-sp-btn {
		display: flex;
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
}

/* ---------- Status badges (color_class() → sam-st--*) ---------- */
.sam-sp-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.6rem;
	font-size: 0.68rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 1px solid var(--sam-line);
}

.sam-st--pending {
	border-left-color: var(--sam-accent);
}
.sam-sp-badge.sam-st--pending {
	color: var(--sam-accent);
	border-color: var(--sam-accent);
}

.sam-st--confirmed {
	border-left-color: var(--sam-ok);
}
.sam-sp-badge.sam-st--confirmed {
	color: var(--sam-ok);
	border-color: var(--sam-ok);
}

.sam-st--reschedule {
	border-left-color: #d9b36c;
}
.sam-sp-badge.sam-st--reschedule {
	color: #d9b36c;
	border-color: #d9b36c;
}

.sam-st--active {
	border-left-color: #6cb7d9;
}
.sam-sp-badge.sam-st--active {
	color: #6cb7d9;
	border-color: #6cb7d9;
}

.sam-st--completed {
	border-left-color: var(--sam-muted);
}
.sam-sp-badge.sam-st--completed {
	color: var(--sam-text);
	border-color: var(--sam-line);
}

.sam-st--cancelled {
	border-left-color: var(--sam-danger);
}
.sam-sp-badge.sam-st--cancelled {
	color: var(--sam-danger);
	border-color: var(--sam-danger);
}

.sam-st--cancelled-customer {
	border-left-color: #9f1d1d;
}
.sam-sp-badge.sam-st--cancelled-customer {
	color: #f0a0a0;
	border-color: #9f1d1d;
	background: rgba(127, 29, 29, 0.28);
}

.sam-sp-card.sam-st--cancelled-customer {
	border-color: rgba(159, 29, 29, 0.45);
}

/* ---------- Notifications ---------- */
.sam-sp-notif-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.sam-sp-notif {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	background: var(--sam-bg);
	border: 1px solid var(--sam-line);
	padding: 0.75rem 1rem;
	font-size: 0.85rem;
}

.sam-sp-notif__time {
	color: var(--sam-muted);
}

/* ---------- Profile ---------- */
.sam-sp-profile {
	background: var(--sam-bg);
	border: 1px solid var(--sam-line);
	padding: 1.25rem;
	max-width: 28rem;
}

.sam-sp-profile__name {
	font-family: "Playfair Display", Georgia, serif;
	margin: 0 0 1rem;
}

.sam-sp-profile__meta {
	display: grid;
	gap: 0.5rem;
	margin: 0;
}

.sam-sp-profile__meta dt {
	color: var(--sam-muted);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sam-sp-profile__meta dd {
	margin: 0 0 0.4rem;
}

.sam-sp-password {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--sam-line);
}

.sam-sp-password__title {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	color: var(--sam-accent);
}

.sam-sp-password__lead {
	margin: 0 0 1rem;
	font-size: 0.85rem;
	color: var(--sam-muted);
	line-height: 1.45;
}

.sam-sp-password .sam-password-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.sam-sp-password .sam-password-row input {
	flex: 1 1 12rem;
}

/* ---------- Mobile / PWA safe areas ---------- */
@media (max-width: 720px) {
	.sam-staff-portal {
		padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
		padding-left: max(0px, env(safe-area-inset-left));
		padding-right: max(0px, env(safe-area-inset-right));
	}

	.sam-sp-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.65rem;
	}

	.sam-sp-card {
		max-width: 100%;
	}
}

@media (max-width: 360px) {
	.sam-sp-summary {
		grid-template-columns: 1fr 1fr;
	}

	.sam-staff-portal .sam-sp-tab,
	.sam-staff-portal button.sam-sp-tab,
	.sam-staff-portal a.sam-sp-tab {
		font-size: 0.72rem;
		padding: 0.75rem 0.85rem;
		letter-spacing: 0.04em;
	}
}

/* Standalone PWA notch / home indicator */
@media (display-mode: standalone) {
	.sam-staff-portal {
		padding-top: max(0.5rem, env(safe-area-inset-top));
		padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
	}
}

.sam-sp-update-banner {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	padding-top: max(0.75rem, env(safe-area-inset-top));
	background: #1a1610;
	border: 1px solid var(--sam-accent);
	color: var(--sam-accent);
	font-size: 0.88rem;
}

.sam-sp-update-banner[hidden] {
	display: none !important;
}

/* —— Leave / availability panel —— */
.sam-leave {
	display: grid;
	gap: 1.5rem;
}

.sam-leave__form {
	padding: 1.25rem;
	border: 1px solid var(--sam-line);
	background: #121212;
}

.sam-leave__heading {
	margin: 0 0 0.85rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--sam-accent);
	letter-spacing: 0.04em;
}

.sam-leave__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.85rem;
}

.sam-leave__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-top: 0.35rem;
}

.sam-leave__actions .sam-sp-btn {
	min-height: 44px;
}

.sam-sp-field select,
.sam-sp-field input[type="date"],
.sam-sp-field input[type="time"] {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background: #111;
	border: 1px solid var(--sam-line);
	color: var(--sam-text);
	min-height: 2.75rem;
	padding: 0.65rem 0.9rem;
	font: inherit;
	color-scheme: dark;
}

.sam-leave__alert {
	padding: 0.85rem 1rem;
	border: 1px solid var(--sam-line);
	font-size: 0.9rem;
}

.sam-leave__alert--ok {
	border-color: #3d6b4f;
	color: #b8e0c4;
	background: #0f1a14;
}

.sam-leave__alert--error {
	border-color: #8a3a3a;
	color: #f0b4b4;
	background: #1a1010;
}

.sam-leave__conflicts {
	padding: 1rem;
	border: 1px solid #8a3a3a;
	background: #1a1010;
	color: #f0b4b4;
}

.sam-leave__conflicts-title {
	margin: 0 0 0.65rem;
	font-weight: 600;
}

.sam-leave__conflicts ul {
	margin: 0 0 0.85rem;
	padding-left: 1.1rem;
}

.sam-leave__conflicts li {
	margin: 0.35rem 0;
	font-size: 0.88rem;
}

.sam-leave__lists {
	display: grid;
	gap: 1.5rem;
}

.sam-leave__list {
	display: grid;
	gap: 0.75rem;
}

.sam-leave-card {
	padding: 1rem;
	border: 1px solid var(--sam-line);
	background: #101010;
}

.sam-leave-card__head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.45rem;
}

.sam-leave-card__badge,
.sam-leave-card__mode {
	display: inline-flex;
	align-items: center;
	min-height: 1.6rem;
	padding: 0.15rem 0.55rem;
	border: 1px solid var(--sam-line);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sam-muted);
}

.sam-leave-card__badge {
	border-color: var(--sam-accent);
	color: var(--sam-accent);
}

.sam-leave-card__staff {
	margin: 0 0 0.25rem;
	font-size: 1rem;
	color: var(--sam-text);
}

.sam-leave-card__summary {
	margin: 0;
	font-size: 0.95rem;
	color: var(--sam-text);
}

.sam-leave-card__note,
.sam-leave-card__meta {
	margin: 0.4rem 0 0;
	font-size: 0.82rem;
	color: var(--sam-muted);
}

.sam-leave-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.85rem;
}

.sam-leave-card__actions .sam-sp-btn {
	min-height: 44px;
}

@media (max-width: 720px) {
	.sam-leave__row {
		grid-template-columns: 1fr;
	}

	.sam-leave__form,
	.sam-leave-card {
		padding: 1rem;
	}
}

/* ---------- Salon desk: staff filter, timeline, walk-in ---------- */
.sam-sp-topbar__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem;
}

.sam-sp-sync {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0 0.55rem;
	font-size: 0.75rem;
	color: var(--sam-muted, #9a958c);
}

.sam-sp-sync__dot {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: #8a8478;
}

.sam-sp-sync.is-online .sam-sp-sync__dot {
	background: #6f9e6a;
}

.sam-sp-sync.is-offline .sam-sp-sync__dot {
	background: #c45c4a;
}

.sam-sp-staff-filter {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.75rem 0.65rem 1rem;
	border-bottom: 1px solid color-mix(in srgb, var(--sam-border, #3a3732) 80%, transparent);
	margin-bottom: 0.5rem;
}

.sam-sp-staff-filter__label {
	margin: 0 0 0.35rem;
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sam-muted, #9a958c);
}

.sam-sp-staff-filter__btn {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
	min-height: 44px;
	padding: 0.35rem 0.55rem;
	border: 0;
	border-radius: 0.55rem;
	background: transparent;
	color: inherit;
	text-align: left;
	cursor: pointer;
	font: inherit;
}

.sam-sp-staff-filter__btn:hover,
.sam-sp-staff-filter__btn:focus-visible {
	background: color-mix(in srgb, var(--sam-gold, #c4a35a) 12%, transparent);
	outline: none;
}

.sam-sp-staff-filter__btn.is-active {
	background: color-mix(in srgb, var(--sam-gold, #c4a35a) 18%, transparent);
	box-shadow: inset 2px 0 0 var(--sam-gold, #c4a35a);
}

.sam-sp-staff-filter__avatar {
	flex: 0 0 1.75rem;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: color-mix(in srgb, var(--sam-gold, #c4a35a) 22%, #2a2723);
	font-size: 0.72rem;
	font-weight: 600;
}

.sam-sp-staff-filter__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sam-sp-staff-filter__name {
	flex: 1 1 auto;
	font-size: 0.88rem;
	line-height: 1.2;
}

.sam-sp-staff-filter__badge {
	min-width: 1.35rem;
	padding: 0.1rem 0.4rem;
	border-radius: 999px;
	background: var(--sam-gold, #c4a35a);
	color: #1a1814;
	font-size: 0.7rem;
	font-weight: 700;
	text-align: center;
}

.sam-sp-badge--walkin {
	background: color-mix(in srgb, #d4a017 28%, transparent);
	color: #f0d78c;
	border: 1px solid color-mix(in srgb, #d4a017 45%, transparent);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.68rem;
}

.sam-sp-card--walkin {
	border-color: color-mix(in srgb, #d4a017 35%, var(--sam-border, #3a3732));
}

.sam-sp-timeline {
	margin: 0 0 1.25rem;
	padding: 0.85rem;
	border: 1px solid var(--sam-border, #3a3732);
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--sam-surface, #1f1c18) 92%, #000);
}

.sam-sp-schedule-chrome {
	margin: 0 0 0.85rem;
	overflow: visible;
}

.sam-sp-schedule-chrome[hidden] {
	display: none !important;
}

.sam-sp-schedule-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin: 0 0 0.75rem;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--sam-border, #3a3732);
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--sam-surface, #1f1c18) 92%, #000);
}

.sam-sp-schedule-nav__title-wrap {
	min-width: 0;
	flex: 1 1 12rem;
}

.sam-sp-schedule-nav__title {
	display: block;
	font-size: 1rem;
	font-weight: 650;
	color: #f4f4f4;
}

.sam-sp-schedule-nav__hint {
	margin: 0.2rem 0 0;
	font-size: 0.78rem;
	color: var(--sam-muted, #9a958c);
}

.sam-sp-schedule-nav__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.sam-sp-schedule-nav__arrow {
	min-width: 2.25rem;
	padding-left: 0.45rem;
	padding-right: 0.45rem;
	font-size: 1.15rem;
	line-height: 1;
}

.sam-datepicker--schedule {
	position: relative;
	margin: 0;
	overflow: visible;
}

.sam-sp-schedule-nav,
.sam-sp-schedule-nav__controls {
	overflow: visible;
}

.sam-datepicker--schedule .sam-datepicker__trigger,
.sam-sp-schedule-nav__date-btn {
	min-height: 36px;
	padding: 0.35rem 0.65rem;
	border: 1px solid var(--sam-border, #3a3732);
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--sam-surface, #1f1c18) 80%, #000);
	color: #f4f4f4;
	font: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

/*
 * Schedule datepicker (Bugünkü Çizelgeler) is NOT inside .sam-sp-modal.
 * Structural grid/flex lived only under .sam-sp-modal / booking.css — without them
 * weekdays collapse to one word and day buttons fall back to browser chrome.
 * Scope all rules under .sam-staff-portal .sam-datepicker to avoid leaking into panel buttons.
 */
.sam-staff-portal .sam-datepicker .sam-datepicker__panel {
	box-sizing: border-box;
	width: min(22rem, calc(100vw - 1.5rem));
	min-width: 17.5rem;
	max-width: calc(100vw - 1.5rem);
	padding: 0.85rem;
	border: 1px solid rgba(200, 164, 93, 0.35);
	border-radius: 0.75rem;
	background: #1a1814;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
	color: var(--sam-text, #f2f2f2);
}

.sam-staff-portal .sam-datepicker--schedule .sam-datepicker__panel {
	position: absolute;
	top: calc(100% + 0.4rem);
	right: 0;
	left: auto;
	z-index: 80;
}

.sam-staff-portal .sam-datepicker .sam-datepicker__panel[hidden] {
	display: none !important;
}

.sam-staff-portal .sam-datepicker .sam-datepicker__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.7rem;
}

.sam-staff-portal .sam-datepicker .sam-datepicker__month {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: #f4f4f4;
	line-height: 1.2;
}

.sam-staff-portal .sam-datepicker .sam-datepicker__nav {
	box-sizing: border-box;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(200, 164, 93, 0.45);
	border-radius: 0.4rem;
	background: #0f0f0f;
	color: var(--sam-accent, #c8a45d);
	font: inherit;
	font-size: 1.25rem;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	position: relative;
	z-index: 2;
	pointer-events: auto;
}

.sam-staff-portal .sam-datepicker .sam-datepicker__nav:hover,
.sam-staff-portal .sam-datepicker .sam-datepicker__nav:focus-visible {
	border-color: var(--sam-accent, #c8a45d);
	background: rgba(200, 164, 93, 0.16);
	outline: none;
}

.sam-staff-portal .sam-datepicker .sam-datepicker__nav:disabled,
.sam-staff-portal .sam-datepicker .sam-datepicker__nav[aria-disabled='true'] {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

.sam-staff-portal .sam-datepicker .sam-datepicker__weekdays {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.2rem;
	margin-bottom: 0.4rem;
	text-align: center;
	font-size: 0.68rem;
	letter-spacing: 0.02em;
	text-transform: none;
	color: #a7a7a7;
}

.sam-staff-portal .sam-datepicker .sam-datepicker__weekdays > span {
	display: block;
	min-width: 0;
	padding: 0.15rem 0;
	line-height: 1.2;
	white-space: nowrap;
}

.sam-staff-portal .sam-datepicker .sam-datepicker__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.25rem;
}

.sam-staff-portal .sam-datepicker .sam-datepicker__day {
	box-sizing: border-box;
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	min-height: 2.5rem;
	aspect-ratio: 1;
	padding: 0.15rem;
	margin: 0;
	border: 1px solid transparent;
	border-radius: 0.4rem;
	background: transparent;
	color: #f4f4f4;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.1;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	overflow: hidden;
}

.sam-staff-portal .sam-datepicker .sam-datepicker__day--empty {
	visibility: hidden;
	pointer-events: none;
	min-height: 2.5rem;
	border: 0;
	background: transparent;
}

.sam-staff-portal .sam-datepicker .sam-datepicker__day-num {
	display: block;
	line-height: 1;
}

.sam-staff-portal .sam-datepicker .sam-datepicker__day:hover:not([disabled]),
.sam-staff-portal .sam-datepicker .sam-datepicker__day:focus-visible:not([disabled]) {
	border-color: var(--sam-accent, #c8a45d);
	background: rgba(200, 164, 93, 0.18);
	outline: none;
}

.sam-staff-portal .sam-datepicker .sam-datepicker__day.is-today:not(.is-selected) {
	box-shadow: inset 0 0 0 1px var(--sam-accent, #c8a45d);
}

.sam-staff-portal .sam-datepicker .sam-datepicker__day.is-selected {
	background: var(--sam-accent, #c8a45d);
	border-color: var(--sam-accent, #c8a45d);
	color: #1a1510;
}

.sam-staff-portal .sam-datepicker .sam-datepicker__day[disabled],
.sam-staff-portal .sam-datepicker .sam-datepicker__day.is-past,
.sam-staff-portal .sam-datepicker .sam-datepicker__day.is-closed,
.sam-staff-portal .sam-datepicker .sam-datepicker__day.is-disabled {
	opacity: 0.38;
	cursor: not-allowed;
	color: #9a958c;
	background: transparent;
}

@media (max-width: 720px) {
	.sam-sp-schedule-nav__controls {
		width: 100%;
	}

	.sam-staff-portal .sam-datepicker--schedule .sam-datepicker__panel {
		right: auto;
		left: 0;
		width: min(22rem, calc(100vw - 1.5rem));
		max-width: calc(100vw - 1.5rem);
	}
}

.sam-sp-day-report {
	margin: 0 0 0.85rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--sam-border, #3a3732);
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--sam-surface, #1f1c18) 88%, #000);
}

.sam-sp-day-report[hidden] {
	display: none !important;
}

.sam-sp-day-report__head {
	margin: 0 0 0.55rem;
	font-size: 0.86rem;
	font-weight: 600;
	color: #ece8e0;
}

.sam-sp-day-report__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.sam-sp-day-report__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.28rem 0.5rem;
	border: 1px solid var(--sam-border, #3a3732);
	border-radius: 0.45rem;
	font-size: 0.75rem;
	color: var(--sam-muted, #9a958c);
}

.sam-sp-day-report__chip strong {
	color: #f4f4f4;
	font-weight: 650;
}

.sam-sp-day-report__note {
	margin: 0.55rem 0 0;
	font-size: 0.74rem;
	color: var(--sam-muted, #9a958c);
}

.sam-sp-day-report--mini {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem 0.85rem;
	margin: 0 0 0.55rem;
	padding: 0.45rem 0;
	font-size: 0.75rem;
	color: var(--sam-muted, #9a958c);
	border: 0;
	background: transparent;
}

.sam-sp-schedule-status {
	margin: 0 0 0.75rem;
	font-size: 0.84rem;
	color: var(--sam-muted, #9a958c);
}

.sam-sp-schedule-status[hidden] {
	display: none !important;
}

.sam-sp-timeline__head--minimal {
	margin: 0;
	min-height: 0;
}

.sam-sp-timeline-acc__meta {
	margin-left: auto;
	margin-right: 0.5rem;
	font-size: 0.75rem;
	color: var(--sam-muted, #9a958c);
	font-weight: 500;
}

.sam-sp-slot--empty_past {
	opacity: 0.72;
	border-color: var(--sam-border, #3a3732);
	color: var(--sam-muted, #9a958c);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Mobile schedule panel alignment covered above with .sam-staff-portal scope. */

.sam-sp-timeline[hidden],
.sam-sp-timeline-all[hidden] {
	display: none !important;
}

.sam-sp-timeline__head,
.sam-sp-timeline-all__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.sam-sp-timeline-all {
	margin: 0 0 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.sam-sp-timeline-all__head {
	padding: 0 0.15rem;
}

.sam-sp-timeline-all__list {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.sam-sp-timeline-acc {
	border: 1px solid var(--sam-border, #3a3732);
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--sam-surface, #1f1c18) 92%, #000);
	overflow: hidden;
}

.sam-sp-timeline-acc__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 48px;
	padding: 0.75rem 0.9rem;
	border: 0;
	background: transparent;
	color: #f4f4f4;
	font: inherit;
	cursor: pointer;
	text-align: left;
}

.sam-sp-timeline-acc__toggle:focus-visible {
	outline: 2px solid var(--sam-accent, #d4af37);
	outline-offset: -2px;
}

.sam-sp-timeline-acc__name {
	font-weight: 600;
}

.sam-sp-timeline-acc__chev {
	color: var(--sam-accent, #d4af37);
	transition: transform 0.2s ease;
}

.sam-sp-timeline-acc.is-open .sam-sp-timeline-acc__chev {
	transform: rotate(180deg);
}

.sam-sp-timeline-acc__body {
	padding: 0 0.85rem 0.85rem;
}

.sam-sp-timeline-acc__loading {
	margin: 0;
	font-size: 0.84rem;
	color: var(--sam-muted, #9a958c);
}

.sam-sp-timeline__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
	gap: 0.45rem;
}

.sam-sp-timeline__hint {
	margin: 0.65rem 0 0;
	font-size: 0.78rem;
	color: var(--sam-muted, #9a958c);
}

.sam-sp-slot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	min-height: 44px;
	padding: 0.45rem 0.5rem;
	border-radius: 0.45rem;
	border: 1px solid transparent;
	background: color-mix(in srgb, #5a574f 28%, transparent);
	color: var(--sam-text, #f4f4f4);
	font: inherit;
	text-align: left;
	cursor: default;
}

.sam-sp-slot.is-clickable {
	cursor: pointer;
}

.sam-sp-slot:disabled {
	cursor: default;
	opacity: 0.78;
}

.sam-sp-slot__time {
	font-weight: 700;
	font-size: 0.85rem;
}

.sam-sp-slot__label {
	font-size: 0.72rem;
	opacity: 0.95;
}

.sam-sp-slot__hint {
	font-size: 0.62rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sam-muted, #ababab);
	margin-top: 0.1rem;
}

.sam-sp-slot--available {
	background: #285c35;
	border-color: rgba(92, 211, 125, 0.65);
	color: #eaffef;
}

.sam-sp-slot--available .sam-sp-slot__label {
	color: #d6ffe0;
	font-weight: 600;
}

.sam-sp-slot--available:hover {
	background: #317544;
	border-color: rgba(120, 230, 150, 0.85);
}

.sam-sp-slot--available:focus-visible {
	outline: 2px solid var(--sam-gold, #c4a35a);
	outline-offset: 2px;
	border-color: rgba(92, 211, 125, 0.9);
}

.sam-sp-slot--busy,
.sam-sp-slot--confirmed {
	background: color-mix(in srgb, #8a5a3a 34%, #141414);
	border-color: rgba(210, 150, 100, 0.35);
}

.sam-sp-slot--pending {
	background: color-mix(in srgb, #b08a2e 36%, #141414);
	border-color: rgba(212, 176, 80, 0.4);
}

.sam-sp-slot--walk_in {
	background: color-mix(in srgb, #d4a017 38%, #141414);
	border-color: rgba(212, 160, 23, 0.5);
}

.sam-sp-slot--past,
.sam-sp-slot--leave,
.sam-sp-slot--closed,
.sam-sp-slot--unavailable {
	background: color-mix(in srgb, #5a574f 40%, #141414);
	opacity: 0.78;
}

.sam-sp-slot.is-info:hover,
.sam-sp-slot.is-info:focus-visible {
	border-color: var(--sam-gold, #c4a35a);
	outline: 2px solid color-mix(in srgb, var(--sam-gold, #c4a35a) 70%, transparent);
	outline-offset: 2px;
}

.sam-sp-appt-dialog {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: min(22rem, calc(100vw - 1.5rem));
	width: 100%;
	margin: auto;
	overflow: visible;
	z-index: 10060;
}

.sam-sp-appt-dialog::backdrop {
	background: rgba(8, 7, 5, 0.62);
	z-index: 10055;
}

.sam-sp-appt-dialog__panel {
	position: relative;
	width: 100%;
	max-height: min(70vh, 28rem);
	overflow: auto;
	margin: 0;
	border-radius: 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: #181714;
	color: #f4f4f4;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
	-webkit-overflow-scrolling: touch;
}

/* Centered desktop / sheet mobile — keep panel in dialog flow (no off-screen fixed anchoring). */
.sam-sp-appt-dialog.is-open {
	display: flex;
}

.sam-sp-appt-dialog.is-open:not(.is-sheet) {
	align-items: center;
	justify-content: center;
}

.sam-sp-appt-dialog.is-open.is-sheet {
	align-items: flex-end;
	justify-content: stretch;
	max-width: none;
	width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
}

body.sam-sp-appt-open {
	overflow: hidden;
}

.sam-sp-appt-dialog__head,
.sam-sp-appt-dialog__body {
	padding: 0.85rem 1rem;
}

.sam-sp-appt-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	position: sticky;
	top: 0;
	background: #181714;
	z-index: 1;
}

.sam-sp-appt-dialog__head h3 {
	margin: 0;
	font-size: 1rem;
}

.sam-sp-appt-dialog__close {
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	min-width: 44px;
	min-height: 44px;
	cursor: pointer;
	position: relative;
	z-index: 2;
	pointer-events: auto;
}

.sam-sp-appt-dialog__foot {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 0.75rem 1rem 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sam-sp-appt-dialog__loading,
.sam-sp-appt-dialog__error {
	margin: 0;
	font-size: 0.9rem;
	color: #ababab;
}

.sam-sp-appt-dialog__error {
	color: #e08a7a;
}

.sam-sp-appt-dialog__error-wrap {
	display: grid;
	gap: 0.85rem;
}

.sam-sp-appt-dialog__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sam-sp-appt-dialog__dl {
	margin: 0;
	display: grid;
	gap: 0.65rem;
}

.sam-sp-appt-dialog__row {
	display: grid;
	gap: 0.15rem;
}

.sam-sp-appt-dialog__row dt {
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ababab;
}

.sam-sp-appt-dialog__row dd {
	margin: 0;
	font-size: 0.95rem;
	color: #f4f4f4;
	word-break: break-word;
}

.sam-sp-appt-dialog__row a {
	color: var(--sam-gold, #c4a35a);
	text-decoration: underline;
	text-underline-offset: 2px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

@media (max-width: 720px) {
	.sam-sp-timeline__grid {
		grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
	}

	.sam-sp-appt-dialog.is-sheet {
		max-width: none;
		width: 100%;
		margin: 0;
		align-items: flex-end;
		justify-content: stretch;
		height: 100%;
		max-height: 100%;
	}

	.sam-sp-appt-dialog.is-sheet .sam-sp-appt-dialog__panel {
		width: 100%;
		max-width: none;
		max-height: min(78vh, 34rem);
		border-radius: 1rem 1rem 0 0;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
}

.sam-sp-field input[type="text"],
.sam-sp-field input[type="password"],
.sam-sp-field input[type="email"],
.sam-sp-field input[type="tel"],
.sam-sp-field input[type="number"],
.sam-sp-field input[type="date"],
.sam-sp-field input[type="time"],
.sam-sp-field select,
.sam-sp-field textarea,
.sam-sp-modal .sam-datepicker__trigger,
.sam-sp-modal .sam-sp-timepick__trigger {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background: #0f0f0f !important;
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #f4f4f4 !important;
	min-height: 44px;
	padding: 0.65rem 0.9rem;
	font: inherit;
	font-size: 16px;
	border-radius: 0.45rem;
	color-scheme: dark;
	caret-color: var(--sam-accent);
	transition: border-color var(--sam-ease), box-shadow var(--sam-ease);
	-webkit-appearance: none;
	appearance: none;
}

.sam-sp-field textarea {
	min-height: 100px;
	resize: vertical;
	line-height: 1.45;
}

.sam-sp-field input::placeholder,
.sam-sp-field textarea::placeholder {
	color: #777777;
	opacity: 1;
}

.sam-sp-field input:hover,
.sam-sp-field select:hover,
.sam-sp-field textarea:hover,
.sam-sp-modal .sam-datepicker__trigger:hover,
.sam-sp-modal .sam-sp-timepick__trigger:hover {
	border-color: rgba(201, 163, 77, 0.55);
}

.sam-sp-field input:focus,
.sam-sp-field input:focus-visible,
.sam-sp-field select:focus,
.sam-sp-field select:focus-visible,
.sam-sp-field textarea:focus,
.sam-sp-field textarea:focus-visible,
.sam-sp-modal .sam-datepicker__trigger:focus-visible,
.sam-sp-modal .sam-sp-timepick__trigger:focus-visible {
	outline: none;
	border-color: var(--sam-accent);
	box-shadow: 0 0 0 3px rgba(201, 163, 77, 0.15);
}

.sam-sp-field input:disabled,
.sam-sp-field select:disabled,
.sam-sp-field textarea:disabled,
.sam-sp-field input[readonly] {
	background: #24211d !important;
	color: #a7a7a7 !important;
	opacity: 1;
}

.sam-sp-field input:-webkit-autofill,
.sam-sp-field input:-webkit-autofill:hover,
.sam-sp-field input:-webkit-autofill:focus,
.sam-sp-field textarea:-webkit-autofill {
	-webkit-text-fill-color: #f4f4f4 !important;
	caret-color: var(--sam-accent);
	box-shadow: 0 0 0 1000px #0f0f0f inset !important;
	transition: background-color 99999s ease-out;
}

.sam-sp-field input[type="number"]::-webkit-outer-spin-button,
.sam-sp-field input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sam-sp-field input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.sam-sp-duration-ro {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.65rem 0.85rem;
	border-radius: 0.55rem;
	border: 1px solid rgba(196, 163, 90, 0.35);
	background: #141210;
	color: #f2efe8;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
	pointer-events: none;
	user-select: none;
	cursor: default;
}

.sam-sp-duration-ro[data-empty="1"] {
	border-color: rgba(255, 255, 255, 0.1);
	color: #b0aaa0;
}

.sam-sp-duration-ro [data-sam-walkin-duration-text] {
	font-size: 0.95rem;
	font-weight: 560;
	letter-spacing: 0.01em;
	color: inherit;
}

.sam-sp-duration-ro:not([data-empty="1"]) [data-sam-walkin-duration-text] {
	color: var(--sam-gold, var(--sam-accent, #c4a35a));
}

/* Walk-in themed datepicker */
.sam-sp-modal .sam-datepicker {
	position: relative;
}

.sam-sp-modal .sam-datepicker__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	text-align: left;
	cursor: pointer;
}

.sam-sp-modal .sam-datepicker__panel {
	position: absolute;
	z-index: 80;
	top: calc(100% + 0.35rem);
	left: 0;
	right: 0;
	min-width: min(20rem, calc(100vw - 2rem));
	padding: 0.75rem;
	border-radius: 0.65rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: #181714;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.sam-sp-modal .sam-datepicker__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.65rem;
}

.sam-sp-modal .sam-datepicker__month {
	font-weight: 600;
	color: #f4f4f4;
}

.sam-sp-modal .sam-datepicker__nav {
	position: relative;
	z-index: 2;
	min-width: 44px;
	min-height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0.4rem;
	background: #0f0f0f;
	color: var(--sam-accent);
	cursor: pointer;
	font-size: 1.2rem;
	pointer-events: auto;
}

.sam-sp-modal .sam-datepicker__nav:disabled,
.sam-sp-modal .sam-datepicker__nav[aria-disabled='true'] {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

.sam-sp-modal .sam-datepicker__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.2rem;
	margin-bottom: 0.35rem;
	font-size: 0.68rem;
	color: #a7a7a7;
	text-align: center;
}

.sam-sp-modal .sam-datepicker__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.25rem;
}

.sam-sp-modal .sam-datepicker__day {
	min-height: 44px;
	border: 1px solid transparent;
	border-radius: 0.4rem;
	background: transparent;
	color: #f4f4f4;
	cursor: pointer;
	font: inherit;
	padding: 0.2rem;
}

.sam-sp-modal .sam-datepicker__day--empty {
	visibility: hidden;
	pointer-events: none;
}

.sam-sp-modal .sam-datepicker__day:hover:not([disabled]),
.sam-sp-modal .sam-datepicker__day:focus-visible:not([disabled]) {
	background: rgba(201, 163, 77, 0.22);
	outline: none;
}

.sam-sp-modal .sam-datepicker__day.is-today:not(.is-selected) {
	border-color: var(--sam-accent);
}

.sam-sp-modal .sam-datepicker__day.is-selected {
	background: var(--sam-accent);
	color: #090909;
}

.sam-sp-modal .sam-datepicker__day[disabled],
.sam-sp-modal .sam-datepicker__day.is-past,
.sam-sp-modal .sam-datepicker__day.is-closed {
	opacity: 0.4;
	cursor: default;
	color: #777;
}

/* Custom time listbox */
.sam-sp-timepick {
	position: relative;
}

.sam-sp-timepick__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	text-align: left;
	cursor: pointer;
}

.sam-sp-timepick__list {
	position: absolute;
	z-index: 85;
	top: calc(100% + 0.35rem);
	left: 0;
	right: 0;
	max-height: min(16rem, 45vh);
	overflow: auto;
	margin: 0;
	padding: 0.35rem;
	list-style: none;
	border-radius: 0.65rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: #181714;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
	-webkit-overflow-scrolling: touch;
}

.sam-sp-timepick__opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 44px;
	padding: 0.45rem 0.65rem;
	border-radius: 0.4rem;
	color: #f4f4f4;
	cursor: pointer;
}

.sam-sp-timepick__opt.is-selectable:hover,
.sam-sp-timepick__opt.is-selectable:focus {
	background: rgba(40, 92, 53, 0.35);
	outline: none;
}

.sam-sp-timepick__opt.is-disabled {
	cursor: not-allowed;
	opacity: 0.88;
}

.sam-sp-timepick__time {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sam-sp-timepick__time.is-struck,
.sam-sp-timepick__opt.is-struck .sam-sp-timepick__time {
	text-decoration: line-through;
	text-decoration-color: #e35d5d;
	text-decoration-thickness: 2px;
}

.sam-sp-timepick__status {
	font-size: 0.75rem;
	color: #a7a7a7;
}

.sam-sp-timepick__opt--available .sam-sp-timepick__status {
	color: #9be0ad;
}

.sam-sp-timepick__opt--booked .sam-sp-timepick__status,
.sam-sp-timepick__opt--busy .sam-sp-timepick__status,
.sam-sp-timepick__opt--confirmed .sam-sp-timepick__status,
.sam-sp-timepick__opt--pending .sam-sp-timepick__status,
.sam-sp-timepick__opt--walk_in .sam-sp-timepick__status {
	color: #e35d5d;
	font-weight: 600;
}

.sam-sp-timepick__opt[aria-selected="true"] {
	box-shadow: inset 0 0 0 1px var(--sam-accent);
}

body.sam-sp-modal-open {
	overflow: hidden;
}

.sam-sp-modal {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: min(28rem, calc(100vw - 1.25rem));
	width: 100%;
	max-height: calc(100dvh - 1.5rem);
	margin: auto;
	z-index: 100050;
	color: inherit;
}

.sam-sp-modal[open],
.sam-sp-modal.is-open {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.sam-sp-modal::backdrop {
	background: rgba(8, 7, 5, 0.72);
}

.sam-sp-modal__panel {
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 1.5rem);
	margin: 0;
	padding: 0;
	border-radius: 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: #1b1813;
	color: #f4f4f4;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

.sam-sp-modal__head,
.sam-sp-modal__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.9rem 1rem;
	flex: 0 0 auto;
	background: #1b1813;
}

.sam-sp-modal__head {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	position: sticky;
	top: 0;
	z-index: 2;
}

.sam-sp-modal__head h3 {
	margin: 0;
	font-size: 1.05rem;
}

.sam-sp-modal__close {
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	min-width: 44px;
	min-height: 44px;
	cursor: pointer;
}

.sam-sp-modal__foot {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	justify-content: flex-end;
	flex-wrap: wrap;
	position: sticky;
	bottom: 0;
	z-index: 2;
	padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
}

.sam-sp-modal__body {
	display: grid;
	gap: 0.85rem;
	padding: 1rem;
	overflow: auto;
	flex: 1 1 auto;
	-webkit-overflow-scrolling: touch;
}

.sam-sp-modal__error {
	margin: 0;
	color: #e35d5d;
	font-size: 0.88rem;
}

.sam-sp-field > span:first-child,
.sam-sp-field > #sam-walkin-date-label,
.sam-sp-field > #sam-walkin-time-label,
.sam-sp-field > #sam-walkin-dur-label {
	color: #a7a7a7;
}

@media (max-width: 720px) {
	.sam-sp-topbar__actions [data-sam-walkin-open] {
		order: -1;
		flex: 1 1 100%;
	}

	.sam-sp-modal__foot .sam-sp-btn {
		flex: 1 1 calc(50% - 0.4rem);
		min-width: 8rem;
	}

	.sam-sp-modal .sam-datepicker__panel,
	.sam-sp-timepick__list {
		position: fixed;
		left: 0.75rem;
		right: 0.75rem;
		top: auto;
		bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
		max-height: min(55vh, 22rem);
	}
}

.sam-sp-slot--booked {
	background: color-mix(in srgb, #8a5a3a 34%, #141414);
	border-color: rgba(210, 150, 100, 0.35);
}

/* —— Bakım / Test randevu arşivi —— */
.sam-sp-maint {
	display: grid;
	gap: 1.25rem;
}

.sam-sp-maint__head h2 {
	margin: 0 0 0.35rem;
	font-size: 1.15rem;
	font-weight: 650;
	color: #f2f2f2;
}

.sam-sp-maint__meta {
	margin: 0.5rem 0 0;
	font-size: 0.82rem;
	color: #a7a7a7;
}

.sam-sp-maint__filters {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
	gap: 0.75rem 0.9rem;
	align-items: end;
}

.sam-sp-maint__filter-actions {
	display: flex;
	align-items: flex-end;
}

.sam-sp-maint__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: center;
	justify-content: space-between;
}

.sam-sp-maint__table-wrap {
	overflow: auto;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.55rem;
	background: rgba(0, 0, 0, 0.22);
	-webkit-overflow-scrolling: touch;
}

.sam-sp-maint__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.84rem;
	min-width: 56rem;
}

.sam-sp-maint__table th,
.sam-sp-maint__table td {
	padding: 0.55rem 0.65rem;
	text-align: left;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	vertical-align: middle;
	white-space: nowrap;
}

.sam-sp-maint__table th {
	font-weight: 600;
	color: #cfcfcf;
	background: rgba(255, 255, 255, 0.03);
	position: sticky;
	top: 0;
	z-index: 1;
}

.sam-sp-maint__table tbody tr:hover {
	background: rgba(255, 255, 255, 0.03);
}

.sam-sp-maint__archived {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 0.75rem;
}

.sam-sp-maint__archived > summary {
	cursor: pointer;
	font-weight: 600;
	color: #e8e8e8;
	margin-bottom: 0.75rem;
}

.sam-sp-maint__dry {
	margin: 0 0 0.85rem;
	padding: 0.75rem 0.9rem;
	border-radius: 0.45rem;
	background: rgba(210, 170, 90, 0.12);
	border: 1px solid rgba(210, 170, 90, 0.28);
	font-size: 0.88rem;
	line-height: 1.45;
	color: #f0e6c8;
}

.sam-sp-maint__preview-list {
	margin: 0.75rem 0 0;
	padding-left: 1.15rem;
	font-size: 0.88rem;
	line-height: 1.5;
	max-height: min(40vh, 16rem);
	overflow: auto;
}

.sam-sp-maint-dialog {
	border: none;
	padding: 0;
	background: transparent;
	max-width: min(34rem, calc(100vw - 1.5rem));
}

.sam-sp-maint-dialog::backdrop {
	background: rgba(0, 0, 0, 0.62);
}

.sam-sp-maint-dialog__panel {
	background: #161616;
	color: #eee;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0.65rem;
	padding: 1.1rem 1.15rem 1rem;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.sam-sp-maint-dialog__panel header h3 {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
}

.sam-sp-maint-dialog__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	justify-content: flex-end;
	margin-top: 1rem;
	padding-top: 0.85rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 720px) {
	.sam-sp-maint__table {
		min-width: 48rem;
	}

	.sam-sp-maint__toolbar {
		justify-content: flex-start;
	}
}