/*
 * Farben zentral über diese CSS-Variablen anpassbar (z. B. an die eigene
 * Website-Farbe): einfach die Werte unten ändern, der Rest der Datei nutzt
 * überall var(--rp-...) und übernimmt die Änderung automatisch.
 */
.rp-wrapper {
	--rp-primary: #2271b1;
	--rp-primary-dark: #135e96;
	--rp-primary-bg: #eef5fb;
	--rp-success: #00a32a;
	--rp-success-bg: #eaf7ec;
	--rp-danger: #d63638;
	--rp-danger-bg: #fbeaea;
	--rp-text: #1d2327;
	--rp-text-muted: #646970;
	--rp-border: #e2e4e7;
	--rp-card-bg: #ffffff;
	--rp-page-bg: #f6f7f8;
	--rp-radius: 8px;

	max-width: 780px;
	margin: 1.5em 0;
	padding: 1.5em;
	background: var( --rp-page-bg );
	border: 1px solid var( --rp-border );
	border-radius: var( --rp-radius );
	font-size: 15px;
	color: var( --rp-text );
	box-sizing: border-box;
}

.rp-wrapper *,
.rp-wrapper *::before,
.rp-wrapper *::after {
	box-sizing: inherit;
}

.rp-notice {
	padding: 0.9em 1.1em;
	background: #fff;
	border-left: 4px solid var( --rp-danger );
	border-radius: 4px;
}

.rp-login-wrapper {
	max-width: 420px;
}

.rp-login-wrapper #rp-login-form p {
	margin: 0 0 1em;
}

.rp-login-wrapper #rp-login-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.3em;
}

.rp-login-wrapper #rp-login-form input[type="text"],
.rp-login-wrapper #rp-login-form input[type="password"] {
	width: 100%;
	padding: 0.5em 0.6em;
	border: 1px solid var( --rp-border );
	border-radius: 5px;
}

.rp-login-wrapper #rp-login-form .button {
	background: var( --rp-primary );
	color: #fff;
	border: none;
	padding: 0.6em 1.4em;
	border-radius: 5px;
	cursor: pointer;
}

/* Kopfzeile ------------------------------------------------------------ */

.rp-top-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 1.2em;
	padding-bottom: 1em;
	border-bottom: 1px solid var( --rp-border );
}

.rp-welcome,
.rp-admin-link {
	margin: 0;
	font-size: 0.92em;
	color: var( --rp-text-muted );
}

.rp-welcome a,
.rp-admin-link a {
	color: var( --rp-primary );
	text-decoration: none;
	font-weight: 600;
}

.rp-welcome a:hover,
.rp-admin-link a:hover {
	text-decoration: underline;
}

.rp-message {
	padding: 0.9em 1.1em;
	margin-bottom: 1.2em;
	border-radius: 6px;
	font-weight: 500;
}

.rp-message-success {
	background: var( --rp-success-bg );
	border: 1px solid var( --rp-success );
	color: #1e4620;
}

.rp-message-error {
	background: var( --rp-danger-bg );
	border: 1px solid var( --rp-danger );
	color: #601313;
}

#rp-form-message {
	margin-top: 1em;
	margin-bottom: 0;
}

/* Raumauswahl (immer sichtbar, unabhängig vom gewählten Reiter) --------------- */

.rp-room-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7em;
	margin-bottom: 1.2em;
	padding: 0.7em 1em;
	background: var( --rp-primary-bg );
	border: 1px solid var( --rp-border );
	border-radius: var( --rp-radius );
}

.rp-room-field {
	flex-direction: row;
	align-items: center;
	gap: 0.6em;
	margin-bottom: 0;
}

.rp-room-field label {
	margin-bottom: 0;
	white-space: nowrap;
}

.rp-room-field select {
	font-weight: 600;
}

/* Reiter ----------------------------------------------------------------- */

.rp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em;
	margin-bottom: 1.2em;
	border-bottom: 2px solid var( --rp-border );
}

