/* ==========================================================================
   EMS Booking – Public Stylesheet
   Scope: Frontend (.ems-wrap)
   Design: Anthrazit / Weiß / Indigo – Premium, Mobile-First
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom Properties
   -------------------------------------------------------------------------- */
:root {
	--ems-primary:    #1a1a2e;
	--ems-primary-l:  #16213e;
	--ems-accent:     #4f46e5;
	--ems-accent-h:   #4338ca;
	--ems-accent-lt:  #eef2ff;
	--ems-green:      #16a34a;
	--ems-green-lt:   #dcfce7;
	--ems-yellow:     #f59e0b;
	--ems-yellow-lt:  #fef9c3;
	--ems-red:        #dc2626;
	--ems-red-lt:     #fee2e2;
	--ems-gray:       #6b7280;
	--ems-gray-lt:    #f1f5f9;
	--ems-border:     #e2e8f0;
	--ems-text:       #0f172a;
	--ems-text-muted: #64748b;
	--ems-radius:     8px;
	--ems-radius-lg:  12px;
	--ems-shadow:     0 1px 3px rgb(0 0 0 / .1), 0 1px 2px rgb(0 0 0 / .06);
	--ems-shadow-lg:  0 20px 40px rgb(0 0 0 / .18);
	--ems-transition: .18s ease;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
.ems-wrap {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	font-size: 15px;
	color: var(--ems-text);
	line-height: 1.6;
	box-sizing: border-box;
}

.ems-wrap *,
.ems-wrap *::before,
.ems-wrap *::after {
	box-sizing: inherit;
}

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */
.ems-notice {
	padding: .75rem 1rem;
	border-radius: var(--ems-radius);
	border: 1px solid transparent;
	font-size: 14px;
}

.ems-notice--info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.ems-notice--success { background: var(--ems-green-lt); border-color: #86efac; color: #15803d; }
.ems-notice--warning { background: var(--ems-yellow-lt); border-color: #fde68a; color: #92400e; }
.ems-notice--error   { background: var(--ems-red-lt); border-color: #fca5a5; color: #b91c1c; }

.ems-notice a { color: inherit; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.ems-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .55rem 1.2rem;
	border-radius: var(--ems-radius);
	border: 2px solid transparent;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--ems-transition), color var(--ems-transition), border-color var(--ems-transition), box-shadow var(--ems-transition);
	white-space: nowrap;
}

.ems-btn:focus-visible {
	outline: 3px solid var(--ems-accent);
	outline-offset: 2px;
}

.ems-btn--primary {
	background: var(--ems-accent);
	color: #fff;
	border-color: var(--ems-accent);
}
.ems-btn--primary:hover {
	background: var(--ems-accent-h);
	border-color: var(--ems-accent-h);
	box-shadow: 0 4px 12px rgb(79 70 229 / .35);
}

.ems-btn--outline {
	background: transparent;
	color: var(--ems-accent);
	border-color: var(--ems-accent);
}
.ems-btn--outline:hover {
	background: var(--ems-accent-lt);
}

.ems-btn--danger {
	background: var(--ems-red);
	color: #fff;
	border-color: var(--ems-red);
}
.ems-btn--danger:hover {
	background: #b91c1c;
	border-color: #b91c1c;
}

.ems-btn--small {
	padding: .35rem .85rem;
	font-size: 13px;
}

.ems-btn:disabled,
.ems-btn[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.ems-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
}

.ems-badge--green   { background: var(--ems-green-lt);  color: #15803d; }
.ems-badge--yellow  { background: var(--ems-yellow-lt); color: #92400e; }
.ems-badge--red     { background: var(--ems-red-lt);    color: #b91c1c; }
.ems-badge--gray    { background: var(--ems-gray-lt);   color: #475569; }
.ems-badge--accent  { background: var(--ems-accent-lt); color: var(--ems-accent); }
.ems-badge--neutral { background: var(--ems-gray-lt);   color: var(--ems-gray); }
.ems-badge--warning { background: var(--ems-yellow-lt); color: #92400e; }

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */
.ems-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-end;  /* Mobile: von unten */
	justify-content: center;
}

.ems-modal[hidden] { display: none; }

.ems-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / .6);
	backdrop-filter: blur(2px);
}

.ems-modal-inner {
	position: relative;
	background: #fff;
	border-radius: var(--ems-radius-lg) var(--ems-radius-lg) 0 0;
	box-shadow: var(--ems-shadow-lg);
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	animation: ems-sheet-up .22s ease;
}

@keyframes ems-sheet-up {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.ems-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem 1rem;
	border-bottom: 1px solid var(--ems-border);
}

.ems-modal-header h2 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--ems-primary);
}

.ems-modal-close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--ems-gray);
	padding: 0;
	transition: color var(--ems-transition);
}
.ems-modal-close:hover { color: var(--ems-text); }

.ems-modal-body {
	padding: 1.25rem 1.5rem;
}

.ems-modal-footer {
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--ems-border);
	display: flex;
	gap: .75rem;
}

