/* Oryx Bookings – Calendar – Mobile-first */

#oryx-calendar-wrap { max-width:100%; overflow-x:hidden; }

/* Staff Bar */
#oryx-staff-bar {
	display:flex; gap:4px; padding:10px 0; overflow-x:auto;
	-webkit-overflow-scrolling:touch; scrollbar-width:none;
}
#oryx-staff-bar::-webkit-scrollbar { display:none; }

.oryx-staff-avatar {
	display:flex; flex-direction:column; align-items:center;
	cursor:pointer; padding:5px 6px; border-radius:10px;
	min-width:60px; text-align:center; border:2px solid transparent;
	transition:all .15s ease; flex-shrink:0;
}
.oryx-staff-avatar:hover { background:#f0f0f1; }
.oryx-staff-avatar.active { background:#e8f0fe; border-color:#2271b1; }

.oryx-staff-avatar-img {
	width:40px; height:40px; border-radius:50%;
	object-fit:cover; background:#e2e4e7; margin-bottom:3px;
}
.oryx-staff-avatar-placeholder {
	width:40px; height:40px; border-radius:50%;
	background:linear-gradient(135deg,#2271b1,#72aee6);
	color:#fff; display:flex; align-items:center; justify-content:center;
	font-size:15px; font-weight:600; margin-bottom:3px;
}
.oryx-staff-avatar.all-staff .oryx-staff-avatar-placeholder {
	background:linear-gradient(135deg,#1d2327,#50575e); font-size:13px;
}
.oryx-staff-avatar-name {
	font-size:10px; color:#50575e; white-space:nowrap;
	overflow:hidden; text-overflow:ellipsis; max-width:68px; line-height:1.2;
}
.oryx-staff-avatar.active .oryx-staff-avatar-name { color:#2271b1; font-weight:600; }

/* Filters */
#oryx-calendar-filters {
	display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap;
}
#oryx-calendar-filters select {
	min-width:0; flex:1 1 140px; max-width:220px;
}

/* Calendar Container */
#oryx-calendar {
	background:#fff; border:1px solid #dcdcde;
	border-radius:6px; overflow:hidden;
}

/* FC Base */
#oryx-calendar .fc {
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	font-size:13px;
}

/* FC Toolbar – mobile: 2-row grid */
#oryx-calendar .fc .fc-header-toolbar.fc-toolbar {
	display:grid !important;
	grid-template-columns:auto 1fr;
	grid-template-rows:auto auto;
	gap:6px 8px;
	padding:8px 10px; margin-bottom:0;
	align-items:center;
}
#oryx-calendar .fc .fc-header-toolbar .fc-toolbar-chunk:first-child {
	grid-column:1; grid-row:1;
}
#oryx-calendar .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
	grid-column:2; grid-row:1; text-align:right;
}
#oryx-calendar .fc .fc-header-toolbar .fc-toolbar-chunk:last-child {
	grid-column:1 / -1; grid-row:2;
	display:flex; justify-content:center;
}
#oryx-calendar .fc .fc-toolbar-title {
	font-size:1.05em; font-weight:700;
}
#oryx-calendar .fc .fc-button {
	background:#f6f7f7; border:1px solid #c3c4c7; color:#1d2327;
	font-size:12px; padding:4px 10px; box-shadow:none !important; text-transform:capitalize;
	border-radius:4px;
}
#oryx-calendar .fc .fc-button:hover { background:#f0f0f1; border-color:#8c8f94; }
#oryx-calendar .fc .fc-button-active,
#oryx-calendar .fc .fc-button:active {
	background:#2271b1 !important; border-color:#2271b1 !important; color:#fff !important;
}
#oryx-calendar .fc .fc-today-button { background:#2271b1; border-color:#2271b1; color:#fff; }
#oryx-calendar .fc .fc-today-button:disabled { opacity:.5; }

/* FC Grid */
#oryx-calendar .fc .fc-daygrid-day.fc-day-today { background:#f0f6fc; }
#oryx-calendar .fc .fc-col-header-cell { padding:6px 0; font-weight:600; font-size:12px; }
#oryx-calendar .fc .fc-daygrid-day-number { font-size:12px; padding:4px 6px; }

/* Events – make FC wrapper transparent, color comes from .oryx-ev */
#oryx-calendar .fc .fc-event,
#oryx-calendar .fc .fc-daygrid-event {
	background:transparent !important; border:none !important;
	box-shadow:none !important; padding:0 !important;
	margin-bottom:2px; cursor:pointer; border-radius:4px; overflow:hidden;
}
#oryx-calendar .fc .fc-daygrid-event { white-space:normal; }
#oryx-calendar .fc .fc-daygrid-block-event .fc-event-main,
#oryx-calendar .fc .fc-event-main { padding:0; }
#oryx-calendar .fc .fc-timegrid-event { background:transparent !important; border:none !important; }
#oryx-calendar .fc .fc-timegrid-event .fc-event-main { padding:0; }

