.overlayHeader {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin: 0px 0px 20px 0px;
}

.overlayFont {
	margin: 0px;
}

.overlayIcon {
	margin: 0px;
	height: 30px;
	width: 30px;
	cursor: pointer;
}

.overlayBody {
	display: flex;
	flex-direction: column;
}

.overlayLabelDiv {
	display: flex;
	flex-direction: column;
	margin: 0px 0px 10px 0px;
	width: 100%;
}

.overlayRow {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 20px;
}

.btnClose {
	padding: 0px;
	border: none;
	background-color: white;
	height: 30px;
	width: 30px;
	background-image: url('data:image/svg+xml,<svg width="800" height="800" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m6 6 12 12m0-12L6 18" stroke="%234a4a4a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
}
	.btnClose {

	}

.overlayInput {
	border-radius: 8px;
	height: 30px;
	outline: none;
	border: 1px solid var(--border-color);
	padding: 0px 0px 0px 5px;
	font-size: 15px;
}

	.overlayInput:focus {
		border: 1px solid var(--primary-action);
	}

.overlaySelectInput {
	height: 32px;
}

.overlayInputLabel {
	font-size: 14px;
	font-weight: 600;
	margin: 0px 0px 3px 0px;
}

.overlayTextarea {
	height: 60px;
	resize: none;
	outline: none;
	border: 1px solid #c9c9c9;
	padding: 0px 0px 0px 5px;
	font-size: 15px;
	border-radius: 8px;
}

	.overlayTextarea:focus {
		border: 1px solid var(--primary-action);
	}

.popupWrapper {
	border: none;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
	width: 600px;
}

	.popupWrapper::backdrop {
		background-color: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(3px);
	}

.popupAnimation {
	transition: transform 0.3s ease-out, opacity 0.3s ease-out, display 0.3s allow-discrete;
	opacity: 0;
	transform: translateX(50px); /* Startet leicht versetzt nach rechts */
}

	.popupAnimation:popover-open {
		opacity: 1;
		transform: translateX(0);
	}

.good, .available {
	color: var(--dark-green);
}
.usedInInstallation {
	color: var(--primary-action)
}

.damaged, .rented {
	color: var(--yellow);
}

.dead {
	color: var(--error);
}

.available {
	color: var(--dark-green);
}

.condition, .availability {
	font-size: 13px;
	font-weight: 600;
}

.actionBtn {
	padding: 6px 16px;
	border-radius: var(--radius-sm);
	font-size: 15px;
	font-weight: 600;
	border: none;
}

	.actionBtn.primary {
		background-color: var(--primary-action);
		color: #ffffff;
	}

		.actionBtn.primary:hover {
			background-color: var(--primary-action-hover);
		}

.actionBtn.secondary {
	background-color: transparent;
	border: 1px solid var(--border-color);
	color: var(--primary-text);
}
	.actionBtn.secondary:hover {
		background-color: var(--hover-bg);
	}

.trashBin {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="%23666666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 12 4 4m0-4-4 4m8-10-.8 12.013c-.071 1.052-.106 1.578-.333 1.977a2 2 0 0 1-.866.81c-.413.2-.94.2-1.995.2H9.994c-1.055 0-1.582 0-1.995-.2a2 2 0 0 1-.866-.81c-.227-.399-.262-.925-.332-1.977L6 6M4 6h16m-4 0-.27-.812c-.263-.787-.394-1.18-.637-1.471a2 2 0 0 0-.803-.578C13.939 3 13.524 3 12.695 3h-1.388c-.829 0-1.244 0-1.596.139a2 2 0 0 0-.803.578c-.243.29-.374.684-.636 1.471L8 6"/></svg>');
	background-position: center;
	background-size: 18px;
	background-repeat: no-repeat;
}

	.trashBin:hover {
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="%23ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 12 4 4m0-4-4 4m8-10-.8 12.013c-.071 1.052-.106 1.578-.333 1.977a2 2 0 0 1-.866.81c-.413.2-.94.2-1.995.2H9.994c-1.055 0-1.582 0-1.995-.2a2 2 0 0 1-.866-.81c-.227-.399-.262-.925-.332-1.977L6 6M4 6h16m-4 0-.27-.812c-.263-.787-.394-1.18-.637-1.471a2 2 0 0 0-.803-.578C13.939 3 13.524 3 12.695 3h-1.388c-.829 0-1.244 0-1.596.139a2 2 0 0 0-.803.578c-.243.29-.374.684-.636 1.471L8 6"/></svg>');
		background-color: #ffeaea;
		border-color: transparent;
	}


/* Popover Base & Backdrop Override */
.editDialog[popover] {
	border: none;
	border-radius: var(--radius-md, 10px);
	padding: 24px;
	width: 100%;
	max-width: 520px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
	font-family: 'Assistant', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--primary-text, #303030);
	background-color: var(--primary-bg, #ffffff);
	margin: auto;
}

.editDialog[popover]::backdrop {
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(2px);
}

/* Header */
.dialogHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.dialogHeader h3 {
	margin: 0;
	color: var(--primary-text, #303030);
	font-size: 20px;
	font-weight: 700;
}

/* Form Layout */
.dialogForm {
	display: flex;
	flex-direction: column;
}

.overlayBody {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: 75vh;
	overflow-y: auto;
	padding-right: 4px;
}

.inputRow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.inputGroup {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.inputGroup label {
	font-size: 14px;
	font-weight: 600;
	color: var(--secondary-text, #666666);
}

.inputGroup input, 
.inputGroup select, 
.inputGroup textarea {
	font-family: inherit;
	padding: 10px;
	border: 1px solid var(--border-color, #e0e0e0);
	border-radius: var(--radius-sm, 6px);
	font-size: 15px;
	background-color: var(--primary-bg, #ffffff);
	color: var(--primary-text, #303030);
	box-sizing: border-box;
	width: 100%;
	transition: border-color var(--transition, 0.2s ease-in-out);
}

/* Custom Arrow for Selects */
.inputGroup select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
	padding-right: 36px;
	cursor: pointer;
}

.inputGroup textarea {
	resize: none;
	min-height: 60px;
}

.inputGroup input.fira {
	font-family: "Fira Code", monospace;
	font-size: 14px;
}

.inputGroup input:focus, 
.inputGroup select:focus, 
.inputGroup textarea:focus {
	outline: none;
	border-color: var(--primary-action, #007AFF);
}

.dialogDivider {
	border: none;
	border-top: 1px solid var(--border-color, #e0e0e0);
	margin: 8px 0;
}

/* Action Buttons */
.dialogActions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 20px;
	padding-top: 12px;
	border-top: 1px solid var(--border-color, #e0e0e0);
}