/**
 * Hafenstudios Core - Admin-Designsystem und Hans-Komponenten.
 * Leichte Schicht ueber den WP-Admin-Styles.
 */

:root {
	--hs-navy: #0b3d5c;
	--hs-navy-dark: #082c43;
	--hs-teal: #1a7f8e;
	--hs-sand: #f3ece0;
	--hs-sky: #e8f1f6;
	--hs-green: #2e7d5b;
	--hs-amber: #b26a00;
	--hs-red: #a12b2b;
	--hs-ink: #1d2b36;
	--hs-radius: 8px;
	--hs-gap: 16px;
}

/* Hans-Karte */
.hs-hans-card {
	display: flex;
	align-items: flex-start;
	gap: var(--hs-gap);
	position: relative;
	padding: 16px 40px 16px 16px;
	margin: 0 0 20px;
	background: var(--hs-sky);
	border: 1px solid #cfe0ea;
	border-left: 4px solid var(--hs-teal);
	border-radius: var(--hs-radius);
}

.hs-hans-card--success { background: #e9f6ef; border-left-color: var(--hs-green); }
.hs-hans-card--warning { background: #fbf2e3; border-left-color: var(--hs-amber); }
.hs-hans-card--danger  { background: #fbeaea; border-left-color: var(--hs-red); }

.hs-hans-card__img {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	object-fit: contain;
}

.hs-hans-card__body { flex: 1 1 auto; }

.hs-hans-card__title {
	margin: 0 0 4px;
	font-weight: 600;
	font-size: 14px;
	color: var(--hs-navy);
}

.hs-hans-card__text { margin: 0 0 8px; color: var(--hs-ink); }

.hs-hans-card__dismiss {
	position: absolute;
	top: 8px;
	right: 8px;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	color: #5a6b76;
	padding: 4px 8px;
}

.hs-hans-card__dismiss:hover { color: var(--hs-navy); }

/* Meilenstein-Toast */
.hs-hans-toast {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 340px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #cfe0ea;
	border-left: 4px solid var(--hs-green);
	border-radius: var(--hs-radius);
	box-shadow: 0 6px 24px rgba(11, 61, 92, 0.18);
	animation: hs-toast-in 0.25s ease-out;
}

@keyframes hs-toast-in {
	from { transform: translateY(12px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

/* Status-Schild (Rechtssicherheit sichtbar machen) */
.hs-shield {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}

.hs-shield--green { background: #e9f6ef; color: var(--hs-green); }
.hs-shield--amber { background: #fbf2e3; color: var(--hs-amber); }
.hs-shield--grey  { background: #eef1f3; color: #5a6b76; }

.hs-shield::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Onboarding-Wizard */
.hs-wizard { max-width: 620px; margin: 40px auto; padding: 32px; background: #fff; border: 1px solid #dcdcde; border-radius: var(--hs-radius); }
.hs-wizard__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.hs-wizard__img { flex: 0 0 auto; }
.hs-wizard__dots { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.hs-wizard__dot { width: 10px; height: 10px; border-radius: 50%; background: #d3dbe0; }
.hs-wizard__dot.is-active { background: var(--hs-teal); }
.hs-wizard__title { margin: 0 0 12px; color: var(--hs-navy); }
.hs-wizard__skip { margin-top: 20px; text-align: center; }
.hs-wizard__skip a { color: #5a6b76; }

/* Einrichtungs-Checkliste "Klar zum Auslaufen" */
.hs-checklist { margin: 0 0 20px; padding: 16px; background: #fff; border: 1px solid #dcdcde; border-radius: var(--hs-radius); }
.hs-checklist__title { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.hs-checklist__item { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.hs-checklist__item--done { color: #5a6b76; text-decoration: line-through; }
.hs-checklist__progress { height: 6px; background: #eef1f3; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.hs-checklist__bar { height: 100%; background: var(--hs-teal); }
