[v-cloak] {
	display: none;
}

:root {
	--oa-edit-color: #2563eb;
	--oa-edit-hover-color: #1d4ed8;
	--oa-edit-bg: #eff6ff;
	--oa-edit-border: #bfdbfe;
	--oa-delete-color: #dc2626;
	--oa-delete-hover-color: #b91c1c;
	--oa-delete-bg: #fef2f2;
	--oa-delete-border: #fecaca;
	--oa-transition-fast: 0.2s ease;
	--oa-transition-medium: 0.28s ease;
}

*,
*::before,
*::after {
	transition-property:
		color, background-color, border-color, box-shadow, opacity, transform;
	transition-duration: var(--oa-transition-fast);
	transition-timing-function: ease;
}

body {
	animation: oa-page-fade-in 0.35s ease-out;
}

.el-card,
.el-dialog,
.el-table,
.el-dropdown-menu,
.el-popover {
	transition:
		box-shadow var(--oa-transition-medium),
		transform var(--oa-transition-medium);
}

.el-card:hover,
.el-dialog:hover,
.el-dropdown-menu:hover,
.el-popover:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.el-input__wrapper,
.el-select__wrapper,
.el-textarea__inner,
.el-button {
	transition:
		box-shadow var(--oa-transition-fast),
		transform var(--oa-transition-fast),
		border-color var(--oa-transition-fast);
}

.el-button:active {
	transform: translateY(1px) scale(0.99);
}

@keyframes oa-page-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after,
	body,
	.el-card,
	.el-dialog,
	.el-table,
	.el-dropdown-menu,
	.el-popover,
	.el-input__wrapper,
	.el-select__wrapper,
	.el-textarea__inner,
	.el-button {
		animation: none !important;
		transition: none !important;
	}
}

.el-button.oa-btn-edit {
	color: var(--oa-edit-color);
	border-color: var(--oa-edit-border);
	background: var(--oa-edit-bg);
}

.el-button.oa-btn-edit:hover,
.el-button.oa-btn-edit:focus {
	color: #fff;
	border-color: var(--oa-edit-hover-color);
	background: var(--oa-edit-hover-color);
}

.el-button.oa-btn-delete {
	color: var(--oa-delete-color);
	border-color: var(--oa-delete-border);
	background: var(--oa-delete-bg);
}

.el-button.oa-btn-delete:hover,
.el-button.oa-btn-delete:focus {
	color: #fff;
	border-color: var(--oa-delete-hover-color);
	background: var(--oa-delete-hover-color);
}

.el-button.oa-btn-edit.is-link,
.el-button.oa-btn-delete.is-link {
	border-color: transparent;
	background: transparent;
	padding-left: 4px;
	padding-right: 4px;
}

.el-button.oa-btn-edit.is-link {
	color: var(--oa-edit-color);
}

.el-button.oa-btn-delete.is-link {
	color: var(--oa-delete-color);
}

.el-button.oa-btn-edit.is-link:hover,
.el-button.oa-btn-edit.is-link:focus {
	color: var(--oa-edit-hover-color);
	background: rgba(37, 99, 235, 0.08);
}

.el-button.oa-btn-delete.is-link:hover,
.el-button.oa-btn-delete.is-link:focus {
	color: var(--oa-delete-hover-color);
	background: rgba(220, 38, 38, 0.08);
}