﻿.formula-editor-container {
	position: relative;
	width: 100%;
}

.formula-textarea {
	width: 100%;
	min-height: 80px;
	padding: 8px;
	border: 1px solid #dbdbdb;
	border-radius: 4px;
	font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
	font-size: 14px;
	line-height: 1.4;
	background: transparent !important;
	z-index: 2;
	position: relative;
	resize: vertical;
	color: transparent !important; /* Làm cho text trong textarea trong suốt */
	caret-color: #000 !important; /* Giữ màu con trỏ */
}

	.formula-textarea:focus {
		outline: none !important;
		border-color: #3273dc !important;
		box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25) !important;
	}

.formula-highlight {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 8px;
	font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
	font-size: 14px;
	line-height: 1.4;
	white-space: pre-wrap;
	word-wrap: break-word;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
	background: white; /* Đảm bảo background trắng */
}

/* Màu sắc theo hệ thống hiện tại của PayrollService */
.formula-equals {
	color: #dc3545 !important; /* has-text-danger - màu đỏ cho dấu = */
	font-weight: bold !important;
}

.formula-operator {
	color: #dc3545 !important; /* has-text-danger - màu đỏ cho toán tử */
	font-weight: bold !important;
}

.formula-variable {
	color: hsl(233deg, 100%, 63%) !important; /* has-text-link - màu xanh cho biến/công thức */
	font-weight: bold !important;
}

.formula-number {
	color: #000000 !important; /* màu đen cho số */
	font-weight: normal !important;
}

.formula-unknown {
	color: #000000 !important; /* màu đen cho text thường */
	font-weight: normal !important;
}