/* ==========================================================================
   WP Project Bug Tracker – Frontend Styles
   Design-Richtung: "Blueprint" – App-Shell mit Sidebar, technische Mono-Akzente,
   ruhige Flächen, ein Signature-Element (Eckwinkel wie auf einem Bauplan).
   ========================================================================== */

.wpbt-portal {
	--wpbt-accent: #3457d5;
	--wpbt-signal: #e4572e;
	--wpbt-success: #1f9d6b;

	--wpbt-bg: #f7f8fa;
	--wpbt-surface: #ffffff;
	--wpbt-surface-2: #f1f3f6;
	--wpbt-border: #e2e5ea;
	--wpbt-text: #10131a;
	--wpbt-text-muted: #6b7280;
	--wpbt-text-faint: #9aa1ac;

	--wpbt-radius-sm: 6px;
	--wpbt-radius: 10px;
	--wpbt-radius-lg: 16px;
	--wpbt-shadow: 0 1px 2px rgba(16,19,26,0.05);
	--wpbt-shadow-lg: 0 16px 40px rgba(16,19,26,0.12);

	--wpbt-font: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wpbt-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

	background: var(--wpbt-bg);
	color: var(--wpbt-text);
	border-radius: var(--wpbt-radius-lg);
	font-family: var(--wpbt-font);
	max-width: 1120px;
	margin: 0 auto;
	box-sizing: border-box;
	border: 1px solid var(--wpbt-border);
	box-shadow: 0 1px 3px rgba(16,19,26,0.04), 0 12px 32px rgba(16,19,26,0.06);
	overflow: hidden;
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.wpbt-portal *, .wpbt-portal *::before, .wpbt-portal *::after { box-sizing: border-box; }

/* Einheitliche Basis für ALLE Eingabefelder im Portal – vorher hatte jedes
   Feld nur die Browser-Voreinstellung, das wirkte uneinheitlich/unfertig. */
.wpbt-portal input[type="text"],
.wpbt-portal input[type="email"],
.wpbt-portal input[type="password"],
.wpbt-portal input[type="url"],
.wpbt-portal input[type="date"],
.wpbt-portal input[type="search"],
.wpbt-portal input[type="file"],
.wpbt-portal textarea,
.wpbt-portal select {
	width: 100%; font-family: inherit; font-size: 13px; color: var(--wpbt-text);
	background: var(--wpbt-surface); border: 1px solid var(--wpbt-border); border-radius: var(--wpbt-radius-sm);
	padding: 9px 12px; transition: border-color .12s ease, box-shadow .12s ease;
}
.wpbt-portal textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.wpbt-portal input:focus, .wpbt-portal textarea:focus, .wpbt-portal select:focus {
	outline: none; border-color: var(--wpbt-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpbt-accent) 15%, transparent);
}
.wpbt-portal input::placeholder, .wpbt-portal textarea::placeholder { color: var(--wpbt-text-faint); }

/* Formulare innerhalb eines Panel-Blocks: gleichmässiger Abstand zwischen
   Feldern und dem Absenden-Button, statt dass der Button direkt am letzten
   Feld klebt. */
.wpbt-panel-block form { display: flex; flex-direction: column; gap: 14px; }

/* Globaler Schutz gegen einen wiederkehrenden Bug-Typ: eigene "display"-Regeln
   auf einem Element können sonst das hidden-Attribut überschreiben (gleiche
   Spezifität, aber später in der Kaskade). Das betraf schon die Lightbox und
   die Login/Registrierung-Formulare – ab jetzt für die ganze Komponente auf
   einmal abgesichert. */
.wpbt-portal [hidden] { display: none !important; }

.wpbt-portal-notice {
	background: rgba(31,157,107,0.1); color: var(--wpbt-success); border-bottom: 1px solid rgba(31,157,107,0.25);
	padding: 12px 24px; font-size: 13px; text-align: center; font-weight: 600;
}

.wpbt-portal[data-theme="dark"] {
	--wpbt-bg: #0b1220;
	--wpbt-surface: #121a2b;
	--wpbt-surface-2: #182238;
	--wpbt-border: #1e2a3d;
	--wpbt-text: #e8ecf3;
	--wpbt-text-muted: #8a94a6;
	--wpbt-text-faint: #5c6577;
	--wpbt-shadow: 0 1px 2px rgba(0,0,0,0.3);
	--wpbt-shadow-lg: 0 20px 50px rgba(0,0,0,0.5);
}

/* ---------- App-Shell ---------- */
.wpbt-app { display: grid; grid-template-columns: 220px 1fr; min-height: 480px; }

.wpbt-sidebar {
	background: var(--wpbt-surface); border-right: 1px solid var(--wpbt-border);
	padding: 18px 14px; display: flex; flex-direction: column; gap: 18px;
}

.wpbt-sidebar__project {
	display: flex; align-items: center; gap: 11px; padding: 4px 4px 16px; border-bottom: 1px solid var(--wpbt-border);
}
.wpbt-project-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.wpbt-project-logo {
	width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex-shrink: 0;
	border: 1px solid var(--wpbt-border); background: var(--wpbt-surface-2);
}
.wpbt-project-logo--sm { width: 20px; height: 20px; border-radius: 5px; }
.wpbt-project-logo--fallback { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 800; border: none; }

.wpbt-cat-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; }

.wpbt-cat-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.wpbt-cat-picker__option {
	--wpbt-cat-color: var(--wpbt-accent);
	display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
	border: 1px solid var(--wpbt-border); font-size: 12px; font-weight: 600; color: var(--wpbt-text-muted);
	cursor: pointer; transition: all .12s ease; background: var(--wpbt-surface);
}
.wpbt-cat-picker__option input { position: absolute; opacity: 0; pointer-events: none; }
.wpbt-cat-picker__option svg { color: var(--wpbt-cat-color); }
.wpbt-cat-picker__option:hover { border-color: var(--wpbt-cat-color); }
.wpbt-cat-picker__option.is-selected {
	border-color: var(--wpbt-cat-color); background: color-mix(in srgb, var(--wpbt-cat-color) 12%, transparent);
	color: var(--wpbt-text);
}

/* Wiederverwendbare Drag&Drop-Datei-Zone */
.wpbt-dropzone {
	position: relative; border: 1.5px dashed var(--wpbt-border); border-radius: var(--wpbt-radius);
	background: var(--wpbt-surface); padding: 22px 16px; text-align: center; cursor: pointer; transition: all .15s ease;
}
.wpbt-dropzone:hover { border-color: var(--wpbt-accent); background: var(--wpbt-surface-2); }
.wpbt-dropzone.is-dragover { border-color: var(--wpbt-accent); background: color-mix(in srgb, var(--wpbt-accent) 6%, var(--wpbt-surface)); }
.wpbt-dropzone.has-files { padding-bottom: 12px; }
.wpbt-dropzone__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.wpbt-dropzone__content { display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; color: var(--wpbt-text-faint); }
.wpbt-dropzone__content svg { color: var(--wpbt-text-faint); }
.wpbt-dropzone__content p { margin: 0; font-size: 12.5px; color: var(--wpbt-text-muted); }
.wpbt-dropzone__hint { font-size: 11px; }
.wpbt-dropzone--sm { padding: 16px; }
.wpbt-dropzone--sm .wpbt-dropzone__content p { font-size: 12px; }
.wpbt-dropzone__filelist { list-style: none; margin: 10px 0 0; padding: 0; text-align: left; pointer-events: none; }
.wpbt-dropzone__filelist li {
	font-size: 11.5px; color: var(--wpbt-text); background: var(--wpbt-surface-2); border-radius: 6px;
	padding: 6px 10px; margin-top: 4px;
}
.wpbt-sidebar__project-name { font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em; line-height: 1.3; }
.wpbt-sidebar__project-client { font-size: 11px; color: var(--wpbt-text-faint); font-family: var(--wpbt-font-mono); margin-top: 1px; }

.wpbt-sidebar__back {
	display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--wpbt-text-muted);
	text-decoration: none; padding: 8px 8px; border-radius: var(--wpbt-radius-sm); margin: 2px -8px 4px;
}
.wpbt-sidebar__back:hover { color: var(--wpbt-accent); background: var(--wpbt-surface-2); }