.rp-tab-btn {
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	padding: 0.7em 1em;
	margin-bottom: -2px;
	font-size: 0.98em;
	font-weight: 600;
	color: var( --rp-text-muted );
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.rp-tab-btn:hover {
	color: var( --rp-primary );
}

.rp-tab-btn.is-active {
	color: var( --rp-primary );
	border-bottom-color: var( --rp-primary );
}

.rp-tab-panel[hidden] {
	display: none;
}

/* Karten ------------------------------------------------------------------ */

.rp-card {
	background: var( --rp-card-bg );
	border: 1px solid var( --rp-border );
	border-radius: var( --rp-radius );
	padding: 1.2em 1.3em;
	margin-bottom: 1.2em;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.03 );
}

.rp-card:last-child {
	margin-bottom: 0;
}

.rp-card-title {
	margin: 0 0 0.9em;
	font-size: 1.05em;
	font-weight: 700;
	color: var( --rp-text );
}

/* Formulare ---------------------------------------------------------------- */

.rp-form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin-bottom: 1em;
}

.rp-field {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	margin-bottom: 0.9em;
}

.rp-field label {
	font-weight: 600;
	font-size: 0.92em;
}

.rp-wrapper select,
.rp-wrapper input[type="date"],
.rp-wrapper input[type="month"],
.rp-wrapper input[type="number"],
.rp-wrapper input[type="text"] {
	padding: 0.5em 0.6em;
	border: 1px solid var( --rp-border );
	border-radius: 5px;
	background: #fff;
	color: var( --rp-text );
	font-size: 0.95em;
}

.rp-wrapper select:focus,
.rp-wrapper input:focus {
	outline: 2px solid var( --rp-primary );
	outline-offset: 1px;
}

.rp-checkbox-field label {
	font-weight: 400;
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.rp-recurring-hint {
	font-size: 0.85em;
	color: var( --rp-text-muted );
	margin: -0.4em 0 0.9em;
}

/* Buttons ------------------------------------------------------------------- */

.rp-button {
	background: var( --rp-primary );
	color: #fff;
	border: none;
	padding: 0.65em 1.5em;
	border-radius: 5px;
	cursor: pointer;
	font-size: 0.98em;
	font-weight: 600;
	transition: background 0.15s ease;
}

.rp-button:hover {
	background: var( --rp-primary-dark );
}

.rp-button:disabled {
	opacity: 0.6;
	cursor: default;
}

.rp-button-secondary {
	background: #fff;
	color: var( --rp-primary );
	border: 1px solid var( --rp-primary );
}

.rp-button-secondary:hover {
	background: var( --rp-primary-bg );
}

/* Tabellen ------------------------------------------------------------------ */

.rp-table-scroll {
	overflow-x: auto;
}

.rp-day-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 0.5em;
	font-size: 0.95em;
}

.rp-day-table th,
.rp-day-table td {
	padding: 0.55em 0.7em;
	border-bottom: 1px solid var( --rp-border );
	text-align: left;
}

.rp-day-table thead th {
	background: #fafbfc;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --rp-text-muted );
}

.rp-day-table tbody tr:hover td {
	background: #fafbfc;
}

.rp-report-table {
	min-width: 1020px;
}

.rp-badge {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 600;
}

.rp-badge-free {
	background: var( --rp-success-bg );
	color: #1e6b2c;
}

.rp-badge-booked {
	background: var( --rp-danger-bg );
	color: #8a1f21;
}

.rp-slot-note {
	display: block;
	margin-top: 0.3em;
	font-size: 0.82em;
	color: var( --rp-text );
	font-weight: 400;
}

/* Notiz ist zugleich der Bearbeiten-Trigger: optisch weiterhin schlichter
   Notiztext, aber klickbar (keine separate Zeile/Schaltfläche mehr nötig). */