/* .oryx-ev – the colored card inside each event */
.oryx-ev {
	border-radius:4px; padding:3px 6px; color:#fff;
	line-height:1.35; font-size:11px; min-height:18px; overflow:hidden;
}
.oryx-ev-time { font-weight:700; font-size:11px; opacity:.95; }
.oryx-ev-title { font-weight:600; font-size:11px; }
.oryx-ev-detail { font-size:10px; opacity:.88; line-height:1.3; }
.oryx-ev-badge {
	display:inline-block; font-size:9px; font-weight:600;
	padding:1px 5px; border-radius:3px; background:rgba(255,255,255,.22); margin-top:2px;
}

/* Event hover */
#oryx-calendar .fc .fc-event:hover .oryx-ev {
	box-shadow:0 2px 8px rgba(0,0,0,.2); filter:brightness(1.08);
}

/* List view */
#oryx-calendar .fc .fc-list-event-dot { display:none; }

/* ── Blocked Days: overlay divs injected by JS ── */
.oryx-hatch-overlay {
	position:absolute; top:0; left:0; right:0; bottom:0;
	pointer-events:none; z-index:1;
	background:repeating-linear-gradient(
		135deg,
		transparent,
		transparent 4px,
		rgba(100,100,110,.12) 4px,
		rgba(100,100,110,.12) 5px
	);
}
.oryx-past-overlay {
	position:absolute; top:0; left:0; right:0; bottom:0;
	pointer-events:none; z-index:1;
	background:rgba(0,0,0,.04);
}
#oryx-calendar .fc .oryx-day-past .fc-daygrid-day-number { opacity:.4; }
#oryx-calendar .fc .oryx-day-off .fc-daygrid-day-number,
#oryx-calendar .fc .oryx-day-closed .fc-daygrid-day-number { color:#8c8f94; opacity:.65; }
.oryx-day-off-label {
	font-size:9px; color:#8c8f94; text-align:center; padding:2px 0;
	font-weight:600; opacity:.85; letter-spacing:.3px; text-transform:uppercase;
	position:relative; z-index:2;
}

/* ── Toast Notifications ── */
#oryx-toast-container {
	position:fixed; top:40px; right:20px; z-index:200000;
	display:flex; flex-direction:column; gap:8px; pointer-events:none;
	max-width:380px; width:calc(100% - 40px);
}
.oryx-toast {
	pointer-events:auto;
	display:flex; align-items:flex-start; gap:10px;
	padding:12px 14px; border-radius:8px;
	background:#fff; color:#1d2327;
	box-shadow:0 4px 20px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.05);
	font-size:13px; line-height:1.45;
	animation:oryxToastIn .3s ease-out;
	position:relative;
}
.oryx-toast-out { animation:oryxToastOut .3s ease-in forwards; }

@keyframes oryxToastIn {
	from { transform:translateX(100%); opacity:0; }
	to   { transform:translateX(0); opacity:1; }
}
@keyframes oryxToastOut {
	from { transform:translateX(0); opacity:1; }
	to   { transform:translateX(100%); opacity:0; }
}