.wpbt-nav { display: flex; flex-direction: column; gap: 2px; }
.wpbt-nav-item {
	display: flex; align-items: center; gap: 10px; background: transparent; border: none;
	text-align: left; padding: 8px 10px; border-radius: var(--wpbt-radius-sm); font-size: 13px; font-weight: 600;
	color: var(--wpbt-text-muted); cursor: pointer; position: relative; font-family: inherit;
	border-left: 2px solid transparent;
}
.wpbt-nav-item:hover { color: var(--wpbt-text); background: var(--wpbt-surface-2); }
.wpbt-nav-item.is-active { color: var(--wpbt-accent); background: var(--wpbt-surface-2); border-left-color: var(--wpbt-accent); }
.wpbt-nav-item--soon { color: var(--wpbt-text-faint); }
.wpbt-nav-item--soon .wpbt-nav-item__soon-tag {
	margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	background: var(--wpbt-surface-2); color: var(--wpbt-text-faint); padding: 2px 5px; border-radius: 4px;
}

.wpbt-sidebar__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.wpbt-theme-toggle {
	background: var(--wpbt-surface-2); border: 1px solid var(--wpbt-border); border-radius: 8px;
	width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center;
	font-size: 13px; transition: transform .15s ease;
}
.wpbt-theme-toggle:hover { transform: scale(1.06); }

.wpbt-main { padding: 32px 40px; min-width: 0; }
.wpbt-main__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.wpbt-main__title { font-size: 18px; font-weight: 800; margin: 0; letter-spacing: -0.02em; }
.wpbt-main__count { font-family: var(--wpbt-font-mono); font-size: 12px; color: var(--wpbt-text-faint); font-weight: 500; }

/* No-shell header (Login-Hinweis / Projekt-Auswahl haben keine Sidebar) */
.wpbt-portal__plain-header {
	display: flex; align-items: center; justify-content: space-between; padding: 20px 26px; border-bottom: 1px solid var(--wpbt-border);
}
.wpbt-portal__title { font-size: 17px; font-weight: 800; margin: 0; letter-spacing: -0.02em; }
.wpbt-portal__plain-body { padding: 26px; }

/* ---------- Signature: Blueprint-Eckwinkel ---------- */
.wpbt-corners { position: relative; }
.wpbt-corners::before, .wpbt-corners::after {
	content: ''; position: absolute; width: 10px; height: 10px; border: 1.5px solid var(--wpbt-accent);
	opacity: .55; pointer-events: none;
}
.wpbt-corners::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.wpbt-corners::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* ---------- Projekt-Portal: Blueprint-Karteikarten statt generischem
   Karten-Raster – nutzt das Zeichenbrett-Motiv (Eckwinkel, Projekt-Code,
   Rasterpapier-Hintergrund), das die eigentliche Design-Identität dieses
   Plugins ist. ---------- */
.wpbt-index { position: relative; }
.wpbt-index::before {
	content: ''; position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; z-index: -1;
	background-image: linear-gradient(var(--wpbt-border) 1px, transparent 1px), linear-gradient(90deg, var(--wpbt-border) 1px, transparent 1px);
	background-size: 28px 28px; opacity: .35; mask-image: radial-gradient(ellipse at top, #000 0%, transparent 75%);
}
.wpbt-index__intro { color: var(--wpbt-text-muted); font-size: 13.5px; margin-bottom: 22px; }

.wpbt-index__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }

.wpbt-index-card {
	--wpbt-card-accent: var(--wpbt-accent);
	position: relative; display: block; background: var(--wpbt-surface); border: 1px solid var(--wpbt-border);
	padding: 18px; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* Zeichenbrett-Eckwinkel, deutlich sichtbar statt reinem border-radius */
.wpbt-index-card::before, .wpbt-index-card::after {
	content: ''; position: absolute; width: 13px; height: 13px; border: 2px solid var(--wpbt-card-accent); opacity: 0; transition: opacity .15s ease;
}
.wpbt-index-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.wpbt-index-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.wpbt-index-card:hover { box-shadow: var(--wpbt-shadow-lg); transform: translateY(-2px); }
.wpbt-index-card:hover::before, .wpbt-index-card:hover::after { opacity: 1; }

.wpbt-index-card__code {
	position: absolute; top: 14px; right: 16px; font-family: var(--wpbt-font-mono); font-size: 10.5px; font-weight: 700;
	color: var(--wpbt-text-faint); letter-spacing: .02em;
}
.wpbt-index-card__status {
	position: absolute; top: 32px; right: 16px; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .03em; padding: 2px 7px; border-radius: 999px;
}
.wpbt-index-card__status--paused { background: rgba(201,130,10,0.12); color: #c9820a; }
.wpbt-index-card__status--completed { background: var(--wpbt-surface-2); color: var(--wpbt-text-faint); }
.wpbt-index-card--paused, .wpbt-index-card--completed { opacity: 0.72; }
.wpbt-index-card--paused:hover, .wpbt-index-card--completed:hover { opacity: 1; }
.wpbt-index-card__logo {
	width: 42px; height: 42px; border-radius: 10px; overflow: hidden; background: var(--wpbt-surface-2);
	border: 1px solid var(--wpbt-border); margin-bottom: 14px;
}
.wpbt-index-card__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpbt-index-card__logo span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; font-weight: 800; }

.wpbt-index-card__title { margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; padding-right: 40px; }
.wpbt-index-card__client { font-size: 11px; color: var(--wpbt-text-faint); margin: 3px 0 16px; font-family: var(--wpbt-font-mono); }

.wpbt-index-card__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px dashed var(--wpbt-border); font-size: 11px; }
.wpbt-index-card__type { color: var(--wpbt-text-muted); font-weight: 600; }
.wpbt-index-card__cats { display: flex; align-items: center; gap: 4px; }
.wpbt-index-card__open { font-family: var(--wpbt-font-mono); color: var(--wpbt-card-accent); font-weight: 700; }

