﻿/**
 * BoostTool4You
 * Copyright: Illya Beverung
 * Version: 2.2
 * Datum: 21.04.2026
 * Pfad/Datei: assets/css/clipboard-ui.css
 * Beschreibung: Stellt die globalen Clipboard-Bedienelemente für Ausgaben, Karten und schreibgeschützte Felder bereit.
 */

.clipboard-feld-wrapper,
.clipboard-ausgabe-wrapper {
	position: relative;
}

.clipboard-feld-wrapper > .form-control,
.clipboard-suchfeld-wrapper > .form-control,
.clipboard-ausgabe-wrapper > .tool-ergebnis-box {
	transition: box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.clipboard-feld-wrapper > textarea.form-control,
.clipboard-feld-wrapper > input.form-control[type="text"],
.clipboard-feld-wrapper > input.form-control[type="search"],
.clipboard-feld-wrapper > input.form-control[type="url"],
.clipboard-feld-wrapper > input.form-control[type="email"],
.clipboard-feld-wrapper > input.form-control[type="number"],
.clipboard-feld-wrapper > textarea[readonly],
.clipboard-feld-wrapper > input[readonly]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.clipboard-suchfeld-wrapper > input.form-control[type="text"],
.clipboard-suchfeld-wrapper > input.form-control[type="search"],
.clipboard-suchfeld-wrapper > input.form-control[type="url"],
.clipboard-suchfeld-wrapper > input.form-control[type="email"],
.clipboard-suchfeld-wrapper > input.form-control[type="number"] {
	padding-right: 3.9rem;
}

.clipboard-ausgabe-wrapper > .tool-ergebnis-box {
	padding-top: 5.2rem;
}

.tool-seitenkarte[data-kopiertext],
.tool-seitenkarte[data-kopiertext-base64] {
	position: relative;
	padding-top: 4.15rem;
}

.clipboard-toolbar {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.clipboard-aktions-button {
	position: absolute;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.96);
	color: #1b2642;
	box-shadow: 0 12px 30px rgba(15, 23, 55, 0.12);
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
	cursor: pointer;
}

.clipboard-toolbar .clipboard-aktions-button {
	position: relative;
	top: auto;
	right: auto;
}

.clipboard-aktions-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 16px 34px rgba(15, 23, 55, 0.16);
}

.clipboard-aktions-button:focus-visible {
	outline: 2px solid #6c63ff;
	outline-offset: 2px;
}

.clipboard-einfuegen-button {
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
}

.clipboard-readonly-copy-button {
	top: 12px;
	right: 12px;
}

.clipboard-einfuegen-button:hover {
	transform: translateY(calc(-50% - 1px));
}

.clipboard-readonly-copy-button:hover {
	transform: translateY(-1px);
}

.clipboard-karten-button {
	top: 14px;
	right: 14px;
}

.clipboard-aktions-button.ist-erfolgreich {
	background: #dcfce7;
	color: #166534;
}

.clipboard-aktions-button.ist-hinweis {
	background: #ede9fe;
	color: #6d28d9;
}

.clipboard-aktions-button.ist-fehler {
	background: #fee2e2;
	color: #991b1b;
}

.clipboard-aktions-button.ist-deaktiviert {
	background: #f3f4f6;
	color: #9ca3af;
	box-shadow: none;
	cursor: not-allowed;
}

.clipboard-feld-wrapper.ist-fokussiert > .form-control,
.clipboard-suchfeld-wrapper.ist-fokussiert > .form-control {
	box-shadow: 0 0 0 0.25rem rgba(108, 99, 255, 0.12);
	border-color: rgba(108, 99, 255, 0.35);
}

.clipboard-ausgabe-wrapper.ist-kopierbar > .tool-ergebnis-box {
	box-shadow: 0 18px 40px rgba(15, 23, 55, 0.1);
}

.clipboard-ausgabe-wrapper.ist-leer > .tool-ergebnis-box {
	opacity: 0.72;
}

.clipboard-aktions-label {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	background: #11182b;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 0.45rem 0.7rem;
	border-radius: 10px;
	white-space: nowrap;
	box-shadow: 0 12px 24px rgba(15, 23, 55, 0.16);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.clipboard-toolbar .clipboard-aktions-label {
	right: 0;
}

.clipboard-aktions-button.zeige-label + .clipboard-aktions-label {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 767.98px) {
	.clipboard-aktions-button {
		width: 40px;
		height: 40px;
		border-radius: 12px;
	}

	.clipboard-einfuegen-button {
		right: 10px;
	}

	.clipboard-readonly-copy-button {
		top: 10px;
		right: 10px;
	}

	.clipboard-toolbar {
		top: 12px;
		right: 12px;
		gap: 0.45rem;
	}

	.clipboard-karten-button {
		top: 12px;
		right: 12px;
	}

	.clipboard-feld-wrapper > textarea.form-control,
	.clipboard-feld-wrapper > input.form-control[type="text"],
	.clipboard-feld-wrapper > input.form-control[type="search"],
	.clipboard-feld-wrapper > input.form-control[type="url"],
	.clipboard-feld-wrapper > input.form-control[type="email"],
	.clipboard-feld-wrapper > input.form-control[type="number"],
	.clipboard-feld-wrapper > textarea[readonly],
	.clipboard-feld-wrapper > input[readonly]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
	.clipboard-suchfeld-wrapper > input.form-control[type="text"],
	.clipboard-suchfeld-wrapper > input.form-control[type="search"],
	.clipboard-suchfeld-wrapper > input.form-control[type="url"],
	.clipboard-suchfeld-wrapper > input.form-control[type="email"],
	.clipboard-suchfeld-wrapper > input.form-control[type="number"] {
		padding-right: 3.4rem;
	}

	.clipboard-ausgabe-wrapper > .tool-ergebnis-box {
		padding-top: 4.95rem;
	}

	.tool-seitenkarte[data-kopiertext],
	.tool-seitenkarte[data-kopiertext-base64] {
		padding-top: 3.8rem;
	}
}

