/*
 * Sicheres Passwort – Styles
 * Autor: Jörn Gorres
 * Version: 1.1.0
 *
 * Hinweis: Es werden nur eigene Klassen mit Prefix .jg-sp- verwendet,
 * damit keine Konflikte mit Theme oder anderen Plugins entstehen.
 */

/* ===== Container ===== */
.jg-sp-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	font-family: inherit;
	line-height: 1.4;
	margin: 0 0 12px;
}
.jg-sp-wrap *,
.jg-sp-wrap *::before,
.jg-sp-wrap *::after {
	box-sizing: border-box;
}

/* ===== Kopfzeile: Label + Score-Anzeige rechts ===== */
.jg-sp-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}
.jg-sp-label {
	font-size: 14px;
	font-weight: 600;
	color: inherit;
}
.jg-sp-score-label {
	font-size: 12px;
	color: #757575;
}

/* ===== Eingabefeld mit eingebetteten Buttons ===== */
.jg-sp-inputwrap {
	position: relative;
	margin-bottom: 10px;
}
.jg-sp-input {
	width: 100%;
	padding: 8px 84px 8px 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
	letter-spacing: 0.5px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #fff;
	color: #1d2327;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.jg-sp-input:focus {
	outline: none;
	border-color: #2271b1;
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.25);
}

/* Eingebettete Buttons rechts im Feld */
.jg-sp-buttons {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	gap: 4px;
}
.jg-sp-btn {
	width: 32px;
	height: 32px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	color: #50575e;
	transition: background 120ms ease, color 120ms ease;
}
.jg-sp-btn:hover,
.jg-sp-btn:focus {
	background: #f0f0f1;
	color: #1d2327;
	outline: none;
}
.jg-sp-btn:active {
	transform: scale(0.96);
}

/* ===== SVG-basierte Icons (kein Font, kein externer Aufruf) ===== */
.jg-sp-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}
.jg-sp-icon-eye {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2350575e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg>");
}
.jg-sp-icon-eye-off {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2350575e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10 10 0 0 1 12 19c-6.5 0-10-7-10-7a18 18 0 0 1 5.06-5.94'/><path d='M9.9 4.24A10 10 0 0 1 12 4c6.5 0 10 7 10 7a18 18 0 0 1-2.16 3.19'/><path d='M14.12 14.12a3 3 0 1 1-4.24-4.24'/><line x1='2' y1='2' x2='22' y2='22'/></svg>");
}
.jg-sp-icon-refresh {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2350575e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-3-6.7'/><polyline points='21 3 21 9 15 9'/></svg>");
}
.jg-sp-icon-circle {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7aaad' stroke-width='2'><circle cx='12' cy='12' r='9'/></svg>");
}
.jg-sp-icon-check {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231d9e75'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 14.4L6.6 12l1.4-1.4L11 13.6l5-5L17.4 10 11 16.4z'/></svg>");
}

/* ===== Stärke-Balken: 5 Segmente ===== */
.jg-sp-bars {
	display: flex;
	gap: 4px;
	margin-bottom: 6px;
}
.jg-sp-bar {
	flex: 1;
	height: 6px;
	border-radius: 3px;
	background: #e5e5e5;
	transition: background-color 200ms ease;
}

/* ===== Feedback-Text unter den Balken ===== */
.jg-sp-feedback {
	font-size: 12px;
	min-height: 18px;
	margin: 0 0 12px;
	color: #757575;
}

/* ===== Anforderungen-Block ===== */
.jg-sp-requirements {
	border-top: 1px solid #e5e5e5;
	padding-top: 10px;
}
.jg-sp-req-title {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #757575;
	margin-bottom: 6px;
}
.jg-sp-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 16px;
}
@media (max-width: 480px) {
	.jg-sp-checklist {
		grid-template-columns: 1fr;
	}
}
.jg-sp-req {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #757575;
	transition: color 200ms ease;
}
.jg-sp-req.is-passed {
	color: #1d2327;
}
.jg-sp-req.is-passed .jg-sp-icon {
	width: 18px;
	height: 18px;
}

/* ===== Score-Farben (per JS gesetzt via data-Attribut) ===== */
.jg-sp-score-label.jg-sp-state-weak,
.jg-sp-feedback.jg-sp-state-weak {
	color: #d63638;
}
.jg-sp-score-label.jg-sp-state-medium,
.jg-sp-feedback.jg-sp-state-medium {
	color: #dba617;
}
.jg-sp-score-label.jg-sp-state-strong,
.jg-sp-feedback.jg-sp-state-strong {
	color: #1d9e75;
}

/* Balkenfarben werden direkt per inline-style aus JS gesetzt,
 * damit Farbentscheidung und Score-Logik an einer Stelle bleiben. */