.oryx-toast-icon {
	flex-shrink:0; width:24px; height:24px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	font-size:13px; font-weight:700; color:#fff;
}
.oryx-toast-error .oryx-toast-icon { background:#dc3545; }
.oryx-toast-success .oryx-toast-icon { background:#28a745; }
.oryx-toast-warning .oryx-toast-icon { background:#f0ad4e; }
.oryx-toast-info .oryx-toast-icon { background:#2271b1; }

.oryx-toast-error { border-left:4px solid #dc3545; }
.oryx-toast-success { border-left:4px solid #28a745; }
.oryx-toast-warning { border-left:4px solid #f0ad4e; }
.oryx-toast-info { border-left:4px solid #2271b1; }

.oryx-toast-msg { flex:1; padding-top:2px; }
.oryx-toast-close {
	background:none; border:none; font-size:18px; cursor:pointer;
	color:#8c8f94; padding:0; line-height:1; flex-shrink:0;
}
.oryx-toast-close:hover { color:#1d2327; }

/* ── Modal (mobile-first: bottom sheet) ── */
.oryx-modal-overlay {
	position:fixed; top:0; left:0; right:0; bottom:0;
	background:rgba(0,0,0,.55); z-index:100100;
	display:flex; align-items:flex-end; justify-content:center;
}
.oryx-modal {
	background:#fff; width:100%; max-height:92vh;
	display:flex; flex-direction:column;
	border-radius:14px 14px 0 0; box-shadow:0 -4px 30px rgba(0,0,0,.18);
	animation:oryxSlideUp .25s ease-out;
}
@keyframes oryxSlideUp {
	from { transform:translateY(100%); opacity:.8; }
	to   { transform:translateY(0); opacity:1; }
}

.oryx-modal-header {
	display:flex; align-items:center; justify-content:space-between;
	padding:14px 16px; border-bottom:1px solid #eee;
}
.oryx-modal-header h2 { margin:0; font-size:1.1em; font-weight:600; color:#1d2327; }
.oryx-modal-close-btn {
	background:none; border:none; font-size:22px; cursor:pointer;
	color:#8c8f94; width:32px; height:32px; display:flex;
	align-items:center; justify-content:center; border-radius:50%; padding:0;
}
.oryx-modal-close-btn:hover { background:#f0f0f1; color:#1d2327; }

.oryx-modal-body {
	padding:10px 16px; overflow-y:auto; flex:1;
	-webkit-overflow-scrolling:touch;
}

/* Modal form stacked on mobile */
.oryx-modal-form,
.oryx-modal-form tbody,
.oryx-modal-form tr,
.oryx-modal-form th,
.oryx-modal-form td { display:block; width:100%; }
.oryx-modal-form tr { margin-bottom:10px; }
.oryx-modal-form th {
	padding:0 0 3px 0; font-weight:600; font-size:12px;
	color:#50575e; text-align:left;
}
.oryx-modal-form td { padding:0; }
.oryx-modal-form input.regular-text,
.oryx-modal-form select.regular-text,
.oryx-modal-form textarea.large-text { width:100%; box-sizing:border-box; }
.oryx-modal-form input[type="date"],
.oryx-modal-form input[type="time"],
.oryx-modal-form input[type="text"],
.oryx-modal-form input[type="email"],
.oryx-modal-form input[type="tel"],
.oryx-modal-form select,
.oryx-modal-form textarea {
	width:100%; box-sizing:border-box; font-size:14px;
	padding:6px 8px; border:1px solid #c3c4c7; border-radius:4px;
}

.oryx-modal-footer {
	display:flex; align-items:center; justify-content:flex-end;
	gap:8px; padding:12px 16px; border-top:1px solid #eee;
	background:#fafafa; border-radius:0 0 14px 14px;
}
.oryx-modal-footer .button-link-delete { margin-right:auto; }

/* ── Desktop (min 783px) ── */
@media (min-width:783px) {
	#oryx-staff-bar { gap:6px; padding:12px 0; flex-wrap:wrap; }
	.oryx-staff-avatar { min-width:72px; padding:6px 8px; }
	.oryx-staff-avatar-img,
	.oryx-staff-avatar-placeholder { width:48px; height:48px; font-size:18px; }
	.oryx-staff-avatar-name { font-size:11px; max-width:80px; }

	#oryx-calendar-filters select { flex:0 0 auto; min-width:170px; }

	#oryx-calendar .fc .fc-header-toolbar.fc-toolbar {
		grid-template-columns:auto 1fr auto;
		grid-template-rows:auto;
		padding:12px 16px; gap:0 12px;
	}
	#oryx-calendar .fc .fc-header-toolbar .fc-toolbar-chunk:first-child { grid-column:1; grid-row:1; }
	#oryx-calendar .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) { grid-column:2; grid-row:1; text-align:center; }
	#oryx-calendar .fc .fc-header-toolbar .fc-toolbar-chunk:last-child { grid-column:3; grid-row:1; }
	#oryx-calendar .fc .fc-toolbar-title { font-size:1.35em; }
	#oryx-calendar .fc .fc-button { font-size:13px; padding:5px 14px; }

	.oryx-ev { padding:4px 7px; font-size:11.5px; }
	.oryx-ev-time { font-size:11.5px; }
	.oryx-ev-title { font-size:11.5px; }
	.oryx-ev-detail { font-size:10.5px; }

	/* Modal – centered card on desktop */
	.oryx-modal-overlay { align-items:center; padding:20px; }
	.oryx-modal {
		width:580px; max-width:95vw; max-height:88vh;
		border-radius:10px; animation-name:oryxFadeIn;
	}
	@keyframes oryxFadeIn {
		from { opacity:0; transform:translateY(-12px) scale(.97); }
		to   { opacity:1; transform:translateY(0) scale(1); }
	}
	.oryx-modal-header { padding:16px 20px; }
	.oryx-modal-body { padding:12px 20px; }
	.oryx-modal-footer { padding:14px 20px; border-radius:0 0 10px 10px; }

	/* Form side-by-side on desktop */
	.oryx-modal-form tr { display:flex; align-items:center; margin-bottom:6px; }
	.oryx-modal-form th { flex:0 0 120px; padding:6px 10px 6px 0; font-size:13px; }
	.oryx-modal-form td { flex:1; padding:4px 0; }
}