@media (min-width: 600px) {
	.ems-modal {
		align-items: center;
	}

	.ems-modal-inner {
		border-radius: var(--ems-radius-lg);
		animation: ems-zoom-in .18s ease;
	}

	@keyframes ems-zoom-in {
		from { transform: scale(.95); opacity: 0; }
		to   { transform: scale(1);   opacity: 1; }
	}
}

/* --------------------------------------------------------------------------
   Slot Detail in Modal
   -------------------------------------------------------------------------- */
.ems-slot-detail {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: .5rem 0;
}

.ems-slot-detail-row {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: 14px;
}

.ems-slot-detail-icon {
	font-size: 1.1rem;
	width: 1.5rem;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.ems-toast {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--ems-primary);
	color: #fff;
	padding: .75rem 1.5rem;
	border-radius: 9999px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: var(--ems-shadow-lg);
	z-index: 100000;
	animation: ems-toast-in .2s ease;
	max-width: calc(100vw - 2rem);
	text-align: center;
}

.ems-toast[hidden] { display: none; }
.ems-toast--success { background: var(--ems-green); }
.ems-toast--error   { background: var(--ems-red); }

@keyframes ems-toast-in {
	from { opacity: 0; transform: translateX(-50%) translateY(8px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* --------------------------------------------------------------------------
   Session Banner (Booking Calendar)
   -------------------------------------------------------------------------- */
.ems-session-banner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .875rem 1.25rem;
	background: linear-gradient(135deg, var(--ems-primary), var(--ems-primary-l));
	border-radius: var(--ems-radius-lg);
	margin-bottom: 1.25rem;
	color: #fff;
}

.ems-session-info {
	display: flex;
	flex-direction: column;
}

.ems-session-label {
	font-size: 12px;
	opacity: .75;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.ems-session-count {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	color: #fff;
}

/* --------------------------------------------------------------------------
   Legend
   -------------------------------------------------------------------------- */
.ems-legend {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .75rem 1.25rem;
	margin-bottom: 1rem;
	font-size: 13px;
	color: var(--ems-text-muted);
}

.ems-legend-item {
	display: flex;
	align-items: center;
	gap: .4rem;
}

.ems-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   FullCalendar – Public Overrides
   -------------------------------------------------------------------------- */
.ems-calendar-container {
	background: #fff;
	border-radius: var(--ems-radius-lg);
	box-shadow: var(--ems-shadow);
	overflow: hidden;
}

.ems-calendar-container .fc {
	font-family: inherit;
	font-size: 13px;
}

.ems-calendar-container .fc-toolbar {
	padding: .875rem 1rem;
	background: var(--ems-primary);
}

.ems-calendar-container .fc-toolbar-title {
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
}

.ems-calendar-container .fc-button {
	background: rgb(255 255 255 / .12);
	border-color: rgb(255 255 255 / .2);
	color: #fff;
	font-size: 12px;
	padding: .3rem .7rem;
	border-radius: var(--ems-radius);
	transition: background var(--ems-transition);
}

.ems-calendar-container .fc-button:hover {
	background: rgb(255 255 255 / .22);
}

.ems-calendar-container .fc-button-active {
	background: var(--ems-accent) !important;
	border-color: var(--ems-accent) !important;
}

.ems-calendar-container .fc-event {
	border: none;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	padding: 2px 5px;
	transition: filter var(--ems-transition);
}

.ems-calendar-container .fc-event:hover {
	filter: brightness(.9);
}

.ems-calendar-container .fc-daygrid-event-dot {
	display: none;
}

.ems-calendar-container .fc-timegrid-slot {
	height: 48px;
}

/* My-booking highlight */
.ems-calendar-container .ems-event-mine {
	background: var(--ems-accent) !important;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ems-accent);
}

/* --------------------------------------------------------------------------
   Member Dashboard
   -------------------------------------------------------------------------- */
.ems-dashboard-wrap {
	max-width: 860px;
	margin: 0 auto;
}

/* Member card */
.ems-member-card {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1.25rem;
	background: linear-gradient(135deg, var(--ems-primary), var(--ems-primary-l));
	border-radius: var(--ems-radius-lg);
	color: #fff;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}

.ems-avatar {
	border-radius: 50% !important;
	border: 3px solid rgb(255 255 255 / .25);
}

.ems-member-card__info {
	flex: 1;
	min-width: 160px;
}

.ems-member-card__name {
	margin: 0 0 .35rem;
	font-size: 1.2rem;
	font-weight: 700;
	color: #fff;
}

/* Donut counter */
.ems-session-counter {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-left: auto;
}

.ems-session-counter__ring {
	position: relative;
	width: 72px;
	height: 72px;
}

.ems-donut {
	width: 100%;
	height: 100%;
}

.ems-donut__track { stroke: rgb(255 255 255 / .2); }
.ems-donut__fill  { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }

.ems-donut__label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	font-weight: 800;
	color: #fff;
}

.ems-session-counter__title {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

.ems-session-counter__sub {
	font-size: 12px;
	opacity: .7;
}

/* Section */
.ems-section {
	margin-bottom: 2.5rem;
}

.ems-section-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ems-primary);
	margin: 0 0 1rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--ems-border);
}

