/*
 * Berater-Cockpit (Startseite rswork.de). Navy/Gold-Designsprache (vgl. public/rsw-login.css),
 * alles unter #rsw-cockpit gescopet. Selektoren nach aufsteigender Spezifitaet (Stylelint
 * no-descending-specificity). Wird nur auf der Cockpit-Seite geladen (eigenes Template ohne Theme).
 */

html,
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	background: #0b1e3f;
}

#rsw-cockpit {
	--navy: #0b1e3f;
	--navy2: #13294d;
	--blue: #046bd2;
	--gold: #c9a24a;
	--line: rgb(255 255 255 / 12%);

	box-sizing: border-box;
	min-height: 100vh;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	color: #fff;
	background: linear-gradient(160deg, #0b1e3f 0%, #13294d 100%);
}

#rsw-cockpit *,
#rsw-cockpit *::before,
#rsw-cockpit *::after {
	box-sizing: border-box;
}

.rsw-cockpit-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	color: #8ba0bf;
	font-family: Helvetica, Arial, sans-serif;
}

/* ── Kopf ────────────────────────────────────────────────────────────────── */
.rsw-cockpit-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 22px 30px;
	border-bottom: 1px solid var(--line);
}

.rsw-cockpit-brand .mark {
	font-weight: 700;
	font-size: 21px;
	letter-spacing: .5px;
	border-bottom: 2px solid var(--gold);
	padding-bottom: 3px;
}

.rsw-cockpit-brand .sub {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: #8ba0bf;
}

.rsw-cockpit-user {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
}

.rsw-cockpit-user .name {
	color: #c4d0e2;
}

.rsw-cockpit-logout {
	background: none;
	border: 1px solid var(--line);
	border-radius: 8px;
	color: #c4d0e2;
	font-family: inherit;
	font-size: 12px;
	padding: 8px 14px;
	cursor: pointer;
}

.rsw-cockpit-logout:hover {
	background: var(--navy2);
}

/* ── Inhalt ──────────────────────────────────────────────────────────────── */
.rsw-cockpit-main {
	padding: 40px 30px;
	max-width: 1000px;
	margin: 0 auto;
}

.rsw-cockpit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 20px;
}

.rsw-cockpit-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 150px;
	padding: 24px 18px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: rgb(255 255 255 / 4%);
	color: #fff;
	text-decoration: none;
	text-align: center;
	transition: border-color .15s, background .15s, transform .15s;
}

.rsw-cockpit-tile .ico {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	font-size: 40px;
	line-height: 1;
}

.rsw-cockpit-tile .ico svg {
	display: block;
	width: 44px;
	height: 44px;
}

.rsw-cockpit-tile .label {
	font-size: 15px;
	font-weight: 600;
}

.rsw-cockpit-tile:hover {
	border-color: var(--gold);
	background: rgb(255 255 255 / 8%);
	transform: translateY(-2px);
}

.rsw-cockpit-empty {
	padding: 40px 20px;
	text-align: center;
	color: #8ba0bf;
}

.rsw-cockpit-empty .hint {
	font-size: 13px;
	color: #64748b;
}

/* ── Anmeldung an diesem Gerät (Passkey / Windows Hello) ─────────────────── */
.rsw-cockpit-security {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 30px 48px;
}

.rsw-cockpit-security .sec-title {
	margin: 0 0 8px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
	font-size: 17px;
	font-weight: 600;
}

.rsw-cockpit-security .sec-hint {
	margin: 0 0 20px;
	max-width: 620px;
	font-size: 13px;
	line-height: 1.5;
	color: #8ba0bf;
}

.rsw-cockpit-security .sec-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}

.rsw-cockpit-security .sec-empty {
	margin: 0;
	font-size: 13px;
	color: #64748b;
}

.rsw-cockpit-security .sec-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: rgb(255 255 255 / 4%);
}

.rsw-cockpit-security .sec-label {
	font-size: 14px;
	font-weight: 600;
}

.rsw-cockpit-security .sec-meta {
	font-size: 12px;
	color: #8ba0bf;
}

.rsw-cockpit-security .sec-del {
	margin-left: auto;
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: none;
	color: #c4d0e2;
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
}

.rsw-cockpit-security .sec-form {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.rsw-cockpit-security .sec-input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: rgb(255 255 255 / 6%);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
}

.rsw-cockpit-security .sec-add {
	padding: 11px 20px;
	border: 0;
	border-radius: 8px;
	background: var(--blue);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.rsw-cockpit-security .sec-status {
	margin-top: 12px;
	min-height: 18px;
	font-size: 13px;
	color: #c4d0e2;
}

.rsw-cockpit-security .sec-del:hover {
	background: var(--navy2);
}

.rsw-cockpit-security .sec-add:hover {
	background: #0559ad;
}

.rsw-cockpit-security .sec-add:disabled {
	opacity: .6;
	cursor: default;
}

.rsw-cockpit-security .sec-input:focus {
	outline: 2px solid var(--gold);
	outline-offset: 1px;
}

/* ── Mobil ───────────────────────────────────────────────────────────────── */
@media (width <= 720px) {
	.rsw-cockpit-head {
		padding: 16px 18px;
	}

	.rsw-cockpit-main {
		padding: 24px 18px;
	}

	.rsw-cockpit-grid {
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}

	.rsw-cockpit-security {
		padding: 0 18px 32px;
	}
}