button.rp-slot-note {
	background: none;
	border: none;
	padding: 0;
	margin: 0.3em 0 0;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

button.rp-slot-note:hover,
button.rp-slot-note:focus {
	color: var( --rp-primary );
	text-decoration: underline;
}

/* Kompaktes "+"-Symbol zum Hinzufügen einer Notiz, wenn noch keine vorhanden ist. */
.rp-note-add {
	display: inline-block;
	margin-top: 0.3em;
	width: 1.4em;
	height: 1.4em;
	line-height: 1.2em;
	padding: 0;
	background: none;
	border: 1px solid var( --rp-primary );
	border-radius: 50%;
	font-size: 0.8em;
	font-weight: 700;
	color: var( --rp-primary );
	text-align: center;
	cursor: pointer;
}

.rp-note-add:hover,
.rp-note-add:focus {
	background: var( --rp-primary );
	color: #fff;
}

td .rp-slot-note,
td .rp-note-add {
	margin-top: 0;
}

.rp-day-table button.rp-cancel-booking {
	background: #fff;
	color: var( --rp-danger );
	border: 1px solid var( --rp-danger );
	padding: 0.35em 0.9em;
	border-radius: 5px;
	cursor: pointer;
	font-size: 0.9em;
}

.rp-day-table button.rp-cancel-booking:hover {
	background: var( --rp-danger-bg );
}

/* Monatsübersicht ------------------------------------------------------------- */

.rp-month-view {
	margin-bottom: 0;
}

.rp-month-title {
	font-weight: 700;
	text-transform: capitalize;
	margin: 0 0 0.7em;
	font-size: 1.05em;
}

.rp-month-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.rp-month-table th {
	padding: 0.5em;
	background: #fafbfc;
	border: 1px solid var( --rp-border );
	text-align: center;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --rp-text-muted );
}

.rp-month-table td {
	border: 1px solid var( --rp-border );
	vertical-align: top;
	height: 5.5em;
	padding: 0.3em;
	overflow: hidden;
}

.rp-month-empty {
	background: #fafbfc;
}

.rp-month-day {
	cursor: pointer;
	transition: background 0.1s ease;
}

.rp-month-day:hover {
	background: var( --rp-primary-bg );
}

.rp-month-today {
	background: #fff8e5;
}

.rp-month-today:hover {
	background: #fef2cc;
}

.rp-month-daynum {
	display: block;
	font-weight: 700;
	font-size: 0.85em;
	margin-bottom: 0.25em;
}

.rp-month-chip {
	display: block;
	color: #fff;
	font-size: 0.72em;
	line-height: 1.3;
	padding: 0.12em 0.4em;
	border-radius: 4px;
	margin-bottom: 0.18em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rp-month-chip-note {
	font-weight: 700;
}

.rp-month-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9em;
	margin-top: 1em;
	padding-top: 0.9em;
	border-top: 1px solid var( --rp-border );
}

.rp-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: 0.9em;
	color: var( --rp-text-muted );
}

.rp-legend-swatch {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	border-radius: 3px;
	flex: none;
}

.rp-month-empty-notice {
	font-style: italic;
	color: var( --rp-text-muted );
}

/* Auswertung ------------------------------------------------------------------ */

.rp-report {
	margin-bottom: 0;
}

.rp-report-actions {
	display: flex;
	gap: 0.6em;
	flex-wrap: wrap;
	margin: 0 0 1.2em;
}

.rp-report-chart {
	margin: 0 0 1.4em;
	padding-bottom: 1.2em;
	border-bottom: 1px solid var( --rp-border );
}

.rp-report-chart-title {
	margin: 0 0 0.8em;
	font-size: 0.98em;
	font-weight: 700;
	color: var( --rp-text );
}

.rp-chart-bars {
	display: flex;
	flex-direction: column;
	gap: 0.55em;
}

.rp-chart-row {
	display: grid;
	grid-template-columns: 11em 1fr auto;
	align-items: center;
	gap: 0.7em;
}

.rp-chart-label {
	font-size: 0.88em;
	font-weight: 600;
	color: var( --rp-text );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rp-chart-track {
	background: var( --rp-page-bg );
	border-radius: 4px;
	overflow: hidden;
	height: 0.9em;
}

.rp-chart-bar {
	display: block;
	height: 100%;
	border-radius: 4px;
	min-width: 3px;
	transition: width 0.2s ease;
}

.rp-chart-value {
	font-size: 0.82em;
	color: var( --rp-text-muted );
	white-space: nowrap;
}

/* Responsive -------------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.rp-wrapper {
		padding: 1em;
	}

	.rp-tab-btn {
		padding: 0.6em 0.7em;
		font-size: 0.9em;
	}

	.rp-card {
		padding: 1em;
	}

	.rp-month-table th,
	.rp-month-table td {
		font-size: 0.72em;
	}

	.rp-month-table td {
		height: 4em;
	}

	.rp-chart-row {
		grid-template-columns: 1fr;
		row-gap: 0.25em;
	}

	.rp-chart-value {
		white-space: normal;
	}
}