/**
 * PonyAcademy Manager — Frontend CSS
 * Mobile-first, BEM, CSS Custom Properties
 */

:root {
	--rm-green:      #2c5f2e;
	--rm-green-l:    #4a9e4d;
	--rm-green-pale: #f0f7f0;
	--rm-red:        #c0392b;
	--rm-orange:     #e67e22;
	--rm-blue:       #2980b9;
	--rm-gray:       #636e72;
	--rm-border:     #ddd;
	--rm-radius:     8px;
	--rm-shadow:     0 2px 12px rgba(0,0,0,.08);
}

/* ===== Utilities ===== */
.rm-empty { text-align: center; color: var(--rm-gray); padding: 40px 20px; }

.rm-notice {
	padding: 14px 18px;
	border-radius: var(--rm-radius);
	margin: 16px 0;
}
.rm-notice--info    { background: #e8f4fd; border-left: 4px solid var(--rm-blue); }
.rm-notice--success { background: var(--rm-green-pale); border-left: 4px solid var(--rm-green); }
.rm-notice--error   { background: #fdf0ef; border-left: 4px solid var(--rm-red); }

.rm-tag {
	display: inline-block;
	padding: 2px 8px;
	background: var(--rm-green-pale);
	color: var(--rm-green);
	border-radius: 20px;
	font-size: 12px;
	margin: 2px;
}
.rm-tag--level { background: #fff3cd; color: #856404; }
.rm-tag--style { background: #cce5ff; color: #004085; }

/* ===== Buttons ===== */

.rm-btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: var(--rm-radius);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	text-decoration: none;
	transition: background 0.15s, transform 0.1s;
}

.rm-btn--primary {
	background: var(--rm-green);
	color: #fff;
}
.rm-btn--primary:hover {
	background: var(--rm-green-l);
	transform: translateY(-1px);
}

.rm-btn--secondary {
	background: #fff;
	color: var(--rm-green);
	border: 2px solid var(--rm-green);
}
.rm-btn--secondary:hover { background: var(--rm-green-pale); }

.rm-btn--danger { background: var(--rm-red); color: #fff; }
.rm-btn--danger:hover { background: #a93226; }

.rm-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* ===== Kursliste ===== */

.rm-course-list {}

.rm-filter-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 24px;
	padding: 16px;
	background: var(--rm-green-pale);
	border-radius: var(--rm-radius);
}

.rm-filter-row select,
.rm-filter-row input {
	padding: 8px 12px;
	border: 1px solid var(--rm-border);
	border-radius: 6px;
	font-size: 14px;
}

.rm-course-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.rm-course-card {
	background: #fff;
	border: 1px solid var(--rm-border);
	border-radius: var(--rm-radius);
	overflow: hidden;
	box-shadow: var(--rm-shadow);
	transition: transform 0.15s, box-shadow 0.15s;
}
.rm-course-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

.rm-course-card__img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	background: var(--rm-green-pale);
}

.rm-course-card__bar {
	height: 4px;
	background: var(--rm-green);
}

.rm-course-card__body { padding: 16px; }

.rm-course-card__title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px;
}

.rm-course-card__meta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--rm-gray);
	margin-bottom: 12px;
}

.rm-course-card__meta span::before { content: '•'; margin-right: 4px; }
.rm-course-card__meta span:first-child::before { content: ''; }

.rm-course-card__price {
	font-size: 20px;
	font-weight: 700;
	color: var(--rm-green);
	margin-bottom: 12px;
}

/* ===== Kalender (Frontend) ===== */

.rm-calendar-section { margin: 20px 0; }

.rm-calendar-legend {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 12px;
	font-size: 13px;
}

.rm-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.rm-legend-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}
.rm-legend-dot--free      { background: var(--rm-green); }
.rm-legend-dot--low       { background: var(--rm-orange); }
.rm-legend-dot--full      { background: var(--rm-red); }

#rm-public-calendar {
	border: 1px solid var(--rm-border);
	border-radius: var(--rm-radius);
	background: #fff;
	padding: 12px;
}

/* Belegungsampel im Kalender */
.rm-available  .fc-event-main { background-color: var(--rm-green) !important; }
.rm-almost-full .fc-event-main { background-color: var(--rm-orange) !important; }
.rm-full        .fc-event-main { background-color: var(--rm-red) !important; }

/* ===== Buchungsformular ===== */

.rm-booking-form {
	max-width: 640px;
	margin: 0 auto;
}

.rm-booking-steps {
	display: flex;
	gap: 0;
	margin-bottom: 32px;
	counter-reset: step;
}

.rm-step {
	flex: 1;
	text-align: center;
	font-size: 13px;
	color: var(--rm-gray);
	position: relative;
	padding-bottom: 16px;
}

.rm-step::after {
	content: '';
	position: absolute;
	bottom: 4px;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--rm-border);
}

.rm-step--active { color: var(--rm-green); font-weight: 700; }
.rm-step--active::after { background: var(--rm-green); }
.rm-step--done::after { background: var(--rm-green-l); }

.rm-form-panel {
	background: #fff;
	border: 1px solid var(--rm-border);
	border-radius: var(--rm-radius);
	padding: 28px;
	box-shadow: var(--rm-shadow);
	margin-bottom: 20px;
}

.rm-form-panel h2 {
	margin-top: 0;
	font-size: 20px;
	color: var(--rm-green);
	border-bottom: 2px solid var(--rm-green-pale);
	padding-bottom: 12px;
	margin-bottom: 20px;
}

.rm-form-group {
	margin-bottom: 18px;
}

.rm-form-group label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 14px;
}

.rm-form-group label .rm-required {
	color: var(--rm-red);
	margin-left: 2px;
}