/* Booking cards */
.ems-booking-list {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.ems-booking-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: #fff;
	border: 1px solid var(--ems-border);
	border-radius: var(--ems-radius-lg);
	box-shadow: var(--ems-shadow);
	transition: box-shadow var(--ems-transition);
}

.ems-booking-card:hover { box-shadow: 0 4px 12px rgb(0 0 0 / .1); }

.ems-booking-card--upcoming {
	border-left: 4px solid var(--ems-accent);
}

.ems-booking-card__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 44px;
	padding: .4rem .6rem;
	background: var(--ems-accent-lt);
	border-radius: var(--ems-radius);
}

.ems-booking-card__day {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--ems-accent);
	line-height: 1;
}

.ems-booking-card__month {
	font-size: 11px;
	font-weight: 600;
	color: var(--ems-accent);
	text-transform: uppercase;
}

.ems-booking-card__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.ems-booking-card__time {
	font-size: 15px;
	font-weight: 700;
	color: var(--ems-primary);
}

.ems-booking-card__trainer {
	font-size: 13px;
	color: var(--ems-text-muted);
}

.ems-booking-card__actions { margin-left: auto; }

/* Past bookings table */
.ems-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.ems-table th,
.ems-table td {
	padding: .625rem .875rem;
	text-align: left;
	border-bottom: 1px solid var(--ems-border);
}

.ems-table th {
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ems-text-muted);
	background: var(--ems-gray-lt);
}

.ems-table--past tbody tr:hover { background: #fafafa; }

/* Empty state */
.ems-empty-state {
	padding: 2rem;
	text-align: center;
	color: var(--ems-text-muted);
	background: var(--ems-gray-lt);
	border-radius: var(--ems-radius-lg);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Trainer Layout
   -------------------------------------------------------------------------- */
.ems-trainer-wrap {
	max-width: 1100px;
	margin: 0 auto;
}

.ems-trainer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.75rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--ems-border);
}

.ems-trainer-title {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--ems-primary);
}

.ems-trainer-date {
	display: block;
	font-size: 14px;
	color: var(--ems-text-muted);
	margin-top: .2rem;
}

.ems-trainer-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

@media (max-width: 768px) {
	.ems-trainer-layout { grid-template-columns: 1fr; }
}

.ems-trainer-column {}