.wpbt-tag {
	display: inline-flex; align-items: center; background: var(--wpbt-surface-2); color: var(--wpbt-text-muted);
	padding: 3px 8px; border-radius: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.wpbt-count-chip { font-family: var(--wpbt-font-mono); color: var(--wpbt-text-faint); font-weight: 500; }

/* ---------- Bug-Liste (Ticket-Zeilen statt Karten) ---------- */
.wpbt-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.wpbt-filters--bugs { flex-wrap: wrap; align-items: center; }
.wpbt-filters__reset { font-size: 12px; color: var(--wpbt-text-faint); text-decoration: none; padding: 0 4px; }
.wpbt-filters__reset:hover { color: var(--wpbt-signal); }

.wpbt-search-input {
	display: flex; align-items: center; gap: 8px; background: var(--wpbt-surface); border: 1px solid var(--wpbt-border);
	border-radius: var(--wpbt-radius-sm); padding: 0 10px; height: 34px; min-width: 180px; flex: 1 1 220px; max-width: 340px;
}
.wpbt-search-input svg { color: var(--wpbt-text-faint); flex-shrink: 0; }
.wpbt-search-input input[type="text"], .wpbt-search-input input[type="search"] { border: none; background: transparent; font-size: 12.5px; width: 100%; outline: none; color: var(--wpbt-text); font-family: inherit; padding: 0; }
.wpbt-search-input input:focus { box-shadow: none; }
.wpbt-filters select, .wpbt-select {
	background: var(--wpbt-surface); border: 1px solid var(--wpbt-border); color: var(--wpbt-text);
	padding: 0 28px 0 10px; height: 34px; border-radius: var(--wpbt-radius-sm); font-size: 12.5px; font-family: inherit;
	width: auto; flex: 0 0 auto; min-width: 0;
}

@media (max-width: 640px) {
	.wpbt-search-input { flex: 1 1 100%; max-width: none; }
	.wpbt-filters select, .wpbt-select { flex: 1 1 auto; }
}

.wpbt-rows { display: flex; flex-direction: column; border: 1px solid var(--wpbt-border); border-radius: var(--wpbt-radius); overflow: hidden; }
.wpbt-row {
	display: grid; grid-template-columns: 3px 20px 1fr auto auto; align-items: center; gap: 12px;
	padding: 12px 14px; text-decoration: none; color: inherit; background: var(--wpbt-surface);
	border-bottom: 1px solid var(--wpbt-border); transition: background .1s ease;
}
.wpbt-row:last-child { border-bottom: none; }
.wpbt-row:hover { background: var(--wpbt-surface-2); }

.wpbt-row__rail { align-self: stretch; border-radius: 2px; }
.wpbt-row__rail--low { background: #7dabff; }
.wpbt-row__rail--medium { background: #e0a731; }
.wpbt-row__rail--high { background: #ef7d3a; }
.wpbt-row__rail--critical { background: var(--wpbt-signal); }

.wpbt-status-dot { width: 9px; height: 9px; border-radius: 50%; justify-self: center; }
.wpbt-status-dot--new { background: #8b5cf6; }
.wpbt-status-dot--in_progress { background: #3b82f6; }
.wpbt-status-dot--review { background: #eab308; }
.wpbt-status-dot--done { background: var(--wpbt-success); }
.wpbt-status-dot--closed { background: var(--wpbt-text-faint); }

.wpbt-row__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wpbt-row__title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpbt-row__meta { font-size: 11.5px; color: var(--wpbt-text-faint); display: flex; gap: 6px; align-items: center; }
.wpbt-row__id { font-family: var(--wpbt-font-mono); }

.wpbt-avatar {
	width: 24px; height: 24px; border-radius: 50%; background: var(--wpbt-surface-2); color: var(--wpbt-text-muted);
	display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex-shrink: 0;
	border: 1px solid var(--wpbt-border);
}

.wpbt-row__time { font-size: 11.5px; color: var(--wpbt-text-faint); font-family: var(--wpbt-font-mono); white-space: nowrap; }

.wpbt-empty, .wpbt-empty-state {
	color: var(--wpbt-text-muted); font-size: 13px; padding: 40px 20px; text-align: center;
	border: 1px dashed var(--wpbt-border); border-radius: var(--wpbt-radius); background: var(--wpbt-surface);
}

.wpbt-pagination { display: flex; gap: 6px; margin-top: 14px; }
.wpbt-page-link {
	width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
	border-radius: 6px; border: 1px solid var(--wpbt-border); color: var(--wpbt-text); text-decoration: none;
	font-size: 12px; font-family: var(--wpbt-font-mono);
}
.wpbt-page-link.is-active { background: var(--wpbt-accent); border-color: var(--wpbt-accent); color: #fff; }

/* ---------- Formular ---------- */
.wpbt-bug-form { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.wpbt-form-row { display: flex; flex-direction: column; gap: 6px; }
.wpbt-form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wpbt-form-row label { font-size: 12px; font-weight: 700; color: var(--wpbt-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.wpbt-form-row .req { color: var(--wpbt-signal); }
.wpbt-hint { font-size: 11.5px; color: var(--wpbt-text-faint); margin: 0; }

.wpbt-bug-form input[type="text"],
.wpbt-bug-form input[type="email"],
.wpbt-bug-form select,
.wpbt-bug-form textarea,
.wpbt-bug-form input[type="file"] {
	background: var(--wpbt-surface); border: 1px solid var(--wpbt-border); color: var(--wpbt-text);
	padding: 9px 11px; border-radius: var(--wpbt-radius-sm); font-size: 13.5px; width: 100%; font-family: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wpbt-bug-form input:focus, .wpbt-bug-form select:focus, .wpbt-bug-form textarea:focus {
	outline: none; border-color: var(--wpbt-accent); box-shadow: 0 0 0 3px rgba(52,87,213,0.14);
}

.wpbt-duplicates {
	margin-top: 6px; background: rgba(228,87,46,0.08); border: 1px solid rgba(228,87,46,0.3); color: var(--wpbt-signal);
	border-radius: var(--wpbt-radius-sm); padding: 9px 12px; font-size: 12.5px;
}
.wpbt-duplicates a { color: var(--wpbt-signal); font-weight: 700; }
.wpbt-duplicates ul { margin: 6px 0 0; padding-left: 18px; }

.wpbt-screenshot-zone {
	border: 1.5px dashed var(--wpbt-border); border-radius: var(--wpbt-radius); padding: 22px; text-align: center;
	background: var(--wpbt-surface); transition: border-color .15s ease, background .15s ease;
}
.wpbt-screenshot-zone.is-dragover { border-color: var(--wpbt-accent); background: rgba(52,87,213,0.05); }
.wpbt-screenshot-hint { font-size: 12.5px; color: var(--wpbt-text-muted); margin: 0 0 12px 0; text-transform: none; letter-spacing: normal; font-weight: 400; }

.wpbt-btn {
	border: none; border-radius: var(--wpbt-radius-sm); padding: 8px 14px; font-size: 12.5px; font-weight: 600;
	cursor: pointer; transition: transform .1s ease, opacity .15s ease, box-shadow .15s ease; font-family: inherit;
	display: inline-flex; align-items: center; gap: 6px;
}
.wpbt-btn:active { transform: scale(0.97); }
.wpbt-btn--primary { background: var(--wpbt-accent); color: #fff; box-shadow: 0 1px 2px rgba(16,19,26,0.08); }
.wpbt-btn--primary:hover { opacity: 0.92; }
.wpbt-btn--secondary { background: var(--wpbt-surface); border: 1px solid var(--wpbt-border); color: var(--wpbt-text); }
.wpbt-btn--large { padding: 11px 20px; font-size: 13.5px; }

/* In einer Toolbar direkt neben einem Dropdown: exakt dieselbe Höhe, damit
   nichts "reingeklatscht" wirkt. */
.wpbt-main__header-actions .wpbt-btn { height: 34px; padding: 0 14px; }

.wpbt-locked-project { display: flex; align-items: center; gap: 8px; background: var(--wpbt-surface); border: 1px solid var(--wpbt-border); border-radius: var(--wpbt-radius-sm); padding: 9px 12px; font-size: 13.5px; text-transform: none; font-weight: 500; }
.wpbt-locked-project__client { color: var(--wpbt-text-faint); font-weight: 400; font-family: var(--wpbt-font-mono); font-size: 12px; }
.wpbt-color-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

.wpbt-annotator { margin-top: 12px; border: 1px solid var(--wpbt-border); border-radius: var(--wpbt-radius); overflow: hidden; background: var(--wpbt-surface); }
.wpbt-annotator__toolbar { display: flex; gap: 6px; padding: 9px; background: var(--wpbt-surface-2); border-bottom: 1px solid var(--wpbt-border); align-items: center; }
.wpbt-tool-btn {
	width: 30px; height: 30px; border-radius: var(--wpbt-radius-sm); border: 1px solid var(--wpbt-border); background: var(--wpbt-surface);
	cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.wpbt-tool-btn.is-active { border-color: var(--wpbt-accent); background: rgba(52,87,213,0.12); }
.wpbt-tool-btn--danger { margin-left: auto; color: var(--wpbt-signal); }
#wpbt-color-picker { width: 30px; height: 30px; border-radius: var(--wpbt-radius-sm); border: 1px solid var(--wpbt-border); padding: 2px; cursor: pointer; }

.wpbt-annotator__canvas-wrap { max-height: 440px; overflow: auto; background: #0b0e14; display: flex; justify-content: center; }
#wpbt-canvas { cursor: crosshair; max-width: 100%; }

.wpbt-form-footer { display: flex; align-items: center; gap: 14px; }
.wpbt-form-message { font-size: 12.5px; }
.wpbt-form-message.is-success { color: var(--wpbt-success); }
.wpbt-form-message.is-error { color: var(--wpbt-signal); }

/* ---------- Bug-Detail (Ticket-Ansicht) ---------- */
.wpbt-single-grid { display: grid; grid-template-columns: 1fr 220px; gap: 40px; align-items: start; }
.wpbt-back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 22px; font-size: 12px; color: var(--wpbt-text-muted); text-decoration: none; font-weight: 600; }
.wpbt-back-link:hover { color: var(--wpbt-accent); }

.wpbt-single__id { font-family: var(--wpbt-font-mono); color: var(--wpbt-text-faint); font-size: 12px; }
.wpbt-single__header { margin-bottom: 28px; }
.wpbt-single__header h2 { margin: 6px 0 10px; font-size: 20px; letter-spacing: -0.01em; line-height: 1.3; }
.wpbt-single__title-row { display: flex; align-items: baseline; gap: 8px; }
.wpbt-single__title-row .wpbt-status-dot { flex-shrink: 0; transform: translateY(-2px); }
.wpbt-single__meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.wpbt-single__meta { color: var(--wpbt-text-faint); font-size: 11.5px; margin: 0; font-family: var(--wpbt-font-mono); }
.wpbt-single__meta-sep { color: var(--wpbt-border); font-size: 11px; }

/* Kategorie als Chip mit Icon + Name (statt bloßem Icon) – überall dort
   verwendbar, wo eine Kategorie im Kontext von Meta-Infos steht. */
.wpbt-cat-chip {
	display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px;
	font-size: 11px; font-weight: 700;
}

.wpbt-filter-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }

/* Nebeneinander liegende Spalten pro Plattform (mehrere unabhängige
   Versionsstände, z. B. iOS/Android/Web) – bricht auf schmalen Bildschirmen
   auf eine Spalte um. */
.wpbt-changelog-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; align-items: start; }
.wpbt-changelog-col { background: var(--wpbt-surface); border: 1px solid var(--wpbt-border); border-radius: var(--wpbt-radius); padding: 16px; }
.wpbt-changelog-col__title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; margin: 0 0 12px; color: var(--wpbt-text); }
.wpbt-changelog-col__list { display: flex; flex-direction: column; gap: 2px; }
.wpbt-changelog-col__item {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px; border-radius: 8px;
	text-decoration: none; font-size: 12.5px;
}
.wpbt-changelog-col__item:hover { background: var(--wpbt-surface-2); }
.wpbt-changelog-col__version { font-weight: 700; color: var(--wpbt-text); font-family: var(--wpbt-font-mono); }
.wpbt-changelog-col__date { color: var(--wpbt-text-faint); font-size: 11px; flex-shrink: 0; }
.wpbt-changelog-col__more {
	display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wpbt-border);
	font-size: 11.5px; font-weight: 600; color: var(--wpbt-accent); text-decoration: none;
}
.wpbt-changelog-col__more:hover { text-decoration: underline; }
@media (max-width: 640px) { .wpbt-changelog-cols { grid-template-columns: 1fr; } }
.wpbt-changelog-hint { font-size: 12px; color: var(--wpbt-text-faint); margin: -10px 0 18px; }
.wpbt-filter-pill {
	display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: 999px;
	border: 1px solid var(--wpbt-border); background: var(--wpbt-surface); color: var(--wpbt-text-muted);
	font-size: 12px; font-weight: 600; text-decoration: none; transition: all .12s ease;
}
.wpbt-filter-pill:hover { border-color: var(--wpbt-accent); color: var(--wpbt-accent); }
.wpbt-filter-pill.is-active { background: var(--wpbt-accent); border-color: var(--wpbt-accent); color: #fff; }
.wpbt-single__description { font-size: 13.5px; line-height: 1.7; color: var(--wpbt-text); margin-bottom: 28px; }
.wpbt-single__description p:first-child { margin-top: 0; }
.wpbt-single__description p:last-child { margin-bottom: 0; }

.wpbt-meta-panel { background: var(--wpbt-surface); border: 1px solid var(--wpbt-border); border-radius: var(--wpbt-radius); padding: 20px; }
.wpbt-meta-panel__row { display: flex; flex-direction: column; gap: 5px; padding: 13px 0; border-bottom: 1px solid var(--wpbt-border); }
.wpbt-meta-panel__row:last-child { border-bottom: none; padding-bottom: 0; }
.wpbt-meta-panel__row:first-child { padding-top: 0; }
.wpbt-meta-panel__label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--wpbt-text-faint); }
.wpbt-meta-panel__value { font-size: 13px; font-weight: 600; }

.wpbt-priority-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; }
.wpbt-priority-tag::before { content: ''; width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.wpbt-priority-tag--low::before { background: #7dabff; }
.wpbt-priority-tag--medium::before { background: #e0a731; }
.wpbt-priority-tag--high::before { background: #ef7d3a; }
.wpbt-priority-tag--critical::before { background: var(--wpbt-signal); }

.wpbt-status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }

.wpbt-portal a { color: inherit; text-decoration: none; }
.wpbt-portal .wpbt-icon { flex-shrink: 0; vertical-align: -3px; }
.wpbt-single__description a, .wpbt-thread-item__content a {
	color: var(--wpbt-accent); text-decoration: underline; text-underline-offset: 2px;
}

.wpbt-attachments { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 28px; }

.wpbt-attachment-card {
	position: relative; border: 1px solid var(--wpbt-border); border-radius: var(--wpbt-radius); overflow: hidden;
	background: var(--wpbt-surface); display: flex; flex-direction: column;
}
.wpbt-attachment-card__media {
	display: flex; align-items: center; justify-content: center; height: 100px; background: var(--wpbt-surface-2);
	overflow: hidden;
}
.wpbt-attachment-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.wpbt-attachment-card__media:hover img { transform: scale(1.04); }
.wpbt-attachment-card__media--file { color: var(--wpbt-text-faint); }
.wpbt-attachment-card__name {
	display: block; padding: 8px 10px; font-size: 11.5px; color: var(--wpbt-text-muted); text-align: left;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--wpbt-border);
}
.wpbt-attachment-card__name:hover { color: var(--wpbt-accent); }

/* Fallback, falls ein Bild nicht lädt: statt kaputtem Icon+Alt-Text ein sauberes Icon anzeigen */
.wpbt-attachment-card--broken .wpbt-attachment-card__media { position: relative; }
.wpbt-attachment-card--broken .wpbt-attachment-card__media img { display: none; }
.wpbt-attachment-card--broken .wpbt-attachment-card__media::after {
	content: ''; width: 24px; height: 24px; opacity: .3;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 20'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 20'/%3E%3C/svg%3E") center / contain no-repeat;
	background-color: var(--wpbt-text-faint);
}

.wpbt-attachment-lock-badge {
	position: absolute; top: 6px; right: 6px; z-index: 1; background: rgba(16,19,26,0.65); color: #fff;
	width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px;
}
.wpbt-attachment-card--locked .wpbt-attachment-card__media img { filter: blur(6px); }
.wpbt-attachment-card--locked-hint { align-items: center; justify-content: center; padding: 16px 10px; text-align: center; gap: 6px; background: var(--wpbt-surface-2); }
.wpbt-attachment-card--locked-hint .wpbt-attachment-lock-badge { position: static; background: transparent; color: var(--wpbt-text-faint); font-size: 20px; width: auto; height: auto; }
.wpbt-attachment-card--locked-hint .wpbt-attachment-card__name { border-top: none; white-space: normal; font-size: 11px; }

/* ---------- Kommentare als Thread ---------- */
.wpbt-comments { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--wpbt-border); }
.wpbt-comments h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--wpbt-text-faint); margin-bottom: 18px; }
.wpbt-thread { display: flex; flex-direction: column; }
.wpbt-thread-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 0; }
.wpbt-thread-item__avatar { padding-top: 2px; }
.wpbt-thread-item__body { border-bottom: 1px solid var(--wpbt-border); padding-bottom: 14px; }
.wpbt-thread-item:last-child .wpbt-thread-item__body { border-bottom: none; }
.wpbt-thread-item__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.wpbt-thread-item__author { font-size: 12.5px; font-weight: 700; }
.wpbt-thread-item__date { font-size: 11px; color: var(--wpbt-text-faint); font-family: var(--wpbt-font-mono); }
.wpbt-thread-item__content { font-size: 13px; line-height: 1.55; }
.wpbt-thread-item__content p { margin: 0; }


/* ---------- "Bald verfügbar" Platzhalter ---------- */
.wpbt-coming-soon { text-align: center; padding: 60px 20px; color: var(--wpbt-text-muted); }
.wpbt-coming-soon h3 { color: var(--wpbt-text); font-size: 15px; margin-bottom: 6px; }
.wpbt-coming-soon p { font-size: 13px; margin: 0; }

/* ---------- Roadmap ---------- */
.wpbt-roadmap-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.wpbt-roadmap-col__head {
	display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .03em; color: var(--wpbt-text-muted); margin-bottom: 12px;
}
.wpbt-roadmap-card {
	display: block; background: var(--wpbt-surface); border: 1px solid var(--wpbt-border); border-radius: var(--wpbt-radius);
	padding: 13px 14px; margin-bottom: 10px; transition: box-shadow .15s ease, border-color .15s ease;
}
.wpbt-roadmap-card:hover { box-shadow: var(--wpbt-shadow-lg); border-color: var(--wpbt-accent); }
.wpbt-roadmap-card h4 { margin: 0 0 5px; font-size: 13px; font-weight: 700; }
.wpbt-roadmap-card p { margin: 0 0 8px; font-size: 12px; color: var(--wpbt-text-muted); line-height: 1.5; }
.wpbt-roadmap-card__target {
	display: inline-block; font-family: var(--wpbt-font-mono); font-size: 10.5px; color: var(--wpbt-accent);
	background: var(--wpbt-surface-2); padding: 2px 8px; border-radius: 5px;
}
.wpbt-roadmap-col__empty { font-size: 12px; color: var(--wpbt-text-faint); }

@media (max-width: 720px) {
	.wpbt-roadmap-columns { grid-template-columns: 1fr; }
}

/* ---------- Changelog ---------- */
.wpbt-changelog { display: flex; flex-direction: column; gap: 26px; max-width: 640px; }
.wpbt-changelog-entry { position: relative; padding-left: 20px; border-left: 2px solid var(--wpbt-border); }
.wpbt-changelog-entry::before {
	content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%;
	background: var(--wpbt-accent); border: 2px solid var(--wpbt-bg);
}
.wpbt-changelog-entry__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.wpbt-changelog-entry__version { font-family: var(--wpbt-font-mono); font-weight: 700; font-size: 13.5px; color: var(--wpbt-text); }
.wpbt-changelog-entry__date { font-size: 12px; color: var(--wpbt-text-faint); }
.wpbt-changelog-entry__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wpbt-changelog-entry__list li {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 8px 0;
	border-bottom: 1px dashed var(--wpbt-border);
}
.wpbt-changelog-entry__list li:last-child { border-bottom: none; }
.wpbt-changelog-entry__list li::before { content: '–'; color: var(--wpbt-text-faint); margin-right: 2px; }
.wpbt-changelog-entry__title { font-size: 13px; font-weight: 600; }
.wpbt-changelog-entry__desc { flex-basis: 100%; margin: 2px 0 0 16px; font-size: 12px; color: var(--wpbt-text-muted); line-height: 1.55; }

.wpbt-changelog-grouped { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.wpbt-changelog-group {
	background: var(--wpbt-surface); border: 1px solid var(--wpbt-border); border-left: 3px solid var(--wpbt-text-faint);
	border-radius: var(--wpbt-radius); padding: 16px 20px;
}
.wpbt-changelog-group--added { border-left-color: var(--wpbt-accent); }
.wpbt-changelog-group--improved { border-left-color: #8b5cf6; }
.wpbt-changelog-group--fixed { border-left-color: var(--wpbt-success); }
.wpbt-changelog-group--removed { border-left-color: var(--wpbt-signal); }
.wpbt-changelog-group__title { margin: 0 0 8px; }
.wpbt-changelog-group .wpbt-changelog-entry__list { margin: 0; }

/* Aufgehübschter Detail-Header: Kategorie + Kanal einmal oben, farbiger
   Akzentstreifen statt bei jedem einzelnen Eintrag ein Badge zu wiederholen. */
.wpbt-changelog-detail__header {
	background: var(--wpbt-surface); border: 1px solid var(--wpbt-border); border-top: 3px solid var(--wpbt-cl-accent);
	border-radius: var(--wpbt-radius); padding: 22px 24px; margin-bottom: 4px;
}
.wpbt-changelog-detail__header-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wpbt-changelog-detail__header h2 { margin: 0; }
.wpbt-changelog-detail__header .wpbt-changelog-entry__version { font-size: 22px; }
.wpbt-changelog-detail__header .wpbt-single__meta { margin-top: 6px; }

.wpbt-changelog-type {
	font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 5px;
	flex-shrink: 0;
}
.wpbt-changelog-type--added { background: rgba(52,87,213,0.12); color: var(--wpbt-accent); }
.wpbt-changelog-type--improved { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.wpbt-changelog-type--fixed { background: rgba(31,157,107,0.12); color: var(--wpbt-success); }
.wpbt-changelog-type--removed { background: rgba(228,87,46,0.12); color: var(--wpbt-signal); }

.wpbt-changelog-channel {
	display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; margin-left: 8px;
}
.wpbt-changelog-channel--released { background: rgba(31,157,107,0.12); color: var(--wpbt-success); }
.wpbt-changelog-channel--staging { background: rgba(217,119,6,0.12); color: #d97706; }
.wpbt-changelog-channel--beta { background: rgba(139,92,246,0.12); color: #8b5cf6; }

/* ---------- Dokumentation ---------- */
.wpbt-docs-search {
	display: flex; align-items: center; gap: 10px; background: var(--wpbt-surface); border: 1px solid var(--wpbt-border);
	border-radius: var(--wpbt-radius); padding: 12px 16px; margin-bottom: 22px; max-width: 480px;
}
.wpbt-docs-search .wpbt-icon { color: var(--wpbt-text-faint); flex-shrink: 0; }
.wpbt-docs-search input[type="text"] { border: none; background: transparent; font-size: 14px; width: 100%; outline: none; color: var(--wpbt-text); font-family: inherit; }
.wpbt-docs-search__results-count { font-size: 12.5px; color: var(--wpbt-text-faint); margin-bottom: 14px; }

.wpbt-docs-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.wpbt-docs-category-card { background: var(--wpbt-surface); border: 1px solid var(--wpbt-border); border-radius: var(--wpbt-radius); padding: 18px 20px; }
.wpbt-docs-category-card h3 { margin: 0 0 12px; font-size: 13.5px; font-weight: 700; }
.wpbt-docs-category-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.wpbt-docs-category-card a { font-size: 13px; color: var(--wpbt-text-muted); text-decoration: none; }
.wpbt-docs-category-card a:hover { color: var(--wpbt-accent); }

.wpbt-docs-detail-grid { display: grid; grid-template-columns: 1fr 200px; gap: 36px; align-items: start; }
.wpbt-docs-article-content { font-size: 14px; line-height: 1.75; }
.wpbt-docs-article-content img { max-width: 100%; height: auto; border-radius: 8px; }
.wpbt-docs-article-content h1, .wpbt-docs-article-content h2, .wpbt-docs-article-content h3 { margin-top: 1.4em; margin-bottom: .5em; }
.wpbt-docs-article-content ul, .wpbt-docs-article-content ol { padding-left: 22px; }

.wpbt-docs-related h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--wpbt-text-faint); margin-bottom: 10px; }
.wpbt-docs-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wpbt-docs-related a { font-size: 12.5px; color: var(--wpbt-text-muted); text-decoration: none; display: block; padding: 5px 8px; border-radius: 6px; }
.wpbt-docs-related a:hover { background: var(--wpbt-surface-2); color: var(--wpbt-text); }
.wpbt-docs-related li.is-current a { color: var(--wpbt-accent); font-weight: 600; background: var(--wpbt-surface-2); }

@media (max-width: 720px) {
	.wpbt-docs-detail-grid { grid-template-columns: 1fr; }
}

/* ---------- Dashboard ---------- */
.wpbt-dashboard-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.wpbt-dashboard-head__client { font-size: 12.5px; color: var(--wpbt-text-faint); margin: 2px 0 0; font-family: var(--wpbt-font-mono); }
.wpbt-dashboard-head__desc { font-size: 13.5px; color: var(--wpbt-text-muted); line-height: 1.6; margin: 8px 0 24px; }

.wpbt-dashboard-stats { display: none; } /* ersetzt durch .wpbt-dashboard-hero */

.wpbt-dashboard-side-card { background: var(--wpbt-surface); border: 1px solid var(--wpbt-border); border-radius: var(--wpbt-radius); overflow: hidden; }
.wpbt-dashboard-side-card__row { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--wpbt-border); font-size: 12.5px; }
.wpbt-dashboard-side-card__row:last-child { border-bottom: none; }
.wpbt-dashboard-side-card__row:hover { background: var(--wpbt-surface-2); }
.wpbt-dashboard-side-card__row-label { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpbt-dashboard-side-card__row-meta { display: flex; align-items: center; gap: 4px; font-family: var(--wpbt-font-mono); font-size: 11.5px; color: var(--wpbt-text-faint); flex-shrink: 0; margin-left: 10px; }
.wpbt-dashboard-side-card__row-meta .wpbt-status-dot { margin-left: 6px; }
.wpbt-dashboard-side-card__row-meta .wpbt-status-dot:first-child { margin-left: 0; }

.wpbt-dashboard-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 24px; }
.wpbt-dashboard-stats-row .wpbt-dashboard-side-card__row { flex-direction: column; align-items: flex-start; gap: 4px; border-bottom: none; border-right: 1px solid var(--wpbt-border); }
.wpbt-dashboard-stats-row .wpbt-dashboard-side-card__row:last-child { border-right: none; }
.wpbt-dashboard-stats-row .wpbt-dashboard-side-card__row-label { font-size: 11px; color: var(--wpbt-text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.wpbt-dashboard-stats-row .wpbt-dashboard-side-card__row-meta { font-size: 20px; font-weight: 800; color: var(--wpbt-text); }

@media (max-width: 720px) {
	.wpbt-dashboard-stats-row { grid-template-columns: repeat(2, 1fr); }
	.wpbt-dashboard-stats-row .wpbt-dashboard-side-card__row:nth-child(2) { border-right: none; }
	.wpbt-dashboard-stats-row .wpbt-dashboard-side-card__row:nth-child(1), .wpbt-dashboard-stats-row .wpbt-dashboard-side-card__row:nth-child(2) { border-bottom: 1px solid var(--wpbt-border); }
}

.wpbt-dashboard-columns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: start; }
.wpbt-dashboard-col__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.wpbt-dashboard-col__head h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--wpbt-text-faint); margin: 0; }
.wpbt-dashboard-col__head a { font-size: 12px; color: var(--wpbt-accent); font-weight: 600; text-decoration: none; }
.wpbt-dashboard-col__head a:hover { text-decoration: underline; }

.wpbt-dashboard-roadmap-mini { display: flex; flex-direction: column; gap: 10px; background: var(--wpbt-surface); border: 1px solid var(--wpbt-border); border-radius: var(--wpbt-radius); padding: 14px 16px; }
.wpbt-dashboard-roadmap-mini div { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--wpbt-text-muted); }
.wpbt-dashboard-roadmap-mini strong { margin-left: auto; color: var(--wpbt-text); font-family: var(--wpbt-font-mono); }

.wpbt-dashboard-changelog-mini {
	display: flex; align-items: center; justify-content: space-between; background: var(--wpbt-surface); border: 1px solid var(--wpbt-border);
	border-radius: var(--wpbt-radius); padding: 14px 16px; text-decoration: none;
}
.wpbt-dashboard-changelog-mini:hover { border-color: var(--wpbt-accent); }

@media (max-width: 820px) {
	.wpbt-dashboard-stats { grid-template-columns: repeat(2, 1fr); }
	.wpbt-dashboard-columns { grid-template-columns: 1fr; }
}

/* ---------- Wünsche ---------- */
.wpbt-wish-form {
	background: var(--wpbt-surface); border: 1px solid var(--wpbt-border); border-radius: var(--wpbt-radius);
	padding: 18px 20px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 14px; max-width: 560px;
}
.wpbt-wish-list { display: flex; flex-direction: column; gap: 10px; }
.wpbt-wish-card {
	display: flex; gap: 14px; background: var(--wpbt-surface); border: 1px solid var(--wpbt-border);
	border-radius: var(--wpbt-radius); padding: 16px 18px;
}
.wpbt-wish-vote {
	display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--wpbt-surface-2);
	border: 1px solid var(--wpbt-border); border-radius: 10px; padding: 8px 12px; cursor: pointer; color: var(--wpbt-text-muted);
	transition: all .15s ease; flex-shrink: 0; height: fit-content;
}
.wpbt-wish-vote:hover { border-color: var(--wpbt-accent); color: var(--wpbt-accent); }
.wpbt-wish-vote.is-voted { background: var(--wpbt-accent); border-color: var(--wpbt-accent); color: #fff; }

.wpbt-roadmap-reactions { display: flex; gap: 8px; margin: 4px 0 20px; }
.wpbt-reaction-btn {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
	border: 1px solid var(--wpbt-border); background: var(--wpbt-surface); cursor: pointer;
	font-size: 13px; transition: all .12s ease;
}
.wpbt-reaction-btn:hover { border-color: var(--wpbt-accent); }
.wpbt-reaction-btn.is-active { background: var(--wpbt-accent-soft, rgba(52,87,213,0.1)); border-color: var(--wpbt-accent); }
.wpbt-reaction-btn__icon { display: inline-flex; color: var(--wpbt-text-muted); }
.wpbt-reaction-btn.is-active .wpbt-reaction-btn__icon { color: var(--wpbt-accent); }
.wpbt-reaction-btn__count { font-weight: 700; color: var(--wpbt-text-muted); font-size: 12px; }
.wpbt-reaction-btn.is-active .wpbt-reaction-btn__count { color: var(--wpbt-accent); }
.wpbt-reaction-btn--readonly { cursor: default; opacity: 0.7; }
.wpbt-reaction-btn--readonly:hover { border-color: var(--wpbt-border); }

/* Schreibgeschützte Reaktions-Zusammenfassung auf der Übersichtsseite –
   dieselben Icons, aber klein und nicht klickbar. */
.wpbt-roadmap-card__reactions { display: flex; gap: 8px; margin-top: 8px; }
.wpbt-roadmap-card__reaction { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--wpbt-text-faint); }
.wpbt-roadmap-card__reaction svg { width: 11px; height: 11px; }
.wpbt-wish-vote__count { font-family: var(--wpbt-font-mono); font-weight: 700; font-size: 13px; }
.wpbt-wish-card__body { flex: 1; min-width: 0; }
.wpbt-wish-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.wpbt-wish-card__head h4 { margin: 0; font-size: 14px; font-weight: 700; }
.wpbt-wish-card p { margin: 0 0 8px; font-size: 12.5px; color: var(--wpbt-text-muted); line-height: 1.5; }
.wpbt-wish-card__meta { font-size: 11.5px; color: var(--wpbt-text-faint); }

.wpbt-wish-card__attachments { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.wpbt-wish-card__attachments img {
	width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--wpbt-border); display: block;
}
.wpbt-wish-card__file {
	display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--wpbt-text-muted);
	background: var(--wpbt-surface-2); border-radius: 8px; padding: 8px 12px; text-decoration: none;
}
.wpbt-wish-card__file:hover { color: var(--wpbt-accent); }
.wpbt-wish-status--new { background: rgba(107,114,128,0.12); color: #6b7280; }
.wpbt-wish-status--under_review { background: rgba(217,119,6,0.12); color: #d97706; }
.wpbt-wish-status--planned { background: rgba(52,87,213,0.12); color: var(--wpbt-accent); }
.wpbt-wish-status--done { background: rgba(31,157,107,0.12); color: var(--wpbt-success); }
.wpbt-wish-status--rejected { background: rgba(228,87,46,0.12); color: var(--wpbt-signal); }

/* ---------- FAQ ---------- */
.wpbt-faq-list { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.wpbt-faq-item { background: var(--wpbt-surface); border: 1px solid var(--wpbt-border); border-radius: var(--wpbt-radius); overflow: hidden; }
.wpbt-faq-item__question {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left;
	background: transparent; border: none; padding: 15px 18px; font-size: 13.5px; font-weight: 600; color: var(--wpbt-text);
	cursor: pointer; font-family: inherit;
}
.wpbt-faq-item__chevron { flex-shrink: 0; transition: transform .2s ease; color: var(--wpbt-text-faint); }
.wpbt-faq-item.is-open .wpbt-faq-item__chevron { transform: rotate(180deg); }
.wpbt-faq-item__answer { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.wpbt-faq-item.is-open .wpbt-faq-item__answer { max-height: 600px; }
.wpbt-faq-item__answer-inner { padding: 0 18px 16px; font-size: 13px; color: var(--wpbt-text-muted); line-height: 1.6; }

.wpbt-row--changelog { display: flex; align-items: center; padding: 14px 16px; }
.wpbt-row--changelog .wpbt-row__title { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.wpbt-row--changelog .wpbt-row__meta { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--wpbt-text-faint); }

/* ---------- Lightbox ---------- */
.wpbt-lightbox {
	position: fixed; inset: 0; background: rgba(10,12,18,0.92); z-index: 100000;
	display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s ease;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Ohne diese Regel überschreibt "display: flex" oben das hidden-Attribut,
   wodurch die Lightbox unsichtbar (opacity:0) aber weiterhin über der
   gesamten Seite liegt und JEDEN Klick abfängt – auch auf das Menü. */
.wpbt-lightbox[hidden] { display: none !important; }
.wpbt-lightbox.is-visible { opacity: 1; }
.wpbt-lightbox__figure { max-width: 88vw; max-height: 86vh; margin: 0; display: flex; flex-direction: column; align-items: center; }
.wpbt-lightbox__img { max-width: 88vw; max-height: 78vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); object-fit: contain; }
.wpbt-lightbox__caption { color: rgba(255,255,255,0.65); font-size: 12.5px; margin-top: 14px; text-align: center; }
.wpbt-lightbox__close {
	position: absolute; top: 20px; right: 24px; background: rgba(255,255,255,0.1); border: none; color: #fff;
	width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
	transition: background .15s ease;
}
.wpbt-lightbox__close:hover { background: rgba(255,255,255,0.2); }
.wpbt-lightbox__nav {
	position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: #fff;
	width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
	transition: background .15s ease;
}
.wpbt-lightbox__nav:hover { background: rgba(255,255,255,0.2); }
.wpbt-lightbox__prev { left: 20px; }
.wpbt-lightbox__next { right: 20px; }

@media (max-width: 640px) {
	.wpbt-lightbox__nav { width: 36px; height: 36px; }
	.wpbt-lightbox__prev { left: 8px; }
	.wpbt-lightbox__next { right: 8px; }
}

@media (max-width: 720px) {
	.wpbt-app { grid-template-columns: 1fr; padding-bottom: 66px; /* Platz für die Bottom-Nav */ }

	/* Sidebar wird zur fixen Bottom-Navigation (App-Muster) */
	.wpbt-sidebar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; flex-direction: row;
		padding: 0; gap: 0; border-right: none; border-top: 1px solid var(--wpbt-border);
		box-shadow: 0 -4px 16px rgba(16,19,26,0.06);
	}
	.wpbt-sidebar__project, .wpbt-sidebar__back, .wpbt-sidebar__footer { display: none; }

	.wpbt-nav { flex-direction: row; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0; }
	.wpbt-nav-item {
		flex: 1 0 auto; min-width: 64px; flex-direction: column; align-items: center; justify-content: center;
		gap: 3px; padding: 9px 6px 7px; border-left: none; border-top: 2px solid transparent; border-radius: 0;
		font-size: 10px; text-align: center; white-space: nowrap;
	}
	.wpbt-nav-item.is-active { border-left-color: transparent; border-top-color: var(--wpbt-accent); background: transparent; }
	.wpbt-nav-item--soon .wpbt-nav-item__soon-tag { display: none; }

	/* Mobiler Kopfbereich ersetzt die versteckte Sidebar-Kopfzeile: Projekt-
	   Kontext + Theme-Toggle wandern nach oben in den Hauptbereich. */
	.wpbt-mobile-topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--wpbt-border); }
	.wpbt-mobile-topbar__project { display: flex; align-items: center; justify-content: center; }
	.wpbt-mobile-topbar a.wpbt-sidebar__back-mobile { font-size: 12px; font-weight: 600; color: var(--wpbt-text-muted); text-decoration: none; flex-shrink: 0; }

	.wpbt-main { padding: 18px; }
	.wpbt-main-inner { padding-bottom: 8px; }
	.wpbt-form-row--split { grid-template-columns: 1fr; }
	.wpbt-single-grid { grid-template-columns: 1fr; }

	/* Größere Touch-Ziele */
	.wpbt-btn { min-height: 38px; }
	.wpbt-row, .wpbt-wish-card, .wpbt-kanban-card { padding: 14px; }
}

@media (min-width: 721px) {
	.wpbt-mobile-topbar { display: none; }
}

/* ---------- Login / Registrierung ---------- */
.wpbt-auth { display: flex; align-items: center; justify-content: center; padding: 50px 20px; }
.wpbt-auth__card { width: 100%; max-width: 360px; text-align: center; }
.wpbt-auth__icon {
	width: 42px; height: 42px; border-radius: 10px; background: var(--wpbt-surface-2); color: var(--wpbt-accent);
	display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.wpbt-auth__title { font-size: 18px; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.01em; }
.wpbt-auth__subtitle { font-size: 12.5px; color: var(--wpbt-text-muted); margin: 0 0 22px; }

.wpbt-auth__switch { display: inline-flex; background: var(--wpbt-surface-2); border-radius: 999px; padding: 3px; margin-bottom: 20px; }
.wpbt-auth__switch-btn {
	border: none; background: transparent; padding: 7px 16px; border-radius: 999px; font-size: 12px; font-weight: 700;
	color: var(--wpbt-text-muted); cursor: pointer; font-family: inherit;
}
.wpbt-auth__switch-btn.is-active { background: var(--wpbt-surface); color: var(--wpbt-text); box-shadow: var(--wpbt-shadow); }

.wpbt-auth__error {
	background: rgba(228,87,46,0.08); border: 1px solid rgba(228,87,46,0.3); color: var(--wpbt-signal);
	border-radius: var(--wpbt-radius-sm); padding: 10px 12px; font-size: 12.5px; margin-bottom: 16px; text-align: left;
}
.wpbt-auth__notice {
	background: rgba(31,157,107,0.08); border: 1px solid rgba(31,157,107,0.3); color: var(--wpbt-success);
	border-radius: var(--wpbt-radius-sm); padding: 10px 12px; font-size: 12.5px; margin-bottom: 4px; text-align: left;
}

.wpbt-auth__form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.wpbt-auth__remember { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--wpbt-text-muted); font-weight: 500; }
.wpbt-auth__submit { width: 100%; margin-top: 4px; }
.wpbt-auth__forgot { display: block; text-align: center; font-size: 12px; color: var(--wpbt-text-faint); margin-top: 4px; }
.wpbt-auth__forgot:hover { color: var(--wpbt-accent); }
.wpbt-auth__hint { font-size: 11.5px; color: var(--wpbt-text-faint); text-align: center; margin: 4px 0 0; }

/* Header-Zeile mit Filter + Aktions-Button nebeneinander */
.wpbt-main__header-actions { display: flex; align-items: center; gap: 10px; }

/* Login-Aufforderung für Gäste bei geschützten Aktionen */
.wpbt-login-prompt {
	background: var(--wpbt-surface); border: 1px dashed var(--wpbt-border); border-radius: var(--wpbt-radius);
	padding: 22px; text-align: center; max-width: 420px;
}
.wpbt-login-prompt p { font-size: 13px; color: var(--wpbt-text-muted); margin: 0 0 14px; }

/* Kompakte einzeilige Variante – ersetzt die Compose-Box direkt (statt einer
   zweiten Extra-Box unter dem Leer-Zustand). */
.wpbt-login-prompt-inline {
	display: flex; align-items: center; gap: 10px; background: var(--wpbt-surface); border: 1px solid var(--wpbt-border);
	border-radius: var(--wpbt-radius); padding: 12px 14px; margin-top: 16px; color: var(--wpbt-text-muted);
}
.wpbt-login-prompt-inline svg { flex-shrink: 0; color: var(--wpbt-text-faint); }
.wpbt-login-prompt-inline span { flex: 1; font-size: 12.5px; }

/* Anmelden-Button unten in der Sidebar für Gäste */
.wpbt-sidebar__login-btn {
	display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #fff;
	background: var(--wpbt-accent); padding: 8px 14px; border-radius: 8px; text-decoration: none;
}
.wpbt-sidebar__login-btn:hover { opacity: .9; }

.wpbt-sidebar__account-link {
	display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--wpbt-text-muted);
	text-decoration: none; padding: 6px 10px; border-radius: 8px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wpbt-sidebar__account-link:hover, .wpbt-sidebar__account-link.is-active { background: var(--wpbt-surface-2); color: var(--wpbt-text); }

.wpbt-account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 900px; }
.wpbt-panel-block { background: var(--wpbt-surface); border: 1px solid var(--wpbt-border); border-radius: var(--wpbt-radius); padding: 18px 20px; }
.wpbt-panel-block h3 { margin: 0 0 14px; font-size: 13px; font-weight: 700; }
.wpbt-account-hint { font-size: 12px; color: var(--wpbt-text-faint); margin: -6px 0 14px; }
.wpbt-account-sublist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wpbt-account-sublist li { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid var(--wpbt-border); }
.wpbt-account-sublist li:last-child { border-bottom: none; }
.wpbt-account-sublist__remove { background: none; border: none; color: var(--wpbt-signal); font-size: 11.5px; cursor: pointer; padding: 0; text-decoration: underline; }

.wpbt-lang-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.wpbt-lang-picker form { margin: 0; }
.wpbt-lang-picker__option {
	display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
	border: 1px solid var(--wpbt-border); background: var(--wpbt-surface); color: var(--wpbt-text-muted);
	font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .12s ease;
}
.wpbt-lang-picker__flag { font-size: 16px; }
.wpbt-lang-picker__option:hover { border-color: var(--wpbt-accent); }
.wpbt-lang-picker__option.is-selected { border-color: var(--wpbt-accent); background: color-mix(in srgb, var(--wpbt-accent) 10%, transparent); color: var(--wpbt-text); }

/* Schönerer Leer-Zustand für Kommentare/Feedback */
.wpbt-comments-empty {
	display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 20px; text-align: center;
	color: var(--wpbt-text-faint); border: 1px dashed var(--wpbt-border); border-radius: var(--wpbt-radius); background: var(--wpbt-surface);
}
.wpbt-comments-empty p { margin: 0; font-size: 12.5px; }

.wpbt-activity-log { margin: 20px 0; border: 1px solid var(--wpbt-border); border-radius: var(--wpbt-radius); background: var(--wpbt-surface); }
.wpbt-activity-log summary {
	cursor: pointer; padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--wpbt-text-muted);
	display: flex; align-items: center; gap: 6px; list-style: none;
}
.wpbt-activity-log summary::-webkit-details-marker { display: none; }
.wpbt-activity-log__list { list-style: none; margin: 0; padding: 0 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.wpbt-activity-log__list li { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding-top: 8px; border-top: 1px dashed var(--wpbt-border); }
.wpbt-activity-log__list li:first-child { border-top: none; padding-top: 0; }
.wpbt-activity-log__text { color: var(--wpbt-text-muted); }
.wpbt-activity-log__time { color: var(--wpbt-text-faint); flex-shrink: 0; font-family: var(--wpbt-font-mono); font-size: 11px; }

/* Floating Action Button: modernes Muster, um "Erstellen" komplett vom
   Filtern/Suchen in der Toolbar zu trennen, statt beides nebeneinander
   in eine Zeile zu quetschen. */
.wpbt-fab {
	position: fixed; right: 32px; bottom: 32px;
	width: 52px; height: 52px; border-radius: 50%; background: var(--wpbt-accent); color: #fff;
	display: flex; align-items: center; justify-content: center; text-decoration: none;
	box-shadow: 0 10px 24px rgba(52,87,213,0.35), 0 2px 6px rgba(16,19,26,0.15);
	transition: transform .15s ease, box-shadow .15s ease; z-index: 40;
}
.wpbt-fab:hover { transform: scale(1.06); box-shadow: 0 14px 30px rgba(52,87,213,0.4), 0 2px 6px rgba(16,19,26,0.15); }
.wpbt-fab:active { transform: scale(0.96); }

@media (max-width: 720px) {
	.wpbt-fab { right: 18px; bottom: 78px; }
}

/* ---------- Seiten-Grundgerüst der eigenen Vollbildschirm-Vorlage ---------- */
/* Liegt AUSSERHALB von .wpbt-portal (Body-Ebene), daher eigene, einfache Regeln. */
.wpbt-page-shell {
	background: #f7f8fa; min-height: 100vh; box-sizing: border-box;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	display: flex; flex-direction: column;
}
body.wpbt-theme-dark .wpbt-page-shell { background: #0b1220; }

.wpbt-page-shell__topbar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 28px; border-bottom: 1px solid #e2e5ea;
}
body.wpbt-theme-dark .wpbt-page-shell__topbar { border-bottom-color: #1e2a3d; }

.wpbt-page-shell__brand { display: flex; align-items: center; text-decoration: none; }
.wpbt-page-shell__brand-name { font-weight: 800; font-size: 15px; color: #10131a; letter-spacing: -0.01em; }
body.wpbt-theme-dark .wpbt-page-shell__brand-name { color: #e8ecf3; }
.wpbt-page-shell__brand img { max-height: 28px; width: auto; display: block; }

.wpbt-page-shell__topbar-right { display: flex; align-items: center; gap: 20px; }
.wpbt-page-shell__user { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #6b7280; }
.wpbt-page-shell__site-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6b7280; text-decoration: none; font-weight: 600; }
.wpbt-page-shell__site-link:hover { color: #3457d5; }

/* Sprachumschalter: schlichtes <details>-Dropdown, funktioniert ohne JS */
.wpbt-lang-switcher { position: relative; }
.wpbt-lang-switcher summary {
	display: flex; align-items: center; gap: 5px; list-style: none; cursor: pointer;
	padding: 5px 9px; border-radius: 999px; border: 1px solid #e2e5ea; font-size: 12px; font-weight: 700;
	color: #374151; user-select: none;
}
.wpbt-lang-switcher summary::-webkit-details-marker { display: none; }
.wpbt-lang-switcher summary:hover { border-color: #3457d5; }
.wpbt-lang-switcher__code { font-family: monospace; letter-spacing: .02em; }
.wpbt-lang-switcher[open] summary { border-color: #3457d5; background: #eef2ff; }

.wpbt-lang-switcher__menu {
	position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border: 1px solid #e2e5ea;
	border-radius: 12px; box-shadow: 0 12px 32px rgba(16,19,26,0.14); padding: 6px; min-width: 170px; z-index: 200;
}
.wpbt-lang-switcher__menu form { margin: 0; }
.wpbt-lang-switcher__menu button {
	display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; border-radius: 8px;
	padding: 9px 10px; font-size: 13px; font-weight: 600; color: #374151; cursor: pointer; text-align: left; font-family: inherit;
}
.wpbt-lang-switcher__menu button:hover { background: #f1f5f9; }
.wpbt-lang-switcher__menu button.is-active { background: #eef2ff; color: #3457d5; }

body.wpbt-theme-dark .wpbt-lang-switcher summary { border-color: #24314a; color: #b7c0cf; }
body.wpbt-theme-dark .wpbt-lang-switcher__menu { background: #101a2c; border-color: #24314a; }
body.wpbt-theme-dark .wpbt-lang-switcher__menu button { color: #b7c0cf; }
body.wpbt-theme-dark .wpbt-lang-switcher__menu button:hover { background: #17233a; }

.wpbt-page-shell__body { padding: 28px; max-width: 1400px; margin: 0 auto; box-sizing: border-box; flex: 1 0 auto; width: 100%; }

.wpbt-page-shell__footer {
	display: flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0;
	padding: 18px 28px; font-size: 11.5px; color: #9aa1ac; border-top: 1px solid #e2e5ea;
}
body.wpbt-theme-dark .wpbt-page-shell__footer { border-top-color: #1e2a3d; color: #5c6577; }
.wpbt-page-shell__footer-sep { opacity: .6; }

@media (max-width: 720px) {
	.wpbt-page-shell__body { padding: 14px; }
	.wpbt-page-shell__topbar { padding: 12px 16px; }
	.wpbt-page-shell__user span { display: none; }
	.wpbt-page-shell__footer { padding: 14px 14px 78px; }
}

/* ---------- Vollbreite: Ausbruch aus dem Theme-Content-Bereich ---------- */
.wpbt-fullbleed {
	position: relative;
	box-sizing: border-box;
}
.wpbt-fullbleed .wpbt-portal {
	max-width: none;
	border-radius: 0;
	border-left: none;
	border-right: none;
}
.wpbt-fullbleed .wpbt-app { min-height: calc(100vh - 60px); }
.wpbt-fullbleed .wpbt-sidebar { padding: 22px 16px; }
.wpbt-fullbleed .wpbt-main { padding: 30px 44px; }

@media (max-width: 720px) {
	.wpbt-fullbleed .wpbt-main { padding: 18px; }
}

/* Innerer Lesebereich bleibt angenehm schmal, auch wenn die Shell volle Breite hat */
.wpbt-main-inner { max-width: 900px; }

/* ---------- Kommentar-Compose-Box (statt Standard-Textarea) ---------- */
.wpbt-compose {
	display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start;
	background: var(--wpbt-surface); border: 1px solid var(--wpbt-border); border-radius: var(--wpbt-radius);
	padding: 10px 12px 10px 12px; margin-top: 16px; transition: border-color .15s ease, box-shadow .15s ease;
}
.wpbt-compose:focus-within { border-color: var(--wpbt-accent); box-shadow: 0 0 0 3px rgba(52,87,213,0.12); }
.wpbt-compose__avatar { margin-top: 2px; }
.wpbt-compose__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wpbt-compose__input {
	border: none !important; background: transparent !important; resize: none; font-family: inherit; font-size: 13px;
	line-height: 1.5; color: var(--wpbt-text); padding: 4px 0 !important; min-height: 22px; max-height: 220px;
	outline: none !important; box-shadow: none !important; overflow-y: auto; display: block; width: 100%;
}
.wpbt-compose__input::placeholder { color: var(--wpbt-text-faint); }
.wpbt-compose__actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 4px; border-top: 1px solid var(--wpbt-border); }
.wpbt-btn--sm { padding: 6px 14px; font-size: 12px; }