.rm-form-group input,
.rm-form-group select,
.rm-form-group textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--rm-border);
	border-radius: 6px;
	font-size: 15px;
	transition: border-color 0.15s;
	box-sizing: border-box;
}

.rm-form-group input:focus,
.rm-form-group select:focus,
.rm-form-group textarea:focus {
	border-color: var(--rm-green);
	outline: none;
	box-shadow: 0 0 0 3px rgba(44,95,46,.1);
}

.rm-form-group input.rm-error { border-color: var(--rm-red); }

.rm-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

/* Verfügbarkeits-Ampel */
.rm-spots-indicator {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	margin-top: 8px;
}

.rm-spots-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
.rm-spots-dot--green  { background: var(--rm-green); }
.rm-spots-dot--orange { background: var(--rm-orange); }
.rm-spots-dot--red    { background: var(--rm-red); }

/* Buchungsbestätigung */
.rm-booking-confirm {
	text-align: center;
	padding: 40px 20px;
}
.rm-booking-confirm__icon {
	font-size: 64px;
	color: var(--rm-green);
	display: block;
	margin-bottom: 16px;
}
.rm-booking-confirm__number {
	font-size: 24px;
	font-weight: 700;
	color: var(--rm-green);
	letter-spacing: 2px;
	margin: 12px 0;
}

/* ===== Meine Buchungen ===== */

.rm-my-bookings { max-width: 800px; margin: 0 auto; }

.rm-bookings-tabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--rm-border);
	margin-bottom: 20px;
}

.rm-bookings-tab {
	padding: 12px 20px;
	cursor: pointer;
	border: none;
	background: none;
	font-size: 15px;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	color: var(--rm-gray);
}

.rm-bookings-tab--active {
	color: var(--rm-green);
	border-bottom-color: var(--rm-green);
	font-weight: 700;
}

.rm-booking-item {
	border: 1px solid var(--rm-border);
	border-radius: var(--rm-radius);
	padding: 16px 20px;
	margin-bottom: 12px;
	background: #fff;
	box-shadow: var(--rm-shadow);
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.rm-booking-item__date {
	min-width: 60px;
	text-align: center;
	background: var(--rm-green);
	color: #fff;
	border-radius: 6px;
	padding: 8px;
}

.rm-booking-item__day   { font-size: 24px; font-weight: 700; line-height: 1; }
.rm-booking-item__month { font-size: 11px; text-transform: uppercase; }

.rm-booking-item__info { flex: 1; }
.rm-booking-item__title { font-weight: 700; font-size: 16px; margin: 0 0 4px; }
.rm-booking-item__meta  { font-size: 13px; color: var(--rm-gray); }

.rm-booking-item__actions { display: flex; gap: 8px; align-items: center; }

/* Mehrfachkarten */
.rm-card-list { display: grid; gap: 12px; }

.rm-card-item {
	border: 1px solid var(--rm-border);
	border-radius: var(--rm-radius);
	padding: 16px;
	background: #fff;
}

.rm-card-item__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.rm-card-item__type { font-weight: 700; font-size: 16px; }
.rm-card-item__remaining { font-size: 13px; color: var(--rm-gray); }

.rm-progress {
	height: 8px;
	background: var(--rm-border);
	border-radius: 4px;
	overflow: hidden;
}

.rm-progress__bar {
	height: 100%;
	background: var(--rm-green);
	border-radius: 4px;
	transition: width 0.3s;
}

/* ===== Pferde-Galerie ===== */

.rm-horse-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
}

.rm-horse-card {
	background: #fff;
	border: 1px solid var(--rm-border);
	border-radius: var(--rm-radius);
	overflow: hidden;
	box-shadow: var(--rm-shadow);
	transition: transform 0.15s;
}
.rm-horse-card:hover { transform: translateY(-3px); }

.rm-horse-card__img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.rm-horse-card__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rm-green-pale);
	font-size: 48px;
	color: var(--rm-green);
}

.rm-horse-card__body { padding: 14px; }
.rm-horse-card__name { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.rm-horse-card__name small { font-weight: 400; color: var(--rm-gray); }
.rm-horse-card__desc { font-size: 13px; color: var(--rm-gray); margin-top: 8px; }

/* ===== Trainer-Grid ===== */

.rm-trainer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}

.rm-trainer-card {
	background: #fff;
	border: 1px solid var(--rm-border);
	border-radius: var(--rm-radius);
	overflow: hidden;
	box-shadow: var(--rm-shadow);
	transition: transform 0.15s;
}
.rm-trainer-card:hover { transform: translateY(-2px); }

.rm-trainer-card__img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.rm-trainer-card__body { padding: 16px; }
.rm-trainer-card__name { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.rm-trainer-card__bio  { font-size: 14px; color: var(--rm-gray); margin-top: 10px; }

/* ===== Druckansichten ===== */

@media print {
	.rm-booking-form,
	.rm-filter-row,
	.rm-btn,
	button { display: none !important; }

	.rm-print-plan {
		font-size: 12px;
		line-height: 1.4;
	}

	.rm-print-plan table {
		width: 100%;
		border-collapse: collapse;
	}

	.rm-print-plan th,
	.rm-print-plan td {
		border: 1px solid #000;
		padding: 4px 8px;
	}

	.rm-print-plan th { background: #f0f0f0; }
}

/* ===== Responsive ===== */

@media (max-width: 640px) {
	.rm-form-row      { grid-template-columns: 1fr; }
	.rm-booking-steps { display: none; }
	.rm-course-grid   { grid-template-columns: 1fr; }
	.rm-horse-grid    { grid-template-columns: repeat(2, 1fr); }
	.rm-trainer-grid  { grid-template-columns: 1fr; }
	.rm-booking-item  { flex-direction: column; }
}

@media (max-width: 400px) {
	.rm-horse-grid { grid-template-columns: 1fr; }
}