.ems-column-title {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ems-primary);
	margin: 0 0 1rem;
}

/* Slot Timeline */
.ems-slot-timeline {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.ems-slot-item {
	display: flex;
	gap: 1rem;
	background: #fff;
	border: 1px solid var(--ems-border);
	border-radius: var(--ems-radius-lg);
	padding: 1rem;
	box-shadow: var(--ems-shadow);
	transition: border-color var(--ems-transition);
}

.ems-slot-item--running {
	border-color: var(--ems-accent);
	box-shadow: 0 0 0 2px var(--ems-accent-lt);
}

.ems-slot-item--past {
	opacity: .6;
}

.ems-slot-item__time {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 42px;
	font-weight: 700;
	font-size: 15px;
	color: var(--ems-primary);
}

.ems-slot-item__time small {
	font-size: 12px;
	color: var(--ems-text-muted);
	font-weight: 400;
}

.ems-slot-item__body {
	flex: 1;
	min-width: 0;
}

.ems-running-badge { margin-bottom: .5rem; }

/* Capacity bar */
.ems-capacity-bar {
	height: 6px;
	background: var(--ems-gray-lt);
	border-radius: 9999px;
	overflow: hidden;
	margin: .35rem 0;
}

.ems-capacity-bar__fill {
	height: 100%;
	background: var(--ems-accent);
	border-radius: inherit;
	transition: width .4s ease;
}

.ems-slot-item__capacity {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	font-size: 12px;
	color: var(--ems-text-muted);
}

/* Participant list */
.ems-participant-list {
	margin: .5rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.ems-participant-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 13px;
}

.ems-participant-avatar {
	border-radius: 50% !important;
	width: 24px !important;
	height: 24px !important;
}

.ems-session-chip {
	margin-left: auto;
	font-size: 11px;
	background: var(--ems-accent-lt);
	color: var(--ems-accent);
	padding: 1px 6px;
	border-radius: 9999px;
	font-weight: 600;
}

.ems-no-participants {
	font-size: 13px;
	color: var(--ems-text-muted);
	margin: .35rem 0 0;
}

.ems-slot-notes {
	font-size: 12px;
	color: var(--ems-text-muted);
	margin: .5rem 0 0;
}

/* --------------------------------------------------------------------------
   Task Cards (Trainer view)
   -------------------------------------------------------------------------- */
.ems-task-list {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.ems-task-card {
	background: #fff;
	border: 1px solid var(--ems-border);
	border-radius: var(--ems-radius-lg);
	padding: 1rem;
	box-shadow: var(--ems-shadow);
	transition: border-color var(--ems-transition);
}

.ems-task-card--overdue {
	border-color: var(--ems-red);
	background: #fff5f5;
}

.ems-task-card__header {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: .5rem;
}

.ems-task-card__title {
	margin: 0 0 .3rem;
	font-size: 14px;
	font-weight: 700;
	color: var(--ems-primary);
}

.ems-task-card__desc {
	font-size: 13px;
	color: var(--ems-text-muted);
	margin: 0 0 .5rem;
}

.ems-task-card__meta {
	font-size: 12px;
	color: var(--ems-text-muted);
	margin-bottom: .6rem;
}

.ems-task-due--overdue { color: var(--ems-red); font-weight: 600; }

.ems-task-card__actions select {
	font-size: 12px;
	padding: .25rem .5rem;
	border: 1px solid var(--ems-border);
	border-radius: var(--ems-radius);
	background: #fff;
	color: var(--ems-text);
	cursor: pointer;
	transition: border-color var(--ems-transition);
}

.ems-task-card__actions select:focus {
	outline: none;
	border-color: var(--ems-accent);
}

/* Priority badges reuse */
.ems-priority-low    { background: var(--ems-gray-lt);   color: #475569; }
.ems-priority-medium { background: var(--ems-yellow-lt); color: #92400e; }
.ems-priority-high   { background: var(--ems-red-lt);    color: #b91c1c; }

/* --------------------------------------------------------------------------
   Cancel confirm text
   -------------------------------------------------------------------------- */
.ems-cancel-confirm-text {
	margin: 0;
	font-size: 14px;
	color: var(--ems-text-muted);
}