/* Modern Action Buttons - Global Component */

.btn-action {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0 !important;
	border-radius: 8px !important;
	transition: all 0.2s ease;
	border: none !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
	cursor: pointer;
}

.btn-action:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.btn-action:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* Primary - Purple Gradient (Edit) */
.btn-action-primary {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	color: white !important;
}

.btn-action-primary:hover {
	background: linear-gradient(135deg, #5568d3 0%, #65408a 100%) !important;
	color: white !important;
}

/* Success - Cyan/Teal Gradient (View) */
.btn-action-success {
	background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
	color: white !important;
}

.btn-action-success:hover {
	background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
	color: white !important;
}

/* Warning - Orange Gradient (Unpublish/Deactivate) */
.btn-action-warning {
	background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%) !important;
	color: white !important;
}

.btn-action-warning:hover {
	background: linear-gradient(135deg, #d97706 0%, #ea580c 100%) !important;
	color: white !important;
}

/* Info - Blue Gradient (Publish/Activate) */
.btn-action-info {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
	color: white !important;
}

.btn-action-info:hover {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
	color: white !important;
}

/* Danger - Red Gradient (Delete) */
.btn-action-danger {
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
	color: white !important;
}

.btn-action-danger:hover {
	background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
	color: white !important;
}

/* Secondary - Gray Gradient (Cancel/Neutral) */
.btn-action-secondary {
	background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
	color: white !important;
}

.btn-action-secondary:hover {
	background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
	color: white !important;
}

/* Button Group Modern */
.btn-group-modern {
	gap: 8px !important;
	display: inline-flex !important;
	flex-wrap: wrap;
}

/* Icon inside action button */
.btn-action svg,
.btn-action .icon {
	color: white !important;
	stroke: white !important;
}

/* Larger action buttons variant */
.btn-action-lg {
	width: 40px;
	height: 40px;
}

.btn-action-lg svg,
.btn-action-lg .icon {
	width: 20px;
	height: 20px;
}

/* Smaller action buttons variant */
.btn-action-sm {
	width: 28px;
	height: 28px;
}

.btn-action-sm svg,
.btn-action-sm .icon {
	width: 14px;
	height: 14px;
}

/* Disabled state */
.btn-action:disabled,
.btn-action.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Loading state */
.btn-action.loading {
	pointer-events: none;
	position: relative;
}

.btn-action.loading svg {
	opacity: 0.3;
}

.btn-action.loading::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	border: 2px solid white;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Tooltip enhancement for action buttons */
.btn-action[title]:hover::before {
	content: attr(title);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 8px;
	background: rgba(0, 0, 0, 0.8);
	color: white;
	font-size: 12px;
	white-space: nowrap;
	border-radius: 4px;
	margin-bottom: 8px;
	pointer-events: none;
	z-index: 1000;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.btn-action {
		width: 36px;
		height: 36px;
	}
	
	.btn-group-modern {
		gap: 6px !important;
	}
}