/* =========================================================================
   Kunden-Self-Service-Portal (KontoController). Nutzt die Theme-Variablen
   aus style.css (Hell/Dunkel via [data-theme] + prefers-color-scheme).
   ========================================================================= */

.konto-head {
	display: flex; align-items: baseline; justify-content: space-between;
	flex-wrap: wrap; gap: 10px; margin-bottom: 6px;
}
.konto-sub { color: var(--muted); margin-bottom: 22px; }

.konto-msg-ok {
	background: var(--accent-soft); border: 1px solid var(--accent);
	color: var(--accent-dk); padding: 10px 14px; border-radius: var(--radius-sm);
	margin-bottom: 18px;
}

/* Anlagen-Grid */
.anlage-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px; margin-bottom: 26px;
}
.anlage-card {
	background: var(--bg); border: 1px solid var(--line);
	border-radius: var(--radius); box-shadow: var(--shadow-sm);
	padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
}
.anlage-card h3 { margin: 0; font-size: 16px; color: var(--head-ink); }
.anlage-card .uname { color: var(--muted); font-size: 13px; font-family: monospace; }
.anlage-card .meta { font-size: 13px; color: var(--ink); }
.anlage-card .actions { margin-top: auto; padding-top: 8px; }
.anlage-card .actions a { font-weight: 600; color: var(--accent); }

/* Online/Offline-Badge */
.badge {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
	align-self: flex-start;
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; }
.badge.online { background: rgba(58,138,78,.14); color: #2e7d43; }
.badge.online .dot { background: #3a8a4e; }
.badge.offline { background: var(--slate-soft); color: var(--muted); }
.badge.offline .dot { background: var(--muted); }
:root[data-theme="dark"] .badge.online { color: #79d391; }

/* Aktions-Kacheln (Anlage hinzufügen / übernehmen / Konto) */
.konto-tiles { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 22px; }
.konto-tile {
	flex: 1 1 220px; border: 1px solid var(--line); border-radius: var(--radius);
	padding: 16px 18px; background: var(--bg-soft);
}
.konto-tile h4 { margin: 0 0 6px; color: var(--head-ink); }
.konto-tile p { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.konto-tile a.btn, .btn-link {
	display: inline-block; background: var(--accent); color: #fff;
	padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px;
}
.konto-tile a.btn:hover, .btn-link:hover { background: var(--accent-dk); color: #fff; }

/* Warnbox (Geräte-Credentials ändern) */
.konto-warn {
	background: var(--err-bg); border: 1px solid var(--err-border); color: var(--err-ink);
	padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 13px;
}

/* Checkbox-Zeile (z. B. Bestätigung Geräte-Credentials): Label darf über die
   volle Breite laufen und umbrechen — sonst schneidet forms.css es auf 180px ab. */
fieldset .row label.checkbox {
	width: auto;
	flex: 1 1 auto;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	line-height: 1.4;
	cursor: pointer;
}
fieldset .row label.checkbox input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 3px;
}

.konto-actions-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.konto-actions-row a { color: var(--blue); font-weight: 600; }
.muted-link { color: var(--muted); font-size: 13px; }