/* ============================================
   BUTTON SYSTEM - Bộ nút nổi bật, phân cấp rõ ràng
   ============================================ */

/* Base button */
.btn {
	@apply inline-flex items-center px-4 py-2.5 rounded-lg font-semibold transition-all duration-200;
}

/* === PRIMARY ACTION - Thêm mới, Lưu (Xanh lá tươi sáng) === */
.btn-add,
.btn-save {
	@apply bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-white shadow-lg shadow-emerald-200;
}

.btn-add:hover,
.btn-save:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.4);
}

/* === DANGER ACTION - Xóa (Đỏ cam nổi bật) === */
.btn-delete,
.btn-danger {
	@apply bg-gradient-to-r from-rose-500 to-orange-500 hover:from-rose-600 hover:to-orange-600 text-white shadow-lg shadow-rose-200;
}

.btn-delete:hover,
.btn-danger:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 20px -5px rgba(244, 63, 94, 0.4);
}

/* === WARNING ACTION - Cảnh báo (Vàng cam) === */
.btn-warning {
	@apply bg-gradient-to-r from-amber-400 to-orange-400 hover:from-amber-500 hover:to-orange-500 text-white shadow-lg shadow-amber-200;
}

.btn-warning:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 20px -5px rgba(251, 191, 36, 0.4);
}

/* === CANCEL ACTION - Hủy bỏ (Xám đậm rõ ràng) === */
.btn-cancel {
	@apply bg-white hover:bg-gray-50 text-gray-600 border-2 border-gray-300 hover:border-gray-400;
}

.btn-cancel:hover {
	background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

/* === BRAND PRIMARY - Màu chủ đạo Periwinkle (dùng cho CTA quan trọng) === */
.btn-primary {
	@apply bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white shadow-lg shadow-primary-200;
}

.btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 25px -5px rgba(107, 146, 255, 0.5);
}

/* === SECONDARY - Phụ trợ (Màu tím nhạt pastel) === */
.btn-secondary {
	@apply bg-gradient-to-r from-slate-100 to-slate-200 hover:from-slate-200 hover:to-slate-300 text-slate-700 border border-slate-300;
}

.btn-secondary:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px -2px rgba(100, 116, 139, 0.2);
}

/* === GHOST PRIMARY - Nút viền màu chủ đạo === */
.btn-ghost-primary {
	@apply bg-white hover:bg-primary-50 text-primary-600 border-2 border-primary-300 hover:border-primary-400;
}

.btn-ghost-primary:hover {
	box-shadow: 0 0 0 3px rgba(107, 146, 255, 0.15);
}

/* Icon colors cho btn-cancel */
.btn-cancel svg {
	color: currentColor;
	fill: currentColor;
}

/* === GHOST SECONDARY - Nút trong suốt xám === */
.btn-ghost {
	@apply bg-transparent hover:bg-gray-100 text-gray-600 hover:text-gray-800;
}

/* === OUTLINE SUCCESS - Viền xanh (cho hành động tích cực phụ) === */
.btn-outline-success {
	@apply bg-white hover:bg-emerald-50 text-emerald-600 border-2 border-emerald-400 hover:border-emerald-500;
}

/* === OUTLINE DANGER - Viền đỏ (cho hành động cảnh báo phụ) === */
.btn-outline-danger {
	@apply bg-white hover:bg-rose-50 text-rose-600 border-2 border-rose-400 hover:border-rose-500;
}

/* Button with icon */
.btn-icon {
	@apply inline-flex items-center gap-2 px-3 py-2 rounded-lg font-medium text-sm;
}

.btn-icon svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Blade FontAwesome SVG icons trong button */
.btn svg,
.btn-icon svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	vertical-align: middle;
}

/* Khoảng cách giữa icon và label trong button */
.btn>svg+span,
.btn-icon>svg+span {
	margin-left: 0.5rem;
}

/* Màu sắc cho blade-fontawesome SVG */
.btn-add svg,
.btn-save svg,
.btn-primary svg {
	color: currentColor;
	fill: currentColor;
}

.btn-delete svg {
	color: currentColor;
	fill: currentColor;
}

.btn-secondary svg {
	color: currentColor;
	fill: currentColor;
}

.btn-ghost svg {
	color: currentColor;
	fill: currentColor;
}

.btn-ghost-primary svg {
	color: currentColor;
	fill: currentColor;
}

/* Icon colors trong nút - làm nổi bật hơn */
.btn-add svg,
.btn-save svg {
	color: #ffffff;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.btn-delete svg {
	color: #ffffff;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.btn-primary svg {
	color: #ffffff;
}

.btn-ghost-primary svg {
	color: var(--primary-500, #6B92FF);
}

.btn-ghost-primary:hover svg {
	color: var(--primary-600, #4B6FD9);
}

.btn-secondary svg {
	color: var(--primary-400, #7BA8FF);
}

.btn-secondary:hover svg {
	color: var(--primary-500, #6B92FF);
}

/* Animation cho nút */
.btn:active {
	transform: translateY(0);
}

/* Disabled state — cursor 🚫 custom cho tất cả button */
.btn:disabled,
.btn:disabled:hover,
.btn-icon:disabled,
.btn-icon:disabled:hover {
	opacity: 0.45;
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23e74c3c' opacity='.85'/%3E%3Ctext x='12' y='16' text-anchor='middle' font-size='15' fill='white' font-weight='bold'%3E%E2%9C%97%3C/text%3E%3C/svg%3E") 12 12, not-allowed;
	filter: grayscale(0.5);
	pointer-events: auto;
}

/* Button size variants - Small button dùng chung cho header và modal */
.btn-sm,
.section-header-actions .btn,
.modal-footer .btn {
	padding: 7px 12px;
	font-size: 12px;
	height: 34px;
}

/* Nút trong header cần thêm z-index và cursor */
.section-header-actions .btn {
	position: relative;
	z-index: 1;
	cursor: pointer;
}