/* --- Card -------------------------------------------------------------- */

.card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	padding: var(--s-4);
	box-shadow: var(--shadow);
}

.card__title {
	margin-bottom: var(--s-3);
}

/* --- Button ------------------------------------------------------------ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: var(--tap-min);
	padding: var(--s-2) var(--s-4);
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--c-primary);
	color: var(--c-text-inverse);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.btn:hover {
	background: var(--c-primary-hover);
	color: var(--c-text-inverse);
}

.btn[disabled],
.btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

.btn--secondary {
	background: var(--c-surface);
	color: var(--c-primary);
	border-color: var(--c-border-strong);
}

.btn--secondary:hover {
	background: var(--c-surface-sunken);
	color: var(--c-primary-hover);
}

.btn--danger {
	background: var(--c-danger);
}

.btn--danger:hover {
	background: #851c19;
	color: var(--c-text-inverse);
}

/* On a phone a primary action fills the width — it cannot be missed with gloves. */
.btn--block {
	width: 100%;
}

/* --- Flash messages ---------------------------------------------------- */

.messages {
	margin-bottom: var(--s-4);
}

.message {
	display: flex;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border: 1px solid;
	border-radius: var(--radius);
	margin-bottom: var(--s-2);
}

.message--info,
.message--debug {
	background: var(--c-info-subtle);
	border-color: var(--c-info);
	color: var(--c-text);
}

.message--success {
	background: var(--c-success-subtle);
	border-color: var(--c-success);
	color: var(--c-text);
}

.message--warning {
	background: var(--c-warning-subtle);
	border-color: var(--c-warning);
	color: var(--c-text);
}

.message--error {
	background: var(--c-danger-subtle);
	border-color: var(--c-danger);
	color: var(--c-text);
}

/* --- Badge ------------------------------------------------------------- */

.badge {
	display: inline-block;
	padding: var(--s-1) var(--s-2);
	border-radius: var(--radius);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-text-inverse);
	background: var(--c-status-open);
}

.badge--done {
	background: var(--c-status-done);
}
.badge--moved {
	background: var(--c-status-moved);
}
.badge--problem {
	background: var(--c-status-problem);
}
.badge--cancelled {
	background: var(--c-status-cancelled);
}

/* --- Empty state ------------------------------------------------------- */

/* "Keine Positionen für diesen Tag" with a way forward — never a blank page. */
.empty-state {
	text-align: center;
	padding: var(--s-6) var(--s-4);
	color: var(--c-text-muted);
}

.empty-state__title {
	color: var(--c-text);
	margin-bottom: var(--s-2);
}