@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
	.app-table {
		@apply w-full;
	}

	.app-table thead tr {
		@apply bg-gray-50 border-b border-gray-300;
	}

	.app-table th {
		@apply !px-3 !py-1.5 !text-xs !font-semibold !text-gray-700 !normal-case !tracking-normal;
	}

	.app-table tbody tr {
		@apply border-b border-gray-200 hover:bg-gray-50;
	}

	.app-table td {
		@apply !px-3 !py-2 !text-sm;
	}

	.app-action-group {
		@apply flex items-center justify-center gap-1.5;
	}

	.app-mobile-action-group {
		@apply flex justify-center gap-1.5 pt-2;
	}

	.app-action-icon {
		@apply inline-flex items-center justify-center rounded-md p-1 transition duration-150;
	}

	.app-action-icon svg {
		@apply h-4 w-4;
	}

	.app-action-view {
		@apply text-green-600 hover:text-green-800;
	}

	.app-action-edit {
		@apply text-blue-600 hover:text-blue-800;
	}

	.app-action-delete {
		@apply text-red-600 hover:text-red-800;
	}

	.app-action-export {
		@apply text-indigo-600 hover:text-indigo-800;
	}
}